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

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

Преимущества анимации

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

В идеале, анимация внутри приложения должна:

  • Давать четкий отклик в ответ на действия пользователя
  • Демонстрировать статус системы пользователю
  • Направлять и учить пользователя, как нужно взаимодействовать с интерфейсом.

Визуальный отклик

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

Кнопки и регуляторы

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

От точки ввода исходит радиальная визуальная реакция. Источник: Google material design
От точки ввода исходит радиальная визуальная реакция. Источник: Google material design

Выводы

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

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

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

Анимация в реальном времени

Хорошо знакомая анимация для этой группы — «потянуть, чтобы обновить», которая инициирует процесс обновления контента на мобильных устройствах.

потянуть, чтобы обновить

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

анимация очень полезна при знакомстве пользователя с приложением

Вывод

Обеспечьте мониторинг статуса системы в реальном времени. Реализуйте для пользователя возможность быстро понимать текущий статус и отвечать на вопрос «Где я?», пока он находится в приложении.

Переходы со смыслом

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

Пользователь выделяет элемент в списке или карточку и раскрывает ее детали
Пользователь выделяет элемент в списке или карточку и раскрывает ее детали. Источник: Material Design.

Визуально соединяйте переходы

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

Передвижение определенного элемента добавляет ясности переходу.
Передвижение определенного элемента добавляет ясности переходу. Источник: Dribbble.

Иерархическая синхронность

Анимация поддерживает иерархию информации, обозначая, какой контент наиболее важен, с помощью создания ориентира для зрения пользователя.

Избегайте разрозненных переходов, как в примере ниже.

Все элементы появляются в один и тот же момент, без обозначения самого важного элемента.
Все элементы появляются в один и тот же момент, без обозначения самого важного элемента. Источник: Material Design
Элементы перехода должны анимироваться плавно, как в примере ниже.

Элементы перехода должны анимироваться плавно

Постоянство анимации

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

Избегайте беспорядочных движений, как на этом примере, потому что это очень отвлекает:

Непостоянное и беспорядочное движение.
Непостоянное и беспорядочное движение. Источник: Material Design.

Выводы

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

Приятные детали

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

Смена иконок с одного изображения на другое
Смена иконок с одного изображения на другое помогает одной кнопке принимать разные значения в разных случаях. Источник: Material Design.

Веселье

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

Брокколи на пргулке
Брокколи на пргулке. Очень забавная анимация от Jason Booth

Анимация ради анимации

Анимация ради анимации — неудачный вариант (почти всегда). Когда анимация не несет никакой функциональной нагрузки, обычно она смотрится странно и очень раздражает. Также помните о длительности — будет ли раздражать анимация, проигрывая 100-й раз, или по-прежнему будет казаться ненавязчивой?

Анимация ради анимации - неудачный вариант
Источник: Rachel Nabors

Вывод

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

Заключение

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

Спасибо, что были с нами!