В первой части гайда, вы узнали основу того, как создавать крутые работы в Adobe XD, но сейчас будет самое интересное! Создание прототипа в Adobe XD — проще простого, даже еще проще.
Рекомендую вам прочесть первую часть статьи. Однако это не является столь необходимым потому, что мы будем создавать прототипы при помощи файлов-примеров (доступно в версии
Уроки Adobe XD. Начало работы с Adobe Experience Design — часть 1
…
Начните с файлов примера
При запуске Adobe XD, вы можете выбирать различные опции. В этот раз, мы откроем «Изучение основ» для работы с прототипами.
После открытия файлов примера, нажмите ctrl+tab для переключения в режим прототипирования из режима дизайна (также можно переключить наоборот!). Теперь вы можете создать прототип. Давайте сделаем это!
Назовите страницу с вашими проектами
Первое, что необходимо сделать — это задать домашнюю страницу с рабочей областью. Это можно сделать выбрав домашнюю страницу. В моем случае, я буду использовать Login страницу и кликать на небольшую иконку Home в верхнем левом углу на рабочей области.
Свяжите ссылками ваши рабочие области
После выбора элемента, который вы хотите связать, вы увидите справа небольшую синюю стрелку. При клике на нее, вы можете указать страницу перехода (также, вы можете перетянуть стрелку на желаемую страницу). Затем, выберите переход, скорость и длительность анимации.
Объедините все ваши рабочие области в проекте для создания полностью рабочего прототипа.
Просмотр прототипа (на Mac)
Вы можете просматривать ваш прототип нажав кнопку проигрывания в верхнем правом углу Adobe XD. Появится новое окно с вашим прототипом. Вы даже можете записать видео ваших изменений путем нажатия красной кнопки записи в верхнем правом углу окна просмотра. Также, вы можете отправить готовый .mov файл кому угодно.
Совет: При изменениях рабочей области, превью автоматически подтянет изменения!
Просмотр прототипа (на смартфоне)
Слева от кнопки проигрывания вы увидите кнопку смартфона. Если вы присоединили ваше устройство, вы увидите ваш прототип на нем.
Поделитесь вашим прототипом онлайн Adobe Creative Cloud
Последняя опция в правом верхнем углу — поделиться. Здесь вы можете создать новую ссылку или обновить существующую (если вы уже делились своим прототипом). После этого, вы увидите короткую ссылку, которую можно передать разработчикам, руководителям и даже вашей собачке.
…
Оставайтесь с нами! В следующих постах об Adobe XD я расскажу вам о новых опциях и будущих изменениях, а также более глубоко исследую некоторые проекты.
…
Нет комментариевЖду ваших отзывов об этой статье по работе с Adobe XD. Задавайте вопросы. Подписывайтесь на меня в Twitter.