В современном дизайне веб-приложений и приложений часто бывают случаи, когда взаимодействие не открывает совершенно новую страницу или экран. Современный подход к созданию интерактивного контента требует переходов между элементами интерфейса дизайна, чтобы пользователь был удивлен и поражен опытом изменения контента. Все это происходит на том же экране или странице, без обновления. Разработка таких взаимодействий и их корректная работа могут занять некоторое время, но это стоит сделать перед написанием кода.
Именно на это Adobe XD потратила последние несколько месяцев на разработку. Создайте контент в одном состоянии на одном экране, переместите этот контент в новое состояние на новом экране и просто выберите параметр «Автоматическая анимация» для перехода. Весь контент, который одинаков на обоих экранах, автоматически анимируется из одной позиции в другую. Если вы не хотите, чтобы весь контент отображался на обоих экранах, сделайте его невидимым на первом экране, и он перейдет на свое место.
Здесь мы покажем вам, как создать прототип приложения, который делает именно это (подробнее о том, как создавать учебные пособия для приложений, смотрите наш список лучших). Более того, новая функция XD позволяет пользователю контролировать взаимодействие с голосом. Мы рассмотрим это как функцию дизайна и как приложение может общаться с пользователем, что может предоставить некоторые интересные возможности дизайна.
Загрузите файлы проекта для этот учебник.
Содержание статьи
- 1 01. Запуск проекта
- 2 02. Импортируйте первое изображение
- 3 03. Поместите каюту
- 4 04. Добавьте логотип
- 5 05. Добавьте круг
- 6 06. Переупорядочить графику
- 7 07. Поместите микрофон
- 8 08. Текстовое сообщение
- 9 09. Присоединение к группе
- 10 10. Сгруппируйте логотип
- 11 12. Другой импорт
- 12 13. Добавьте метку
- 13 14. Дублируйте группу
- 14 15. Переименуйте, затем скопируйте снова
- 15 16. Название текста
- 16 17. Изменение непрозрачности
- 17 18. Дублируйте экран
- 18 19. Переместить фон
- 19 20. Появляются новые элементы
- 20 21. Заполните кнопку «Назад»
- 21 22. Голосовая команда
- 22 23. Протестируйте прототип
- 23 24. Возвращение
- 24 25. Подтверждение речи
- 25 26. Масштабирование изображения
- 26 27. Новые элементы экрана
- 27 28. Создать кнопку
- 28 29. Перейти в режим прототипа
- 29 30. Настройки анимации
- 30 31. Связать кнопку «назад»
- 31 32. Автоматическая анимация
- 32 33. Сохраните проект
- 33 34. Совместное использование проекта
- 34 35. Опубликовать прототип
- 35 36. Версия видео
01. Запуск проекта
Установите XD и начните новый проект
(Изображение предоставлено: веб-дизайнер)
[1945901]
Если у вас нет Adobe XD, вы можете скачать и установить его здесь. После завершения установки откройте программное обеспечение, и на экране приветствия вы сможете выбрать размер экрана для загрузки. В этом случае выберите iPhone 6/7/8, так как это правильный размер для этого проекта, но вы увидите, что доступны различные размеры.
02. Импортируйте первое изображение
Найдите свое первое изображение и импортируйте его
(Изображение предоставлено: веб-дизайнер)
Существуют разные способы импорта изображений, но в этом первом случае перейдите в «Файл»> «Импорт». Выберите папку «assets» из файлов проекта, и первое импортируемое изображение будет «sky.png». Поместите его в верхнюю часть экрана и сдвиньте на несколько пикселей вниз.
03. Поместите каюту
(Изображение предоставлено веб-дизайнером)
Следующим изображением для дизайна будет «cab.png». Просто импортируйте это так же, как вы делали это на предыдущем шаге, а затем поместите его на весь экран. Наконец, импортируйте изображение 'trees.png' и поместите его внизу экрана, чтобы деревья над озером.
04. Добавьте логотип
Причина, по которой эти изображения представляют собой отдельные слои, заключается в том, что при создании перехода между экранами они могут перемещаться по отдельности. Перейдите в меню «Файл» и выберите «Импорт». На этот раз выберите «logo.ai», который является векторным изображением. Поместите это изображение в верхний центр экрана.
05. Добавьте круг
Используйте инструмент «Круг» для рисования вокруг логотипа
(Автор изображения: веб-дизайнер)
Выберите инструмент «Круг» и нарисуйте круг, чуть превышающий логотип. На панели «Свойства» справа удалите обводку и сделайте фон черным. Выберите Размытие фона и уменьшите яркость до -30, чтобы круг оставался черным.
06. Переупорядочить графику
Отправьте кружок под логотипом
(Изображение предоставлено: веб-дизайнер)
[1945901]
Теперь круг должен двигаться за логотипом. Выберите «Объект»> «Расположить» и отправить назад. Как и в других продуктах Adobe, это также Cmd / Ctrl + [чтобы переместить любую графику назад в порядке слоя. Между тем, использование правой квадратной скобки приведет объект к порядку вперед.
07. Поместите микрофон
Поместите и измените размер изображения микрофона и нарисуйте вокруг него круг
(Изображение предоставлено веб-дизайнером)
Теперь импортируйте изображение mic.ai и измените его размер, чтобы он был относительно небольшим. Поместите это внизу экрана. Нарисуйте круг вокруг этого и снимите отметку с заливки, чтобы она была удалена. Затем сделайте штрих белым и шириной в два пикселя. Поместите это вокруг изображения 'mic'.
08. Текстовое сообщение
С помощью текстового инструмента добавьте слова «говорите для поиска» под микрофоном. Сделайте текст белым и измените его на Helvetica Neue Condensed Black. В левом нижнем углу экрана щелкните значок панели «Ресурсы», чтобы открыть его. Выделив текст на экране, щелкните значок «+» рядом с «Стили символов», чтобы сохранить этот формат для текста.
09. Присоединение к группе
Выберите значок панели «Слой» в левом нижнем углу экрана. На экране выберите текст 'search' и нажмите удерживая клавишу Shift чтобы добавить кружок и значок микрофона. Перейти к объекту и выберите группу. На панели «Слой» переименуйте эту группу «Поиск». Полезно называть группы, особенно при их анимации.
10. Сгруппируйте логотип
Сгруппируйте логотип и круг
(Автор изображения: веб-дизайнер)
Как и в последнем шаге, выберите логотип и размытый круг вокруг него, затем сгруппируйте их вместе. На панели «Слой» переименуйте всю группу в «логотип», чтобы ее можно было легко идентифицировать, если вам потребуется отредактировать ее позже. На данный момент дизайн первого экрана завершен.
Внесите еще несколько элементов дизайна для анимации
(Изображение кредит: веб-дизайнер)
Несмотря на то, что первый экран завершен, есть еще элементы дизайна, которые необходимо добавить. Так создается анимация путем изменения положения элементов между экранами. Перейдите к инструменту прямоугольника и удерживайте Shift чтобы добавить квадрат на экран, делая границу белым.
12. Другой импорт
Просто перетащите изображения из папок вашей операционной системы
(Изображение предоставлено: Web Designer)
[1945901]
Теперь откройте папку для ресурсов через вашу операционную систему. Выберите изображение '1.jpg 'и перетащите его прямо на квадрат, созданный на предыдущем шаге. Это будет автоматически замаскировано внутри этого. Дважды щелкните, чтобы изменить положение изображения и убедиться, что кабина видна в квадрате.
13. Добавьте метку
Используйте текстовый инструмент для добавления меток к активам
(Изображение предоставлено: веб-дизайнер)
Используя инструмент «Текст», добавьте метку «Лесная хижина» под текстом и используйте панель «Ресурсы», чтобы оформить текст в сохраненном стиле, начиная с шага 8. Выберите изображение и метку и сгруппируйте их вместе. Назовите группу «левая кабина» на панели слоев.
14. Дублируйте группу
Скопируйте и вставьте элементы интерфейса вместо использования Repeat Grid
(Автор изображения: Web Designer) [1945900]
Обычно повторение элемента интерфейса является идеальной работой для инструмента «Повторить сетку». Однако для этого потребуется специальная анимация, которая не работает с сеткой повторения. Выберите изображение и текстовую группу, затем скопируйте и вставьте ее так, чтобы она находилась рядом с оригиналом, и добавьте вместо нее изображение «cab2.png».
Обновите скопированный текст по мере необходимости
(Изображение предоставлено: веб-дизайнер)
[1945901]
Измените текст на «Снежная каюта», а на панели слоев назовите эту «правую каюту». Выберите левую и правую каюту и продублируйте их, разместите дубликаты ниже и обновите их текст и изображения с помощью cab3.png и cab4.png. Сгруппируйте их вместе и назовите группу «Нижняя кабина».
16. Название текста
(Изображение предоставлено: Web Designer)
Добавьте текст на страницу с текстом «Результаты поиска для кают». Дайте этот шрифт Rockwell и сохраните его в стилях персонажей на панели «Активы». Теперь расположите группу «нижняя кабина» прямо в нижней части экрана и уменьшите видимость до нуля, чтобы она не была видна на этом экране.
17. Изменение непрозрачности
Установите непрозрачность для левой и правой кают на ноль
(Изображение предоставлено веб-дизайнером)
Теперь выберите левую и правую каюты, переместите их в нижнюю часть экрана и установите ползунок появления на ноль. Повторите еще раз для поиска текста. Когда мы перейдем на другой экран, все они будут анимированы на свои новые позиции. На панели «Слой» переместите «левую каюту» над всеми остальными группами кают.
18. Дублируйте экран
Дублируйте экран, затем переместите логотип и сделайте его невидимым
(Автор изображения: веб-дизайнер) [194595]
Выберите артборд, щелкнув по его имени, затем дважды щелкните артборд и измените имя на «дом». Скопируйте и вставьте артборд и переименуйте его в «поиск». Теперь выберите логотип и переместите его почти за пределы экрана, затем уменьшите его внешний вид до нуля.
19. Переместить фон
Переместить фон и другие элементы
Выберите изображение неба и слегка подтолкните его на экране. Выберите изображение кабины и двигайте его вверх, пока кабина не окажется в верхней части экрана. Затем нажмите на изображение деревьев и переместите его над кабиной. Наконец, выберите группу 'search' и уменьшите ее количество до нуля.
20. Появляются новые элементы
Теперь добавьте новые элементы
(Изображение предоставлено: веб-дизайнер)
21. Заполните кнопку «Назад»
Выберите стрелку «Назад» и круг, сгруппируйте их вместе и назовите их «кнопка назад» на панели «Слой». Переключитесь в режим «Прототип», нажав «Прототип» в верхнем левом углу интерфейса XD. Выберите домашний экран, перетащите синюю стрелку на экран поиска, и появится всплывающая панель.
22. Голосовая команда
Добавление голосовых команд легко
(Автор изображения: веб-дизайнер)
23. Протестируйте прототип
Нажмите кнопку воспроизведения, чтобы протестировать ваш прототип
(Изображение предоставлено: Web Designer)
[19459]
В правом верхнем углу интерфейса XD находится кнопка воспроизведения. Нажмите на это, и рабочий прототип теперь появится на экране. На главной странице вам нужно будет удерживать клавишу пробела, пока вы произносите голосовую команду «поиск». Когда вы отпустите клавишу пробела, вы перейдете на следующий экран и анимируете графический интерфейс в нужное положение.
24. Возвращение
Нажмите кнопку «Назад», чтобы вернуться на домашний экран
(Изображение предоставлено: Web Designer)
[19459]
После завершения перехода вы можете нажать кнопку «Назад», чтобы вернуться на домашний экран. Закройте прототип и нажмите на экране поиска, затем нажмите синюю стрелку вправо (не перетаскивайте). Измените Триггер на Время, установите задержку на 0 с и установите Действие на Воспроизведение речи. Сделайте речь «Результаты поиска доступных кают».
25. Подтверждение речи
Проверьте подтверждение речи, затем вернитесь к представлению «Дизайн»
(Изображение предоставлено веб-дизайнером)
Проверьте это сейчас с помощью кнопки воспроизведения, чтобы услышать голосовое подтверждение поиска. Закройте прототип, когда вы попробуете это. Будет создан еще один экран, поэтому давайте вернемся к представлению «Дизайн» в левом верхнем углу интерфейса XD. Нажмите на экран поиска, щелкнув имя, а затем скопируйте и вставьте его.
26. Масштабирование изображения
Переименуйте новый экран и измените размер изображения кабины
(Кредит изображения: Web Designer)
Переименуйте новый экран в «кабину». Дважды щелкните изображение для слоя «левая кабина». Измените размер угловых маркеров так, чтобы он занимал весь экран, затем измените положение изображения внутри, чтобы оно покрыло этот экран. Нажмите на текст результатов поиска и уменьшите его до нуля, чтобы убрать его из вида.
27. Новые элементы экрана
Пришло время добавить некоторые новые элементы
(Изображение предоставлено: веб-дизайнер)
Дважды щелкните текст «Лесная хижина», поскольку он является частью группы. Увеличьте размер текста до 26 пикселей и слегка сдвиньте его вверх по экрану. Добавьте текст на экране в Helvetica Neue Medium с размером 14 пикселей и установите его белым, чтобы выделиться на фоне. Добавьте белую линию с помощью инструмента «Линия» под заголовком.
28. Создать кнопку
Создать закругленный прямоугольник для использования в качестве кнопки
(Изображение предоставлено: Web Designer)
Используйте инструмент «Прямоугольник», чтобы нарисовать прямоугольник на экране в нижней части дизайна. Перетащите в угловые ручки, чтобы придать этой форме круглые углы. Добавьте к этому слово «Резерв», используя сохраненный стиль символов на панели «Ресурсы» для Helvetica Neue, выделенного жирным шрифтом.
29. Перейти в режим прототипа
Когда все на месте, переключиться в режим прототипа
(Изображение предоставлено веб-дизайнером)
Все элементы дизайна теперь доступны для всего дизайна приложения. Перейдите в режим «Прототип», щелкнув слово «Прототип» в верхнем левом углу. На экране поиска нажмите на группу «лесной домик» изображения и текста. Перетащите синюю ручку от этого на экран «кабины».
30. Настройки анимации
Настройте параметры анимации так, чтобы все продолжало работать в соответствии с
(Изображение предоставлено: Web Designer)
[19459]
Во всплывающей панели для перехода между экранами выберите «Касание» в качестве триггера, а затем выполните действие «Автоматическая анимация». Сохраняйте Easing как Snap, но уменьшите продолжительность до 0,6 с. Это гарантирует, что анимация не будет перетаскиваться — перемещение первого экрана на второй экран было большим движением, которое требовало более длительного перехода.
31. Связать кнопку «назад»
После того, как вы свяжете кнопку «Назад», вы будете готовы к тестированию
(Изображение предоставлено : Веб-дизайнер)
Теперь выберите кнопку «Назад» на последнем экране и перетащите синюю стрелку назад на экран «поиска». Все настройки из предыдущего перехода должны быть запомнены. Теперь вы готовы пойти дальше и проверить это, нажав кнопку воспроизведения.
32. Автоматическая анимация
Теперь вы можете увидеть, как работает автоматическая анимация
(Автор изображения: веб-дизайнер)
Что вы увидите с автоанимацией сейчас, так это то, что изображение расширяется, чтобы заполнить экран, и элементы, которые больше не нужны, исчезнут, а новый текст исчезнет. назад. Это дает хороший способ увидеть, как автоанимация работает на трех экранах.
33. Сохраните проект
Не забудьте сохранить локальную копию вашего проекта
(Изображение предоставлено веб-дизайнером)
По умолчанию ваш проект должен автоматически сохраняться в Creative Cloud, но в случае возникновения проблем рекомендуется сохранить копию на свой жесткий диск. Нажмите Файл> Сохранить, измените местоположение на свой компьютер и назовите проект с подходящим именем.
34. Совместное использование проекта
Используйте кнопку «Поделиться», чтобы отправить свой проект другим людям
(Изображение предоставлено веб-дизайнером)
Весь смысл создания прототипа заключается в тестировании проекта на других людях. К счастью, в правом верхнем углу интерфейса XD есть кнопка «Поделиться», которая делает это проще простого. Нажмите кнопку «Поделиться» и в раскрывающемся меню выберите опцию «Поделиться для просмотра».
35. Опубликовать прототип
Создать общедоступную ссылку, чтобы люди могли протестировать проект в браузере
(Изображение предоставлено веб-дизайнером)
На следующем экране вам сообщают, что поддержка автоанимации пока недоступна для Интернета, но она скоро появится. Нажмите «Создать общедоступную ссылку», а затем нажмите ссылку в правом верхнем углу, чтобы перейти к общедоступной ссылке в веб-браузере. Вам нужно будет удерживать пробел, чтобы использовать голосовую команду с прототипом.
36. Версия видео
В качестве альтернативы вы можете записать интерфейс в действии как видео
(Изображение предоставлено: веб-дизайнер)
Другим прототипом можно поделиться, записав интерфейс в действии. Нажмите кнопку «Поделиться» и выберите «Запись видео». Откроется окно, и когда вы закроете его, вам будет предложено сохранить запись экрана в виде файла MP4, что также является полезным способом поделиться вашим прототипом.
Эта статья была первоначально опубликовано в выпуске 285 журнала Creative Web Design Веб-дизайнер . Купите выпуск 285 здесь или подпишитесь на веб-дизайнера здесь .
[Статьи
Загрузка...
