обработка данных

Нажмите сюда, если долго загружается,
либо "ESC" - отмена
 
Заказ обратного звонка
Заказать звонок
Наш специалист свяжется с Вами и ответит на все вопросы
Обработка данных
Наш специалист свяжется с Вами и ответит на все вопросы.
OK

Как сделать хорошую UI-анимацию отличной

Источник: https://habrahabr.ru
Время чтения: ~6 мин
Как сделать хорошую UI-анимацию отличной
Статьи
5777
Источник: uxdesign.cc
В каждом приведённом примере рекомендаций по анимации микровзаимодействий в пользовательском интерфейсе рассмотрены два варианта анимаций. Первый вариант — хороший, второй, по мнению автора, просто отличный. Совершенствование анимаций идёт за счёт небольших изменений, которые, в итоге, позволяют значительно улучшить восприятие интерфейсов пользователями.

Анимации, о которых пойдёт речь, демонстрируют связь различных состояний интерфейса, указывают на взаимодействие между общими элементами, присутствующими в разных состояниях, ненавязчиво привлекают внимание пользователей к тому, что они должны обязательно заметить.
Сдвиг материалов во вкладках
Здесь и далее будут применяться анимированные иллюстрации, показывающие примеры хорошей (Good) и отличной (Great) анимации.
Как сделать хорошую UI-анимацию отличной
Слева старые материалы исчезают, а новые появляются. Справа можно наблюдать сдвиг содержимого вместе с вкладкой. Источник: uxdesign.cc
- Хорошая анимация демонстрирует исчезновение и появление материалов при переходе от одного состояния к другому.
- Отличная анимация показывает, благодаря переходу, связь состояний, создавая эффект движения материалов при смене состояний.

Занимаясь дизайном элементов, с которыми работает пользователь, вроде вкладок, или всплывающих меню, постарайтесь сделать так, чтобы расположение материалов, которые появляются при взаимодействии с этими элементами, было с ними связано. Такой подход позволит анимировать не только изменение видимости контента на экране в ответ, например, на щелчок по кнопке, но и изменение его позиции. Тут уместно будет вспомнить об интеграции в управление интерфейсом жеста скольжения (swipe), который позволяет пользователю совершенно естественным образом перемещаться между фрагментами данных.
Указание на связь общих элементов карточки
Как сделать хорошую UI-анимацию отличной
Слева при щелчке по карточке открывается новый экран, выезжающий вверх. Карточка справа расширяется и занимает отведённое ей пространство. Источник: uxdesign.cc
- Хорошая анимация использует переходы вроде сдвига влево или вверх для показа страницы, содержащей подробные сведения об элементе, по которому щёлкнул пользователь.
- Отличная анимация создаёт связь между двумя состояниями, анимируя общие элементы.

Анимируя переход между разными состояниями, обратите внимание на то, имеются ли в этих двух состояниях некие общие элементы. Если такие элементы есть, их рекомендуется связать друг с другом. Благодаря InVision Studio, при создании перехода Motion, компоненты, общие для двух экранов, автоматически связываются. Это значительно облегчает прототипирование анимаций.

Взгляните на материал Motion Manifesto для того, чтобы узнать о том, какие анимации можно использовать в описанной ситуации. Так, вышеприведённый пример применяет комбинацию рассмотренных в этом материале принципов Masking, Transformation, Parenting, и Easing.
Эффект водопада
Как сделать хорошую UI-анимацию отличной
Карточки слева возникают на экране, выезжая снизу вверх и плавно появляясь. Карточки справа анимированы похожим образом, но перед возникновением каждой из них предусмотрена небольшая задержка. Источник: uxdesign.cc
- Хорошая анимация предусматривает изменение позиции и прозрачности материалов при появлении их на экране.
- Отличная анимация выделяет появление каждой группы или элемента.

Для того чтобы достичь «эффекта водопада», попытайтесь сделать так, чтобы каждый фрагмент содержимого появлялся с небольшой задержкой. То же самое касается и появления групп элементов. Поддерживайте одну и ту же динамику анимации и её длительность для того, чтобы происходящее воспринималось как единообразный процесс. Не стоит применять этот эффект к каждому маленькому элементу — анимируйте группы контента. Сделайте анимацию быстрой и чёткой. Google рекомендует, чтобы задержка между появлением элементов не превышала 20 мс.
Эффект выталкивания ненужного содержимого с экрана
Как сделать хорошую UI-анимацию отличной
Анимация слева демонстрирует перекрытие нужным содержимым содержимого ненужного. Анимация справа сдвигает ненужное содержимое по мере увеличения размеров элемента, интересующего пользователя. Источник: uxdesign.cc
- Хорошая анимация — это перемещение элемента и сохранение контекста.
- Отличная анимация демонстрирует воздействие элемента, интересующего пользователя, на окружающие его элементы по мере его изменения.

Проектируя анимации, постарайтесь, чтобы элементы контента «знали» о том, что их окружает, «отталкивая» или «притягивая» другие элементы. Вот дополнительные примеры.
Меню, учитывающее место расположения кнопки, вызывающей его
Как сделать хорошую UI-анимацию отличной
Справа показано, как меню выезжает со стороны вызывающей его кнопки. Слева меню возникает из самой кнопки. Источник: uxdesign.cc
- Хорошая анимация — это когда меню выезжает со стороны кнопки, которая его вызывает.
- Отличная анимация меню означает его возникновение из вызывающего его элемента, в частности, из точки касания этого элемента.
Творческое использование кнопок
Как сделать хорошую UI-анимацию отличной
Слева, после нажатия на кнопку, ниже появляется текст, сообщающий о том, что происходит. Справа кнопка используется как контейнер, она меняет вид и сама становится индикатором, указывающим на ход действия, вызываемого по нажатию. Источник: uxdesign.cc
- Хорошее взаимодействие — это показ сведений о результате нажатия кнопки около неё.
- Отличное взаимодействие использует саму кнопку, которая меняет вид и информирует пользователя о результатах или о ходе действия, вызванного этой кнопкой.

Попытайтесь использовать кнопку в роли контейнера для того, чтобы сообщать пользователям о том, что произошло после нажатия на эту кнопку. Например, кнопку, выполняющую до этого роль элемента, призывающего пользователя к действию, можно заменить вращающимся индикатором или анимацией процесса загрузки или прогресса выполнения какой-то другой операции. Анимировать, например, можно лишь фон кнопки. Как именно поступить — решать вам, главная идея тут заключается в использовании пространства, с которым пользователь уже взаимодействует. Ещё лучше, когда цвет кнопки и текст, размещаемый на ней, используют для подтверждения успешности некоей операции.
Ненавязчивое привлечение внимания пользователя
Как сделать хорошую UI-анимацию отличной
Слева элемент сделан заметным благодаря его цвету и расположению на странице. В примере справа для привлечения внимания пользователя используется лёгкая анимация. Источник: uxdesign.cc
- Хороший дизайн использует цвет, размер и позицию для выделения важного действия, которое должен заметить пользователь, или с которым он должен взаимодействовать.
- Отличный дизайн, для привлечения внимания пользователя, предусматривает применение ненавязчивой анимации.

Когда пользователю нужно выполнить что-то важное, попытайтесь анимировать соответствующий элемент для привлечения внимания к нему. Начните с лёгкой анимации и увеличивайте её интенсивность (изменение размера, цвета, скорости) в зависимости от того, насколько важно ожидаемое действие. Используйте этот подход только в исключительных случаях. Частое использование подобной анимации делает её менее заметной и раздражает пользователей.
Итоги
Надеюсь, приведённые в этом материале примеры помогут вам в принятии правильных решений при анимировании интерфейсов. Могу предположить, что благодаря новым инструментам для создания анимаций и прототипирования, вроде InVision Studio, уже очень скоро мы войдём в нечто вроде «эпохи возрождения» креативных способов взаимодействия с пользователем. Пожалуй, главное, что стоит помнить, применяя анимацию, заключается в том, что это — большая сила, и использовать её нужно ответственно.

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