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

В этой статье речь пойдёт о нескольких элементах, где дизайнеры могут испечь анимацию для улучшения UX.

Навигация

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

Анимированные элементы

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

Гамбургер

Анимированная кнопка Гамбургер усиливает ощущение прямой манипуляции и делает переход к новому состоянию (экран с опциями навигации верхнего уровня) более очевидным для пользователей.

Переходы состояний

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

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

Ввод данных

Ошибки ввода

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

Установка пароля

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

Текущее состояние системы

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

Для быстрых операций (менее 10 секунд) рекомендуется использовать бесконечные загрузчики.

Для более длительных операций (более 10 секунд) рекомендуется использовать анимированные индикаторы состояния.

Обновление контента

Pull-to-refresh анимация

Анимация Pull-to-refresh обеспечивает мгновенную обратную связь о действии обновления контента, инициированном пользователем. Она также может сделать время ожидания более приятным.

Образование и руководство

Анимированные подсказки

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

Восторг

Нравится не нравится

Хорошо продуманные анимированные UI-эффекты для кнопки «лайк».

Оригинал статьи