Моушн-дизайн не должен быть сложным

Перевод материала моушн-дизайнера Google в команде Material Design Йонаса Наймарка.

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

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

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

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

Основная задача анимации — помогать пользователю ориентироваться в приложении, наглядно показывая взаимосвязь элементов интерфейса. Ещё анимация может сделать приложение оригинальнее с помощью динамических иконок, логотипов и картинок.

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

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

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

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

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

3. Элементы плавно исчезают во время перехода, когда блок начинает ускоряться. Элементы плавно появляются, когда блок замедляется. Трюк эффекта плавности заключается в том, что элементы затухают по мере ускорения.

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

Некоторые блоки просто выезжают из-за краёв экрана. Для них можно использовать стандартную плавность Material Design. Место, откуда они выезжают, зависит от местоположения элемента, с которым блок связан. К примеру, нажатие на иконку панели навигации, которая расположена в левом верхнем углу, означает, что блок начнёт своё появление слева.

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

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

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

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

При нажатии кнопки «Дальше» в процессе ознакомления с приложением (онбординг) композиции движутся одинаково плавно по горизонтали. Такое движение слева направо подчёркивает пошаговое движение вперёд. В общих движениях используется стандартная плавность Material Design.

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

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

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

А у маленьких элементов, таких как переключатели, продолжительность движения короткая — 100 мс. Если переход кажется слишком быстрым или, наоборот, медленным, уменьшайте либо увеличивайте скорость на интервал в 25 мс, пока не найдёте золотую середину.

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

Такой тип плавности придаёт движению естественность, так как объекты в реальном мире не начинают и не прекращают движение мгновенно. Если переход кажется жёстким или искусственным, скорее всего, по ошибке выбрали симметричную (или линейную) плавность.

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

Когда переходы навигации готовы, встаёт задача придания приложению оригинальности. Теперь использование простых моделей недопустимо, но это прекрасная возможность для моушн-дизайнера проявить своё мастерство.

#моушндизайн #анимация #интерфейс #materialdesign