4 способа использования функциональной анимации

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


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

Почему анимация работает


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

Что такое функциональная анимация?


Функциональная анимация — это тонкая анимация, встроенная в пользовательский интерфейс, как часть функциональности этого дизайна. Она имеет очень четкие и логичные цели:
1. Уменьшить когнитивную нагрузку
2. Привлечь внимание к изменениям, уменьшив эффект «баннерной слепоты»
3. Настроить отклик посетителя на сайте
В ориентированном на человека дизайне, где все внимание фокусируется на потребностях пользователя, интерфейс должен быть интуитивным, отзывчивым и человеческим. Функциональная анимация помогает вам достичь этих целей.

Как функциональная анимация улучшает UX


Наш опыт и впечатление от приложения или сайта формируются сочетанием факторов, при этом взаимодействие играет фундаментальную роль. Добавление движения к нашему дизайну может быть значимым и функциональным, когда мы находим правильные обстоятельства для этого. Хорошо продуманная и проверенная функциональная анимация имеет потенциал для выполнения нескольких функций, в том числе:
1. Визуальная обратная связь
Хороший дизайн взаимодействия обеспечивает обратную связь. Обратная связь признает, что система получила действие пользователя и демонстрирует результат взаимодействия, было ли оно успешным или нет.
Кнопка обратной связи
Анимация в этой группе должна быть очень тонкой и должна быть спроектирована оперативно. Чтобы быть предсказуемым для пользователя, цифровой интерфейс должен действовать одинаково.

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

Вы также можете усилить действия, которые выполняет пользователь. Например, когда пользователь нажимает кнопку «Отправить», кратковременно появляется счетчик, прежде чем приложение покажет состояние успеха. Анимация галочки заставляет пользователя чувствовать, что процесс завершен успешно.

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

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

3. Отражение статуса системы
Одной из оригинальных идей Якоба Нильсена является демонстрация статуса системы в текущий момент. Нильсен называет его одним из самых важных принципов в дизайне пользовательского интерфейса. Для посетителей очень важно знать и понимать их текущий контекст в системе в любой момент времени.
Индикаторы прогресса
Процесс загрузки и загрузки данных — отличные возможности для функциональной анимации. Анимированные загрузочные бары задают ожидания того, как быстро действие будет обработано. Анимация может быть полезна в случае сбоев. Даже приятное уведомление, такое как сбой при загрузке данных, должно быть доставлено красивым способом.

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

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

Пользовательский компьютер требует безупречного UX, а анимация в потоке оказывает огромное влияние на то, как пользователи, впервые использующие приложение, будут взаимодействовать с ним. Анимация дает вам неограниченную свободу передавать что угодно, независимо от того, насколько сложным или серьезным является предмет, развлекательным способом.
Визуальные подсказки
Анимация может предложить некоторые полезные визуальные подсказки. Объяснительная анимация чаще всего видна при первом открытии страницы, и движение показывает, как предполагается использовать определенные элементы страницы. Этот тип анимации можно найти в играх, которые часто очень хорошо справляются с прогрессивным раскрытием, раскрывая игровую механику, когда вы погружаетесь дальше в игру. Такие подсказки вызываются только тогда, когда пользователь достигает соответствующей точки в своем опыте.
Заключение
Анимация — мощный инструмент, когда он используется правильно. Нам нужно принять движение с самого начала и думать об этом как о естественной части нашего дизайна, потому что дизайн — это не просто визуальное представление. Стив Джобс сказал о дизайне: это не просто то, на что оно похоже и как оно выглядит. Дизайн — это то, как это работает.
По материалам webdesignerdepot.com
17 июля 2017, 17:34    Ivan Web-дизайн 0    7 0

Комментарии (2)

  1. Максим 09 сентября 2017, 12:40 # 0
    Возможно ли реализовать подобную анимацию с pixli?
    1. Ivan 14 сентября 2017, 15:40 # 0
      Да, некоторую вполне возможно. Если не хватает функций триггера и родной анимации, используйте виджет HTML-код. Скачивайте нужные библиотеки и адаптируйте.

      Вы должны авторизоваться, чтобы оставлять комментарии.