Узнайте, как создать простой, но элегантный макет мобильного приложения. Затем, установить связи взаимодействия, чтобы имитировать пользовательский опыт.
Начните с нуля, проделав шаги ниже или загрузите практические файлы [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 (Предварительный просмотр) и щёлкните на каждую миниатюру, чтобы просмотреть прототип.
Вот и всё!
