Material Design на русском. Часть 31 — Как устроена система анимации

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

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

Документация доступна только для Android и Flutter. Для iOS и Web не планируется.

Паттерны переходов

В Material Design есть 4 паттерна для переходов между компонентами или режимом «на весь экран». Паттерны разработаны, чтобы пользователям было проще ориентироваться и понимать приложение, усиливая при этом связь между элементами интерфейса.

Вот эти паттерны:

Трансформация контейнера
Общая ось
Постепенный переход
Затухание

Выбор паттерна

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

Постоянные контейнеры

Является ли постоянный контейнер частью перехода?

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

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

Зависимости

Существует ли пространственная или навигационная связь между элементами интерфейса?

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

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

Когда взаимосвязь между элементами незначительна или не существует, лучше подходит шаблон постепенного перехода.

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

Вход и выход

Появляется ли элемент интерфейса на экране или исчезает с экрана?

Часто элемент пользовательского интерфейса просто должен появиться или как бы «выйти» и исчезнуть с экрана. Для такого «входа» или «выхода» элементов лучше всего подходит шаблон затухания.

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

Трансформация контейнера

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

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

Примеры преобразования контейнера (в обычном тайминге и в замедленном): 1 — Карточка трансформируется в страницу. 2 — Элемент списка в страницу. 3 — FAB кнопка в страницу. 4 — Панель поиска в расширенный поиск

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

Примеры преобразования контейнера: 1 — FAB кнопка в меню. 2 — FAB кнопка в медиаплеер. 3 — FAB в список. 4 — Чипс в свою расширенную версию

На веб-страницах, паттерн трансформации контейнера упрощает переход к контенту письма через клик на элемент списка.

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

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

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

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

Общая ось

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

Например, при нажатии на «далее» в онбординге, все элементы (на вход и выход) трансформируются по горизонтали в унисон. Во время анимации по одной оси элементы воспринимаются как связанные друг с другом.

Примеры шаблона общей оси: 1 — Элементы во время онбординга анимируются по оси X. 2 — В элементе степпер переходы по оси Y. 3 — Переходы типа «родитель-потомок» по высоте (т.е. по оси Y)

Ось X

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

Переход по оси X используется для усиления связи контента и компонента слайдер.

На примере показан переход по оси X, применяемый к чипсу, который переходит от вариантов ответа в выбранный вариант (отправленный текст).

Ось Y

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

На примере показан переход по оси Y, который используется для однородной навигации «вперед» и «назад» по рецепту с использованием вертикального степпера.

Ось Z

Переходы по оси Z указывают на перемещение на один уровень вверх или вниз по иерархии приложения. Высота каждого элемента изменяется синхронно, перемещаясь вперед или назад по оси z.

На примере показан переход по оси Z, который указывает переход «родитель-потомок», когда пользователь переходит нажав на иконку «настроек» к странице настроек.

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

Общая ось
В паттерне общей оси все элементы «выхода» и «входа» используют одну и ту же трансформацию по горизонтали (ось x), вертикали (ось y) или уровню высоты (ось z). Кроме того, используется постепенный переход для указания конкретной последовательности анимации этих элементов.

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

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

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

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

Примеры шаблона постепенного перехода: 1 — Тап на пункты меню в нижней панели навигации. 2 — Тап на иконку «обновить». 3 — Тап на аватарку, чтобы переключить аккаунты

Иконки на панели приложения с постепенным переходом «выхода» и «входа» другим иконок

Чипсы используют постепеный переход, когда меняется контента внутри них

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

Постепенный переходПри постепенном переходе сначала исчезают элементы «выхода». Затем входящие элементы появляются при масштабировании размера от 92% до 100%. Масштабирование элемента начинается с 92%, а не с 0%, чтобы не привлекать излишнее внимание к переходу. Анимация по масштабу применяется только к входящим элементам, чтобы подчеркнуть «входящий» контент.

Затухание

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

Примеры затухания: 1 — Диалог. 2 — Меню. 3 — Снэкбар. 4 — FAB кнопка

Технические характеристики

ЗатуханиеПри затухании элементы постепенно появляются и масштабируются в размере от 80% до 100%. Анимация начинается с 80%, а не с 0%, чтобы не привлекать излишнее внимание к переходу. При «выходе», ненужные элементы просто исчезают. Анимация по масштабу применяется только к «входящим» элементам. Это создает больше акцента на новом контенте (входящих элементах).

**Затухание: масштабирование от точки привязки.**По умолчанию «входящие» элементы масштабируются от центра. Однако, точка привязки может быть перемещена из центра элемента в другое место.

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

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

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