Edit

Motion for Windows apps

  • Article

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

WinUI Gallery

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.

UI example of physical motion

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.

UI example of functional motion

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.

UI example of continuous motion

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.​

UI example of contextual motion

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.​