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

Анимация обратной связи

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

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

Анимация прогресса

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

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

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

Анимация загрузки

Это один из самых широко используемых типов мобильной анимации. Он может быть определен как подтип анимации прогресса, поскольку он информирует пользователя о том, что процесс загрузки активен. Существуют различные вариации, такие как loaders, preloaders, pull-to-refresh анимации.

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

Анимация для привлечения внимания

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

Этот набор взаимодействий для приложения Tasty Burger показывает анимацию изменения цены. Это добавляет жизни в процесс и делает его естественным.

Анимация перехода

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

Вот набор переходов в приложении Perfect Recipes: здесь пользователи настраивают свою базу рецептов в соответствии с их целями и диетическими ограничениями. Переход между картами целей поддерживаемых движением.

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

Маркетинговая анимация

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

Анимированные уведомления

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

Анимация прокрутки

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

 

Как использовать анимацию в мобильных приложения

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

Среди преимуществ анимации для мобильных приложений мы хотели бы упомянуть:

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

С другой стороны, среди недостатков дизайнеры должны учитывать:

• увеличение времени загрузки;
• отвлекающий фактор;
• трудоемкая техническая реализация.

Источник