Руководство пользователя Отмена

Создание интерактивных прототипов

Поиск

Последнее обновление 18 сент. 2024 г.

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

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

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

Установка главного экрана

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

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

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

Параметр установки главного экрана

Главный экран установлен

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

Настройка нескольких потоков в проекте

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

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

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

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

Создание связи между интерактивными элементами и целевыми экранами — Настройка нескольких потоков

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

Добавляйте взаимодействия для объектов и монтажных областей

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

Выберите объект и нажмите + рядом с ним или нажмите + в Инспекторе свойств.Установите Триггеры и Тип действия. После выбора типа действия установите конкретные параметры для такого типа действия, включая Назначение (если применимо).

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

Параметры прототипов

A. Выберите «Нажатие», «Перетаскивание», «Наведение», «Время», «Клавиши и геймпад», «Голос» или «Конец воспроизведения». B. Задайте время задержки в секундах. C. Установите «Переход», «Автоматическое анимирование», «Наложение», «Переход к», «Предыдущая монтажная область», «Воспроизведение звука», «Проигрывание речи», «Воспроизведение видео» или «Воспроизведение Lottie». D. Измените монтажную область назначения, если это необходимо. E. Установите «Растворение» или «Нет». F. Выберите эффект смягчения. G. Введите продолжительность в секундах.
Если вы выберете Нажатие в качестве триггера, то сможете комбинировать два действия, например переход с непереходным действием, таким как воспроизведение речи или звука. Чтобы добавить второе действие, установите для первой кнопки + Действие в Инспекторе свойств параметр Переход, Автоматическое анимирование, Наложение, Прокрутка к или Предыдущая монтажная область, затем установите для второй кнопки Действие + параметр Автоматическое воспроизведение или Проигрывание речи.

Если в качестве первого действия вы выбрали Воспроизведение звука или Проигрывание речи, то вы не сможете добавить второе действие.
Вы также можете комбинировать несколько триггеров для создания дополнительных взаимодействий без распределения триггеров по разным объектам на монтажной области. Для этого используйте кнопку «+» на холсте или нажмите кнопку «+» в инспекторе свойств, а затем выберите Триггеры, Действие и Назначение.

Примечание.

Помните, что вы можете применить триггеры Нажатие, Перетаскивание, Наведение и Время только раз, а Голос и Клавиши и геймпад — много раз.

Объединение нескольких триггеров

Вы можете добиться реалистичного моделирования прокрутки в ваших проектах. Чтобы закрепить элементы дизайна в фиксированном положении, выберите Фиксировать положение при прокрутке в Инспекторе свойств.
Для предварительного просмотра прототипа выберите «Предпросмотр на ПК» .

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

Советы

Чтобы отредактировать или удалить соединительную линию, выберите соединительные линии для их редактирования или удаления. Вы также можете выбрать отдельное взаимодействие в инспекторе свойств и отредактировать его взаимодействия.
Чтобы временно скрыть соединительные линии в режиме прототипа, удерживайте клавишу Option (macOS) или Alt (Windows).
Наведите указатель мыши на соединительную линию для просмотра всплывающей подсказки о количестве взаимодействий и их типе.
Чтобы применить определенное взаимодействие к другому объекту, выберите этот объект или монтажную область, выберите «Копировать», щелкните целевой объект или монтажную область и в контекстном меню выберите «Вставить взаимодействие».

Создание связи с предыдущей монтажной областью

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

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

Установка цели

Примечание.

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

Отмена связи монтажных областей

В режиме Прототип выберите Место назначения > Нет.

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

Отмена связи монтажных областей

Примечание.

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

Предварительный просмотр и запись взаимодействий

Примечание.

Запись прототипов не поддерживается в Adobe XD в Windows. Тем не менее есть обходной метод. Нажмите клавиши Windows + G и используйте собственное средство записи для записи окна предварительного просмотра.

Проверить прототип и взаимодействия вы можете путем предварительного просмотра прототипа. Также можно записать предварительный просмотр и сохранить запись в файл формата MP4. Затем вы можете поделиться этим файлом формата MP4 с участниками проекта для просмотра (или оценки) пошагового руководства по созданию прототипа и обратной связи.

Нажмите значок «Предпросмотр на ПК». Откроется окно предварительного просмотра с фокусом на монтажной области.

Чтобы проверить навигацию между экранами, щелкните интерактивные элементы.

Во время просмотра прототипа в окне предварительного просмотра вы можете редактировать его дизайн и взаимодействия. Изменения сразу же доступны для предварительного просмотра.
Чтобы записать взаимодействие, нажмите значок Запись в окне предварительного просмотра. Чтобы остановить запись, нажмите Esc или значок Запись еще раз.

Запись взаимодействий прототипа
Укажите имя и место сохранения записи. Запись сохраняется как файл формата MP4.

Подробнее

Из этого видео вы узнаете, как приступить к работе с интерактивными ресурсами:

Связанные ресурсы

Обращайтесь к нам

Если вы хотите задать вопрос или поделиться интересной идеей, вступайте в сообщество Adobe XD. Мы будем рады услышать ваши идеи и увидеть ваши работы.

Adobe

Получайте помощь быстрее и проще

Новый пользователь?