Как правильно использовать анимации в интерфейсе

Полное руководство по правилам и принципам использования анимаций в UX-дизайне
2 481

Вы читаете перевод статьи “The ultimate guide to proper use of animation in UX”. Над переводом работали: Ольга Жолудова и Ринат Шайхутдинов.

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

Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.

Длительность и скорость анимации

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

Отрегулируйте длительность анимации. Не перебарщивайте со скоростью, но и не заставляйте пользователей зевать.

В ходе множества исследований была выявлена оптимальная скорость интерфейсной анимации: от 200 до 500 мс. Эти цифры основаны на определенных характеристиках человеческого мозга. Любая анимация короче 100 мс — слишком стремительна и не воспринимается глазом. А вот если анимация длиннее чем 1 секунда, возникает ощущение задержки — и пользователю может стать скучно.

Эффекты по наведению, выцветание, масштабирование: очень быстро — 100 мс, быстро — 200 мс; Крупные движения, сложные сглаживания: нормально — 300 мс, медленно — 400 мс, очень медленно — 500 мс.

Согласно руководству по материальному дизайну, для мобильных устройств рекомендуется устанавливать длительность анимации 200-300 мс. На планшетах длительность должна быть на 30% больше — 400-450 мс. Причина проста: размер устройства больше, поэтому каждый объект при смене положения проходит более долгий путь. На носибельных устройствах длительность будет, соответственно, на 30% меньше — около 150-200 мс.

Длительность анимации зависит от размера экрана.

Веб-анимации — другое дело. Мы привыкли, что страницы в браузере открываются практически мгновенно, поэтому и переходы между состояниями должны быть быстрыми. В среднем длительность переходов в веб должна быть примерно в 2 раза короче, чем на мобильных устройствах — от 150 до 200 мс. В противном случае пользователь подумает, что заглючил компьютер или отключился интернет.

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

Большой компьютерный экран = медленная анимация? А вот и нет!

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

Если двигается несколько объектов одного размера, первым должен остановиться тот объект, который прошел наименьшее расстояние.

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

Длительность анимации может различаться в зависимости от размера объекта и расстояния, которое он проходит.

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


Эффект “отпружинивания” отвлекает пользователя, поэтому не стоит лишний раз его использовать.

Движение объектов должно быть четким и понятным — поэтому не стоит использовать размытие (да, любители After Effects, не в этот раз). Размытие сложно воспроизвести даже на современных мобильных устройствах, а в интерфейсной анимации оно вообще не используется.


Не используйте в своих анимациях эффект размытия.

Элементы списка (карточки с новостями, списки писем и т.д.) должны появляться друг за другом достаточно быстро — через 20-25 мс каждый. Если список открывается дольше, это может раздражать пользователя.


Элементы списка должны появляться с интервалом 20-25 мс.

Сглаживание

Эффект сглаживания (easing) делает движение объекта более естественным. Это один из основополагающих принципов анимации, который подробно описан в книге “Иллюзия жизни: Анимация Диснея”, написанной двумя ведущими аниматорами Диснея: Олли Джонстоном и Фрэнком Томасом.

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

Анимация с эффектом сглаживания выглядит более естественно, чем линейная.

Линейное движение

Когда на объект не действует никакая физическая сила, он движется линейно — то есть с постоянной скоростью. Из-за этого он может показаться нам ненастоящим, искусственным.

Все приложения для создания анимаций используют кривые. Я попробую объяснить, что это такое и как их читать. Кривая показывает как положение объекта (ось y) меняется во времени (ось x). В примере ниже движение линейно — то есть за отрезок времени объект всегда проходит одно и то же расстояние.

Кривая линейного движения

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

Плавное ускорение (Ease-in)

Если мы применим кривую, объект в начале движения может двигаться медленно, со временем набирая скорость. В итоге получается плавное ускорение.

Кривая ускорения

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

Кривая ускорения для смахивания карточки с экрана

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

И, конечно, при помощи кривых можно сделать движения объектов максимально реалистичными.

Та же длительность, то же расстояние, но какое разное настроение!

Плавное замедление (Ease-out)

Это обратный эффект: объект быстро покрывает большое расстояние и постепенно снижает скорость до полной остановки.

Кривая замедления

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

Кривая замедления отлично подходит для естественного появления.

Ускорение-замедление или стандартная кривая

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

Стандартная кривая

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


Обратите внимание на разницу между симметричной и асимметричной кривой.

Эффект ускорения-замедления используют при движении объектов из одной части экрана в другую. Такая анимация не перетягивает на себя внимание пользователя.

Движение карточки на экране и соответствующая асимметричная кривая.

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


Панель меню исчезает с экрана по стандартной кривой.

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


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

Для описания кривых используется функция cubic-bezier(). Она называется кубической (cubic), потому что строится на четырех точках: причем первая точка — 0:0 (левый нижний угол) и вторая точка — 1:1 (правый верхний угол) уже определены на графике.

На основании этого, нам нужно описать только две точки графика, которые задаются четырьмя переменными функции cubic-bezier(): первые две — это координаты x и y первой точки, а последние две — координаты x и y второй точки.

Предлагаю вам воспользоваться сайтами easings.net и cubic-bezier.com — это значитально упростит работу с кривыми. На первом сайте есть список самых распространенных кривых, параметры которых можно скопировать и вставить в ваш инструмент для прототипирования. А второй сайт дает возможность поиграть с разными параметрами кривой и сразу видеть, как будет двигаться объект.

Разные типы кривых и их параметры для функции cubic-bezier ()

Хореография анимации в интерфейсе

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

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

Равнозначные объекты

При таком подходе перемещения всех объектов подчиняются единому правилу.

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

Нужно плавно направлять внимание пользователя за счет упорядоченного появления элементов.

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

Появление ячеек таблицы по диагонали.

Один ведущий объект

При таком подходе есть один центральный, ведущий объект, который привлекает внимание пользователя —а остальные объекты уходят на второй план. Этот тип анимации упорядочивает контент и расставляет акценты. 

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

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

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

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

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

Пропорциональное изменение размера можно осуществлять по прямой линии.

 

Движение по изогнутой траектории может идти в двух направлениях: по вертикали — когда объект начинает двигаться горизонтально, а заканчивает вертикально, и по горизонтали — когда объект начинает двигаться вертикально, а заканчивает горизонтально.

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

Направление разворачивания/сворачивания карточки должно соответствовать ориентации интерфейса.

Если объект при движении пересекает другие объекты, он не может проходить их насквозь. Другие объекты должны уступить дорогу ведущему объекту: ускориться или замедлиться. Еще один вариант: ведущий объект может расталкивать остальные. Зачем это нужно? Потому что мы принимаем как данность, что все объекты в интерфейсе лежат в одной плоскости.


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

Еще вариант: ведущий объект может приподняться над остальными. Но, опять же, не допускайте сквозного движения. Почему? Да потому, что объекты в интерфейсе должны соблюдать законы физики.


Объект может подняться над плоскостью интерфейса и переместиться в нужное место.

Выводы

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

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

Но и не забывайте, что анимация — скорее искусство, чем наука. Экспериментируйте и пробуйте ваши решения на пользователях.


Если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.

Нас можно найти в Facebook: Ольга Жолудова и Ринат Шайхутдинов.


Мобильное приложение «Заметки о психике» | Mental Notes

Подкидывает идеи, как привлечь, удержать и направить внимание пользователя.

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

Скачать приложение в Appstore →

Посты в категории Анимация

Анимация в интерфейсах: 12 принципов UX-анимации

Ринат Шайхутдинов

26 сентября 2018

Посты в категории Анимация

Как сделать хорошую UI-анимацию отличной

Ольга Жолудова

26 июля 2018

Посты в категории Анимация

Как улучшить UX за счет анимаций

Ольга Жолудова

19 октября 2017