Анимация интерфейса используется не только в мобильных приложениях, но и на сайтах, а также в веб-сервисах и программном обеспечении. Но на эту тему есть много фишек и особенностей, о которых неизвестно тем, кто ранее не сталкивался с созданием полноценного UI/UX-интерфейса.

О некоторых элементах грамотной анимации интерфейсов вы узнаете из этой статьи.

Нужно ли применять анимацию и как это улучшает юзабилити

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

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

10 принципов классной анимации интерфейса

Первые 4 принципа классной анимации относятся к таймингу:

1. Плавность (Easing).

2. Смещение.

3. Задержка (Offset & Delay).

Визуальная составляющая может выглядеть очень плохо, если движения элементов не будут плавными. Психологически человек лучше воспринимает именно плавные движения с равномерной скоростью. Этот эффект активно использует компания Disney в своих мультфильмах («Slow In and Slow Out»). В таких сценариях эффекты кажутся более живыми, естественными и привлекательными. 

Следующие два принципа можно объединить между собой. Смещение и задержка выполняются в стиле «Follow Through and Overlapping Action», когда разные элементы интерфейса по-разному перемещаются и с небольшим смещением. Это нейтрализует топорность и банальность. Этот принцип очень важен, если нужно выделить какую-то кнопку или другой элемент. Ведь не могут стационарные блоки появляться с той же анимацией, что и кнопки действия. Это противоречит здравому смыслу.

Следующие 3 принципа относятся к непрерывности:

1. Связи и влияние.
2. Трансформация.
3. Изменение значений.

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

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

Изменение значений применяется в интерфейсе для повышения интриги и информирования пользователей. Сюда относят числовой отчет к началу чего-либо (например, отчет от 10 до 0 или визуально уменьшающуюся шкалу). Этот принцип может применяться и для других целей. Например, в фитнес-трекере, в играх для отображения достижений и прочее. 

Следующие 4 принципа анимации интерфейса:

1. Маскирование.
2. Слои.
3. Клонирование.
4. Затемнение.

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

Слои же помогают пользователям совмещать несколько элементов интерфейса одновременно. Это экономит пространство.

Слои чем-то напоминают эффект клонирования. Это когда из одного визуального элемента появляется еще один. Подобное использует компания Apple в интерфейсе WatchOS. 

Завершающим элементом является затемнение, которое тоже знакомо многим пользователям. С его помощью можно выделить или наоборот делать контент менее заметным, чтобы подчеркнуть важность другого контента на странице.

На самом деле в моушен дизайне очень много интересных фишек, которые предстоит еще изучать тем, кто будет пробовать свои силы в UI/UX-дизайне.