Создание прототипов с Adobe XD

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

Это то, что Adobe XD провела последние несколько месяцев развития правила. Создайте содержимое в одном состоянии на одном экране, переместите этот контент в новое состояние на новом экране и просто выберите параметр «Авто-Animate» для перехода. Все одинаковое содержимое на обоих экранах автоматически оживляет из одной позиции в другое. Если вы не хотите, чтобы весь контент виден на обоих экранах, сделайте контент невидимым в первую очередь, и он будет переходить на место.

Узнайте о другом программном обеспечении Adobe, например Adobe Dimension Отказ

• 8 Основные инструменты прототипирования и сборки

Здесь мы покажем вам, как создать приложение-прототип, который только что это (для более Как создать приложение Учебники, проверьте нашу подводку лучших). И выходя за пределы этого, новая особенность XD позволяет пользователю контролировать взаимодействия со своим голосом. Мы будем исследовать это как функцию дизайна, и как приложение может помочь пользователю, а также предоставить некоторые интересные возможности дизайна.

Загрузите файлы проекта Для этого учебника.

01. Начало проекта

Если у вас нет Adobe XD, вы можете загрузить и установить его здесь Отказ Как только установка завершила, откройте программное обеспечение и экран приветствия позволит вам выбрать размер экрана для загрузки. В этом случае выберите iPhone 6/7/8, так как это правильный размер для этого проекта, но вы увидите, что есть различные размеры.

02. Импорт первого изображения

Есть разные способы импорта изображений, но в этом первом случае перейдите к файлу и GT; Импорт. Выберите папку «Активы» из файлов проекта и первое изображение для импорта будет «Sky.png». Поместите его на верхнюю часть экрана и переместите его просто пару пикселей вниз.

03. Поместите салон

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

04. Принесите логотип

Причина, по которой эти изображения являются отдельными слоями, так что при создании перехода между экранами они могут перемещаться отдельно. Перейдите в меню «Файл» и выберите «Импорт». На этот раз выберите «logo.ai», который является векторным изображением. Поместите это изображение в верхнем центре экрана.

05. Добавьте круг

Выберите инструмент Circle и нарисуйте круг чуть больше, чем логотип. На панели «Свойства справа» удалите удар и сделайте фоном черный. Выберите фон размытия и уменьшить яркость до -30, чтобы круг еще был черный.

06. Изменить порядок графики

Теперь круг должен двигаться за логотипом. Выберите объект и GT; Организовать и отправьте назад. Как в других продуктах Adobe, это также CMD / CTRL + [ Чтобы переместить любую графику назад в порядке слоя. Используя правый квадратный кронштейн, тем временем принесет объект вперед в порядке.

07. Снимите микрофон

Теперь импортируйте изображение «MIC.ai» и измените размер изображения, чтобы быть относительно небольшим. Поместите это в нижней части экрана. Нарисуйте круг вокруг этого и снимите флажок Заполнить так, чтобы он был удален. Затем сделайте удар белым и широким образом два пикселя. Позиция, что вокруг изображения «MIC».

08. Текстовое сообщение

Используйте текстовый инструмент для добавления слов «Поговорите к поиску» под микрофоном. Сделайте текст белым и измените его в Helvetica Neue Condensed черный. В левом нижнем углу экрана щелкните значок панели активов, чтобы открыть его. С помощью текста, выбранного на экране, щелкните значок «+» рядом с «стилями символов», чтобы сохранить этот формат для текста.

09. Присоединяйтесь к группе

Выберите значок панели слоя в левом нижнем углу экрана. На экране выберите текст «Поиск» и Shift-Щелчок Чтобы добавить круг и значок MIC. Перейти к объекту и выберите группу. На панели слоя переименуйте эту группу «Поиск». Это полезно для названия групп, особенно при анимировании.

10. Группа логотип

Так же, как на последнем шаге, выберите логотип и размытый круг вокруг него, затем группируйте их вместе. На панели слоя переименуйте всей группе «Логотип», чтобы он был легко идентифицирован, если вам нужно редактировать это снова позже. На данный момент дизайн для первого экрана завершен.

11. Дополнительные элементы

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

12. Различный импорт

Теперь открыть папку для активов через операционную систему. Выберите изображение «CARE1.PNG» и перетащите это непосредственно на квадрат, который вы создали на предыдущем шаге. Он автоматически будет замаскирован внутри этого. Дважды щелкните, чтобы редактировать положение изображения и убедитесь, что салон виден на квадрате.

13. Добавить этикетку

Используя текстовый инструмент, добавьте лечебную кабину «лесной кабины» ниже текста и используйте панель активов для стиля текста в сохраненном стиле с шага 8. Выберите изображение и метку и группируйте их вместе. Назовите группу «Левая каюта» на панели слоев.

14. Дублируйте группу

Обычно повторяя элемент интерфейса - идеальная задача для инструмента «Repear Grid». Однако это будет нуждаться в определенной анимации, которая не работает с повторенной сеткой. Выберите изображение и текстовую группу, затем скопируйте и вставьте его, чтобы он сидил рядом с оригиналом, и добавьте вместо этого изображения «Cabin2.png».

15. Переименуйте, затем скопируйте снова

Измените текст на «Снежная кабина», а на панели «Слои» на имя этой «правильной кабины». Выберите влево, так и правую кабину и дублируйте их, поместите дубликаты ниже и обновите их текст и изображения с помощью «Cable3.png» и «Cable4.png». Группа оба из них вместе и назвать группу «нижнюю каюту».

16. Текст названия

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

17. Изменение непрозрачности

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

18. Дублируйте экран

Выберите Admboard, нажав на его имя, затем дважды щелкните по артборду и измените имя «Домой». Скопируйте и вставьте артборду и переименуйте его «поиск». Теперь выберите логотип и переместите его до почти с экрана, затем уменьшите его внешний вид до нуля.

19. Переместите фоны

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

20. появляются новые элементы

Выберите результаты поиска на панели слоев и принесите его внешний вид до 100. Переместите его на экран. Повторите это для левой кабины, правой кабины и нижней кабины. Используйте инструмент Pen, чтобы нарисовать кнопку «Простой обратно» и добавить круг вокруг него. Сделайте фоновый размытие и возьмите яркость этого до -30.

21. Заполните кнопку назад

Выберите стрелку кнопки и кругов, соберите их вместе и назовите их кнопку «Назад» на панели слоя. Переключитесь в режим «Прототип», нажав «Прототип» в левом верхнем углу интерфейса XD. Выберите HomeScreen, перетащите синюю стрелку на экран поиска и появится всплывающая панель.

22. Голосовая команда

Измените триггер к голосу и введите слово «поиск» как голосовая команда для управления этим. Измените действие на автоматическую анимацию и смягчение привязки. Составьте длительность 1.5. В экране поиска нажмите на кнопку «Назад» и перетащите синюю стрелку обратно на экран «Домой». Просто измените триггер, чтобы нажать.

23. Проверьте прототип

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

24. Возвращаясь назад

Как только переход будет запущен, вы можете нажать кнопку «Назад», чтобы вернуться к Home Escreen. Закройте прототип и нажмите на экран поиска, затем нажмите на синюю стрелку справа (не перетащите). Измените Trigger для времени, сделайте задержку 0 и установите действие в воспроизведение речи. Сделайте речь «Результаты поиска для доступных кабин».

25. Подтверждение речи

Проверьте это сейчас с помощью кнопки PLAY, чтобы услышать голосовое подтверждение поиска. Закройте прототип, когда вы пробовали это. Другой экран будет создан, поэтому давайте нажмемся на просмотр «Дизайн» в левом верхнем углу интерфейса XD. Нажмите на экран поиска, нажав на имя, а затем скопируйте и вставьте его.

26. Расширение изображения

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

27. Новые элементы экрана

Дважды щелкните текст «Лесной кабины», как это является частью группы. Увеличить размер текста до 26 пикселей и слегка переместите его на экран. Добавьте текст на экран в среде Helvetica Neue в размере 14 пикселей и установите его на белый, чтобы выделиться на фоне. Добавьте белую линию с помощью линии под заголовком.

28. Создайте кнопку

Используйте инструмент прямоугольника, чтобы нарисовать прямоугольник на экране в нижней части конструкции. Перетащите в угловые ручки, чтобы придать эту форму круглых углов. Добавьте слово «резерв» к этому, используя сохраненный стиль символа в панели активов для Helvetica Neue в конденсированном жирном жиремете.

29. Перейти к режиму прототипа

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

30. Настройки анимации

На всплывающей панели для перехода между экранами выберите TAP в качестве триггера, затем сделайте действие Auto-Animate. Продолжайте ослабить как Snap, но уменьшите продолжительность этого до 0,6. Это гарантирует, что анимация не перетаскивает - движение первого экрана на второй экран имел много движения, которое требовало более длительное переход.

31. Связь вверх кнопкой назад

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

32. Авто-анимация

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

33. Сохранить проект

По умолчанию ваш проект должен автоматически сохранять творческое облако, но это хорошая идея сохранить копию на ваш собственный жесткий диск на случай, если есть какие-либо проблемы. Нажмите File & GT; Сохранить, измените местоположение на свой собственный компьютер и назовите проект подходящим именем.

34. Распределение проекта

Вся точка прототипирования является проверка проекта на других людях. К счастью, есть кнопка акции в верхней справа от интерфейса XD, который делает этот ветерок. Нажмите кнопку «Соблюдение», а в меню «Перейти», который появляется, выберите «Опция» Share для просмотра.

35. Опубликовать прототип

На следующем экране вам говорят, что Auto-Animate Support еще не доступен для Интернета, но она скоро придет. Нажмите Создать публичную ссылку, а затем нажмите на ссылку в правом верхнем углу, чтобы посетить публичную ссылку в веб-браузере. Вам нужно будет удерживать пространственный бар вниз, чтобы использовать голосовую команду с прототипом.

36. Видео версия

Другой прототип может быть передан путем записи интерфейса в действии. Нажмите кнопку «Поделиться» и выберите «Запись видео». Это откроет окно, и когда вы закроете это, вам будет предложено сохранить запись экрана в качестве файла MP4, который также является полезным способом поделиться своим прототипом.

Эта статья была первоначально опубликована в номере 285 журнала Creative Web Design Веб-дизайнер Отказ Купить проблему 285 здесь или же Подписаться на веб-дизайнер здесь Отказ

Статьи по Теме:

• Дизайн мобильного приложения: руководство для начинающих
• Как создать приложение с vue.js
• Перейти к захвату с мобильным приложением