Движение

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

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

С одного взгляда:

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

Паттерны движения

Для поддержки единообразного взаимодействия с пользователем во всех приложениях к следующим взаимодействиям применяются определенные шаблоны движения:

  • Переключение между приложениями
  • Переключение между одноранговыми представлениями
  • Расширение существующего действия
  • Минимизация и расширение действия
  • Прерывание действия

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

значок выноски
Ослабление
Руководство по дизайну материалов по настройке скорости изменения анимации

Переключение между приложениями

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

Быстрое переключение между приложениями
Движение плавного перехода быстро переключает пользователя между приложениями.

Пример

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

Переключение между одноранговыми представлениями

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

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

Пример

Шаблон движения общей оси при переключении с песни на песню в мультимедийном приложении подтверждает, что обе песни находятся в одном плейлисте.

Расширение существующего действия

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

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

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

Пример

Пример наложения действия Android Auto
При выборе кнопки переполнения на панели управления мультимедиа она расширяется по вертикали на оверлее с фоном сетки.

Минимизация и расширение действия

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

  • Расширение : когда пользователь нажимает на свернутое действие, оно увеличивается в размере и заполняет весь экран, используя плавный переход.

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

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

Пример

Пример плавающей кнопки действия Android Auto
Воспроизведение FAB (плавающая кнопка действия) расширяется до полного просмотра воспроизведения, а затем сжимается с помощью стрелки вниз.

Прерывание действия

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

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

Пример

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