UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Полное руководство по правильному использованию анимации в UX
Редакція
Редакція

Опубліковано

Полное руководство по правильному использованию анимации в UX

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

Продолжительность и скорость анимации

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

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

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

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

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

Размер мобильных устройств влияет на продолжительность анимации

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

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

Большой экран компьютера = Медленная анимация? Ни в коем случае!

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

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

Маленькие объекты по сравнению с большими движутся медленнее, поскольку они выполняют большие перемещения.

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

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

Избегайте использования bounce эффекта, так как он отвлекает внимание

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

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

Элементы списка (новостные карточки, списки адресов электронной почты и т. д.) должны иметь очень короткую задержку между их появлением. Каждое появление нового элемента должно длиться от 20 до 25 мс. Более медленное появление элементов может раздражать пользователя.

Анимация для элементов списка должна длиться 20–25 мс.

Смягчение

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

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

Анимация с замедлением выглядит более естественной, по сравнению с линейной

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

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

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

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

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

Кривая замедления или ускорения

На кривой видно, что в начале положение объекта медленно изменяется, а скорость постепенно увеличивается. Это означает, что объект движется с определенным ускорением.

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

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

Кривая ускорения выброса карты за пределы экрана

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

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

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

Кривая ease-out или кривая замедления

Ее свойства противоположны функциям кривой easy-in, поэтому объект быстро преодолевает большие расстояния, а затем медленно снижает скорость до полной остановки.

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

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

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

Ease-in-out или стандартная кривая

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

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

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

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

Ease-in-out используется, когда объекты перемещаются из одной части экрана в другую. В таком случае анимация избегает концентрации внимания и драматического эффекта.

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

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

Панель навигации исчезает с экрана по стандартной кривой

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

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

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

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

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

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

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

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

Существует два типа хореографии - равное и подчиненное взаимодействие.

Равное взаимодействие

Равное взаимодействие означает, что внешний вид всех объектов подчиняется одному конкретному правилу.

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

Внимание пользователя следует обращать в одном направлении

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

Диагональное появление таблицы

Подчиненное взаимодействие

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

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

Стоит анимировать только один центральный объект, а все остальные будут ему подчиняться.

Согласно Material Design, когда движущиеся объекты меняют свой размер непропорционально, они должны двигаться по дуге, а не по прямой линии. Это помогает сделать движение более естественным. Под «непропорционально» я подразумеваю, что изменение высоты и ширины объекта путем увеличения/уменьшения выполняется асимметрично, то есть с разной скоростью (например, квадратная карточка превращается в прямоугольник).

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

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

Пропорциональное изменение размера выполняется по прямой

Движение по кривой может быть достигнуто двумя способами: первый называется Vertical out   - объект начинает двигаться горизонтально и заканчивает вертикальным движением; второй - Horizontal out - объект начинает двигаться вертикально и заканчивает горизонтальным движением.

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

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

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

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

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

Объекты могут подниматься над другими объектами, а затем двигаться

Делаем выводы

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

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

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


Перевод статьи Taras Skytskyi

Найстарші коментарі (0)