Используйте Adobe XD для создания микро-взаимодействий

Adobe XD может помочь с созданием прототипов – одного из наиболее важных процессов в жизненном цикле проектирования, который играет жизненно важную роль в разработке, помогая дизайнерам и командам разработчиков поддерживать рабочие процессы. В последнее время в ландшафте прототипов произошли серьезные изменения: дизайнеры избалованы выбором.

Как и во многих других дисциплинах, не существует единого инструмента проектирования и создания прототипов, который мог бы достичь всего. Различные этапы требуют уникального набора инструментов. Прошли те времена, когда дизайнеры полагались исключительно на Photoshop и Sketch. Хотя они и являются отличными инструментами для проектирования пользовательского интерфейса, они не обладают возможностями для быстрой обработки пользовательских потоков и каркасов (для получения дополнительной информации о каркасных моделях см. Наши лучшие инструменты для каркасного проектирования).

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

Идея здесь проста: Auto Animate позволяет дизайнерам создавать интерактивные прототипы с иммерсивной анимацией, просто дублируя артборд или изменяя свойства объекта. Этими свойствами может быть что угодно, например, размеры, положение X и Y, непрозрачность, вращение. Ранее Adobe XD предлагал базовые взаимодействия, такие как скольжение, толчок и растворение.

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

В этой статье я расскажу, как создавать простые микро анимации с помощью этой новой функции Auto Animate в Adobe XD. Прежде чем мы начнем, необходимо рассмотреть несколько вещей о том, как объекты должны обрабатываться для автоматической анимации:

  • Когда объект или элемент не находятся на артборде назначения, он обычно исчезает при просмотре
  • Когда элемент отсутствует в исходном артборде, он имеет тенденцию исчезать
  • Всегда подключайте монтажные области, когда вы находитесь в режиме прототипа, который будет создавать взаимодействия
  • Для создания анимации всегда убедитесь, что объекты и элементы имеют совпадающие имена в слоях, а также название группы, в которой они могут находиться

Внести изменения в состояние с помощью Auto Animate

Учебник по Adobe XD

Это может показаться простым, но вам нужно начать с двух форм (Изображение предоставлено: Вамси Батчу)

Давайте начнем с простого примера изменения состояния с помощью Auto Animate. В этом примере изменяются следующие свойства: ширина, высота и цвет. Для любых переходов Auto Animate требуется более двух монтажных областей.

На начальном артборде нарисуйте фигуру – в нашем примере это зеленый прямоугольник размером 500 на 200 пикселей. Дублируйте этот артборд и выберите прямоугольник на втором артборде. Нам нужно изменить свойства прямоугольника, увеличив ширину до 1000 и высоту до 500. Вы также можете выполнить дальнейшие изменения, например, изменить непрозрачность до 50% или сделать цвет розовым.

Теперь нажмите на вкладку Prototype в верхнем левом углу. Выберите первый артборд и свяжите его, используя стрелку, со вторым артбордом. Когда вы сделаете это, справа от приложения появится вкладка «Взаимодействие», с помощью которой можно установить такие параметры, как Триггер, Действие, Назначение и Облегчение. Каждый параметр может быть настроен в соответствии с вашими потребностями. Существует пять типов триггеров – включая Tap, Drag и Timed – которые запускают анимацию.

Установите для вкладки «Действие» значение по умолчанию «Автоматическая анимация», и поскольку в нашем примере имеется только две монтажные области, установите вкладку «Назначение» на монтажную панель 2. Кроме того, можно выбрать несколько временных плавных переходов, которые можно выбрать по времени. Нажмите на значок воспроизведения в правом верхнем углу, чтобы увидеть, как Auto Animate выполняет свою магию и анимирует прямоугольник. Если необходимо изменить более двух элементов одновременно, убедитесь, что имена этих элементов совпадают в обеих монтажных областях. Это сообщит приложению, что эти два элемента должны быть анимированы.

Развернуть карты

Учебник по Adobe XD

Расширение карт – еще одно простое взаимодействие для создания (Изображение предоставлено: Вамси Батчу)

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

Далее мы продублируем этот артборд и изменим несколько свойств карты. Первое, что нужно сделать, это увеличить высоту прямоугольной карты, чтобы она выглядела как расширенное состояние. Заголовок и описание ниже должны быть неизменными. Теперь пришло время добавить те записи, которые мы упоминали ранее.

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

Чтобы создать анимацию, перейдите к первому артборду и нажмите на вкладку «Прототип» в верхнем левом углу. Теперь нажмите на ссылку View History на первом артборде и перетащите ссылку на прототип на второй артборд. Это делает ссылку Просмотр истории триггером. Измените свойства на вкладке «Взаимодействие» справа, установив для триггера «Касание» и «Действие» на «Автоматическая анимация». Проверьте это, чтобы увидеть плавную анимацию ящика. Внесите изменения в параметр «Облегчение» на вкладке «Взаимодействие», если анимация выглядит недостаточно плавной.

Сделать анимацию перетаскивания

Учебник по Adobe XD

Простой пример анимации перетаскивания, где сфера создается для просмотра, хотя она сжимает блок текста (Изображение предоставлено: Вамси Батчу)

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

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

Создание бесконечной анимации загрузчика

Учебник по Adobe XD

Auto Animate можно настроить для работы с несколькими артбордами, что идеально подходит для создания бесконечной анимации загрузчика. (Изображение предоставлено: Вамси Батчу)

Одна из лучших функций Adobe XD заключается в том, что Auto Animate можно применять между несколькими монтажными областями. Чтобы сделать такую ​​анимацию, вам просто нужно внести простые изменения в одно из свойств.

Давайте создадим анимацию загрузки, в которой батарея наполняется. Ключ к получению этого совершенства – правильно изготовить первый артборд. Первый артборд имеет заполнитель батареи, как показано на рисунке. Он может быть создан с использованием прямоугольных форм. Для фактической батареи внутри заполнителя первый артборд должен быть пустым (что соответствует 0%). Дублируйте этот артборд и создайте зеленый прямоугольник высотой 50 пикселей, который идеально вписывается в заполнитель. Создайте аналогичные дубликаты, чтобы увеличить высоту батареи в третьем артборде на 50 пикселей и так далее. Продолжайте, пока артборд не будет полностью заполнен.

Теперь нам нужно создать бесконечный цикл между этими монтажными областями, чтобы он создавал анимацию синхронной загрузки. Для этого перейдите в режим Prototype, нажмите на первый артборд и перетащите стрелку прототипа на второй артборд. Измените свойства на панели «Взаимодействие», установив для «Триггера» значение «Время», а затем установите для «Задержки» значение 0 секунд, которое будет анимировано для второй монтажной области при предварительном просмотре. Выполните те же изменения для всех артбордов, связав второе с третьим и т. Д., Прежде чем окончательно связать последний артборд с первым. Мы успешно соединили все артборды, чтобы сформировать бесконечный цикл. Измените параметры Easing и Duration согласно вашему требованию, чтобы сделать загрузку более плавной.

Хотя существует множество вариантов, которые можно попробовать с помощью Adobe XD, текущие возможности инструмента ограничены и все еще регулярно обновляются группой разработчиков. Таким образом, по сравнению с такими инструментами, как Principle, вы можете почувствовать, что XD имеет ограниченный набор инструментов. Тем не менее, Adobe проделала отличную работу, сделав инструмент простым в освоении и использовании. Создание сложных взаимодействий может занять некоторое время и усилия, но они полностью достижимы с помощью функции автоматической анимации XD. Ключ должен понять основы перемещения объектов, изменения их размера, добавления слоев и использования триггеров.