Material Design на русском. Часть 33 — Хореография

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

Хореография переходов — это про последовательность (что и за чем анимируется) анимации элементов, которая удерживает внимание пользователя, пока интерфейс адаптируется.

Последовательность

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

Типы элементов

Элементы интерфейса в последовательности классифицируются как исходящие, входящие или постоянные.

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

В инструменте ниже постоянный элемент (контейнер) окрашен синим цветом, выходящий элемент (содержимое элемента списка) — красным, а входящий элемент (содержимое страницы сведений) — зеленым.

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

Типы анимации появления

Для достижения последовательности можно использовать следующие три типа появления элементов:

Затухание
Перекрестное затухание
Постепенный переход

Затухание

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

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

Перекрестное затухание

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

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

Постепенный переход

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

Одна карточка трансформируется в другую без нахлестывания и перекрытия элементов

Пиковая скорость

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

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

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

Трансформация

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

Простая трансформация

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

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

Сложная трансформация

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

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

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

Неправильно: Не анимируй несколько элементов одновременно. Отдельные и независимые анимации элементов конкурируют за внимание и мешают фокусироваться.

Неправильно: Не анимируй элементы независимо друг от друга. Это также мешает сфокусироваться, когда элементы резко и независимо друг от друга появляются на экране.

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

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

Бесшовность создается путем анимации группы элементов в унисон с ее контейнером. Группа масштабируется в соответствии с шириной контейнера.

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

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

Переход от одной иконки в другую с помощью вращения по часвойо стрелке

Степпер и элементы «входа» и «выхода» перемещаются по одной оси в унисон

Элементы в фокусе

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

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

Конфликты с перекрытием у элементов в фокусе

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

Осторожно: Обрати внимание как элемент в фокусе (картинка) перекрывает другие элементы во время анимации. Это создает «грязь» во время перестроения макета.

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

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

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