Моушн-дизайн помогает сделать интерфейсы выразительными и простыми в использовании. Несмотря на большой потенциал, он, пожалуй, наименее понятая из всех дисциплин дизайна. Это может быть связано с тем, что он является одним из новичков в семействе дизайна интерфейсов. Если визуальный дизайн и дизайн взаимодействия восходят к ранним графическим интерфейсам, то моушн-дизайн вынужден был ждать, пока современное оборудование начнет плавно рендерить анимацию. Частичное совпадение моушн-дизайна и традиционной анимации также вносит неразбериху. Можно потратить целую жизнь на освоение 12 принципов анимации Диснея, означает ли это, что моушен-дизайн интерфейсов также сложен? Люди часто говорят мне, что сложно проектировать движение или, что выбор правильных значений неоднозначен. Я утверждаю, что в наиболее важных областях интерфейса, моушен-дизайн может и должен быть простым.

С чего начать

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

Паттерны перехода

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

  1. Переходы на основе контейнера
  2. Переходы без контейнера.

Переходы на основе контейнера

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

  1. Анимируйте контейнер с помощью стандартной плавности Material design (это означает, что он быстро ускоряется, а затем мягко замедляется). В этом примере размеры контейнера и угловые радиусы анимированы от круглой кнопки до прямоугольника, который заполняет экран.

Анимация material design

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

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

нажатие на иконку навигационного ящика в верхнем левом углу приведет к перемещению контейнера слева направо.

Если контейнер входит в границы экрана, он исчезает и масштабируется. Вместо анимирования с масштаба 0%, он начинается с 95%, чтобы избежать чрезмерного внимания к переходу. Масштабная анимация использует плавное замедление Material design, то есть начинается на максимальной скорости и мягко замедляется. Чтобы выйти, контейнер просто затухает без масштабирования. Анимация выхода должна быть более тонкой, чем анимация входа, чтобы сосредоточить внимание на новом контенте.

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

Переходы без контейнера

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

  1. Стартовая композиция исчезает затухая, тогда как конечная композиция медленно появляется.
  2. Когда конечная композиция появляется, она также тонко масштабируется с помощью плавного замедления Material design. Опять же, масштаб применяется только к появляющейся композиции, чтобы выделить новый контент в отличии от старого.

Анимация замедлилась, чтобы проиллюстрировать, как переходы без использования контейнера затухают и масштабируются
Анимация замедлилась, чтобы проиллюстрировать, как переходы без использования контейнера затухают и масштабируются
Если исходные и конечные композиции имеют четкую пространственную или последовательную связь, совместное движение может быть использовано для ее усиления. Например, при навигации по пошаговому компоненту стартовые и конечные композиции имеют вертикальное скользящее движение по мере их постепенного затухания. Это усиливает их вертикальную компоновку. При нажатии кнопки «Next» в процессе обучения, композиции имеют горизонтальное скользящее движение. Перемещение слева направо усиливает осознание последовательности. Совместное движение использует стандартную плавность Material design.
Анимация замедлилась, чтобы проиллюстрировать совместное движение по вертикали и горизонтали
Анимация замедлилась, чтобы проиллюстрировать совместное движение по вертикали и горизонтали

Лучше практики

Сохраняйте простоту

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

Анимация замедлилась, чтобы показать разные стили движения
Анимация замедлилась, чтобы показать разные стили движения

Выберите правильную продолжительность и плавность

Навигационные переходы должны иметь длительность, которая определяет приоритетность функциональности. Они должны быть быстрыми, но не настолько быстрыми, чтобы дезориентировать пользователя. Длительность выбирается в зависимости от того, в какой части экрана находится анимация. Поскольку навигационные переходы обычно занимают большую часть экрана, длительность 300 мс является оптимальным вариантом. Напротив, небольшие компоненты, такие как переключатель, используют короткую продолжительность 100 мс. Если переход слишком быстрый или медленный, отрегулируйте его продолжительность с шагом 25 мс, пока не добьетесь правильного баланса.

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

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

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

Анимация может смягчить разочаровывающую ошибку
Анимация может смягчить разочаровывающую ошибку
Если вы хотите узнать больше о потенциале моушн-дизайна, обязательно прочитайте Material motion guidelines.

Спасибо Brenton Simpson.