Motion for Windows apps
Fluent motion serves a purpose in your app. It gives intelligent feedback based on the user's behavior, keeps the UI feeling alive, and guides the user's navigation through your app. Fluent motion elicits an emotional connection between a user and their digital experience. We build on a foundation of natural movement the user already understands from the physical world, and we extend our system from there.
Examples
 |
If you have the WinUI 2 Gallery app installed, click here to open the app and see Motion in action. |
Fluent motion principles
Physical
Objects in motion exhibit behaviors of objects in the real world. Fluid, responsive movement makes the experience feel natural, creating emotional connections and adding personality.
When you interact with UI via touch, the movement of the UI is directly related to the velocity of the interaction. And because touch is direct manipulation, the object you interact with affects the objects around it.
Functional
Motion serves a purpose and has conviction. It guides the user through complexity and helps establish hierarchy. Movement gives the impression of enhanced performance and optimizes the user experience by hiding perceived latency.
Page transitions are purpose-built. They give hints about how pages are related to each other. They move in a manner that's perceived as fast even when performance is not optimal.
Continuous
Fluid movement from point to point naturally draws the eye and guides the user. It elegantly stitches together a user’s task, making it feel more consumable and friendly.
Objects can travel from scene to scene or morph within a scene to provide continuity and help the user maintain context.
Contextual
Intelligent motion provides feedback to the user in a manner that's aligned with how they manipulated the UI. Interaction is centered around the user. The movement feels appropriate to the form-factor and designed around the scenario. It should be comfortable for each user.
Animation should tie back to the user interaction. A context menu is deployed from a point where the user activated it.
Motion articles
Timing and easing
Timing and easing are important elements that make motion feel natural for objects entering, exiting, or moving within the UI.
Directionality and gravity
Directional signals help provide a solid mental model of the journey a user takes across experiences. Directional movement is subject to forces like gravity, which reinforces the natural feel of the movement.
Page transitions
Page transitions navigate users between pages in an app, providing feedback about the relationship between pages. They help users understand where they are in the navigation hierarchy.
Connected animation
Connected animations let you create a dynamic and compelling navigation experience by animating the transition of an element between two different views.
Windows developer