Directives de Mouvement de Marque
Rédiger un système de mouvement de marque — le document qui définit comment une marque ou un produit se déplace, à la manière des systèmes de design matures (Slack, IBM Carbon, Klarna, Material). Le résultat est un modèle prêt à remplir couvrant les principes, les jetons d’easing/timing, une bibliothèque de mouvements, les règles pour le logo, les états de feedback, l’accessibilité et des exemples de bonnes/mauvaises pratiques.
Quand l’utiliser
À utiliser lorsqu’une marque ou un produit a besoin d’un langage de mouvement documenté, lorsque l’animation semble incohérente au sein d’une équipe, lorsqu’il s’agit de définir des jetons d’easing/durée nommés pour les designers et les ingénieurs, ou lors de l’ajout d’une norme d’accessibilité/mouvement réduit. Le résultat est un document structuré, pas du code.
Arbre de décision — dimensionner le système, puis choisir le jeton
Deux jugements : l’ampleur du système dont cette marque a réellement besoin, et quel jeton utiliser pour un mouvement donné. Ne construisez pas un système en 7 parties pour une simple page d’atterrissage ; ne publiez pas une page unique pour un système de design multi-équipes.
Combien de surfaces/équipes vont l’utiliser ?
├─ Un seul site / une seule campagne → léger : principes + jetons + une courte
│ bibliothèque. Ignorer les sections approfondies sur le logo ou les états, sauf si pertinent.
├─ Un produit (appli/web) → document complet en 7 parties ; les jetons sont obligatoires.
└─ Une marque couvrant produit + marketing + diffusion → document complet PLUS une
présentation de personnalité de mouvement (voir motion-art-direction) pour que chaque média corresponde.
Choisir le jeton pour un mouvement donné :
durée : élément plus grand / trajet plus long → jeton plus long
(instant<rapide<base<lent<plus_lent)
easing : entrée → décélération · sortie → accélération (et plus court)
mouvement dans la vue → standard · moment de marque → accentué
boucle continue → linéaire · accent ludique → ressort (avec parcimonie)
Règle générale : si un mouvement ne peut pas nommer le jeton qu’il utilise, c’est une exception — et les exceptions sont ce qui rend un système incohérent.
Ce que contient un système de mouvement
Un document complet de directives de mouvement comprend sept parties. Rédigez-les dans l’ordre :
- Principes de mouvement — 3 à 5 convictions nommées qui régissent chaque animation.
- Jetons de timing et d’easing — durées et courbes nommées, pour que le mouvement soit cohérent et implémentable par les ingénieurs.
- Bibliothèque de mouvements — motifs d’entrée, de sortie et de transition associés aux jetons.
- Règles d’animation du logo — comment le logo peut et ne peut pas bouger.
- Mouvement de feedback et d’état — chargement, succès, erreur, survol, focus.
- Accessibilité — mouvement réduit, photosensibilité, visibilité du focus.
- À faire / À ne pas faire — exemples concrets qui rendent les règles sans ambiguïté.
Les jetons sont le cœur
Tout le reste fait référence aux jetons. Définissez les durées et les courbes une seule fois, sous forme de jetons nommés ; la bibliothèque et les composants les réutilisent. C’est ce qui rend un système de mouvement implémentable plutôt que décoratif.
Exemples de jetons de durée (à remplir / ajuster)
| Jeton | Valeur | Utilisation |
|---|---|---|
duration-instant | 100 ms | Micro-feedback (bascule, tap) |
duration-fast | 150 ms | Survol, petit changement d’état |
duration-base | 250 ms | Transition UI standard (par défaut) |
duration-slow | 400 ms | Surfaces plus grandes, modales, sections de page |
duration-slower | 600 ms | Moments héroïques/de marque, plein écran |
Règle générale : plus l’élément/la distance est grand, plus la durée est longue. La plupart des mouvements UI se situent entre 150 et 400 ms ; en dessous d’environ 100 ms, cela semble instantané ; au-dessus d’environ 500 ms, l’UI semble lent.
Exemples de jetons d’easing (courbes)
| Jeton | cubic-bezier | Sensation / Utilisation |
|---|---|---|
ease-standard | (0.4, 0.0, 0.2, 1) | Par défaut ; élément se déplaçant dans la vue |
ease-decelerate (ease-out) | (0.0, 0.0, 0.2, 1) | Entrées — rapide au début, puis stabilisation |
ease-accelerate (ease-in) | (0.4, 0.0, 1, 1) | Sorties — début lent, puis accélération rapide |
ease-emphasized | (0.2, 0.0, 0, 1) | Moments expressifs/de marque |
ease-spring | spring(stiffness, damping) | Dépassement ludique (à utiliser avec parcimonie) |
Principe : les entrées décélèrent (les objets arrivent et se stabilisent), les sorties accélèrent (les objets partent avec intention), et rien d’important n’utilise un easing linéaire — le linéaire semble mécanique et est réservé aux boucles continues (spinners, progression).
Bibliothèque de mouvements (associer les motifs aux jetons)
| Motif | Jetons | Comportement |
|---|---|---|
| Apparition en fondu | duration-base + ease-decelerate | Opacité 0→1 |
| Apparition avec échelle + fondu | duration-base + ease-decelerate | Échelle 0.96→1, opacité 0→1 |
| Apparition par glissement vers le haut | duration-slow + ease-decelerate | Y +8/16px → 0, fondu entrant |
| Disparition en fondu | duration-fast + ease-accelerate | Opacité 1→0 (les sorties sont plus rapides que les entrées) |
| Ouverture de modale | duration-slow + ease-emphasized | Échelle + fondu, fond assombri en fondu |
| Transition de page/section | duration-base + ease-standard | Fondu croisé ou déplacement d’élément partagé |
| Stagger de liste | duration-fast par élément, décalage de 30 à 50 ms | Les éléments apparaissent en cascade, pas tous en même temps |
Règle par défaut : les sorties sont plus courtes que les entrées ; les staggers utilisent de petits décalages (30-50 ms) pour que les groupes semblent vivants sans traîner.
Le modèle (à remplir)
[MARQUE] DIRECTIVES DE MOUVEMENT Version : ___ Propriétaire : ___
1. PRINCIPES
Nous bougeons pour : [principe 1 — ex. « Guider l’attention, jamais la voler »]
[principe 2 — ex. « Rapide par défaut, expressif à dessein »]
[principe 3 — ex. « Chaque mouvement a une raison »]
[principe 4] [principe 5]
2. JETONS DE TIMING
instant ___ ms · rapide ___ ms · base ___ ms · lent ___ ms · plus lent ___ ms
3. JETONS D’EASING
standard ____ · décélération ____ · accélération ____ · accentué ____
4. BIBLIOTHÈQUE DE MOUVEMENTS
Entrées : [liste des motifs + jetons]
Sorties : [liste des motifs + jetons]
Transitions : [liste des motifs + jetons]
5. ANIMATION DU LOGO
Autorisé : [style de dévoilement, jeton de durée, quand il peut être animé]
Jamais : [étirer, déformer, rotation libre, recoloration, dépasser ___ ms]
6. MOUVEMENT DE FEEDBACK ET D’ÉTAT
Chargement : [règles pour spinner/squelette + quand utiliser chacun]
Succès : [mouvement de confirmation]
Erreur : [règles de secousse/couleur — jamais la couleur seule]
Survol/Focus : [jeton + exigence de focus visible]
7. ACCESSIBILITÉ
Mouvement réduit : [ce qui se passe — voir section ci-dessous]
Photosensibilité : max 3 flashs/sec ; pas de stroboscopie plein écran.
Focus : les indicateurs de focus ne s’animent jamais pour disparaître ou se cacher.
8. À FAIRE / À NE PAS FAIRE
✅ [à faire] ❌ [à ne pas faire]
Règles d’animation du logo (à remplir)
Indiquez explicitement ce qui est autorisé et interdit. Base typique :
- Autorisé : un dévoilement/construction utilisant
duration-slow-slower+ease-emphasized; stabilisation douce ; une seule construction signature utilisée de manière cohérente partout. - Jamais : étirer/écraser le logo hors de proportion, rotation libre, recolorer en dehors de la palette, animer chaque apparition (réserver pour les moments clés), ou dépasser la durée maximale convenue.
Mouvement de feedback et d’état
- Chargement : squelettes pour la disposition du contenu ; spinners uniquement pour les attentes courtes et indéterminées ; afficher une progression pour les attentes de plus d’environ 1 seconde.
- Succès/Erreur : associer le mouvement à un libellé ou une icône — ne jamais communiquer l’état uniquement par la couleur ou le mouvement (accessibilité).
- Survol/Focus :
duration-fast+ease-standard; l’état de focus doit être clairement visible et ne doit pas s’animer hors de vue.
Accessibilité (section obligatoire)
- Mouvement réduit : respecter le paramètre « réduire le mouvement » de l’utilisateur. Remplacer les déplacements, les parallaxes et les grandes transformations par de simples fondus d’opacité ou des changements d’état instantanés. Conserver le sens essentiel ; supprimer le mouvement décoratif. (Conceptuellement correspond à
prefers-reduced-motion.) - Photosensibilité : pas plus de 3 flashs par seconde ; éviter le stroboscopie plein écran à fort contraste.
- Pas de signification uniquement par le mouvement ou la couleur : toujours associer à un texte ou une icône.
- Visibilité du focus : ne jamais laisser une animation masquer ou supprimer l’indicateur de focus.
Exemples concrets
BON — une entrée de bibliothèque ancrée sur un jeton :
Ouverture de modale :
duration-slow(400 ms) +ease-emphasized; échelle 0.96→1, fond assombri en fondu. Fermeture :duration-base(250 ms) +ease-accelerate.
Chaque valeur est un jeton nommé, la fermeture est plus courte que l’ouverture, l’easing correspond à l’intention (accentué pour un moment de marque à l’entrée, accélération pour sortir). Un ingénieur peut l’implémenter directement et cela correspondra à toutes les autres modales.
ANTI-PATTERN — la directive « vibes » :
« Les animations doivent être fluides, modernes et agréables. Utilisez un bel easing et gardez les choses réactives mais pas trop rapides. »
Pourquoi cela échoue : pas de jetons nommés, pas de valeurs, pas de règle d’entrée/sortie, rien d’implémentable — « fluide » et « réactif » se contredisent et chaque ingénieur les interprète différemment, ce qui rend le produit incohérent (exactement le problème que le document était censé résoudre). La solution : remplacez les adjectifs par les tableaux de jetons, associez chaque motif à des jetons, et donnez des paires « à faire/à ne pas faire » avec des valeurs en millisecondes concrètes.
Erreurs courantes
| Symptôme | Cause | Solution |
|---|---|---|
| Mouvement incohérent entre les écrans | Valeurs ponctuelles ajustées manuellement, pas de jetons | Définir les jetons une fois ; chaque motif les référence |
| Le document semble bien mais ne peut pas être construit | Principes rédigés comme des adjectifs, pas des valeurs | Associer chaque principe à une règle numérique de jeton |
| Tout rebondit | Ressort/dépassement utilisé partout | Réserver le ressort/l’accentué uniquement pour les moments de marque |
| Les sorties semblent lentes | Durée de sortie ≥ durée d’entrée | Rendre les sorties d’un cran plus courtes ; les accélérer |
| L’animation brise l’accessibilité | Pas de mouvement réduit / états uniquement par couleur | Ajouter la section accessibilité requise ; associer le mouvement à du texte/icône |
| Le logo s’anime différemment partout | Pas de règles pour le logo | Indiquer un dévoilement signature + une liste explicite des interdits |
| Les valeurs des jetons sont renommées constamment | Les noms sont littéraux (duration-250) | Nommer par objectif (duration-base) pour que les valeurs puissent changer |
Spécifications du livrable — ce que contient un bon document de directives de mouvement
Le résultat est un document structuré (modèle dans references/full-template.md), pas du code. Un document complet comprend les sept parties, et :
- 3 à 5 principes nommés, chacun avec une règle d’une ligne (pas des adjectifs).
- Des jetons de durée et d’easing avec valeurs/courbes — le cœur implémentable.
- Une bibliothèque de mouvements associant chaque motif à des jetons.
- Des règles explicites pour le logo (autorisé/interdit).
- Le mouvement pour les états de feedback (chargement, succès, erreur, survol, focus).
- Une section accessibilité obligatoire (mouvement réduit, photosensibilité, focus, pas de signification par la couleur uniquement).
- Des paires concrètes « à faire/à ne pas faire » qui suppriment toute ambiguïté.
Avant de terminer — liste de vérification
- 3 à 5 principes, chacun nommé et doté d’une règle d’une ligne.
- Jetons de durée définis avec valeurs ; jetons d’easing avec courbes cubic-bezier.
- Chaque motif de la bibliothèque nomme les jetons utilisés.
- Les entrées décélèrent, les sorties accélèrent et sont plus courtes ; linéaire uniquement pour les boucles.
- Les règles pour le logo indiquent à la fois ce qui est autorisé et interdit.
- Les états de feedback associent le mouvement à du texte/icône (jamais la couleur seule).
- Section accessibilité présente : mouvement réduit, photosensibilité, focus, contraste.
- Les paires « à faire/à ne pas faire » sont concrètes (avec valeurs), pas des impressions.
- Les noms des jetons sont sémantiques (objectif), pas des valeurs littérales.
Compétences connexes
Ce document est le système de référence pour le mouvement d’une marque ; deux compétences sœurs fournissent la théorie en amont et la sensation propre à chaque projet — référencez-les et appliquez-les, ne dupliquez pas leurs tableaux :
animation-principles— votre section des principes doit coder les trois piliers (intention → ton → artisanat) ; les couches de mouvement primaire/secondaire/ambiant expliquent pourquoi un mouvement héroïque et une dérive ambiante obtiennent des jetons différents ; la règle du 1/3 justifie les limites de stagger (ne pas tout bouger en même temps). Citez-les ; conservez les tableaux canoniques là-bas.motion-art-direction— pour une marque couvrant le produit + le marketing + la diffusion, choisissez une présentation de personnalité de mouvement nommée et indiquez-la en haut du document, puis dérivez les valeurs des jetons pour correspondre (présentation plus rapide → durées plus courtes ; présentation premium → durées plus longues et plus fluides). La spécification du langage de mouvement se trouve là.
Référence rapide
| Décision | Valeur par défaut |
|---|---|
| Durée UI par défaut | duration-base 250 ms |
| Easing d’entrée | décélération (ease-out) |
| Easing de sortie | accélération (ease-in), plus court que l’entrée |
| Easing linéaire | uniquement pour les boucles (spinners/progression) |
| Décalage de stagger | 30 à 50 ms par élément |
| Animation du logo | réservée, cohérente, jamais déformée |
| Feedback d’état | mouvement + libellé/icône, jamais la couleur seule |
| Mouvement réduit | remplacer les transformations par des fondus/instantané |
Fichiers de référence
references/full-template.md— le modèle complet de directives de mouvement à remplir, avec chaque section développée et un exemple de texte.references/token-reference.md— tableaux complets des jetons de durée et d’easing avec valeurs, courbes cubic-bezier et notes d’utilisation.references/dos-and-donts.md— une bibliothèque de paires concrètes « à faire/à ne pas faire » et des exemples de principes travaillés (style Slack/IBM/Material).