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