- PVSM.RU - https://www.pvsm.ru -
В материале, перевод которого мы сегодня публикуем, дизайнер Пабло Стэнли предлагает несколько рекомендаций по анимации микровзаимодействий в пользовательском интерфейсе. В каждом приведённом здесь примере рассмотрены два варианта анимаций. Первый вариант — хороший, второй, по мнению автора, просто отличный. Совершенствование анимаций идёт за счёт небольших изменений, которые, в итоге, позволяют значительно улучшить восприятие интерфейсов пользователями.
Анимации, о которых пойдёт речь, демонстрируют связь различных состояний интерфейса, указывают на взаимодействие между общими элементами, присутствующими в разных состояниях, ненавязчиво привлекают внимание пользователей к тому, что они должны обязательно заметить. В ходе работы автор статьи следовал идеям из руководств Material Motion [1], Animation Principles [2] и The UX in Motion Manifesto [3]. Примеры были созданы с использованием InVision Studio [4]. Загрузить файлы с исходным кодом этих примеров можно здесь [5].
Здесь и далее будут применяться анимированные иллюстрации, показывающие примеры хорошей (Good) и отличной (Great) анимации.
Слева старые материалы исчезают, а новые появляются. Справа можно наблюдать сдвиг содержимого вместе с вкладкой
Занимаясь дизайном элементов, с которыми работает пользователь, вроде вкладок, или всплывающих меню, постарайтесь сделать так, чтобы расположение материалов, которые появляются при взаимодействии с этими элементами, было с ними связано. Такой подход позволит анимировать не только изменение видимости контента на экране в ответ, например, на щелчок по кнопке, но и изменение его позиции. Тут уместно будет вспомнить об интеграции в управление интерфейсом жеста скольжения (swipe), который позволяет пользователю совершенно естественным образом перемещаться между фрагментами данных.
Слева при щелчке по карточке открывается новый экран, выезжающий вверх. Карточка справа расширяется и занимает отведённое ей пространство
Анимируя переход между разными состояниями, обратите внимание на то, имеются ли в этих двух состояниях некие общие элементы. Если такие элементы есть, их рекомендуется связать друг с другом. Благодаря InVision Studio, при создании перехода Motion, компоненты, общие для двух экранов, автоматически связываются. Это значительно облегчает прототипирование анимаций.
Взгляните на материал Motion Manifesto [3] для того, чтобы узнать о том, какие анимации можно использовать в описанной ситуации. Так, вышеприведённый пример применяет комбинацию рассмотренных в этом материале принципов Masking, Transformation, Parenting, и Easing.
Карточки слева возникают на экране, выезжая снизу вверх и плавно появляясь. Карточки справа анимированы похожим образом, но перед возникновением каждой из них предусмотрена небольшая задержка
Для того чтобы достичь «эффекта водопада», попытайтесь сделать так, чтобы каждый фрагмент содержимого появлялся с небольшой задержкой. То же самое касается и появления групп элементов. Поддерживайте одну и ту же динамику анимации и её длительность для того, чтобы происходящее воспринималось как единообразный процесс. Не стоит применять этот эффект к каждому маленькому элементу — анимируйте группы контента. Сделайте анимацию быстрой и чёткой. Google рекомендует, чтобы задержка между появлением элементов не превышала 20 мс.
Дополнительные примеры вы можете найти здесь [6].
Анимация слева демонстрирует перекрытие нужным содержимым содержимого ненужного. Анимация справа сдвигает ненужное содержимое по мере увеличения размеров элемента, интересующего пользователя
Проектируя анимации, постарайтесь, чтобы элементы контента «знали» о том, что их окружает, «отталкивая» или «притягивая» другие элементы. Вот [7] дополнительные примеры.
Справа показано, как меню выезжает со стороны вызывающей его кнопки. Слева меню возникает из самой кнопки
Слева, после нажатия на кнопку, ниже неё появляется текст, сообщающий пользователю о том, что происходит. Справа кнопка используется как контейнер, она меняет вид и сама становится индикатором, указывающим на ход действия, вызываемого по нажатию на эту кнопку
Попытайтесь использовать кнопку в роли контейнера для того, чтобы сообщать пользователям о том, что произошло после нажатия на эту кнопку. Например, кнопку, выполняющую до этого роль элемента, призывающего пользователя к действию, можно заменить вращающимся индикатором или анимацией процесса загрузки или прогресса выполнения какой-то другой операции. Анимировать, например, можно лишь фон кнопки. Как именно поступить — решать вам, главная идея тут заключается в использовании пространства, с которым пользователь уже взаимодействует. Ещё лучше, когда цвет кнопки и текст, размещаемый на ней, используют для подтверждения успешности некоей операции.
Слева элемент сделан заметным благодаря его цвету и расположению на странице. В примере справа для привлечения внимания пользователя используется лёгкая анимация
Когда пользователю нужно выполнить что-то важное, попытайтесь анимировать соответствующий элемент для привлечения внимания к нему. Начните с лёгкой анимации и увеличивайте её интенсивность (изменение размера, цвета, скорости) в зависимости от того, насколько важно ожидаемое действие. Используйте этот подход только в исключительных случаях. Частое использование подобной анимации делает её менее заметной и раздражает пользователей.
Надеюсь, приведённые в этом материале примеры помогут вам в принятии правильных решений при анимировании интерфейсов. Могу предположить, что благодаря новым инструментам для создания анимаций и прототипирования, вроде InVision Studio, уже очень скоро мы войдём в нечто вроде «эпохи возрождения» креативных способов взаимодействия с пользователем. Пожалуй, главное, что стоит помнить, применяя анимацию, заключается в том, что это — большая сила, и использовать её нужно ответственно.
Предлагаю применять анимацию для пояснения изменений состояний, для привлечения внимания к необходимым действиям, для указания на взаимодействие между элементами, и для того, чтобы делать интерфейсы более интересными и запоминающимися.
Уважаемые читатели! Как вы анимируете элементы пользовательских интерфейсов?
Автор: ru_vds
Источник [8]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/razrabotka/275133
Ссылки в тексте:
[1] Material Motion: https://material.io/guidelines/motion/material-motion.html
[2] Animation Principles: https://www.ibm.com/design/language/experience/animation
[3] The UX in Motion Manifesto: https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc
[4] InVision Studio: https://www.invisionapp.com/studio
[5] здесь: https://www.dropbox.com/sh/qfwficfun4vagv6/AAADpQyoZ5y_o8KnCnxOSqiUa?dl=0
[6] здесь: https://material.io/guidelines/motion/choreography.html#choreography-creation
[7] Вот: https://material.io/guidelines/motion/material-motion.html#material-motion-how-does-material-move
[8] Источник: https://habrahabr.ru/post/351054/?utm_campaign=351054
Нажмите здесь для печати.