Подсказки анимации в UI

Подсказки UI анимации

Практические рекомендации по улучшению вашего UI.

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

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

Чтобы создать эти анимации, я следил за рекомендациями Material Motion, принципов анимации IBM и The UX in Motion Manifesto.

Создайте контент вкладок.

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

  • Хорошая анимация уменьшает содержание и выход из одного состояния в другое.
  • Большая анимация демонстрирует непрерывность в переходе путем перемещения содержимого между состояниями.

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

 

Подключите общие элементы карты.

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

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

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

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

 

Используйте каскадный эффект в своем контенте.

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

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

Чтобы выполнить эффект водопада, попробуйте применить задержки к каждой части или группе содержимого. Сохраняйте одинаковое облегчение и продолжительность, поэтому он чувствует себя последовательным. Не каскадируйте каждый маленький элемент, хотя-анимируйте группы контента. Держите анимацию быстрой и быстрой. Google рекомендует начинать каждый элемент не более чем на 20 мс друг от друга. Ознакомьтесь с принципом хореографии в Material Motion, чтобы увидеть больше примеров.

 

Сделайте контент нажатием других элементов в сторону.

Анимация слева анимируется поверх другого содержимого. Анимация справа выталкивает контент, когда он растет.

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

Сделайте элементы в своем содержании осведомленными о своем окружении. Это означает, что контент привлекает или отталкивает элементы вокруг него. Для получения дополнительных примеров ознакомьтесь с принципом Aware motion от Material Design.

 

Сделать меню в контексте.

Меню слева летеет снизу. Меню справа расширилось от действия, которое его создало.

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

 

Используйте кнопки для отображения разных состояний.

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

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

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

 

Приведи внимание к чему-то важному.

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

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

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

 

Вывод

Я надеюсь, что эти примеры помогут вам принять правильные решения при добавлении анимаций в ваши взаимодействия. Благодаря новым средствам анимации и прототипов, таким как InVision’s Studio, я предсказываю, что мы скоро начнем видеть ренессанс творческих взаимодействий. Мы просто должны помнить, чтобы использовать эту новую сверхдержаву ответственно.

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

Удачной анимации!

 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *