Connected Animation: Layer-to-layer transitions within the same page Page transitions guide your user's eyes to incoming and outgoing content, lowering cognitive load.Ĭlick the image to see it animated. Use page transitions to transition smoothly from page to page, and configure animation directions to respect the flow of an app. Page Transition: Page-to-page transitions within the same surface Add these controls to your app to help better organize information, and help your app's users transition from page to page, layer to layer, and state to state of an interaction. This release of Windows introduces purposeful micro-interactions in WinUI controls. Position, Scale, Rotation (ALWAYS combine with fade out) Timing and easing curves are adjusted based on the purpose of the animation to create a coherent experience. Windows motion is fast, direct, and context-appropriate. If you can't use WinUI controls, mimic existing OS behaviors based on where the app entry point lives.Įxample: Page transitions, connected animations, and animated icons are the recommended WinUI controls that add delightful and necessary motion to apps.Ĭlick the image to see it animated. Use animation resources like WinUI controls for page transitions, in-page focus, and micro interactions. Resourceful: Utilizes existing controls to bring consistency where possibleĪvoid custom animations where possible. These moments are always brief and fleeting, and help reinforce user actions.Įxample: Minimizing a window causes an app icon to bounce down, while restoring bounces an app icon up.Ĭlick the image to see it animated. Motion adds personality and energy to the experience in order to transform simple actions into moments of delight. Delightful: Unexpected moments of joy with purpose Window edges invoke a different visual depending on cursor or touch input.Ĭlick the image to see it animated. Apps should build on OS behaviors to feel responsive, alive, and aid usage depending on input methods.Įxample: Taskbar icons spread out when keyboards are detached. Responsive: The system responds and adapts to user input and choicesĬlear indicators show the system recognizes and adapts gracefully to different input, postures, and orientations. Each transition should respect the timing, easing, and direction of other elements so a surface feels cohesive.Įxample: All taskbar flyouts slide up when invoked, and slide down when dismissed.Ĭlick the image to see it animated. Surfaces that share the same UI entry point should invoke and dismiss the same way to bring consistency to interactions. Consistent: Elements should behave in similar ways when sharing entry points You can click an image to see the animated version. To improve accessibility and readability, this page uses still images in the default view.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
December 2022
Categories |