Missed the action at this year's Chrome Dev Summit? Catch up with our playlist on YouTube. Watch now.

Асимметричное время анимации

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

TL;DR

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

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

Например, когда пользователь выводит на экран боковую панель навигации, ее следует открыть как можно быстрее (продолжительность должна составлять примерно 100 мс). Когда же пользователь закрывает меню, уводить это представление с экрана можно немного медленнее, скажем, приблизительно за 300 мс.

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

Отсюда следует общее железное правило:

  • Анимация пользовательского интерфейса, связанная с такими действиями пользователей, как переключение представлений или отображение элемента, должна быть быстрой при выводе на экран (короткая продолжительность) и медленной при уводе с экрана (более длительная продолжительность).
  • Анимация пользовательского интерфейса, связанная кодом приложения, например, вывод на экран сообщения об ошибках или модальных представлений, должна быть медленной при выводе на экран (более длительная продолжительность), но быстрой при уводе с экрана (короткая продолжительность).