Анимация интерфейсов для разработчиков

Зачем анимировать интерфейс, как надо и как не следует.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Это было вкратце. А вот подробнее с примерами есть гайдлайны Material design, которые можно смело брать за пример:

Впервые статья опубликована на Medium: