Эффекты движения в приложениях для Windows

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

Примеры

XAML controls gallery

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

Принципы движений Fluent

Физическое движение

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

Пример физического движения в пользовательском интерфейсе

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

Функциональное движение

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

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

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

С задержкой

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

Пример непрерывного движения в пользовательском интерфейсе

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

Контекстуальные движения

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

Пример контекстуального движения в пользовательском интерфейсе

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

Статьи о движении

Согласование по времени и реалистичная анимация

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

Направление и сила притяжения

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

Смена страниц

Смена страниц — это перемещение пользователей между страницами в приложении с демонстрацией связи между страницами. Это помогает пользователям ориентироваться в навигационной иерархии.

Подключенная анимация

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