В первой части гайда, вы узнали основу того, как создавать крутые работы в Adobe XD, но сейчас будет самое интересное! Создание прототипа в Adobe XD — проще простого, даже еще проще.

Рекомендую вам прочесть первую часть статьи. Однако это не является столь необходимым потому, что мы будем создавать прототипы при помощи файлов-примеров (доступно в версии 0.5.22.8 Beta, релиз в сентябре 2016 года). Я кастомизировал пример проекта для более простого объяснения.

Уроки Adobe XD. Начало работы с Adobe Experience Design — часть 1

Начните с файлов примера

При запуске Adobe XD, вы можете выбирать различные опции. В этот раз, мы откроем «Изучение основ» для работы с прототипами.

Изучение основ Adobe XD
Изучение основ
После открытия файлов примера, нажмите ctrl+tab для переключения в режим прототипирования из режима дизайна (также можно переключить наоборот!). Теперь вы можете создать прототип. Давайте сделаем это!

Назовите страницу с вашими проектами

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

Задаем рабочую область Adobe XD
Задаем рабочую область

Свяжите ссылками ваши рабочие области

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

Создание ссылки между двумя рабочими областями Adobe XD
Создание ссылки между двумя рабочими областями
Объедините все ваши рабочие области в проекте для создания полностью рабочего прототипа.

Просмотр прототипа (на Mac)

Вы можете просматривать ваш прототип нажав кнопку проигрывания в верхнем правом углу Adobe XD. Появится новое окно с вашим прототипом. Вы даже можете записать видео ваших изменений путем нажатия красной кнопки записи в верхнем правом углу окна просмотра. Также, вы можете отправить готовый .mov файл кому угодно.

Совет: При изменениях рабочей области, превью автоматически подтянет изменения!

Просмотр прототипа Adobe XD на Mac
Просмотр прототипа на Mac

Просмотр прототипа (на смартфоне)

Слева от кнопки проигрывания вы увидите кнопку смартфона. Если вы присоединили ваше устройство, вы увидите ваш прототип на нем.

Adobe XD - релиз сентября 2016
Adobe XD — релиз сентября 2016

Поделитесь вашим прототипом онлайн Adobe Creative Cloud

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

Adobe Creative Cloud

Оставайтесь с нами! В следующих постах об Adobe XD я расскажу вам о новых опциях и будущих изменениях, а также более глубоко исследую некоторые проекты.

Жду ваших отзывов об этой статье по работе с Adobe XD. Задавайте вопросы. Подписывайтесь на меня в Twitter.