Полное руководство по использованию анимации в UX
Перевод статьи https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9, автор оригинальной статьи — https://uxdesign.cc/@skytskyi
Сегодня сложно впечатлить или даже удивить анимацией в интерфейсе. Анимация показывает взаимодействие между экранами, показывает как использовать приложение или просто направляет внимание пользователя. Исследуя статьи об анимации, я обнаружил, что почти все они описывают только определённые варианты использования или общие факты об анимации, но я не встречал ни одной статьи, где бы все правила, касающиеся анимации интерфейсов, были бы чётко описаны. Что ж, в этой статье я не буду писать ничего нового, я просто хочу собрать все основные принципы и правила в одном месте, чтобы другим дизайнерам, которые хотят анимировать интерфейсы, не приходилось искать дополнительную информацию.
Продолжительность и скорость анимации
Когда элементы меняют свое состояние или положение, продолжительность анимации должна быть достаточно медленной, чтобы дать пользователям возможность заметить изменение, но в то же время достаточно быстрой, чтобы не вызывать ожидания.
Многочисленные исследования показали, что оптимальная скорость анимации интерфейса составляет от 200 до 500 мс. Эти цифры основаны на конкретных качествах человеческого мозга. Любая анимация короче 100 мс является мгновенной и не распознается вообще. Принимая во внимание, что анимация продолжительностью более 1 секунды передаст ощущение задержки и, таким образом, будет скучной для пользователя.
На мобильных устройствах, гайдлайны Materia Design также предлагают ограничить продолжительность анимации до 200–300 мс. Что касается планшетов, то продолжительность должна быть больше на 30% — около 400–450 мс. Причина проста: размер экрана больше, поэтому объекты преодолевают более длинный путь при изменении положения. На носимых устройствах (смарт-часы)продолжительность должна быть соответственно на 30% короче — около 150–200 мс, потому что на меньшем экране расстояние для перемещения короче.
В веб-анимации немного по-другому. Так как мы привыкли к почти мгновенному открытию веб-страниц в браузере, мы ожидаем также быстрого перехода между различными состояниями. Таким образом, продолжительность веб-переходов должна длиться примерно в 2 раза короче, чем на мобильных устройствах — от 150 до 200 мс. Иначе пользователь неизбежно будет думать, что компьютер зависает или имеет проблемы с подключением к Интернету.
Но! Забудьте об этих правилах, если вы создаете декоративную анимацию на своем сайте или пытаетесь привлечь внимание пользователя к определенным элементам. В этих случаях анимация может быть длиннее.
Необходимо помнить, что независимо от платформы продолжительность анимации должна зависеть не только от пройденного расстояния, но и от размера объекта. Меньшие элементы или анимация с небольшими изменениями должны двигаться быстрее. Соответственно, анимация с большими и сложными элементами выглядит лучше, когда она длится немного дольше.
Среди движущихся объектов одинакового размера первым останавливаются объекты, прошедшие кратчайшее расстояние.
Маленькие объекты по сравнению с большими объектами движутся медленнее, поскольку они имеют большие смещения.
Когда объекты сталкиваются, энергия столкновения должна быть равномерно распределена между ними согласно законам физики. Таким образом, лучше исключить bounce эффект. Используйте его только в исключительных случаях, когда это имеет смысл.
Движение объектов должно быть четким и резким, поэтому не используйте размытие в движении (да, пользователи After Effects, не в этот раз). Трудно воспроизвести эффект даже на современных мобильных устройствах, и он вообще не используется в интерфейсной анимации.
Элементы списка (новостные карточки, списки адресов электронной почты и т. Д.) Должны иметь очень короткую задержку между их появлением. Каждое появление нового элемента должно длиться от 20 до 25 мс. Более медленное появление элементов может раздражать пользователя.
Плавность
Плавность помогает сделать движение объекта более естественным. Это один из основных принципов анимации, который подробно описан в книге «Иллюзия жизни: анимация Диснея», написанной двумя ключевыми аниматорами Диснея — Олли Джонстоном и Фрэнком Томасом. (Неплохие примеры скорости анимации можно посмотреть здесь )
Чтобы анимация не выглядела механической и искусственной, объект должен двигаться с некоторым ускорением или замедлением — как все живые объекты в физическом мире.
Линейное движение
Объекты, на которые не воздействует какая-либо физическая сила, движутся линейно, другими словами, с постоянной скоростью. И именно из-за этого они выглядят очень неестественно и искусственно для человеческого глаза.
Все приложения для анимации используют анимационные кривые. Я постараюсь объяснить, как их читать и что они значат. Кривая показывает, как позиция объекта (ось Y) изменяется в течение тех же временных интервалов (ось X). В текущем случае движение является линейным, поэтому объект проходит одно и то же расстояние в одно и то же время.
Линейное движение можно использовать, например, только когда объект меняет свой цвет или прозрачность. Вообще говоря, мы можем использовать его для состояний, когда объект не меняет свою позицию.
Кривая замедления или ускорения
На кривой видно, что в начале положение объекта медленно меняется, а скорость постепенно увеличивается. Это означает, что объект движется с определенным ускорением.
Эта кривая должна использоваться, когда объекты вылетают из экрана на полной скорости. Это могут быть системные уведомления или просто карты интерфейса. Но имейте в виду, что такой тип кривой следует использовать только тогда, когда объекты покидают экран навсегда, и мы не можем их вспомнить или вернуть.
Кривая анимации помогает выразить правильное настроение. В приведенном ниже примере мы видим, что продолжительность перемещения и расстояние для всех объектов одинаковы, но даже небольшие изменения в кривой дают вам возможность влиять на настроение анимации.
И, конечно же, изменяя кривые, вы можете перемещать объект как можно ближе к реальному миру.
Кривая замедления
Это противоположность кривой ускорения, поэтому объект быстро преодолевает большие расстояния, а затем медленно снижает скорость до полной остановки
Этот тип кривой следует использовать, когда элемент появляется на экране — он всплывает на экране на полной скорости, постепенно замедляется до полной остановки. Это также может быть применено к различным картам или объектам, которые появляются снаружи экрана.
Кривая ускорения-замедления (стандартная)
Эта кривая заставляет объекты вначале набирать скорость, а затем медленно возвращать ее к нулю. Этот тип движения наиболее часто используется в интерфейсной анимации. Всякий раз, когда вы сомневаетесь, какой тип движения использовать в анимации, используйте стандартную кривую.
Согласно Руководству Material Design, лучше использовать асимметричную кривую, чтобы движение выглядело более естественным и реалистичным. Конец кривой должен быть более подчеркнутым, чем ее начало, чтобы продолжительность ускорения была меньше, чем продолжительность замедления. В этом случае пользователь будет уделять больше внимания окончательному перемещению элемента и, следовательно, его новому состоянию.
Кривая ускорения-замедления используется, когда объекты перемещаются из одной части экрана в другую. В таком случае анимация избегает эффектного и драматического эффекта.
Тот же тип движения должен использоваться, когда элемент исчезает с экрана, но пользователь может в любое время вернуть его на прежнее место. Это касается например навигационного меню.
Из этих примеров следует фундаментальное правило, которым пренебрегают многие начинающие — начальная анимация не равна конечной анимации. Как и в случае с навигационным drawer меню — он отображается с кривой замедления и исчезает со стандартной кривой. Кроме того, согласно Google Material Design, время появления объекта должно быть больше, чтобы привлечь больше внимания.
Функция cubic-bezier() используется для описания кривых. Она называется кубической, потому что основана на четырех точках. Первая точка с координатами 0; 0 (внизу слева), а последняя с координатами 1; 1 (вверху справа) уже определены на графике.
Исходя из этого нам нужно описать только две точки на графе, которые задаются четырьмя аргументами функции cubic-bezier(): первые две — координаты x и y первой точки, вторые две — координаты x и у второй точки.
Для упрощения работы с кривыми я предлагаю использовать сайты easings.net и cubic-bezier.com. Первая содержит список наиболее часто используемых кривых, параметры которых вы можете скопировать в инструмент создания прототипов. Второй источник дает вам возможность поиграть с различными параметрами кривой и сразу увидеть, как будут двигаться объекты.
Хореография в анимации интерфейсов
Как и в балетной хореографии, основная идея состоит в том, чтобы направлять внимание пользователя в одном плавном направлении во время перехода из одного состояния в другое.
Существует два типа хореографии — равноправное и подчиненное взаимодействие.
Равное взаимодействие
Равное взаимодействие означает, что внешний вид всех объектов подчиняется одному конкретному правилу.
В этом случае внешний вид всех карт воспринимается как единый поток, который направляет внимание пользователя в одном направлении, а именно сверху вниз. Если мы не будем следовать порядку, внимание пользователя будет рассеяно. Внешний вид всех элементов сразу выглядел бы также плохо.
Что касается табличного представления, это немного сложнее. Здесь фокус пользователя должен быть направлен по диагонали, поэтому показ элементов по одному — плохая идея. Раскрытие каждого элемента по одному сделает анимацию чрезмерно долгой, а внимание пользователя будет зигзагообразным, что неправильно.
Подчиненное взаимодействие
Подчиненное взаимодействие означает, что у нас есть один центральный объект, который привлекает все внимание пользователя, а все остальные элементы подчиняются ему. Этот тип анимации дает ощущение порядка и привлекает больше внимания к основному содержанию.
В других случаях пользователю будет очень трудно узнать, за каким объектом следует следовать, чтобы его внимание не было рассеяно. Поэтому, если у вас есть несколько элементов, которые вы хотите анимировать, вам нужно четко определить последовательность их движения и анимировать как можно меньше объектов за один раз.
Стоит анимировать только один центральный объект, а все остальные подчиняются ему. В противном случае пользователь не будет знать, за каким объектом следовать
Согласно Material Design, когда движущиеся объекты изменяют свой размер непропорционально, они должны двигаться по дуге, а не по прямой линии. Это помогает сделать движение более естественным. Под «непропорционально» я подразумеваю, что изменение высоты и ширины объекта путем увеличения / уменьшения выполняется асимметрично, то есть с разной скоростью (например, квадратная карта превращается в прямоугольник).
Движение по линии используется, когда объект пропорционально меняет свой размер. Поскольку осуществление такого движения намного проще, правилом диспропорционального движения дуги часто пренебрегают. Глядя на реальные примеры приложений, вы увидите доминирование линейного движения.
Движение по кривой может быть достигнуто двумя способами: первый называется вертикальным выходом — объект начинает двигаться горизонтально и заканчивается вертикальным движением; второй — горизонтальным выходом — объект начинает двигаться вертикально и заканчивается горизонтальным движением.
Траектория движения объекта по кривой должна совпадать с главной осью интерфейса прокрутки. Например, на следующем изображении мы можем прокрутить интерфейс вверх и вниз, и, соответственно, карта разворачивается вертикально, сначала вправо, а затем вниз. Обратное движение выполняется противоположным образом — карта сначала поднимается вертикально, а заканчивается горизонтально.
Если пути движущихся объектов пересекаются друг с другом, они не могут двигаться друг через друга. Объекты должны оставлять достаточно места для движения другого объекта, замедляя или ускоряя собственную скорость. Другой вариант — они просто отталкивают другие объекты. Почему так? Поскольку мы предполагаем, что все объекты в интерфейсе лежат в одной плоскости.
В другом случае движущийся объект может подниматься над другими объектами. Но опять-таки нет растворения или движения через другие объекты. Почему? Поскольку мы считаем, что элементы интерфейса ведут себя в соответствии с законами физики, и никакие твердые объекты в реальном мире не способны на это.
Выводы
Итак, если мы суммируем все вышеупомянутые правила и принципы, анимация в интерфейсе должна отражать движения, которые мы знаем из физического мира — трение, ускорение и т. Д. Имитируя поведение объектов из реального мира, мы можем создать последовательность, которая позволит пользователям понять, чего ожидать от интерфейса.
Если анимация построена правильно, то она ненавязчива и не отвлекает пользователей от их целей.
Но не забывайте, что анимация — это больше искусство, чем наука, поэтому лучше экспериментировать и проверять свои решения на пользователях.
Список полезных ссылок
