Material Design на русском. Часть 34 — Кастомизация анимации

Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна. В этой серии постов однако я просто делюсь вольным переводом Material Design на русский язык. Оригинальный источник: здесь.

На момент перевода эта часть гайда находилась в Beta версии.

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

Применяя кастомизацию

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

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

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

Скорость

Скорость можно регулировать, изменяя длительность перехода (время) и сглаживание (ускорение и замедление).

Стандартное сглаживание с короткой продолжительностью имеет сьолший и функциональный стиль. Переходы с акцентным сглаживанием и большим временем по анимации имеют более стилизованный вид.

1 — Стандартное сглаживание анимации длинной 300мс. 2 — Акцентное сглаживание анимации длинной 650мс.

Траектория

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

1 — Линейная траектория движения в анимации. 2 — Дуговая траектория.

Характеристики

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

Колебания

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

1 — Переход по умолчанию. 2 — Переход с колебаниями.

1 — Переход по умолчанию. 2 — Переход с колебаниями.

Паттерны трансформации

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

1 — Трансформация контейнера. 2 — Общая ось

1 — Трансформация контейнера. 2 — Общая ось

Характеристики

Высота

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

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

Аналогичная ситуация происходит на этом примере с карточками

Характеристики

Каскадная анимация

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

1 — Анимация появления без каскадности. 2 — С каскадностью. Обрати внимание на постепенное появление каждого элемента списка. Есть небольшая задержка.

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

1 — Анимация по умолчанию. 2 — Каскадность добавлена на FAB кнопку, то есть она появляется после других элементов с задержкой, беря на себя все внимание пользователя.

Как следить за обновлениями гайдлайна и переводом?

Структуированный документ в Notion
Официальные обновления Google на странице what’s new