Перемещение в Windows
Движение описывает способ анимации интерфейса и реакции на взаимодействие с пользователем. Движение в Windows является реактивным, прямым и соответствующим контексту. Оно обеспечивает обратную связь при вводе данных пользователем и усиливает пространственные парадигмы, поддерживающие навигацию.
Совет
В этой статье описывается применение языка Fluent Design к приложениям Windows. Дополнительные сведения см. в разделе Fluent Design — Motion.
Принципы движения
Эти принципы помогут использовать движение в Windows.
Подключено: элементы действий легко подключаются
Элементы, изменяющие положение и размер, должны визуально подключаться из одного состояния к другому, даже если они не подключены под капотом. Пользователи следуют элементам, идущим с точки на точку, уменьшая когнитивную нагрузку статических изменений состояния.
Пример. При переходе окна между плавающей, оснастки и развернутой, она всегда чувствует себя как одно и то же окно.
Совет
Чтобы повысить доступность и удобочитаемость, эта страница использует изображения по-прежнему в представлении по умолчанию. Чтобы просмотреть анимированную версию, щелкните изображение.
Согласованный: элементы должны вести себя аналогичным образом при совместном использовании точек входа
Поверхности, которые используют ту же точку входа пользовательского интерфейса, должны вызываться и закрывать тот же способ, чтобы обеспечить согласованность взаимодействия. Каждый переход должен уважать время, упрощение и направление других элементов, чтобы поверхность чувствовала себя сплоченной.
Пример. Все всплывающие элементы панели задач скользят вверх при вызове и скользят вниз при закрытии.
Щелкните изображение, чтобы увидеть его анимированным.
Реагирование: система реагирует и адаптируется к вводу и выбору пользователей
Четкие индикаторы показывают, что система распознает и адаптирует их к различным входным данным, позам и ориентациям. Приложения должны основываться на поведении ОС для реагирования, активности и использования помощи в зависимости от методов ввода.
Пример: значки панели задач распределяются при отключении клавиатуры. Края окна вызывают другой визуальный элемент в зависимости от курсора или сенсорного ввода.
Щелкните изображение, чтобы увидеть его анимированным.
Восхитительный: Неожиданные моменты радости с целью
Движение добавляет личность и энергию к опыту, чтобы преобразовать простые действия в моменты восторга. Эти моменты всегда короткие и мимолетные, а также помогают укрепить действия пользователей.
Пример. Минимизация окна приводит к отказу от значка приложения при восстановлении значка приложения вверх.
Щелкните изображение, чтобы увидеть его анимированным.
Ресурсоемкие функции. Использование существующих элементов управления для обеспечения согласованности по возможности
Избегайте пользовательских анимаций, где это возможно. Используйте такие ресурсы анимации, как элементы управления WinUI для переходов страниц, фокуса на странице и микро-взаимодействия. Если вы не можете использовать элементы управления WinUI, имитируете существующие поведения ОС в зависимости от того, где находится точка входа приложения.
Пример. Переходы страниц, подключенные анимации и анимированные значки — это рекомендуемые элементы управления WinUI, которые добавляют восхитительное и необходимое движение в приложения.
Щелкните изображение, чтобы увидеть его анимированным.
Примеры
Приложение коллекции WinUI 3 включает интерактивные примеры большинства элементов управления, функций и функций WinUI 3. Получение приложения из Microsoft Store или получение исходного кода на GitHub
Использование
Свойства анимации
Перемещение Windows — это быстрое, прямое и контекстно-соответствующее. Графики и кривые упрощения корректируются на основе цели анимации для создания последовательного интерфейса.
| Характер использования | Определение | Облегчать | Время | Область использования |
|---|---|---|---|---|
| Прямой вход | Быстрый — в | Кубо-bezier(0,0,0,1) | 167, 250, 333 | Положение, масштабирование, поворот |
| Существующие элементы | Указатель на точку | Кубо-bezier(0,55,0,55,0,1) | 167, 250, 333 мс | Положение, масштабирование, поворот |
| Прямой выход | Быстрый — вне | Кубо-bezier(0,0,0,1) | 167 мс | Положение, масштабирование, поворот (ВСЕГДА сочетается с оттуханием) |
| Нежный выход | Soft – Out | Кубо-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 .
Анимированные значки обращают внимание на определенные точки входа, предоставляют отзывы от состояния к состоянию и добавляют восторг к взаимодействию.
Щелкните изображение, чтобы увидеть его анимированным.
Windows developer