Улучшить взаимодействие с интерфейсом с помощью анимаций

Практические советы и примеры доработки дизайна.

Материал дизайнера и сооснователя Carbon Health Пабло Стэнли. Перевод подготовлен Николаем Гелларом.

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

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

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

Все взаимодействия были сделаны с использованием ранней версии InVision Studio. Скачать исходные файлы можно здесь.

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

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

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

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

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

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

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

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

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

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

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

#дизайн