Движение должно редко появляться в контексте движения, чтобы выразить концепции, брендинг и отношения между элементами. Его следует использовать только для информирования водителей, не отвлекая их внимания.
С одного взгляда:
Не отвлекайте пользователей ненужными движениями.
Используйте движение, чтобы улучшить понимание пользователями и повысить их квалификацию.
Сделайте свой язык движения достаточно гибким для всего соответствующего оборудования.
Используйте рекомендуемую схему движения для вашей ситуации.
Модели движения
Чтобы обеспечить единообразие взаимодействия с пользователем во всех приложениях, к следующим взаимодействиям применяются определенные шаблоны движения:
Переключение между приложениями
Переключение между одноранговыми представлениями
Расширение существующего действия
Сворачивание и расширение действия
Нарушение действия
Эти шаблоны движения основаны на стандартном замедлении , описанном в Material Design, в котором основное внимание уделяется окончанию перехода, быстро ускоряя переход, а затем постепенно замедляя его.
Ослабление
Рекомендации Material Design по настройке скорости изменения анимации
Переключение между приложениями
При переключении между приложениями используйте плавный переход, при котором один элемент становится видимым, а другой элемент исчезает. Этот переход отображает выход из текущего приложения при быстром переходе в другое.
Пример
Переключение между одноранговыми представлениями
При переключении между представлениями на одном уровне иерархии в приложении (также называемыми одноранговыми представлениями), например вкладками на панели приложения или песнями в списке воспроизведения, используйте переход по общей оси . Горизонтальное движение этого перехода из стороны в сторону отражает состояние пребывания на одном и том же уровне внутри приложения.
Пример
Расширение существующего действия
Когда пользователь находится в процессе просмотра или выполнения действия, а затем выполняет вторичное, связанное с ним действие, это вторичное действие должно выполняться вертикальным движением (вверх или вниз). Это вторичное действие отображается в полноэкранном режиме на фоне сетки перед основным действием. Наличие основного действия на скриме подтверждает, что пользователь все еще находится в процессе выполнения этого действия.
Затем вторичное действие закрывается в направлении, обратном движению открытия. Это обратное движение должно занять меньше времени, чем исходное, поскольку действие уже выполнено.
Продолжительность
Рекомендации Material Design о том, сколько времени должен занять переход
Пример
Сворачивание и расширение действия
Текущие действия можно свернуть в меньший формат. Этот меньший формат позволяет пользователю выполнять несколько задач одновременно, пока текущее действие выполняется в фоновом режиме.
Расширение : когда пользователь нажимает на свернутое действие, оно увеличивается в размерах и заполняет весь экран с использованием плавного перехода.
Минимизация : при минимизации текущего действия используйте противоположное этому движению. Сворачивание должно занимать меньше времени, чем развертывание, поскольку пользователь покидает это действие.
Продолжительность
Рекомендации Material Design о том, сколько времени должен занять переход
Пример
Нарушение действия
Когда короткое необязательное действие должно внезапно появиться перед текущим действием, оно должно скользить (вверх или вниз) от края экрана с частичным скримом. Альтернативно, он должен плавно переходить в середину экрана с полной сеткой. Начните движение с места, ближайшего к тому, где вы хотите, чтобы появилось новое действие.