Наш канал в

На ежегодном мероприятии 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

Сравнение Sketch vs Adobe XD vs Figma

Когда вышла первая версия Sketch, он полностью изменил мир дизайна интерфейсов, но…