Hi-Tech

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

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

В закладки

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

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

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

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

С чего начать

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

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

Модели переходов

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

  • переходы с блоками;
  • переходы без блоков.

Переходы на основе блоков

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

Блоки, блоки и элементы. Такие элементы, как текст, иконки и картинки, объединяются внутри блока

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

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

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

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

Элементы появляются и исчезают. Справа указаны размеры блока. 

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

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

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

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

Переходы без блоков

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

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

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

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

Плавное появление и исчезновение. Справа указано, в каком положении находятся элементы во время анимации

Рекомендации: чем проще, тем лучше

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

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

Простое, ступенчатое и пружинистое движения

Определите верную продолжительность и плавность движения

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

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

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

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

Линейная плавность и несимметричная. Справа высота списка и время

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

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

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

Показать больше

Похожие публикации

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»