Полное руководство по правильному использованию анимации в UX
В настоящее время трудно произвести впечатление или даже удивить анимацией интерфейса. Оно показывает взаимодействие между экранами, объясняет, как использовать приложение, или просто направляет внимание пользователя.
Изучая статьи об анимации, я обнаружил, что почти все они описывают только конкретные варианты использования или общие факты об анимации, но я не встретил ни одной статьи, в которой были бы четко и практически описаны все правила, касающиеся анимации интерфейсов. Что ж, в этой статье я не буду писать ничего нового, я просто хочу собрать все основные принципы и правила в одном месте, чтобы другим дизайнерам, которые хотят начать анимировать интерфейсы, не пришлось искать дополнительную информацию.
Продолжительность и скорость анимации
Когда элементы меняют свое состояние или положение, продолжительность анимации должна быть достаточно медленной, чтобы пользователи могли заметить изменения, но в то же время достаточно быстрой, чтобы не вызывать ожидания.
многочисленные исследования обнаружили, что оптимальная скорость анимации интерфейса составляет от 200 до 500 мс. Эти рисунки основаны на особых качествах человеческого мозга. Любая анимация короче 100 мс выполняется мгновенно и вообще не распознается. В то время как анимация длиной более 1 секунды создаст ощущение задержки и, следовательно, будет скучной для пользователя.
В руководстве Material Design для мобильных устройств также предлагается ограничить продолжительность анимации 200-300 мс. Что касается планшетов, продолжительность должна быть больше на 30% — около 400-450 мс. Причина проста: размер экрана больше, поэтому объекты преодолевают более длинный путь при смене положения. На носимых устройствах продолжительность должна быть соответственно на 30% короче — около 150-200 мс, потому что на меньшем экране расстояние для перемещения меньше.
Веб-анимация рассматривается по-другому. Поскольку мы привыкли к почти мгновенному открытию веб-страниц в браузере, мы ожидаем, что переход между различными состояниями также будет быстрым. Таким образом, продолжительность веб—переходов должна быть примерно в 2 раза короче, чем на мобильных устройствах - между 150-200 мс. В других случаях пользователь неизбежно подумает, что компьютер зависает или у него проблемы с подключением к Интернету.
Но. Забудьте об этих правилах, если вы создаете декоративную анимацию на своем сайте или пытаетесь привлечь внимание пользователя к определенным элементам. В этих случаях анимация может быть длиннее.
Вам нужно помнить, что независимо от платформы продолжительность анимации должна зависеть не только от пройденного расстояния, но и от размера объекта. Более мелкие элементы или анимация с небольшими изменениями должны двигаться быстрее. Соответственно, анимация с большими и сложными элементами выглядит лучше, когда она длится немного дольше.
Среди движущихся объектов одинакового размера первым останавливается объект, который прошел наименьшее расстояние.
Маленькие объекты по сравнению с большими объектами движутся медленнее, поскольку они делают большие смещения.
Когда объекты сталкиваются, энергия столкновения должна быть равномерно распределена между ними в соответствии с физическими законами. Итак, эффект отскока лучше исключить. Используйте его только в исключительных случаях, когда это имеет смысл.
Движение объектов должно быть четким и четким, поэтому не используйте motion blur (да, пользователи After Effects, не в этот раз). Этот эффект сложно воспроизвести даже на современных мобильных устройствах, и он вообще не используется в анимации интерфейса.
Элементы списка (новостные карточки, списки электронной почты и т. Д.) Должны иметь очень короткую задержку между появлением. Каждое появление нового элемента должно длиться от 20 до 25 мс. Медленное появление элементов может раздражать пользователя.
Ослабление
Ослабление помогает сделать движение объекта более естественным. Это один из основных принципов анимации, который подробно описан в книге "Иллюзия жизни: анимация Диснея", написанной двумя ключевыми аниматорами Disney — Олли Джонстоном и Фрэнком Томасом.
Чтобы анимация не выглядела механической и искусственной, объект должен двигаться с некоторым ускорением или замедлением — как и все живые объекты в физическом мире.
Линейное движение
Объекты, на которые не воздействует никакая физическая сила, движутся линейно, другими словами, с постоянной скоростью. И именно из-за этого они выглядят очень неестественно и искусственно для человеческого глаза.
Все приложения для анимации используют анимационные кривые. Я попытаюсь объяснить, как их читать и что они означают. Кривая показывает, как (y axis)меняется положение объекта за одни и те же промежутки времени (x axis). В текущем случае движение линейное, поэтому объект проходит одинаковое расстояние за одно и то же время.
Линейное движение можно использовать, например, только тогда, когда объект меняет свой цвет или прозрачность. Вообще говоря, мы можем использовать его для состояний, когда объект не меняет своего положения.
Кривая упрощения или ускорения
Мы можем видеть на кривой, что в начале положение объекта меняется медленно, а скорость постепенно увеличивается. Это означает, что объект движется с определенным ускорением.
Эта кривая должна использоваться, когда объекты вылетают из экрана на полной скорости. Это могут быть системные уведомления или просто карточки интерфейса. Но имейте в виду, что такой тип кривой следует использовать только тогда, когда объекты навсегда покидают экран, и мы не можем их отозвать или вернуть.
Кривая анимации помогает передать правильное настроение. На примере ниже мы видим, что продолжительность движения и расстояние для всех объектов одинаковы, но даже небольшие изменения кривой дают вам возможность влиять на настроение анимации.
И, конечно, изменяя кривые, вы можете перемещать объект, максимально приближенный к реальному миру.
Кривая облегчения или замедления
Это противоположно кривой ease-in, поэтому объект быстро преодолевает большое расстояние, а затем медленно снижает скорость, пока, наконец, не остановится.
Этот тип кривой следует использовать, когда элемент появляется на экране — он взлетает на экране на полной скорости, постепенно замедляется, пока полностью не остановится. Это также может быть применено к различным картам или объектам, которые появляются снаружи экрана.
Простота ввода-вывода или стандартная кривая
Эта кривая заставляет объекты вначале набирать скорость, а затем медленно сбрасывать ее до нуля. Этот тип движения наиболее часто используется в анимации интерфейса. Всякий раз, когда вы сомневаетесь, какой тип движения использовать в анимации, используйте стандартную кривую.
Согласно рекомендациям Material Design, лучше использовать асимметричную кривую, чтобы движение выглядело более естественным и реалистичным. Конец кривой должен быть более подчеркнут, чем ее начало, чтобы продолжительность ускорения была короче, чем замедления. В этом случае пользователь будет уделять больше внимания конечному движению элемента и, следовательно, его новому состоянию.
Ввод-вывод используется, когда объекты перемещаются из одной части экрана в другую. В таком случае анимация позволяет избежать привлекательного и драматического эффекта.
Тот же тип движения следует использовать, когда элемент исчезает с экрана, но пользователь может вернуть его на прежнее место в любое время. Среди прочего, это касается панели навигации.
Из этих примеров следует фундаментальное правило, которым пренебрегают многие новички — начальная анимация не равна конечной анимации. Как и в случае с навигационным ящиком — он появляется с кривой замедления и исчезает со стандартной кривой. Кроме того, согласно Google Material Design, время появления объекта должно быть больше, чтобы привлечь больше внимания.
Для cubic-bezier()описания кривых используется функция. Он называется кубическим, потому что основан на четырех точках. Первая точка с координатами 0;0(внизу слева) и последняя точка с координатами 1;1(вверху справа) уже определены на графике.
Исходя из этого, нам нужно описать только две точки на графике, которые задаются четырьмя аргументами функцииcubic-bezier(): первые два - координаты xи yпервой точки, вторые два - координаты xи yвторой точки.
Чтобы упростить вашу работу с кривыми, я предлагаю использовать упрощение сайтов.сеть и cubic-bezier.com . Первый содержит список наиболее часто используемых кривых, параметры которых вы можете скопировать в свой инструмент прототипирования. Второй источник дает вам возможность поиграть с различными параметрами кривой и сразу увидеть, как будут двигаться объекты.
Хореография в анимации интерфейсов
Как и в хореографии балета, основная идея заключается в том, чтобы направлять внимание пользователя в одном плавном направлении во время перехода из одного состояния в другое.
Существует два типа хореографии — равное и подчиненное взаимодействие.
Равное взаимодействие
Равное взаимодействие означает, что внешний вид всех объектов подчиняется одному конкретному правилу.
В этом случае внешний вид всех карточек воспринимается как единый поток, который направляет внимание пользователя в одном направлении, а именно сверху вниз. Если мы не будем следовать порядку, внимание пользователя будет рассеяно. Внешний вид всех элементов сразу также будет выглядеть плохо.
Что касается табличного представления, то здесь все немного сложнее. Здесь фокус пользователя должен быть направлен по диагонали, поэтому показывать элементы один за другим - плохая идея. Отображение каждого элемента по одному сделает анимацию чрезмерно длинной, а внимание пользователя будет зигзагообразным, что неправильно.
Подчиненное взаимодействие
Подчиненное взаимодействие означает, что у нас есть один центральный объект, который привлекает все внимание пользователя, а все остальные элементы подчинены ему. Этот тип анимации создает ощущение порядка и привлекает больше внимания к основному контенту.
В других случаях пользователю было бы очень сложно определить, за каким объектом следить, чтобы его внимание было рассеяно. Поэтому, если у вас есть несколько элементов, которые вы хотите анимировать, вам нужно четко определить последовательность их движения и анимировать как можно меньше объектов за один раз.
Согласно Material Design, когда движущиеся объекты непропорционально изменяют свои размеры, они должны двигаться по дуге, а не по прямой. Это помогает сделать движение более естественным. Под “непропорционально” я подразумеваю, что изменение высоты и ширины объекта путем увеличения / уменьшения осуществляется асимметрично, то есть с разной скоростью (например, квадратная карта превращается в прямоугольник).
Движение вдоль линии используется, когда объект пропорционально изменяет свой размер. Поскольку реализация такого движения намного проще, правилом непропорционального движения дуги часто пренебрегают. Глядя на реальные примеры приложений, вы увидите доминирование линейного движения.
Движение на кривой может быть достигнуто двумя способами: первый, называемый вертикальным внешним объектом, начинает двигаться горизонтально и заканчивается вертикальным движением; второй — Горизонтальный внешний объект начинает двигаться вертикально и заканчивается горизонтальным движением.
Траектория движения объекта по кривой должна совпадать с главной осью интерфейса прокрутки. Например, на следующем изображении мы можем прокручивать интерфейс вверх и вниз, и, соответственно, карта разворачивается вертикально — сначала вправо, а затем вниз. Обратное движение выполняется противоположным образом — то есть карта сначала поднимается вертикально, а в конечном итоге перемещается горизонтально.
Если траектории движущихся объектов пересекаются, они не могут перемещаться друг через друга. Объекты должны оставлять достаточно места для движения другого объекта, замедляя или ускоряя свою собственную скорость. Другой вариант — они просто отталкивают другие объекты. Почему это? Поскольку мы предполагаем, что все объекты в интерфейсе лежат в одной плоскости.
В другом случае движущийся объект может возвышаться над другими объектами. Но опять же никакого растворения или движения через другие объекты. Почему? Поскольку мы считаем, что элементы интерфейса ведут себя в соответствии с законами физики, а никакие твердые объекты в реальном мире на это не способны.
Выводы
Итак, если мы суммируем все вышеупомянутые правила и принципы, анимация в интерфейсе должна отражать движения, которые мы знаем из физического мира — трение, ускорение и т. Д. Имитируя поведение объектов из реального мира, мы можем создать последовательность, которая позволит пользователям понять, чего ожидать от интерфейса.
Если анимация построена правильно, то она ненавязчива и не отвлекает пользователей от их целей. Если это произойдет, вам нужно либо смягчить его, либо вообще удалить. Это означает, что анимация не должна замедлять пользователя или препятствовать выполнению задачи.
Но не забывайте, что анимация - это скорее искусство, чем наука, поэтому лучше экспериментировать и проверять свои решения на пользователях.
Last updated
