102.3K+Télécharger
Aller au guide d’utilisation
Animation Principlespar Owl-Listener

Animation Principles Skill.

Donnez à une transition un objectif clair et un profil de mouvement qui accompagne le changement d’état de l’interface.

  • Mouvement d’interface
  • Conseils de conception
Télécharger OpenDesignVoir le guide d’utilisation
Revue de la source · Animation PrinciplesSKILL.md
Tâche UX Produit • Une justification du mouvement pour un événement d’interface • Des recommandations d’easing, de durée et de séquence • Le comportement en cas d’interruption et avec réduction des animations Avant de commencer Fournissez les états avant et après de l’interface, le déclencheur et les appareils cibles. Utilisez un aperçu fonctionnel pour vérifier le timing, l’interruption et le comportement avec réduction des animations.
Résumé éditorial · source consultée 2026-10-07 · pas un exemple généré

01 Fonctionnement

Affiner une animation d’interface

Un guide de conception pour un seul mouvement, couvrant l’easing, la durée, la chorégraphie, l’interruption et la réduction des animations.

Workflow fondé sur la sourcePas un benchmark d’exécution

La méthode de travail

Animation Principles est un guide motion-design ciblé sur un seul mouvement d’interface. Il relie la direction de l’easing, la durée, la mise en scène et le prolongement du mouvement à ce que l’utilisateur doit remarquer. Une entrée, une sortie, une mise en emphase, un indicateur de chargement ou une transition n’ont pas le même rôle.

La source donne des plages de durée et des suggestions de décalage (stagger), mais ce sont des points de départ et non des exigences mesurées valables pour toute interface. Elle demande aussi un comportement interruptible, la prise en charge de la réduction des animations et des vérifications sur des appareils peu puissants. Les tokens de mouvement à l’échelle du produit relèvent d’une autre tâche.

Livrables attendus

  • Une justification du mouvement pour un événement d’interface
  • Des recommandations d’easing, de durée et de séquence
  • Le comportement en cas d’interruption et avec réduction des animations
Voir l’exemple de brief

Du brief à la revue

  1. 01
    Nommer le changement d’état

    Identifiez ce que l’animation communique et quel élément doit attirer l’attention en premier.

  2. 02
    Régler le mouvement

    Choisissez un profil d’easing et une durée adaptés à l’entrée, à la sortie, à l’emphase ou à la transition.

  3. 03
    Vérifier les alternatives

    Examinez l’annulation en cours d’animation, le comportement avec réduction des animations et la réactivité perçue sur les appareils cibles.

02 Cas d’usage

Quand l’utiliser

Fournissez les états avant et après de l’interface, le déclencheur et les appareils cibles. Utilisez un aperçu fonctionnel pour vérifier le timing, l’interruption et le comportement avec réduction des animations.

Un bon cas d’usage

  • Une entrée de modaleUtilisez-le pour que l’apparition d’une surface paraisse réactive et délibérée.
  • Une transition distrayanteUtile quand l’interaction fonctionne mais que son rythme ou sa chorégraphie paraît mal ajusté.

Limites à vérifier

  • Pas un Motion System completLa source le distingue des tokens de durée et d’easing à l’échelle du produit.
  • Les plages dépendent du contexteLes millisecondes suggérées ne doivent pas remplacer les tests d’interaction réels.

Apportez ces éléments

  • Déclencheur et étatsMontrez l’état initial, l’action et l’état obtenu.
  • Objectif d’attentionIndiquez ce que le spectateur doit comprendre grâce au mouvement.
  • Contraintes d’appareilIdentifiez les besoins de réduction des animations et de performance.

03 Décisions importantes

Les décisions qui comptent

  1. L’objectif avant la décoration

    Le mouvement se juge au changement d’état qu’il communique.

  2. L’interruption compte

    Une transition doit tolérer une autre action de l’utilisateur avant d’être terminée.

04 Exemple de brief

Essayer un brief ciblé

L’exemple de brief ci-dessous n’a pas été testé. Vérifiez la configuration du skill avant de l’utiliser.

Vérifier la configuration

Chargez le SKILL.md de cette tâche depuis le dépôt designer-skills dans l’emplacement de skills pris en charge par votre agent. Le fichier d’entrée n’établit aucune commande d’installation universelle.

Fichier source en amont
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/animation-principles/SKILL.md

Fournissez les états avant et après de l’interface, le déclencheur et les appareils cibles. Utilisez un aperçu fonctionnel pour vérifier le timing, l’interruption et le comportement avec réduction des animations.

Commencer par un seul livrable

Adaptez le périmètre, les sources et les contraintes de ce brief avant d’exécuter le skill.

Exemple de brief
Utilise animation-principles pour affiner l’entrée de ce panneau de filtres. Explique l’easing et la durée, coordonne le panneau et son contenu, et définis ce qui se passe s’il se ferme à mi-course. Inclus une alternative en cas de réduction des animations et évite d’ajouter des boucles décoratives.

Examiner le résultat

Comparez le résultat réel à ces critères observables.

  • L’animation communique un changement précis.
  • Une deuxième action peut l’interrompre proprement.
  • Le comportement avec réduction des animations reste compréhensible.

OpenDesign fournit un espace de travail de conception local pour les agents de code. Cette fiche ne signifie pas que le skill est fourni avec l’ensemble, ni que ses outils externes, identifiants et dépendances logicielles sont inclus.

Télécharger OpenDesignLire le guide de démarrage rapide

05 Source et licence

Source et licence

Cette page décrit la révision figée de la source liée ci-dessous. Le comportement et les exigences en amont peuvent changer.

Propriétaire de la source
Owl-Listener
Dépôt
Owl-Listener/designer-skills
Fichier du skill
interaction-design/skills/animation-principles/SKILL.md
Licence
MIT
Version consultée
2026-10-07 · 9a6930cf84a8
Résumé éditorial de la source
Un guide de conception pour un seul mouvement, couvrant l’easing, la durée, la chorégraphie, l’interruption et la réduction des animations.

Résumé original de OpenDesign, fondé sur la source liée. Les étoiles du dépôt sont un indicateur de popularité daté, ni une mesure d’utilisation du skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

Définit-il tous les tokens de mouvement ?

Non. Son périmètre déclaré est un seul mouvement ; un skill motion-system gère les tokens à l’échelle du produit.

Les plages de durée sont-elles universelles ?

Considérez-les comme des conseils de conception à tester en contexte, et non comme des valeurs optimales garanties.

Le chargement doit-il toujours être animé ?

La source énumère des modèles de chargement, mais exige que le mouvement serve un objectif et respecte les préférences d’accessibilité.

OpenDesign

Faites de la place pour la prochaine itération de conception.

Gardez votre brief, vos sources et votre travail de conception ensemble dans un espace de travail local. Vérifiez la configuration propre au skill avant de l’ajouter à votre workflow.

Télécharger OpenDesignParcourir les skills de design
Fichier source en amont
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/animation-principles/SKILL.md