Давайте рассмотрим несколько примеров анимаций интерфейса от хороших до великолепных. Благодаря небольшой доработке, вы можете улучшить взаимодействие со своим интерфейсом при помощи анимаций.
Перечисленные ниже взаимодействия показывают последовательность состояний, обозначают взаимосвязь между общими элементами и обращают внимание пользователей на то, что они должны заметить и сделать.
Чтобы создать эти анимации, я следовал рекомендациям 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, я предсказываю, что скоро начнется период Ренессанса креативных взаимодействий. Мы просто должны помнить, что не нужно ими злоупотреблять.
Давайте применять анимацию, чтобы объяснять изменения состояний, обращать внимание на необходимые действия, определять отношения между элементами и добавлять немного веселья и характера в наши продукты. Следуя этим принципам, мы преобразуем наши анимации из хороших в великолепные.
Удачи с анимированием!
Автор статьи — Pablo Stanley, дизайнер и сооснователь Carbon Health.
Он написал серию комиксов под названием The Design Team и публикует связанные с дизайном посты в Twitter. Вы можете также заценить его YouTube канал Sketch Together, где вы найдете множество видео-уроков по дизайну.
Спасибо за прочтение.
Нет комментариев