Посмотрите на мир вокруг. Движения в природе не линейны. Мы понимаем, как происходят взаимодействия, как трансформируются объекты, узнаем физические характеристики наблюдая за движением объектов.
Теперь посмотрим на интерфейсы. Элементы абстрактны, у них нет физических характеристик. Чтобы привнести жизнь интерфейс сайта или приложения, дизайнеры используют анимации.
Качественные анимации не только «оживляют» интерфейс, но и четко указывают на состояние системы, отношения объектов на экране. В тоже время плохо спроектированные переходы могут только запутать пользователей, усложнить интерфейс. Поэтому для каждой анимации нужно четко понимать ее цели и как они влияют на иерархию.
Красиво, но слишком сложно для настоящего интерфейса приложения:
Пример излишне сложной анимации. Изображение с сайта 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
Появилась идея для проекта? Мы хотим узнать о том, что важно для вас
Связаться