Как сделать прототип в Adobe XD CC

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

 

Начните с нуля, проделав шаги ниже или загрузите практические файлы [https://adobe.ly/2mcm6DP], чтобы дать себе фору.

Создать свой прототип:

1. Откройте документ .xd или используйте скаченный (prototype.xd).

2. Нажмите на серую миниатюру артборда, затем нажмите Repeat Grid (Повтор сетки). Потяните зеленый регулятор вправо, пока не появятся 3 миниатюры.

Совет: При необходимости поместите курсор между миниатюрами и перетащите внутренний интервал до тех пор, пока миниатюры не будут центрированы.

3. Откройте поисковик на Mac или обозреватель в Windows, затем перетащите 3 изображения из папки knots_details на миниатюры Repeat Grid.

4. Нажмите зеленую рамку Repeat Grid и перетащите 3 миниатюры к низу артборда.

5. Сделайте 2 копии артборда: Нажмите на название артборда, выберите Edit (Редактировать) – Duplicate (Дублировать). Сделайте это дважды, чтобы создать 2 артборда.

Совет: Также вы можете использовать Cmd+D на Mac или Ctrl+D в Windows, чтобы дублировать.

6. Щёлкните по градиенту на самом левом артборде, выберите Edit – Copy (Редактировать – Копировать), затем Edit – Paste (Редактировать – Вставить).

7. Нажмите Repeat Grid и потяните зеленый регулятор, чтобы создать 3 копии прямоугольника. Поместите курсор между изображениями и потяните до тех пор, пока внешние отступы не станут равного расстояния между артбордами – в примере, поля – 70px.

8. Перетащите 3 изображения из папки knots_full на Repeat Grid, затем нажмите на область вставки (серая область), чтобы отменить выбор Repeat Grid.

9. Нажмите Repeat Grid, чтобы повторно выбрать её, щелкните правой кнопкой мыши и выберите Ungroup Grid (Разгруппировать сетку), затем щелкните правой кнопкой мыши и выберите Send to Back (Отправить на задний план).

10. Cmd+щелчёк мыши (на Mac), Ctrl+щелчёк мыши на Windows, название продукта, двойной щелчок, чтобы выделить его и введите «Mustard floor cushion».

11. Щёлкните правой кнопкой мыши по внешнему краю текстового поля и выберите Update All Symbols (Обновить все символы). Дважды щелкните по тексту на 2-м артборде и смените «Mustard» на «Royal Blue» и 3-й артборд «Red Wine».

 

Соединить свой прототип:

1. Нажмите Prototype (Прототип) вверху, чтобы перейти к рабочему пространству Prototype.

2. Cmd+щелчёк мыши или Ctrl+щелчёк мыши на миниатюре слева, перетащите маленькую белую стрелку на первый артборд и установите Transition (Переход) на None (Нет). Повторите тоже самое, чтобы подключить синие и красные миниатюры к соответствующим артбордам.

Подсказка: Transition (Переход), Easing (Обтекание) и Duration (Длительность) по умолчанию соответствуют предыдущим настройкам, поэтому вам не нужно менять их каждый раз.

3. Выберите набор из 3 миниатюр, выберите Edit – Cut (Редактировать – Вырезать).

4. Нажмите на заголовок 1-го артборда и выберите Edit – Paste (Редактировать – Вставить). Повторите это же для оставшихся 2-х атрбордов. Shift+щелкчёк мыши все 3 миниатюры и перетащите, чтобы выровнять чуть ниже большого изображения на артбордах.

 

5. Нажмите Preview (Предварительный просмотр) и щёлкните на каждую миниатюру, чтобы просмотреть прототип.

Вот и всё!