Анимация интерфейсов: зачем анимировать, как нужно и как не нужно

Саша Тихонов, российский дизайнер, арт-директор и со-основатель студии Flyphant, в блоге «Дизайн кабак» написал зачем анимировать интерфейс, как надо работать с анимацией и как не надо.

Последнее время разработчики сайтов и мобильных приложений анимируют интерфейсы без помощи дизайнеров. И это хорошо! Но такая работа делается просто «чтобы было симпатичнее», или потому что «менеджер/клиент попросил».

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

Эта статья и для первого, и для второго типа разработчиков.

Зачем анимировать

Мозг воспринимает зрительную информацию постоянно, без перерывов. Даже если случаются перерывы, то картинки между ними все равно пытаются быть собраны в единый видео ряд. Простой пример перерыва зрительной информации — моргание. Когда вы моргаете, то видите как минимум 3 кадра, которые последовательно не связаны:

1. До моргания
2. Во время моргания (просто темнота)
3. Сразу после моргания

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

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

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

Если же при нажатии на кнопку, следующий экран интерфейса не моментально появился, а выехал из-за края дисплея, то мозгу не нужно напрягаться — ему показали, где этот экран прятался и как оттуда вылез.

То же касается всплывающих окон, выпадающих менюшек, исчезающих кнопок и пр.

Зачем анимировать интерфейс? Чтобы пользователь проще воспринимал информацию и меньше напрягал мозг.

Как анимировать

В природе ничто не движется линейно — с постоянной скоростью от начала и до конца движения. Даже планеты вокруг звезд обращаются с ускорением (обычно, отрицательным). Каждое движение начинается с ускорения из нуля метров в секунду и заканчивается замедлением в ноль метров в секунду. Такое нелинейное движение является самым естественным и воспринимается, как само собой разумеющееся.

Часто в интерфейсах встречается линейная анимация (с постоянной скоростью). Естественным такие движения не назовешь.

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

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

Для Material design есть гайдлайны, которые наглядно объясняют, как надо анимировать и как не надо. Эти гайдлайны подходят для анимации интерфейсов любой платформы.

Как анимировать интерфейс? Без линейной анимации.