Зачем нам UI анимации

Посмотрите на мир вокруг. Движения в природе не линейны. Мы понимаем, как происходят взаимодействия, как трансформируются объекты, узнаем физические характеристики наблюдая за движением объектов.    

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

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

Красиво, но слишком сложно для настоящего интерфейса приложения:

Пример излишне сложной анимации. Изображение с сайта www.interaction-design.org.

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

Типы анимаций

В зависимости от целей, мы можем выделить несколько типов анимаций (подробнее прочитать можно в статье Creating Usability with Motion).

Обратная связь

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

Обратная связь в интерфейсе. Изображение Kévin Gautier.

Функциональные изменения

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

Пример функциональных изменений в интерфейсе. Изображение Andrew Larin.

Иерархия элементов

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

Иерархия в интерфейсе. Изображение Isobar Greece.

Статус системы

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

Прогресс бар как статус системы. Изображение Joshua Thorley.

Ориентация в пространстве

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

Ориентация в приложении. Изображение с сайта www.dribbble.com.

Красивые детали

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

Анимации, которые вызывают эмоциональный отклик у пользователя. Изображение UI8.

Принципы анимации интерфейса

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

Линейная

Анимация без замедления и ускорения. Объекты в природе себя так не ведут, и движение кажется неестественным, поэтому настоятельно советуем ее не использовать. Команда Principle с нами абсолютно согласна и страдает  

Ease-in

Такая анимация начинается медленно и заканчивается ускорением. Из-за внезапного замедления может показаться непривычной. 

Ease-out

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

Ease-in-out

Соединение двух последних типов. Хорошо выглядит на коротких анимациях. 

Прыгающие и эластичные эффекты

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

Больше примеров на www.easings.net.

В заключение

Чтобы общение пользователей с интерфейсом приложения или сайта было естественным, не забывайте проектировать UI анимации. Они помогут создать дружелюбный интерфейс и привлекательные микровзаимодействия. Пользоваться вашим сайтом или приложением будет значительно приятнее.

Ресурсы: 
www.justinmind.com 
www.uxplanet.org 
www.yalantis.com