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

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

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

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

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

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

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

Продолжительность анимации, которую вы должны соблюдать в своих интерфейсах

 

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

 

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

 

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

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

 

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

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

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

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

 

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

 

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

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

 

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

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

 

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

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

Смягчение 

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

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

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

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

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

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

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

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

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

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

 

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

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

 

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

 

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

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

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

 

Следите за обновлениями в блоге,продолжние следует..