102.3K+Télécharger
Aller au guide d’utilisation
Micro-Interaction Specpar Owl-Listener

Micro-Interaction Spec Skill.

Donnez aux équipes d'ingénierie le comportement d'une petite interaction, et pas seulement une référence d'animation.

  • Design d'interaction
  • Transmission UI
Télécharger OpenDesignVoir le guide d'utilisation
Revue de la source · Micro-Interaction SpecSKILL.md
Tâche Design d'interaction Produit • Une spécification des déclencheurs et des règles pour une interaction. • Une séquence de retour d'information avec des notes sur le timing et l'easing. • Le comportement en cas de répétition, de première utilisation et d'accessibilité. Avant de commencer Aucune bibliothèque d'animation particulière n'est requise ; des tests sur l'appareil cible restent nécessaires.
Résumé éditorial · source examinée 2026-10-07 · exemple non généré

01 Fonctionnement

Spécifier une interaction de façon complète

Un format de transmission ciblé sur une interaction, construit autour des déclencheurs, des règles, du retour d'information et des boucles ou modes.

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

L'approche de travail

Micro-Interaction Spec décrit une petite interaction comme une unité comportementale complète. Un déclencheur la lance, des règles déterminent la suite, le retour d'information communique le résultat, et les boucles ou modes expliquent la répétition et les changements dans le temps. La structure convient à un interrupteur, une action favori, un pull-to-refresh, un signal de validation ou un appui long.

Le mouvement n'est qu'une partie du résultat. Les changements visuels, l'audio et le retour haptique sont des canaux de retour possibles, et non des capacités garanties sur toutes les plateformes. La source demande la durée, l'easing et les considérations d'accessibilité en plus de la logique, ce qui évite qu'une animation soignée masque un état d'échec ou de répétition non défini.

Livrables attendus

  • Une spécification des déclencheurs et des règles pour une interaction.
  • Une séquence de retour d'information avec des notes sur le timing et l'easing.
  • Le comportement en cas de répétition, de première utilisation et d'accessibilité.
Voir le brief d'exemple

Du brief à la revue

  1. 01
    Définir le déclencheur

    Indiquez si l'interaction commence par un geste, un événement système ou une condition.

  2. 02
    Rédiger les règles

    Décrivez la séquence, les conditions et les branches avant de choisir le traitement du retour d'information.

  3. 03
    Spécifier la perception et la répétition

    Expliquez ce que l'utilisateur voit ou ressent, combien de temps cela dure et ce qui change lors des tentatives suivantes.

02 Cas d’usage

Quand l'utiliser

Aucune bibliothèque d'animation particulière n'est requise ; des tests sur l'appareil cible restent nécessaires.

Un bon choix

  • Transmissions à l'ingénierieUtile quand une courte interaction semble claire dans un prototype mais n'a pas de comportement écrit.
  • Affinage du retour d'informationAide à distinguer une confirmation utile d'une décoration qui n'apporte aucune information.

Limites à vérifier

  • Une interaction à la foisUn composant avec de nombreux états interdépendants nécessite un modèle state-machine plus large.
  • Aucune garantie sur l'appareilLe retour haptique ou audio doit être pris en charge et testé sur la plateforme cible.

Éléments à fournir

  • Action et contexteIdentifiez précisément le contrôle, le geste ou l'événement à spécifier.
  • Logique et conditionsFournissez les comportements en cas de succès, de rejet et d'action répétée.
  • Contraintes de plateformeIndiquez les préférences de mouvement, les canaux de retour pris en charge et les limites de performance.

03 Décisions importantes

Décisions importantes

  1. Les boucles sont explicites

    Les actions répétées peuvent nécessiter une réponse différente de la première utilisation, au lieu de rejouer le même retour à chaque fois.

  2. La logique précède l'easing

    La spécification reste utile même si l'animation est supprimée pour des raisons d'accessibilité.

04 Exemple de brief

Essayer un brief ciblé

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

Examiner la configuration

Utilisez la méthode d'installation documentée du dépôt et conservez les fichiers complémentaires référencés. Cette entrée décrit une méthode de design ciblée, et non une application exécutable.

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

Aucune bibliothèque d'animation particulière n'est requise ; des tests sur l'appareil cible restent nécessaires.

Commencer par un seul livrable

Adaptez la portée, le matériel source et les contraintes de ce brief avant d'exécuter le skill.

Brief d'exemple
Utilisez micro-interaction-spec pour l'enregistrement d'un article dans une liste de lecture. Définissez le déclencheur par clic, les règles pour l'état en attente et l'échec d'enregistrement, la confirmation visuelle, le comportement en cas de clics répétés et l'alternative pour le mouvement réduit. Limitez-vous à cette interaction et ne supposez pas de prise en charge haptique sur le web.

Examiner le résultat

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

  • Le déclencheur et l'état obtenu sont sans ambiguïté.
  • Une activation répétée a un résultat défini.
  • Le retour d'information essentiel subsiste avec le mouvement réduit.

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

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

05 Source et licence

Source et licence

Cette page décrit la révision source figée 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/micro-interaction-spec/SKILL.md
Licence
MIT
Instantané examiné
2026-10-07 · 9a6930cf84a8
Résumé éditorial de la source
Un format de transmission ciblé sur une interaction, construit autour des déclencheurs, des règles, du retour d'information et des boucles ou modes.

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

06 Questions avant de commencer

Questions avant de commencer

Est-il réservé à l'animation ?

Non. Le cadre comprend les déclencheurs, la logique, le retour d'information et la répétition. L'animation n'est qu'une option de retour.

En quoi diffère-t-il d'une machine à états ?

Il spécifie l'expérience d'une interaction ciblée. Une machine à états modélise de façon exhaustive un ensemble plus vaste d'états et de transitions valides.

Chaque interaction doit-elle utiliser du son ou des vibrations ?

Non. La source énumère des canaux à envisager ; le contexte produit et la plateforme déterminent lesquels conviennent.

OpenDesign

Faites de la place à la prochaine itération de design.

Gardez votre brief, vos sources et votre travail de design 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/micro-interaction-spec/SKILL.md