8 ключевых типов анимации для мобильных устройств

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

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

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

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

Анимация в приложениях: разбиваем на типы по функциям

1. Визуальная обратная связь

Визуальная обратная связь является основой анимации в дизайне UI и UX и показывает пользователю, что приложение реагирует на его действия. Вспомните любые кнопочные устройства. Например, пульт от телевизора. При нажатии кнопок переключения телеканалов мы видим, как на экране меняется программа и понимаем, что всё работает должным образом. Так происходит и в отношении всего остального. Мы подсознательно ожидаем получить реакцию от любого объекта или предмета, в отношении которого осуществляем какое-либо действие.

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

2. Навигация

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

3. Функция изменения

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

4. Мониторинг состояния приложения

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

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

Ещё один пример анимации процессов приложении, широко известный как “pull down to refresh” или “потяни вниз для обновления”. Этот приём активно применяется в новостных приложениях, чтобы пользователь всегда видел, что его лента новостей пополняется новыми публикациями.

5. Структурирование информации

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

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

6. Подсказка

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

Следующий пример хорошо отображает анимацию этого типа:

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

7. Гид по приложению

Некоторые приложения имеют очень сложную структуру. Для того чтобы не отпугнуть подписчиков, необходимо еще на старте объяснить им, как всё устроено. Длинные тексты и инструкции только усложняют восприятие. Лучшим решением в данном случае будет анимация. Всего за несколько секунд пользователь получает краткий ликбез по использованию приложения. Обычно анимационный гид по приложению открывается при первом запуске. Однако в случае необходимости у пользователей всегда должен быть доступ к нему.

8. Кастомная анимация

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

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

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

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

Важные моменты: подводим итоги

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

8 основных типов анимации в целом работают по этому принципу и отличаются своими достоинствами:

• Визуальная обратная связь – создаёт ощущение физического воздействия на объект
• Навигация – облегчает перемещение по приложению
• Функция изменения – акцентирует внимание пользователя на происходящих изменениях (положение элементов, разворот подробной карточки и т.п.)
• Мониторинг состояния приложения – отображает ход процессов в приложении
• Структурирование информации – показывает иерархию элементов и связи между ними
• Подсказка – визуально подсказывает, как использовать элементы приложения
• Гид по приложению – учит, как ориентироваться в многообразии функций приложения со сложной структурой
• Кастомная анимация – создает уникальный пользовательский опыт и помогает узнаваемости бренда

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