Моушн-дизайн помогает сделать интерфейсы выразительными и простыми в использовании. Несмотря на большой потенциал, он, пожалуй, наименее понятая из всех дисциплин дизайна. Это может быть связано с тем, что он является одним из новичков в семействе дизайна интерфейсов. Если визуальный дизайн и дизайн взаимодействия восходят к ранним графическим интерфейсам, то моушн-дизайн вынужден был ждать, пока современное оборудование начнет плавно рендерить анимацию. Частичное совпадение моушн-дизайна и традиционной анимации также вносит неразбериху. Можно потратить целую жизнь на освоение 12 принципов анимации Диснея, означает ли это, что моушен-дизайн интерфейсов также сложен? Люди часто говорят мне, что сложно проектировать движение или, что выбор правильных значений неоднозначен. Я утверждаю, что в наиболее важных областях интерфейса, моушен-дизайн может и должен быть простым.
С чего начать
Основная задача движения — помочь пользователям ориентироваться в приложении, проиллюстрировав взаимосвязь между элементами интерфейса. Движение также может добавить характер в приложение посредством анимированных иконок, логотипов и иллюстраций. Однако формирование юзабилити должно иметь приоритет над добавлением выразительности. Прежде всего давайте начнем с создания сильного движения, сосредоточившись на переходах навигации.
Паттерны перехода
При разработке навигационного перехода ключевыми качествами являются простота и согласованность. Для этого мы выбираем из двух типов паттернов движения:
- Переходы на основе контейнера
- Переходы без контейнера.
Переходы на основе контейнера
Если композиция включает контейнер, такой как кнопка, карточка или список, тогда дизайн перехода основан на анимации контейнера. Контейнеры обычно легко обнаруживаются благодаря видимым границам, но помните, что они также могут быть невидимыми до начала перехода, например, элемент списка без разделителей. Этот паттерн разбивается на три этапа:
- Анимируйте контейнер с помощью стандартной плавности Material design (это означает, что он быстро ускоряется, а затем мягко замедляется). В этом примере размеры контейнера и угловые радиусы анимированы от круглой кнопки до прямоугольника, который заполняет экран.
- Масштабируйте элементы в контейнере, чтобы они соответствовали ширине. Элементы прикреплены к верхней части и преобразованы в маску внутри контейнера. Это создает четкую связь между контейнером и элементами внутри.
- Элементы, которые покидают экран во время перехода, исчезают по мере ускорения контейнера. Элементы появляются на экране, когда контейнер замедляется. Плавность ручного эффекта достигается за счет затухания элементов по мере их быстрого перемещения.
Применение этого паттерна ко всем переходам с контейнером устанавливает согласованный стиль. Это также делает связь между начальной и конечной композициями понятным, так как они связаны анимированным контейнером. Чтобы показать гибкость этого паттерна, здесь он применяется к пяти различным композициям:
Некоторые контейнеры просто перемещаются по экрану с помощью стандартной плавности Material design. Направление перемещения контейнера, определяется местоположением компонента, с которым он связан. Например, нажатие на иконку навигационного ящика в верхнем левом углу приведет к перемещению контейнера слева направо.
Если контейнер входит в границы экрана, он исчезает и масштабируется. Вместо анимирования с масштаба 0%, он начинается с 95%, чтобы избежать чрезмерного внимания к переходу. Масштабная анимация использует плавное замедление Material design, то есть начинается на максимальной скорости и мягко замедляется. Чтобы выйти, контейнер просто затухает без масштабирования. Анимация выхода должна быть более тонкой, чем анимация входа, чтобы сосредоточить внимание на новом контенте.
Переходы без контейнера
В некоторых композициях нет контейнера, на котором основывается переход, например, нажатие на иконку в панели нижней навигации, выводит пользователя в новый пункт назначения. В этих случаях используется двухэтапный паттерн:
- Стартовая композиция исчезает затухая, тогда как конечная композиция медленно появляется.
- Когда конечная композиция появляется, она также тонко масштабируется с помощью плавного замедления Material design. Опять же, масштаб применяется только к появляющейся композиции, чтобы выделить новый контент в отличии от старого.
Если исходные и конечные композиции имеют четкую пространственную или последовательную связь, совместное движение может быть использовано для ее усиления. Например, при навигации по пошаговому компоненту стартовые и конечные композиции имеют вертикальное скользящее движение по мере их постепенного затухания. Это усиливает их вертикальную компоновку. При нажатии кнопки «Next» в процессе обучения, композиции имеют горизонтальное скользящее движение. Перемещение слева направо усиливает осознание последовательности. Совместное движение использует стандартную плавность Material design.
Лучше практики
Сохраняйте простоту
Учитывая их популярность и тесные связи с юзабилити, навигационные переходы должны в целом уделять больше внимания функциональности, чем стилю. Это не значит, что они никогда не должны быть стилизованными, просто убедитесь, что выбор стиля оправдан брендом. Обычно внимание пользователя обращено к таким элементам, как маленькие иконки, логотипы, загрузчики или пустое состояние. Этот простой пример ниже может и не привлечет к Dribbble много внимания, но сделает приложение удобнее.
Выберите правильную продолжительность и плавность
Навигационные переходы должны иметь длительность, которая определяет приоритетность функциональности. Они должны быть быстрыми, но не настолько быстрыми, чтобы дезориентировать пользователя. Длительность выбирается в зависимости от того, в какой части экрана находится анимация. Поскольку навигационные переходы обычно занимают большую часть экрана, длительность 300 мс является оптимальным вариантом. Напротив, небольшие компоненты, такие как переключатель, используют короткую продолжительность 100 мс. Если переход слишком быстрый или медленный, отрегулируйте его продолжительность с шагом 25 мс, пока не добьетесь правильного баланса.
Плавность описывает скорость, с которой анимация ускоряется и замедляется. Большинство навигационных переходов используют стандартную плавность Material design, которая является асимметричным типом плавности. Это означает, что элементы быстро ускоряются, а затем осторожно замедляются, чтобы сосредоточить внимание на конце перехода. Это придает анимации естественность, поскольку объекты в реальном мире не стартуют и не останавливаются внезапно. Если переход кажется жестким или роботизированным, вероятнее всего была ошибочно выбрана, симметричная или линейная плавность.
Паттерны и лучшие практики, изложенные в этой статье, предназначены для создания практичного и тонкого стиля движения. Это подходит для большинства приложений, однако некоторые бренды могут требовать более интенсивного выражения стиля. Чтобы узнать больше о стилизации движения, ознакомьтесь с нашими инструкциями по настройке здесь.
После того, как навигационные переходы сделаны, начинается задача добавления персонажа в ваше приложение. Именно здесь простых паттернов недостаточно, и необходимо искусство анимации.
Если вы хотите узнать больше о потенциале моушн-дизайна, обязательно прочитайте Material motion guidelines.
Спасибо Brenton Simpson.
Нет комментариев