Движение в Windows

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

Совет

В этой статье описывается, как Fluent Design language применяется к приложениям Windows. Дополнительные сведения см. в разделе Fluent Design — Motion.

Принципы движения

Эти принципы помогут использовать движение в Windows.

Подключено: элементы действий легко подключаются

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

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

Совет

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

Согласованный: элементы должны вести себя аналогичным образом при совместном использовании точек входа

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

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

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

Щелкните изображение, чтобы увидеть его анимированным.

Реагирование: система реагирует и адаптируется к вводу и выбору пользователей

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

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

Щелкните изображение, чтобы увидеть его анимированным.

Восхитительные: Неожиданные моменты радости с определённой целью

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

Пример: Минимизация окна заставляет значок приложения подпрыгнуть вниз, а при восстановлении значок подпрыгивает вверх.

Щелкните изображение, чтобы увидеть его анимированным.

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

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

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

Щелкните изображение, чтобы увидеть его анимированным.

Примеры

Откройте приложение коллекции WinUI 3 и просмотрите примеры движения в действии

Приложение WinUI 3 Gallery содержит интерактивные примеры элементов управления и функций WinUI. Получите приложение из Microsoft Store или просмотрите исходный код GitHub.

Использование

Свойства анимации

Движение окон Виндовс — это быстрое, прямое и соответствующее контексту. Графики времени и кривые ускорения корректируются на основе цели анимации для создания последовательного восприятия.

Цель	Определение	Лёгкость	Тайминг	Область использования
Прямой вход	Быстрый — вход	Кубический безье(0,0,0,1)	167, 250, 333	Положение, масштабирование, поворот
Существующие элементы	Точка-точка	Кубический-bezier(0.55, 0.55, 0, 1)	167, 250, 333 мс	Положение, масштабирование, поворот
Прямой выход	Быстро — выход	Кубический безье(0,0,0,1)	167 мс	Положение, масштаб, поворот (ВСЕГДА сочетается с затуханием)
Нежный выход	Мягкий – Выход	Cubic-bezier(1,0,1,1)	167 мс	Положение, масштабирование
Минимум	Fade - In + Out	Линейный	83 мс	Непрозрачность
Надежный вход	Elastic In (3 ключевых кадра)	(3 значения ниже)	(3 значения ниже)	Положение, масштабирование
	Ключевой кадр 1	Куб-Безиер(0,85, 0, 0, 1)	167 мс
	Ключевой кадр 2	Куб-Безиер(0,85, 0, 0,75, 1)	167 мс
	Опорный кадр 3	Куб-Безиер(0,85, 0, 0, 1)	333 мс

Элементы управления

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

Переход между страницами: переходы между страницами в одной области/платформе

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

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

Щелкните изображение, чтобы увидеть его анимированным.

Подключенная анимация: переходы между слоями на одной странице

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

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

Щелкните изображение, чтобы увидеть его анимированным.

Анимированный значок: придает удовольствие и раскрывает информацию через микровзаимодействия

Используйте анимированные значки для реализации упрощенных векторных значков и иллюстраций с перемещением с помощью анимаций Lottie .

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

Щелкните изображение, чтобы увидеть его анимированным.