a3f5fc955a057b040d7723848cbc9864 1160x620 - Тестируем Auto-Animate от Adobe XD

На ежегодном мероприятии Adobe Max 2018, прошедшем в октябре, Adobe анонсировала обновленную версию Adobe XD и представила новую функцию автоматической анимации Auto-Animate.

Вот как это описывает Adobe: Adobe XD эволюционировал и представил различные опции для создания прототипов, такие как Время (Time), Тап (Tap), Перетаскивание (Drag) и Голос (Voice). Дизайнеры могут использовать автоматическую анимацию в сочетании с жестами перетаскивания, чтобы создавать микровзаимодействия между артбордами для получения богатых возможностей прототипов. Например, анимации каруселей, карточек и списков или индикаторов прогресса. Обманчиво простая в использовании, функция auto-animate создает потрясающие эффекты и переходы, которые помогут вам передать анимированный опыт конечного пользователя. Жесты перетаскивания в XD продвигает функцию auto-animate на шаг вперед, позволяя имитировать опыт перетаскивания на устройствах с сенсорным экраном.

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

Загружаемые файлы проекта доступны в конце этой статьи.

Ниже представлены результаты и извлеченные уроки…

1. Карусель ленты активности

Тестируем Auto-Animate от Adobe XD
Используя некоторые из моих статей на Medium, я создал эту карусель с параллакс-эффектом изображений, используя функции auto-animate и перетаскивания Adobe XD #MadeWithAdobeXD

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

Мои настройки Adobe XD:

Тестируем Auto-Animate от Adobe XD
Моя настройка функции автоматической анимации артборда

2. Apple Music — Темный режим

Тестируем Auto-Animate от Adobe XD
Создано в Adobe XD при помощи автоматической анимации перетаскивания, и регулирования времени перехода. #MadeWithAdobeXD

Я игрался с приложением «Музыка» на своем iPhone, переключая различные режимы, и задался вопросом, смогу ли я сделать это в Adobe XD. Я запустил XD и был поражен тем, как легко это мне удалось. Позже я сделал темный режим, потому что мне было интересно, как бы выглядела темная тема приложения «Музыка».

Мои настройки Adobe XD:

Тестируем Auto-Animate от Adobe XD
Мои настройки auto-animation артборда в двух разных визуальных исполнениях

3. Анимированные гистограммы

Тестируем Auto-Animate от Adobe XD
#MadeWithAdobeXD

Нюанс Adobe XD заключается в том, что он не переключается между цветами, а переключается на новый цвет, прежде чем анимировать до следующего состояния. Чтобы вышеуказанный переход цвета фона имел эффект затухания, мне пришлось создать фоновые блоки и уменьшить их непрозрачность до 0% или увеличить до 100%, чтобы создать переходы затухания фона.

Мои настройки Adobe XD:

Тестируем Auto-Animate от Adobe XD

4. 3D карусель

Карусель изображений Unsplash использует 3D параллакс-эффект. Она полностью анимирована при помощи новой функции Adobe XD auto-animate #MadeWithAdobeXD

Несмотря на простоту, было немного утомительно настраивать карусель. Я настроил разные карточки изображений, масштабируя их до разных размеров в z-index и регулируя их непрозрачность. Нажатие на стрелки делает переход между этими состояниями, создавая иллюзию 3D глубины. Все изображения были взяты с Unsplash, а фотографы указаны в прототипе.

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

Мои настройки Adobe XD:

Тестируем Auto-Animate от Adobe XD
Простое обучение
Тестируем Auto-Animate от Adobe XD
Интерактивная настройка артборда

5. Эффект слайдера

Тестируем Auto-Animate от Adobe XD
Слайдер, используемый для параллельного сравнения черно-белого и оригинального изображения, созданный в Adobe XD с помощью перетаскивания и автоматической анимации. #MadeWithAdobeXD

Также используя изображение с Unsplash, я подумал о создании слайдера, который бы позволял сравнивать изображение в двух состояниях. Автор фотографии указывается под изображением.

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

Мои настройки Adobe XD:

Тестируем Auto-Animate от Adobe XD
Настройка последовательности загрузки с использованием временного перехода между артбордами
Тестируем Auto-Animate от Adobe XD
Слайдер настройки артборда

6. Концепт папки «Входящие»

Концепт прототипа папки «Входящие» с использованием функции auto-animate Adobe XD. #MadeWithAdobeXD

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

Мои настройки Adobe XD:

Тестируем Auto-Animate от Adobe XD

7. Свайп, чтобы удалить

Тестируем Auto-Animate от Adobe XD
#MadeWithAdobeXD

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

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

Мои настройки Adobe XD:

Тестируем Auto-Animate от Adobe XD

8. Последовательность загрузки

Тестируем Auto-Animate от Adobe XD
Полоса загрузки. #MadeWithAdobeXD

Для последовательности загрузки я играл с градиентами. Я создал внутри маски большой скрытый прямоугольник и изменил его положение, создав анимированный градиентный переход.

Графики были анимированы с непрозрачностью от 0% до 100%, а числа графиков на вертикальной оси были показаны с использованием маски и изменения положения списка чисел.

Мои настройки Adobe XD:

Тестируем Auto-Animate от Adobe XD

9. Слайдер День/Ночь

Тестируем Auto-Animate от Adobe XD
#MadeWithAdobeXD

Переход Солнца в Луну был создан при помощи пересечения двух кругов. Линии вокруг Солнца переходят от коротких точек к линиям, а фон просто постепенно исчезает и появляется.

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

Мои настройки Adobe XD:

Тестируем Auto-Animate от Adobe XD
Настройка перехода солнца и луны
Тестируем Auto-Animate от Adobe XD
Чтобы артборды составляли эту последовательность

10. Строим из LEGO

Тестируем Auto-Animate от Adobe XD
Я создал этого маленького LEGO-человечка в Adobe XD используя функции auto animate и перетаскивание #MadeWithAdobeXD

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

Мои настройки Adobe XD:

Тестируем Auto-Animate от Adobe XD

11. Credit Card Wallet

Создано и анимировано в Adobe XD. #MadeWithAdobeXD

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

Я также хотел раскрыть немного деталей о каждой карте, поэтому, после нажатия на нее, я настроил еще один переход с использованием auto-animate, чтобы детали появлялись под картой. Остальная часть прототипа просто должна была быть подключена, чтобы позволить выбрать карту из любого состояния артборда.

Мои настройки Adobe XD:

Тестируем Auto-Animate от Adobe XD

12. Выбор радиочастоты

Тестируем Auto-Animate от Adobe XD
Использование функций перетаскивания и auto-animate в Adobe XD. #MadeWithAdobeXd

Я видел несколько счетчиков чисел, созданных в Adobe XD, и хотел попробовать сделать свой. Я создал его, используя 3 вертикальных списка чисел и маску, чтобы создать эффект подсчета. Он включался путем перетаскивания стрелки по шкале диапазона радиочастот.

Мои настройки Adobe XD:

Тестируем Auto-Animate от Adobe XD

13. Параллакс-скроллинг

Тестируем Auto-Animate от Adobe XD
Простой параллакс-эффект, созданный с использованием функций автоматической анимации и перетаскивания в Adobe XD. #MadeWithAdobeXD

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

Мои настройки Adobe XD:

Тестируем Auto-Animate от Adobe XD

14. Эмодзи реакции

Тестируем Auto-Animate от Adobe XD

Я перерисовал эти эмодзи, чтобы оживить различные элементы, например, глаза и рот. Я копировал и вставлял различные элементы между артбордами, меняя их положение и непрозрачность, чтобы позволить auto-animate творить свою магию.

Затем артборды были подключены с использованием события касания (tap event) и временных переходов (timed-transitions).

Мои настройки Adobe XD:

Тестируем Auto-Animate от Adobe XD

15. Потяните, чтобы обновить

Тестируем Auto-Animate от Adobe XD
#MadeWithAdobeXD

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

Затем капля воды переходит в каркас круга в элементе списка, когда открывается следующий элемент списка.

Мои настройки Adobe XD:

Тестируем Auto-Animate от Adobe XD

Тестируем Auto-Animate от Adobe XD
Фоновые круги используют большую площадь в повторяющейся сетке и расположены со смещением между артбордами

16. Слайдер в форме волны

Тестируем Auto-Animate от Adobe XD
#MadeWithAdobeXD

Я создал волну, изменив положение плоских волн на разных слоях. Волновые линии имеют разную длину, что позволяет каждой волне перемещаться с разной скоростью во время перехода.

Затем я использовал функцию перетаскивания на слайдере в сочетании с автоматической анимацией для перемещения между двумя состояниями артборда.

Мои настройки Adobe XD:

Тестируем Auto-Animate от Adobe XD

Скачайте файлы проектов автора

https://www.dropbox.com/s/77ticrpsindrxks/AdobeXD-Auto-Animate.xd?dl=0

Оставляйте комментарии и делитесь статьей с коллегами.

Узнайте больше

Чтобы узнать больше о функции auto-animate, посмотрите это видео от Adobe.

Подпишитесь на рассылку

Раз в неделю мы будем присылать на почту дайджест с лучшими материалами

Похожие записи

Превью-релиз Adobe Experience Design CC (Project Comet)

От имени создателей я рад поведать вам, что Project Comet стал Adobe Experience Design CC (Preview), или Adobe XD, как мы его называем. Именно сегодня продукт стал доступен для Mac OS, и мы счастливы сделать первый предварительный обзор.

Топ-10 советов от профи по Adobe XD

Я хочу поделиться советами, которые за прошедший год нашли наибольший отклик среди сообщества Adobe Experience Design CC

2 простых шага для экспорта объектов из Adobe XD

Как экспортировать объекты из Adobe XD для передачи их разработчику? Сейчас мы с вами разберемся в нюансах экспорта иконок в разные форматы.