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