Кто знал, что Adobe CC может использовать Wireframe?

Каркас — важный шаг в разработке любого пользовательского интерфейса, будь то веб-сайт, приложение или программный продукт. Не отвлекаясь на визуальные эффекты, цвета, типографику, стили и эффекты, вы можете больше сосредоточиться на определении иерархии контента и пользовательского опыта.

Создание каркасов и прототипов с низкой точностью поможет вам тестировать и выполнять итерации раньше и чаще в процессе. Каркасы низкой точности позволяют дизайнерам работать быстрее и разрабатывать продукты, которые понравятся пользователям.

В дикой природе существует множество различных инструментов для создания каркасов. Какой из них вы выберете, будет зависеть от ваших личных предпочтений и стиля рабочего процесса.

Как и многие дизайнеры, которые перешли на цифровой дизайн из печатного мира, я являюсь экспертом в таких приложениях Adobe, как Illustrator, InDesign и Photoshop. Я могу использовать их эффективно и интуитивно из любого места и в любое время (даже если кто-то разбудит меня посреди ночи и откажется дать мне чашку кофе).

Неудивительно, что эти универсальные приложения также стали инструментами, которые я использую для визуального дизайна веб-сайтов и приложений. Поэтому, чтобы мой рабочий процесс был максимально эффективным, я также использую их для каркаса.

Каждый проект я обычно начинаю с очень грубых набросков на бумаге или на экране своего iPad или смартфона, если я не нахожусь рядом со своим офисным столом. Эти наброски предназначены для того, чтобы сфокусировать мои мысли относительно выбранной концепции; клиент, вероятно, никогда не увидит ни одного из них. Когда я чувствую уверенность, что моя идея работает, я перехожу к вайрфреймингу. Я обычно использую Adobe Illustrator и InDesign вместе: Illustrator для создания большинства элементов набора пользовательского интерфейса и InDesign для самого каркаса.

Позже в статье я объясню пошаговый процесс включения этих инструментов в ваш рабочий процесс каркасного моделирования, но прежде чем углубляться в детали, позвольте мне показать вам сильные и слабые стороны использования InDesign в качестве основного инструмента каркасного моделирования. .

Плюсы и минусы использования Adobe InDesign в качестве каркаса и инструмента прототипирования

В течение некоторого времени Adobe InDesign был не только настольным издательским приложением, но также широко использовался для цифровых публикаций и создания EPUB. Есть также несколько причин, по которым он также подходит для каркасного моделирования:

• Мастер-страницы. С помощью мастер-страниц можно быстро и последовательно применять глобальные элементы дизайна, такие как навигация, верхние и нижние колонтитулы и т. д. Вы можете создать столько мастер-страниц, сколько вам нужно, и, кроме того, один мастер может быть основан на другом.
• Поддержка сплошной сетки — позволяет легко создавать и применять различные виды сеток, дополняя столбцы, горизонтальные и вертикальные направляющие для создания модулей и вложенных сеток для большей сложности и точности.
• Альтернативные макеты — включает каркасы для нескольких устройств и ориентаций в одном файле.
• Библиотеки CC — создает библиотеку различных повторно используемых ресурсов, таких как часто используемые объекты, цвета, символы и стили абзацев. Создавайте ресурсы в InDesign, Illustrator или Photoshop или с помощью мобильного приложения Adobe Capture — в зависимости от того, что вы предпочитаете.
• Слои — предоставляет возможность упорядочивать, группировать, показывать/скрывать и блокировать/разблокировать объекты и содержимое выборочно в каркасе. Каждая страница многостраничного документа InDesign имеет одинаковое количество и порядок слоев. Все изменения, которые вы вносите в слои, отражаются на всех страницах, например, видимость, порядок размещения или удаление.
• Стили и таблицы . Полный контроль над внешним видом текста, объектов и таблиц благодаря использованию стилей InDesign. Стили могут наследоваться друг от друга, обеспечивая возможность легко каскадировать нужное форматирование по всему документу. Создание и форматирование таблиц, которые будут использоваться в качестве элементов содержимого каркаса или даже помощников для целей макета, очень просты.
• Интеграция с Typekit — в высококачественных макетах вы можете использовать любой из шрифтов Typekit, которые синхронизируются с рабочим столом.
• Интерактивность и анимация . Вы можете использовать встроенные функции интерактивности и анимации Adobe InDesign для создания различных состояний веб-элементов или элементов дизайна приложений для прототипирования взаимодействия. Большинство людей используют эти функции при создании журналов для цифровых издательских решений и экспорте EPUB с фиксированным макетом, но они также подходят для прототипирования.
• Параметры экспорта . InDesign может экспортировать созданные вами каркасы и прототипы в различных форматах. Интерактивные PDF-файлы, вероятно, будут вашим предпочтительным форматом в большинстве случаев, но вы также можете использовать функцию «Публикация в Интернете» для преобразования вашего документа в интерактивный HTML, который можно просматривать в современных настольных и мобильных браузерах. К сожалению, у вас нет большого контроля над экспортом с помощью Publish Online, а экспортированные файлы размещаются на серверах Adobe. Вы можете поделиться URL-адресом прототипа со своим клиентом или встроить его на свой сайт. Для большего контроля и прямого экспорта в HTML5 вы можете использовать расширение in5 от Ajar Productions.

У Adobe InDesign есть много плюсов для использования в качестве инструмента для создания каркасов и прототипов, но у него также есть некоторые недостатки:

• Отсутствие предопределенных шаблонов и элементов каркаса. Поскольку InDesign не предназначен для использования в качестве инструмента каркаса, вам необходимо создавать и подготавливать шаблоны и активы объектов самостоятельно. (Я покажу вам, как выполнить этот шаг позже в этой статье.) Хорошая новость заключается в том, что большая часть этой работы будет выполнена только один раз, и после нескольких часов работы вы будете готовы приступить к работе. Каркас InDesign. Кроме того, существует множество наборов ассетов и вайрфреймов, которые можно скачать из Интернета, так что нет необходимости рисовать все самостоятельно.
• Интерактивность и анимация ограничены . Хотя вы можете легко соединить страницы и добавить интерактивность и анимацию, иногда этот процесс может занять много времени. Некоторые из простых инструментов взаимодействия не очень интуитивно понятны. Если вы еще не использовали интерактивные функции InDesign, вам придется пройти небольшое обучение, прежде чем вы сможете эффективно их применять.
• Документы InDesign нельзя экспортировать напрямую в виде многослойных PSD-файлов . Если вы выполняете визуальный дизайн в Adobe Photoshop и хотите иметь отдельные элементы каркаса для создания своего дизайна, вам придется сначала экспортировать каркасы в PDF. Затем вам нужно будет открыть PDF-файл в Illustrator и снова экспортировать его в виде многослойного PSD. Люди, работающие на Mac, также могут использовать бесплатный сценарий, написанный Робом Дэем, для сохранения файлов InDesign в виде многослойного PSD.

Хорошая подготовка каркаса — половина работы

Начните с тонкой настройки рабочей среды. Если у вас еще нет сохраненного рабочего пространства в Illustrator и InDesign для такой работы, создайте его. В Illustrator начните с предопределенного рабочего пространства Web и адаптируйте его по своему вкусу: закройте панели, которыми вы редко пользуетесь, обязательно откройте те, которые будете использовать, а затем расположите их в соответствии со своим стилем работы.

Когда закончите, сохраните рабочее пространство, выбрав «Окно» > «Рабочее пространство» > «Новое рабочее пространство». Сделайте то же самое в InDesign, используя для начала рабочее пространство «Цифровая публикация».

Сборка комплектов каркасов/макетов/прототипов

Эффективный рабочий процесс каркаса с использованием Illustrator и InDesign требует, чтобы вы сначала потратили некоторое время на создание набора ресурсов пользовательского интерфейса. С момента появления Adobe Creative Cloud библиотеки CC Libraries стали лучшим способом хранения всех компонентов набора пользовательского интерфейса.

Вы можете создать одну или несколько библиотек для создания каркасов и прототипов. Например, вы можете создать одну библиотеку для каркаса веб-сайта, другую для приложений iOS, третью для приложений Android и так далее.

Чтобы создать библиотеку Adobe CC, откройте панель «Библиотеки» и выберите «Создать новую библиотеку» в меню «гамбургер» на панели. Ресурсы, которые вы добавляете в библиотеки, можно создавать и использовать в различных настольных или мобильных приложениях Adobe на всех устройствах, на которые вы входите с помощью своего Adobe ID. Это означает, что вы можете начать работу над проектом на своем iPad или iPhone, продолжить работу на своем настольном компьютере в офисе и вносить последние изменения на домашнем ноутбуке с теми же активами, доступными на всех устройствах.

Если вы работаете в составе большой команды, ресурсы библиотеки могут быть общими для членов команды. Библиотеки могут содержать цвета, графику, стили слоев (только для Photoshop), а также стили абзацев и символов. Вы добавляете активы в библиотеки, нажимая соответствующую кнопку в нижней части панели CC Library с выбранным соответствующим элементом. Вы также можете добавить графические ресурсы, перетащив их прямо с монтажной области на панель «Библиотеки».

Активы в библиотеках организованы по категориям. Придерживайтесь передовой практики и переименовывайте каждый ресурс в осмысленное имя. Библиотеки доступны для поиска, и поиск актива путем ввода начала его имени сэкономит вам массу времени позже, особенно если в ваших библиотеках много разных элементов. Чтобы изменить имя актива, дважды щелкните по нему и введите новое.

Создание компонентов набора каркасов

Хотя в Adobe InDesign есть несколько основных инструментов для рисования, очень похожих на инструменты Illustrator, Illustrator — гораздо лучший выбор для рисования различных элементов в каркасе. Как правило, создавайте все элементы комплекта, которые требуют более сложного рисования, чем базовые геометрические фигуры в Illustrator. Создавайте более простые элементы, содержащие текст, который вам нужно будет изменить в макете, например простые кнопки, в InDesign.

Для начала составьте список всех элементов, которые вам понадобятся в каркасе, таких как элементы навигации, элементы страницы, включая изображения, видеокадры и текстовые поля, значки, аватары, элементы формы и все другие элементы интерфейса. После того, как ваш список будет завершен, вы можете отправиться в Illustrator и InDesign, чтобы создать эти элементы.

Начните с создания нового документа для каркаса или компонентов набора макетов. Дважды проверьте, что в диалоговом окне «Новый документ» вы выбрали либо «Профиль Интернета/устройства» в Illustrator, либо «Намерение веб-публикации/цифровой публикации». Это гарантирует, что пиксели используются в качестве единиц измерения, а цветовой режим установлен на RGB.

Сделайте активы набора каркасов как можно более простыми, потому что они должны давать быстрые визуальные подсказки о том, что они представляют, не будучи слишком детализированными. Вы должны использовать очень ограниченную цветовую палитру, предпочтительно несколько оттенков серого. Визуально подчеркните наиболее важные элементы, окрашивая их в более темные оттенки или повышая контрастность.

Для более точных макетов или прототипов создайте наборы пользовательского интерфейса с более подробными элементами, которые используют соответствующую цветовую палитру каждого проекта. Для быстрого доступа к цветовым палитрам добавьте их в библиотеки CC.

Ресурсы Adobe Illustrator в библиотеках CC

Ресурсы, которые вы добавляете в библиотеки из Illustrator, связаны по умолчанию (начиная с Adobe CC 2015). Это означает, что когда вы изменяете библиотечный ресурс в Illustrator, изменения отражаются во всех используемых экземплярах. Если вы хотите добавить несвязанный ресурс в документ, нажмите клавишу option/alt, перетаскивая его с панели.

Когда вы используете связанные ресурсы Illustrator в InDesign, они будут иметь небольшой значок облака в верхнем левом углу, когда документ просматривается в обычном режиме. Все они также перечислены на панели «Ссылки». Если вы изменяете библиотечный ресурс в Illustrator, изменения в документе InDesign не будут выполняться автоматически. Значок облака будет заменен значком измененной ссылки с восклицательным знаком, и вам придется обновить эти ссылки.

Ресурсы InDesign, помещаемые в документ InDesign, не связаны. Это означает, что вы можете редактировать экземпляры независимо от оригинала, и при изменении исходного актива эти изменения не отражаются на активах, которые уже были размещены в макете.

Учитывайте эти свойства при создании каркасов: добавляйте ресурсы в библиотеку из Illustrator, если вы предполагаете, что их нужно будет изменять и обновлять глобально, или добавляйте их из InDesign, когда вы знаете, что хотите изменить их по отдельности. Обратите внимание, что вы также можете создавать графику в Illustrator, копировать/вставлять ее в InDesign, а затем при необходимости изменять перед добавлением в библиотеку в качестве ресурса InDesign.

Если вы забыли, какой графический ресурс создан каким приложением, посмотрите на правую часть каждого элемента на панели «Библиотека» при использовании «Показать элементы» в виде списка.

Гибкость Adobe InDesign с содержимым и копированием

Чтобы вы могли легко изменять текст и типографику в каркасах, создавайте текстовые контейнеры в InDesign. InDesign имеет удобную функцию для заполнения текстовых полей текстом-заполнителем. Когда вы рисуете текстовое поле, щелкните его правой кнопкой мыши и выберите «Заполнить текстом -заполнителем» .

Добавляйте текстовые блоки в библиотеку Adobe, как и любой другой графический элемент, просто перетаскивая их. Когда вы позже используете эти текстовые активы как часть макета каркаса, вы можете изменить текстовое поле, а также его содержимое в каркасе.

Рассмотрите возможность создания элементов пользовательского интерфейса кнопок в InDesign. Чтобы создать кнопку, создайте текстовый фрейм, введите текст, а затем используйте «Объект» > «Параметры текстового фрейма», чтобы определить интервал вставки. Настройте вертикальное выравнивание текста внутри поля, выбрав нужный параметр в раскрывающемся меню «Выравнивание».

Переключитесь на вкладку Auto-Size и выберите соответствующий автоматический размер (вероятно, это будет только ширина) и удобную точку отсчета. Если вы не хотите, чтобы InDesign разбивал текст более чем на одну строку, установите флажок «Без разрывов строк».

Используйте существующие ресурсы

В Интернете доступно множество комплектов пользовательского интерфейса для создания макетов и прототипов Adobe Illustrator, которые вы можете купить или даже скачать бесплатно, если вам нужно готовое решение. Возможно, у вас уже есть элементы, которые вы можете извлечь из своих завершенных проектов. Откройте эти документы, при необходимости настройте все ранее созданные элементы и поместите их в соответствующие библиотеки.

Если вы проектируете для определенной платформы, например, приложения для iOS или Android, убедитесь, что вы внимательно прочитали их рекомендации по человеческому интерфейсу и используете соответствующие активы. Может быть удобно иметь в вашем наборе элементы пользовательского интерфейса, специфичные для разных платформ.

Не сосредотачивайтесь слишком сильно на попытках учесть каждый будущий актив или состояние в ваших библиотеках, прежде чем вы начнете с фактического процесса каркаса. Вы можете добавить активы в свои библиотеки позже и использовать их по ходу дела.

Создание каркасных шаблонов InDesign

Остался еще один важный этап подготовки: создайте шаблоны InDesign, которые вы будете использовать для создания каркасов. Начните с создания нового документа с намерением веб-публикации или цифровой публикации и определите соответствующие размеры страниц для экранов, для которых вы разрабатываете дизайн.

Поскольку рекомендуется использовать какую-либо сетку для размещения элементов каркаса, настройте поля и создайте сетку столбцов, установив желаемое количество столбцов и пространство между ними. Вы можете изменить эти настройки позже, выбрав «Макет» > «Поля и столбцы» с соответствующей эталонной страницей (или страницами), выбранной на панели «Страницы».

Если вам нужны горизонтальные направляющие и дополнительные вертикальные направляющие, создайте их вручную или создайте дополнительную сетку с помощью команды «Макет» > «Создать направляющие». При создании сетки полезно использовать один из инструментов онлайн-калькулятора сетки, например Gridulator.

Вы также можете создавать дополнительные шаблоны для презентаций с макетами устройств в качестве каркаса для ваших каркасов. Поскольку один документ InDesign может быть связан с другим, вы можете создавать каркасы в одном документе InDesign, а затем помещать их в другой для презентаций.

Хотя сначала это может показаться сложным, на самом деле это очень простой и эффективный рабочий процесс. Хранение фактических вайрфреймов в отдельном документе упрощает переход от утвержденных вайрфреймов к отполированному визуальному дизайну.

Также легко создавать готовые к презентации шаблоны, в которых размещать каркасы, добавлять метки и комментарии, а также иметь возможность показать клиенту свое лучшее решение. Когда вы вносите изменения в файл каркаса, просто обновите его, как и любую другую ссылку в документе презентации, и та-дааа! Все изменения есть и в вашей презентации.

На панели «Слои» вы можете подготовить отдельные слои для разных типов контента: элементов пользовательского интерфейса, интерактивных функций, жестов, меток и заметок. Если вам нужно больше слоев для конкретного проекта, вы сможете легко добавить их в любое время в процессе создания каркаса.

Когда вы закончите создание, сохраните свои шаблоны как файлы шаблонов InDesign.indt. После того, как все необходимые вам шаблоны сохранены, вы, наконец, готовы приступить к эффективному созданию каркаса.

Создание каркасов

Перво-наперво — начните с главной страницы. Перетащите из библиотеки все глобальные элементы, которые будут одинаковыми на всех экранах вашего проекта. Если вы разрабатываете веб-сайт, это обычно заголовки с логотипом, навигация и нижний колонтитул. Поскольку вы можете создать несколько главных страниц, и они могут наследоваться друг от друга, вы можете воспользоваться преимуществами вложенных главных страниц.

Например, в зависимости от проекта вы можете создать главную страницу для одного элемента пользовательского интерфейса, такого как модальное или диалоговое всплывающее окно, а затем создать новые образцы на основе первого образца, изменив только те элементы, которые должны отличаться.

Вы не можете выбрать, изменить или удалить мастер-элементы на обычных страницах документа, если не щелкнете по ним, удерживая Command/Control + Shift, чтобы переопределить мастер-элемент. Как только ваш элемент переопределен, вы можете изменить любой из его параметров или полностью удалить его из макета.

Имейте в виду, что даже когда вы переопределяете элемент, параметры, которые вы не изменили, все равно будут унаследованы от мастера. Например, если вы переопределите элемент, изменив его цвет, его размер не изменится, поскольку он все еще подключен к мастеру. Кроме того, если вы измените его на главной странице, он также будет изменен в элементе, который вы ранее переопределили.

При вставке дополнительных страниц в ваш каркасный документ не забудьте основывать их на соответствующих мастер-страницах. Если вам нужно изменить шаблон для страниц, уже находящихся в макете, выберите их на панели «Страницы», щелкните правой кнопкой мыши и выберите «Применить шаблон к страницам». Используйте активы библиотеки и расположите их с помощью параметров Smart Guides и Align, чтобы создать окончательные макеты каркаса пользовательского интерфейса.

Если вы создаете проекты для нескольких размеров экрана, создайте альтернативные макеты в разделе «Макеты» > «Создать альтернативный макет» или на панели «Страницы». Вы можете использовать правила гибкого макета при создании альтернативных макетов, чтобы автоматически адаптировать элементы страницы из одного размера и ориентации в другой, или вы можете управлять ими вручную. Для применения и тестирования правил гибкого макета используйте инструмент «Страница» или откройте панель «Окно» > «Интерактивный» > «Жидкий макет».

Добавление интерактивности

Adobe InDesign имеет множество интерактивных функций, которыми вы можете воспользоваться при создании каркасов или прототипов. Какие функции вы будете включать, будет зависеть от окончательного формата, который вам понадобится для каркасов, прототипов или презентаций.

Если вы экспортируете в формате PDF, интерактивность будет ограничена, но вы, по крайней мере, можете заставить работать ссылки между экранами, используя панель гиперссылок для их создания. Выберите элемент, который вы хотите использовать в качестве ссылки, и щелкните значок «Новая гиперссылка». В раскрывающемся меню «Связать с» выберите «Страница» и введите нужный номер страницы. Повторите это действие для всех элементов, которые вы хотите использовать в качестве ссылок между экранами.

Вы также можете добавить гиперссылки на объекты, находящиеся на эталонных страницах, что может значительно сэкономить время. Создайте ссылки на главной странице один раз, и они будут работать на всех экранах вашего документа.

Вы можете создавать кнопки из любой графики, текста, изображения или группы элементов. Чтобы создать кнопку из выбранного объекта, используйте панель «Окно» > «Интерактив» > «Кнопки и формы» и щелкните значок «Преобразовать в кнопку».

Кнопки могут иметь различные состояния, созданные для нормального отображения, отображения при наведении курсора и щелчка. Чтобы добавить состояния прокрутки или щелчка к кнопкам, щелкните их на панели «Кнопки» и отредактируйте внешний вид кнопки для каждого состояния. Чтобы добавить действие к кнопке, нажмите на плюсик и выберите его из списка. Учтите, что действия в SWF/EPUB не будут работать в интерактивных PDF-файлах.

Чтобы создать всплывающие элементы, выберите «Показать/скрыть кнопки и формы». Чтобы скрыть кнопки до срабатывания, установите флажок Скрыть до срабатывания. Вы можете включить объекты с несколькими состояниями в интерактивный PDF-файл, но только в том случае, если сначала экспортируете их как SWF-файл, а затем поместите обратно в макет InDesign для экспорта в PDF-файл. Этот рабочий процесс утомителен, и PDF-файлы не могут быть правильно видны во всех программах для чтения PDF-файлов, поэтому старайтесь избегать этого, если в этом нет особой необходимости.

Если вы хотите преобразовать документ в прототип HTML с помощью функции публикации в Интернете InDesign CC 2015, вы можете использовать множество других интерактивных параметров, таких как анимация, объекты с несколькими состояниями и действия с несколькими кнопками, включая все те, которые предназначены для экспорта в форматы SWF/EPUB.

Вы можете добавить простую анимацию с помощью панели «Анимация», выбрав один из встроенных пресетов в раскрывающемся меню и задав его свойства. К одному объекту может быть применена только одна анимация, но если вам нужно добавить больше, сгруппируйте свой объект с пустым полем и используйте новую анимацию для этого вновь созданного объекта.

Для элементов пользовательского интерфейса, которые требуют отображения разных состояний, создайте объект с несколькими состояниями. Создайте отдельный объект для каждого состояния. Объекты могут быть отдельными элементами (изображение, текстовое поле, графика) или группой различных элементов. Откройте панель «Окно» > «Интерактив» > «Состояния объекта», выберите все объекты, которые вы создали для объекта с несколькими состояниями, и нажмите кнопку «Создать» в нижней части панели.

После создания объекта с несколькими состояниями вам нужно будет создать кнопки для перехода от одного состояния объекта к другому. Действия «Перейти к следующему состоянию» или «Перейти к предыдущему состоянию» показывают конкретное состояние объекта с помощью действия «Перейти к состоянию».

Если вы хотите иметь прокручиваемый фрейм в каркасе/прототипе, самый простой способ создать его — использовать расширение Universal Scrolling Frames от Ajar Productions. После загрузки и установки расширения его можно использовать в качестве панели InDesign. Для прокручиваемого фрейма вам потребуется создать контент, а также один фрейм для контейнера.

Прокручиваемый контент может быть текстовым фреймом, картинкой или несколькими элементами, сгруппированными вместе. Когда вы закончите создание содержимого и контейнера, выберите содержимое и выберите «Правка» > «Вырезать». Затем выберите контейнер и вставьте содержимое внутрь, используя «Правка» > «Вставить в». Выберите контейнер и с помощью универсальных рамок прокрутки отрегулируйте нужное направление прокрутки.

Комбинируя кнопки, объекты с несколькими состояниями, анимацию и прокручиваемые фреймы, вы можете добиться богатого интерактивного опыта. Чтобы протестировать интерактивность в InDesign, используйте панель «Предварительный просмотр интерактивности EPUB». Вы можете предварительно просмотреть одну страницу или весь документ. Увеличьте панель предварительного просмотра, как вам нужно.

Если вы еще не использовали интерактивные функции Adobe InDesign, будьте готовы, так как сначала вам придется немного научиться. Но немного потренировавшись и немного проб и ошибок, вы быстро их освоите.

Экспорт готовых документов

Когда вы закончите создание макетов и файлов презентации, все, что вам останется, — это показать клиенту свои замечательные идеи наилучшим образом. Для этого вам необходимо экспортировать каркасы в формат, который может предварительно просмотреть ваш клиент. Хотя файлы InDesign можно экспортировать в различные форматы, вы, вероятно, будете использовать Interactive PDF или функцию «Публикация в Интернете» при тестировании функциональных прототипов с низкой или высокой точностью. Чтобы сохранить интерактивный PDF-файл, выберите Adobe PDF (интерактивный) в раскрывающемся меню «Формат» в диалоговом окне «Экспорт» и при необходимости настройте свойства. Не забудьте отметить «Формы» и «Медиа», если есть интерактивные элементы, которые вы хотите включить. Клиенты могут просматривать макеты PDF в бесплатном Adobe Reader и писать все свои комментарии в том же файле.

Вы также можете использовать PDF-документ, экспортированный из InDesign, для создания прототипа InVision (или любого другого инструмента, поддерживающего PDF-файлы). Если ваш стандартный инструмент для создания прототипов, например, Marvel, не может импортировать PDF-файл, экспортируйте каркасные страницы InDesign в виде изображений JPEG или PNG.

Чтобы экспортировать интерактивный HTML-прототип, который можно увидеть в современных браузерах на разных устройствах, выберите «Файл» > «Опубликовать в Интернете» или нажмите кнопку «Опубликовать в Интернете» на панели приложений. После того, как документ будет подготовлен для публикации в Интернете и загружен, вы можете скопировать URL-адрес документа, чтобы поделиться с заинтересованными сторонами и начать процесс рецензирования. Вы также можете встроить опубликованный прототип на свой сайт.

Недостатком функции «Публикация в Интернете» является то, что она не имеет дополнительного контроля над экспортом, а файлы всегда хранятся на серверах Adobe. Кроме того, это все еще функция предварительного просмотра, и вы не можете быть уверены, в каком направлении Adobe собирается ее развивать, и даже будет ли она прекращена.

После того, как ваш каркас/прототип экспортирован, пришло время начать процесс тестирования, проверки и итерации.