Как и зачем анимировать интерфейсы.

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


Изображение с сайта www.giphy.com.

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

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

Как нельзя и как следует анимировать интерфейсы

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

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

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

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

В зависимости от целей, мы можем выделить несколько типов анимаций. 

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

Обратная связь на действие пользователя
Обратная связь в интерфейсе. Изображение с сайта www.useyourinterface.com.

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

Функциональные изменения в интерфейсе приложения
Пример функциональных изменений в интерфейсе. Изображение с сайта www.useyourinterface.com.

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

Иерархия элементов и график
Иерархия в интерфейсе. Изображение с сайта www.uimovement.com.

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

Прогресс бар при отправке сообщения
Прогресс бар как статус системы. Изображение с сайта www.uimovement.com.

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

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

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

Такие анимации нравятся пользователям
Анимации, которые вызывают эмоциональный отклик у пользователя, любят использовать дизайнеры Tumblr. Изображение с сайта www.useyourinterface.com.

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

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

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


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

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

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

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

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

В заключение

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

Забота
Изображение с сайта www.giphy.com.

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