Mouvement en Windows 11

Le mouvement décrit la façon dont l’interface s’anime et répond aux interactions de l’utilisateur. Dans Windows, le mouvement est réactif, direct et approprié au contexte. Il fournit une rétroaction par rapport aux entrées de l’utilisateur et renforce les paradigmes spatiaux qui prennent en charge l’orientation.

Principes de mouvement

Ces principes guident l’utilisation du mouvement dans Windows.

Connecté : les éléments d’actions se connectent en toute transparence

Les éléments qui changent de position et de taille doivent se connecter visuellement d’un état à un autre, même s’ils ne sont pas connectés sous le capot. Les utilisateurs sont guidés pour suivre les éléments allant de point en point, réduisant la charge cognitive des changements d’état statique.

Exemple: Lorsqu’une fenêtre passe entre flottante, alignée et agrandie, elle ressemble toujours à la même fenêtre.

Conseil

Pour améliorer l’accessibilité et la lisibilité, cette page utilise des images fixes dans l’affichage par défaut. Vous pouvez cliquer sur une image pour voir la version animée.

Cohérent : les éléments doivent se comporter de la même manière lors du partage de points d’entrée

Les surfaces qui partagent le même point d’entrée d’interface utilisateur doivent appeler et ignorer la même façon d’apporter de la cohérence aux interactions. Chaque transition doit respecter le minutage, l’accélération et la direction d’autres éléments afin qu’une surface se sente cohérente.

Exemple: Tous les menus volants de la barre des tâches glissent vers le haut lorsqu’ils sont appelés et glissent vers le bas en cas de rejet.

Cliquez sur l’image pour la voir animée.

Réactif : le système répond et s’adapte aux entrées et aux choix de l’utilisateur

Des indicateurs clairs indiquent que le système reconnaît et s’adapte correctement aux différentes entrées, postures et orientations. Les applications doivent s’appuyer sur les comportements du système d’exploitation pour se sentir réactives, vivantes et faciliter l’utilisation en fonction des méthodes d’entrée.

Exemple: Les icônes de la barre des tâches s’étalent lorsque les claviers sont détachés. Les bords de fenêtre appellent un visuel différent en fonction du curseur ou de l’entrée tactile.

Cliquez sur l’image pour la voir animée.

Délicieux : Des moments de joie inattendus avec objectif

Le mouvement ajoute de la personnalité et de l’énergie à l’expérience afin de transformer des actions simples en moments de plaisir. Ces moments sont toujours brefs et éphémères, et aident à renforcer les actions de l’utilisateur.

Exemple: La réduction d’une fenêtre fait rebondir une icône d’application, tandis que la restauration fait rebondir une icône d’application vers le haut.

Cliquez sur l’image pour la voir animée.

Ressource : utilise des contrôles existants pour apporter de la cohérence dans la cas où cela est possible

Évitez les animations personnalisées dans la mesure du possible. Utilisez des ressources d’animation telles que les contrôles WinUI pour les transitions de page, le focus dans la page et les micro-interactions. Si vous ne pouvez pas utiliser les contrôles WinUI, imitez les comportements de système d’exploitation existants en fonction de l’emplacement où réside le point d’entrée de l’application.

Exemple :Les transitions de page, lesanimations connectées et lesicônes animées sont les contrôles WinUI recommandés qui ajoutent des mouvements délicieux et nécessaires aux applications.

Cliquez sur l’image pour la voir animée.

Usage

Propriétés d’animation

Le mouvement windows est rapide, direct et adapté au contexte. Les courbes de minutage et d’accélération sont ajustées en fonction de l’objectif de l’animation pour créer une expérience cohérente.

Objectif	Définition	Facilité	Minutage	Utilisation
Entrée directe	Rapide : dans	Bezier cubique(0,0,0,1)	167, 250, 333	Position, Mise à l’échelle, Rotation
Éléments existants	Point à point	Cubic-bezier(0.55,0.55,0,1)	167, 250, 333 ms	Position, Mise à l’échelle, Rotation
Sortie directe	Rapide - Out	Bezier cubique(0,0,0,1)	167 ms	Position, Mise à l’échelle, Rotation (TOUJOURS combiner avec fondu)
Sortie douce	Soft – Out	Bezier cubique(1,0,1,1)	167 ms	Position, Mise à l’échelle
Minimum strict	Fondu : in + out	Linéaire	83 ms	Opacity
Entrée forte	Elastic In (3 images clés)	(3 valeurs ci-dessous)	(3 valeurs ci-dessous)	Position, Mise à l’échelle
	Image clé 1	Cubic-Bezier(0.85, 0, 0, 1)	167 ms
	Image clé 2	Cubic-Bezier(0.85, 0, 0.75, 1)	167 ms
	Image clé 3	Cubic-Bezier(0.85, 0, 0, 1)	333 ms

Contrôles

Cette version de Windows introduit des micro-interactions délibérées dans les contrôles WinUI . Ajoutez ces contrôles à votre application pour mieux organiser les informations et aider les utilisateurs de votre application à passer d’une page à l’autre, d’une couche à l’autre et d’un état à l’état d’une interaction.

Transition de page : transitions de page à page dans la même surface

Utilisez les transitions de page pour effectuer une transition en douceur d’une page à l’autre et configurez les directions d’animation pour respecter le flux d’une application.

Les transitions de page guident les yeux de votre utilisateur vers le contenu entrant et sortant, réduisant ainsi la charge cognitive.

Cliquez sur l’image pour la voir animée.

Animation connectée : transitions de couche à couche dans la même page

Utilisez des animations connectées pour mettre en évidence des éléments d’informations spécifiques au sein d’une page ou d’une surface, tout en conservant le contexte.

Les animations connectées permettent de mettre l’accent sur les éléments sélectionnés et de passer en toute transparence entre les états ciblés et non ciblés.

Cliquez sur l’image pour la voir animée.

Icône animée : ajoute du plaisir et révèle des informations par le biais de micro-interactions

Utilisez des icônes animées pour implémenter des icônes légères basées sur des vecteurs, des icônes et des illustrations avec mouvement à l’aide des animations Lottie .

Les icônes animées attirent l’attention sur des points d’entrée spécifiques, fournissent des commentaires d’un état à l’autre et ajoutent du plaisir à une interaction.

Cliquez sur l’image pour la voir animée.