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

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

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

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

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

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

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

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

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

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

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

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

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

Смягчение

Функция “Ease” помогает сделать движение объекта более естественным. Это один из важнейших принципов анимации, который подробно описан в книге «Иллюзия жизни: Диснеевская анимация», написанной двумя ключевыми аниматорами Disney - Олли Джонстоном и Фрэнком Томасом.

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

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

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

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

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

Ease-in или кривая ускорения

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

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

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

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

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 и y второй точки.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Выводы

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

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

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

Источник: Medium