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

в 10:52, , рубрики: анимация, Блог компании RUVDS.com, интерфейсы, Компьютерная анимация, пользовательский интерфейс, разработка

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

image


Анимации, о которых пойдёт речь, демонстрируют связь различных состояний интерфейса, указывают на взаимодействие между общими элементами, присутствующими в разных состояниях, ненавязчиво привлекают внимание пользователей к тому, что они должны обязательно заметить. В ходе работы автор статьи следовал идеям из руководств Material Motion, Animation Principles и The UX in Motion Manifesto. Примеры были созданы с использованием InVision Studio. Загрузить файлы с исходным кодом этих примеров можно здесь.

Сдвиг материалов во вкладках

Здесь и далее будут применяться анимированные иллюстрации, показывающие примеры хорошей (Good) и отличной (Great) анимации.

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

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

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

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

Указание на связь общих элементов карточки

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

Слева при щелчке по карточке открывается новый экран, выезжающий вверх. Карточка справа расширяется и занимает отведённое ей пространство

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

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

Взгляните на материал Motion Manifesto для того, чтобы узнать о том, какие анимации можно использовать в описанной ситуации. Так, вышеприведённый пример применяет комбинацию рассмотренных в этом материале принципов Masking, Transformation, Parenting, и Easing.

Эффект водопада

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

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

  • Хорошая анимация предусматривает изменение позиции и прозрачности материалов при появлении их на экране.
  • Отличная анимация выделяет появление каждой группы или элемента.

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

Дополнительные примеры вы можете найти здесь.

Эффект выталкивания ненужного содержимого с экрана

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

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

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

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

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

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

Справа показано, как меню выезжает со стороны вызывающей его кнопки. Слева меню возникает из самой кнопки

  • Хорошая анимация — это когда меню выезжает со стороны кнопки, которая его вызывает.
  • Отличная анимация меню означает его возникновение из вызывающего его элемента, в частности, из точки касания этого элемента.

Творческое использование кнопок

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

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

  • Хорошее взаимодействие — это показ сведений о результате нажатия кнопки около неё.
  • Отличное взаимодействие использует саму кнопку, которая меняет вид и информирует пользователя о результатах или о ходе действия, вызванного этой кнопкой.

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

Ненавязчивое привлечение внимания пользователя

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

Слева элемент сделан заметным благодаря его цвету и расположению на странице. В примере справа для привлечения внимания пользователя используется лёгкая анимация

  • Хороший дизайн использует цвет, размер и позицию для выделения важного действия, которое должен заметить пользователь, или с которым он должен взаимодействовать.
  • Отличный дизайн, для привлечения внимания пользователя, предусматривает применение ненавязчивой анимации.

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

Итоги

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

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

Уважаемые читатели! Как вы анимируете элементы пользовательских интерфейсов?

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

Автор: ru_vds

Источник

Поделиться

* - обязательные к заполнению поля