UI-анимации: все, что вам нужно знать + примеры

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

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

Что такое UI-анимация?

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

UI-анимации и микровзаимодействия

Как мы уже подробно рассказывали в этой статье, микровзаимодействия происходят в 4 этапа:

• Триггер: действие пользователя или изменение состояния системы
• Условия: системные правила, которые определяют, какое микровзаимодействие запущено
• Обратная связь: визуальные, звуковые, тактильные изменения в пользовательском интерфейсе
• Режим: что происходит после завершения микровзаимодействия —  изменение состояния или UI

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

Почему UI-анимации играют важную роль?

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

Например, анимированный индикатор выполнения притягивает взгляд, чтобы вы увидели, какую часть процесса регистрации вам еще предстоит пройти. Альтернативой этому решению могла бы стать надпись: “Завершено 20% процесса регистрации”.

Только представьте, насколько загроможденным и запутанным станет интерфейс, если текст заменит UI-анимацию!

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

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

Виды UI-анимации

Существует 5 основных типов анимации:

• Загрузка и прогресс
• Изменение состояния
• Навигация
• Микровзаимодействия
• Брендинг

1. Загрузка и прогресс

Такие анимации показывают пользователям, где они находятся или что происходит.

• Загрузка: демонстрация того, что система работает. Например, троббер (круглый индикатор) или индикатор с процентами показывают пользователю, что в настоящий момент идет загрузка страницы или происходит обработка информации. Подобные анимации критически важны, поскольку в противном случае люди могли бы подумать, что сайт (или продукт) перестал работать и просто покинули бы интерфейс, не дождавшись окончания загрузки!
• Прогресс: анимации, которые показывают пользователям, на каком этапе пути они находятся и сколько действий им еще предстоит выполнить. К примеру, индикатор выполнения в верхней части страницы оформления заказа на сайте электронной коммерции обновляется каждый раз, когда клиент приближается к окончанию процесса.

2. Изменение состояния

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

3. Структура и навигация

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

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

4. Микровзаимодействия

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

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

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

5. Брендинг

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

Примеры UI-анимаций

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

1. Анимация на сайте электронной коммерции, которая дает пользователям ощущение контроля над ситуацией

Дизайнер-фрилансер Dannniel использует UI-анимации, чтобы дать пользователям ощущение контроля при совершении покупок онлайн. Он разработал интерфейс магазина обуви, в котором люди могут найти основную информацию о каждом товаре (например, цену или отзывы).

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

Почему эта анимация делает интерфейс лучше?

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

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

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

2. Приложение для учета расходов и доходов, разработанное с учетом особенностей восприятия цвета

Дизайн-агентство Tubik разработало для своих клиентов сотни анимированных интерфейсов. Это приложение для учета расходов и доходов точно поможет пользователям достичь финансовых целей. Оно отличается от аналогов за счет грамотного применения анимации и цвета.

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

Почему эта анимация делает интерфейс лучше?

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

Tubik упрощает этот процесс с помощью следующих дизайн-решений:

• UI-анимации геймифицируют планирование бюджета, за счет чего опыт управления личными финансами в приложении становится более приятным. Цвета и анимации помогают снизить уровень тревожности, связав нежелательные действия (составление бюджета) с чем-то забавным (видеоигры). Шансы на то, что люди будут использовать такое приложение намного выше.
• В приложении все расходы и доходы отражены наглядно с помощью цветов и графиков — это не просто набор непонятных цифр. Такой подход позволяет гораздо проще усваивать информацию, и соответственно, эффективнее управлять своими финансами. По крайней мере, вы точно будете лучше осведомлены о движении денежных средств.

3. Анимации, которые делают неудачи не такими обидными

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

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

Почему эта анимация делает интерфейс лучше?

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

4. UI-анимации для улучшения настроения

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

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

Почему эта анимация делает интерфейс лучше?

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

Заключение

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