Как сделать хорошую UI-анимацию отличной

Практические советы по улучшению микро-взаимодействий в интерфейсе.
9
391

Вы читаете перевод статьи “Good to great UI animation tips”. Над переводом работали: Ольга Жолудова и Ринат Шайхутдинов.

В этой статье мы рассмотрим несколько хороших UI анимаций, которые я усовершенствовал. Иногда достаточно лишь чуть-чуть подкрутить несколько деталей — и анимация начинает выглядеть гораздо лучше.

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

При создании этих анимаций я руководствовался гайдами Material Motion, IBM’s Animation Principles, и The UX in Motion Manifesto.

Все взаимодействия я сделал в InVision Studio в рамках программы раннего доступа. Исходники можно скачать здесь.

Вкладки должны перелистываться

Контент слева просто появляется и исчезает. Контент справа перелистывается вместе со вкладками.

Когда будете проектировать взаимодействие с вкладками или с вылетающим меню, постарайтесь согласовать движение контента с действием, которое осуществляет пользователь. При помощи анимации вы можете показать не только как контент появляется, но и откуда. Ой, и заодно добавьте поддержку “смахивания”, чтобы можно было  жестами переходить с одной вкладки на другую.

Общие элементы экранов должны быть связаны

Слева контент открывается в новой вкладке, которая появляется снизу. На правом экране сама карточка увеличивается и превращается в новый экран.

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

Изучите Motion Manifesto и посмотрите, какие анимации вы можете применить. В примере выше я использовал сочетание принципов Masking, Transformation, Parenting, и Easing.

Используйте эффект каскада для отображения содержимого

Карточки слева въезжают и проявляются разом (анимации slide и fade in). Справа использются те же анимации, но каждая следующая карточка появляется с небольшой задержкой.

Чтобы добиться эффекта водопада, попробуйте установить время задержки для каждого элемента (или группы элементов). Чтобы анимация выглядела согласовано, элементы должны появляться равномерно и с одинаковой скоростью. Не стоит применять эффект каскада к каждому элементу — лучше анимируйте содержимое группами. Анимация должна быть быстрой и энергичной. Google рекомендует устанавливать временные промежутки между элементами не более 20мс. Изучите принцип хореографии в Material Motion — там вы найдете больше примеров.

Контент должен вытеснять остальные элементы с экрана

Слева карточка появляется поверх контента. Справа карточка “вырастает” и выталкивает остальные элементы с экрана.

При настройке анимаций необходимо учитывать контекст содержимого: когда состояние одного элемента меняется, остальные должны либо притягиваться к нему, либо отталкиваться. Больше примеров можно найти в руководстве Material Design (см. принцип Aware)

Меню должно появляться в контексте

Меню на картинке слева влетает снизу. Меню на картинке справа разворачивается прямо из кнопки, по нажатию на которую оно появляется.

Используйте кнопки, чтобы рассказать о состоянии системы

На рисунке слева под кнопкой появляется текст — так пользователь узнает об изменении состояния. На рисунке справа сама кнопка показывает изменение состояния.

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

Обратите внимание пользователя на то, что важно

На примере слева кнопка выделяется за счет цвета и расположения. На рисунке справа внимание пользователя привлекает небольшая анимация.

Если вы хотите добиться от пользователя какого-то действия, то элемент, отвечающий за это действие, можно выделить при помощи анимации. В зависимости от важности действия, можно регулировать интенсивность анимации (изменение размера, цвета или скорости). Анимации следует использовать только для важных действий, поскольку чем больше вы пользуетесь анимациями для привлечения внимания, там слабее их эффект… и тем сильнее они бесят пользователей 😱

Заключение

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

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

Удачи с анимашками!


Ола, амигос. Я Пабло Стенли, дизайнер и сооснователь Carbon Health.

Я автор серии комиксов под названием The Design Team и я много пишу о дизайне в Twitter. Также можете зайти на мой YouTube канал, Sketch Together, где вы найдете тонны тьюториалов по дизайну.

Спасибо что прочитали!


Мобильное приложение «Заметки о психике» | Mental Notes

Подкидывает идеи, как привлечь, удержать и направить внимание пользователя.

Mental notes — это колода из 53 карточек с описанием психофизиологических моделей поведения людей, которые лежат в основе принципов веб-дизайна. Они помогают дизайнерам, проектировщикам лучше понять поведение пользователей и найти эффективные решения при создании дизайна интерфейсов.

Скачать приложение в Appstore →
https://itunes.apple.com/ru/app/mental-notes/id993592407?l=ru&ls=1&mt=8
Советы motion-дизайнеров

Посты в категории Анимация

Анимация в интерфейсах: 12 принципов UX-анимации

Ринат Шайхутдинов

26 сентября 2018

Посты в категории Анимация

Как улучшить UX за счет анимаций

Ольга Жолудова

19 октября 2017

Посты в категории Анимация

Микровзаимодействия: Секрет отличного дизайна приложений

Ольга Жолудова

15 апреля 2016