Анимация мобильного приложения

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

Анимация приложения — это дополнительная услуга, которая не входит в стандартный пакет, а выполняется по запросу.

На этапе прототипирования размещается возможный моушн: пока макет будет статическим. Далее — консультации по анимации: где размещать подвижные элементы, сколько секунд отвести на движение и т. д. В процессе UI-дизайна делаются макеты экранов с gif-анимацией.

Назначение анимации

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

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

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

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

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

Анимация в действии
На ощупь анимация красивее, чем на словах: вы прикасаетесь к экрану и он реагирует светом и движением. Процесс сам по себе приятный: кажется, что твои руки творят чудеса. Это и есть эффект полного взаимодействия человека и приложения.
С анимацией приложение «умеет» такие действия: ускорение и последовательность движения; движение по траектории; имитация материала (выражение «твёрдости» объекта по интенсивности его сжатия); фокусирование на объекте; плавное скольжение; складывание и сворачивание элементов; развёртывание страниц; масштабирование; поворот; параллакс-эффект (один элемент “наезжает” на другой); появление/исчезновение; уменьшение прозрачности.
Согласие со стандартным поведением ОС
Сложность внедрения анимации тоже зависит от платформы. К примеру, анимацию в iOS делать проще, а смотрится дизайн круто благодаря Retina-дисплею и аппаратным возможностям.
Для каждой мобильной платформы существуют гайдлайны по разработке и добавлению анимации. Это сделано для того, чтобы все сторонние дизайнерские решения хорошо вписались в систему и смотрелись нативно (то есть, в одном визуальном пространстве с дизайном операционной системы).
Понятность действий
Анимация подтверждает, что приложение реагирует на внешнюю команду.
При этом пользователь должен понять, какое действие происходит и что к нему привело. Например, нажимая на кнопку, человек видит, как с неё выезжает меню. Это значит, что он вызвал меню именно этой кнопки, а не другой. Приложение реагирует на касание и эстетично выдаёт результат.