Вы читаете перевод статьи “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). Справа использются те же анимации, но каждая следующая карточка появляется с небольшой задержкой.
- Хорошая анимация: при появлении контента на экране используется эффект движения и постепенного проявления (анимации slide и fade in).
- Отличная анимация: элементы (или группы элементов) появляются по очереди.
Чтобы добиться эффекта водопада, попробуйте установить время задержки для каждого элемента (или группы элементов). Чтобы анимация выглядела согласовано, элементы должны появляться равномерно и с одинаковой скоростью. Не стоит применять эффект каскада к каждому элементу — лучше анимируйте содержимое группами. Анимация должна быть быстрой и энергичной. Google рекомендует устанавливать временные промежутки между элементами не более 20мс. Изучите принцип хореографии в Material Motion — там вы найдете больше примеров.
Контент должен вытеснять остальные элементы с экрана
Слева карточка появляется поверх контента. Справа карточка “вырастает” и выталкивает остальные элементы с экрана.
- Хорошая анимация: движение и отображение элемента в контексте.
- Отличная анимация: с появлением анимации изменяются окружающие элементы на странице.
При настройке анимаций необходимо учитывать контекст содержимого: когда состояние одного элемента меняется, остальные должны либо притягиваться к нему, либо отталкиваться. Больше примеров можно найти в руководстве Material Design (см. принцип Aware)
Меню должно появляться в контексте
Меню на картинке слева влетает снизу. Меню на картинке справа разворачивается прямо из кнопки, по нажатию на которую оно появляется.
- Хорошая анимация: меню появляется со стороны кнопки, которая его открывает.
- Отличная анимация: меню появляется прямо из кнопки, постепенно вырастая до размера экрана.
Используйте кнопки, чтобы рассказать о состоянии системы
На рисунке слева под кнопкой появляется текст — так пользователь узнает об изменении состояния. На рисунке справа сама кнопка показывает изменение состояния.
- Хорошее взаимодействие: комментарии по состоянию системы появляются рядом с кнопкой.
- Отличное взаимодействие: сама кнопка иллюстрирует все возможные состояния.
Попробуйте использовать кнопку как инструмент визуальной обратной связи. К примеру, призыв к действию может смениться иконкой загрузки. Или можно добавить анимированную шкалу прогресса. Идея в том, чтобы использовать для обратной связи тот элемент, с которым пользователь уже взаимодействует — а варианты реализации могут быть разными. Дополнительные очки тем, кто поиграет с текстом и цветом кнопки, чтобы сообщить еще и об успешном завершении операции.
Обратите внимание пользователя на то, что важно
На примере слева кнопка выделяется за счет цвета и расположения. На рисунке справа внимание пользователя привлекает небольшая анимация.
- Хороший дизайн: важные элементы интерфейса выделяются за счет цвета, размера и расположения.
- Отличный дизайн: при помощи анимаций ненавязчиво привлекаем внимание пользователей к важным элементам.
Если вы хотите добиться от пользователя какого-то действия, то элемент, отвечающий за это действие, можно выделить при помощи анимации. В зависимости от важности действия, можно регулировать интенсивность анимации (изменение размера, цвета или скорости). Анимации следует использовать только для важных действий, поскольку чем больше вы пользуетесь анимациями для привлечения внимания, там слабее их эффект… и тем сильнее они бесят пользователей 😱
Заключение
Надеюсь, что благодаря этим примерам вы будете использовать анимации в интерфейсе более осознанно. Судя по новым инструментам для анимирования и прототипирования (вроде Studio от InVision), в ближайшем будущем можно ожидать эпохи возрождения творческих взаимодействий. Нужно только относиться к этой новой суперсиле ответственно.
Давайте при помощи анимаций рассказывать пользователям об изменениях в состоянии системы, устанавливать связи между элементами и создавать уникальные продукты “с характером”. Эти принципы помогут превратить хорошие анимации в отличные.
Удачи с анимашками!
Ола, амигос. Я Пабло Стенли, дизайнер и сооснователь Carbon Health.
Я автор серии комиксов под названием The Design Team и я много пишу о дизайне в Twitter. Также можете зайти на мой YouTube канал, Sketch Together, где вы найдете тонны тьюториалов по дизайну.
Спасибо что прочитали!