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

Visual Hierarchy Skill.

Choisissez ce qui doit être remarqué en premier, puis faites en sorte que la composition soutienne ce choix.

  • Design d’interface
  • Composition
Télécharger OpenDesignVoir le guide d’utilisation
Revue de la source · Visual HierarchySKILL.md
Tâche Design d’interface Produit • Une hiérarchie de contenu priorisée pour une vue. • Une justification de composition s’appuyant sur plusieurs signaux d’attention. • Une liste de contrôle pour une revue visuelle rapide et des tests de tâches. Avant de commencer Nécessite du contenu réel et une revue du rendu ; aucun outil de notation visuelle n’est fourni.
Résumé éditorial · source examinée 2026-10-07 · pas un exemple généré

01 Fonctionnement

Rendre visible l’ordre de lecture voulu

Une référence de composition visuelle pour répartir l’attention entre les niveaux de contenu à l’aide de plusieurs signaux complémentaires.

Flux de travail fondé sur la sourcePas un benchmark d’exécution

La méthode de travail

Visual Hierarchy traite de l’ordre dans lequel une interface attire l’attention. Il combine taille, graisse, contraste, espace blanc, position et densité plutôt que de s’appuyer sur un seul titre surdimensionné ou un bouton vif. La source distingue les informations primaires, secondaires, tertiaires et d’arrière-plan.

C’est un guide de composition pour un nouveau travail, et non un substitut au test d’un écran existant. Les schémas de balayage courants et les écarts de taille suggérés sont des heuristiques. La hiérarchie réelle doit être vérifiée au regard de la tâche et du public, y compris pour les mises en page dont le sens de lecture diffère des exemples de la source, de gauche à droite.

Livrables attendus

  • Une hiérarchie de contenu priorisée pour une vue.
  • Une justification de composition s’appuyant sur plusieurs signaux d’attention.
  • Une liste de contrôle pour une revue visuelle rapide et des tests de tâches.
Voir le brief d’exemple

Du brief à la revue

  1. 01
    Classer le contenu

    Choisissez l’action ou le message principal et identifiez ce qui doit être parcouru ensuite ou lu à la demande.

  2. 02
    Attribuer le poids visuel

    Utilisez des variations coordonnées de taille, d’espacement, de contraste et de regroupement plutôt que de rendre chaque élément proéminent.

  3. 03
    Vérifier l’ordre de lecture

    Faites un test des yeux plissés et observez de vraies tâches pour voir si l’attention suit la séquence voulue.

02 Cas d’usage

Quand l’utiliser

Nécessite du contenu réel et une revue du rendu ; aucun outil de notation visuelle n’est fourni.

Un bon choix

  • Composition d’un nouvel écranUtile lorsque plusieurs blocs de contenu se disputent la prééminence.
  • Priorité des actionsAide à distinguer une action principale des commandes secondaires.

Limites à vérifier

  • Pas une critique complète d’écranLa source le présente comme l’établissement d’une hiérarchie ; l’audit d’un écran existant est une tâche connexe.
  • Les heuristiques dépendent du contexteLes hypothèses de position et de balayage doivent être vérifiées selon le public et le sens d’écriture.

Apportez ces éléments

  • Contenu et actionsFournissez le texte, les commandes, les images et les métadonnées réels.
  • Priorité de la tâcheIndiquez ce qu’un visiteur doit remarquer ou faire en premier.
  • Contexte de mise en pageIndiquez la fenêtre d’affichage, le sens de lecture et les contraintes de marque existantes.

03 Décisions importantes

Les décisions qui comptent

  1. L’espace blanc porte l’emphase

    L’isolement peut renforcer un élément sans ajouter une autre couleur ou une police plus grasse.

  2. Le regroupement change le balayage

    Des éléments liés peuvent se lire comme une unité, tandis qu’un élément isolé attire l’attention comme une exception.

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.

Vérifier la configuration

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

Fichier source amont
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/visual-hierarchy/SKILL.md

Nécessite du contenu réel et une revue du rendu ; aucun outil de notation visuelle n’est fourni.

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 visual-hierarchy pour composer un écran de revue contenant un titre de document, des commentaires non résolus, des métadonnées de version et une action d’approbation. Définissez quatre niveaux de priorité et expliquez les signaux de taille, d’espacement et de contraste. Gardez une seule action principale et tenez compte de l’ordre de lecture sur mobile.

Inspecter le résultat

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

  • L’élément principal voulu reste clair lors d’un test des yeux plissés.
  • Les métadonnées secondaires ne concurrencent pas la tâche principale.
  • Le regroupement reflète le sens plutôt qu’une proximité arbitraire.

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

Télécharger OpenDesignLire le 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
ui-design/skills/visual-hierarchy/SKILL.md
Licence
MIT
Instantané examiné
2026-10-07 · 9a6930cf84a8
Résumé éditorial de la source
Une référence de composition visuelle pour répartir l’attention entre les niveaux de contenu à l’aide de plusieurs signaux complémentaires.

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

06 Questions avant de commencer

Questions avant de commencer

La hiérarchie se résume-t-elle à la taille de police ?

Non. La source combine la taille avec la graisse, le contraste, l’espacement, la position et la densité.

Chaque section doit-elle avoir un CTA principal ?

Les recommandations privilégient une seule action principale par vue plutôt que plusieurs commandes également dominantes.

Un test des yeux plissés remplace-t-il les tests utilisateurs ?

Non. C’est un contrôle rapide de la composition ; l’observation de tâches reste nécessaire pour évaluer si les utilisateurs suivent l’ordre voulu.

OpenDesign

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

Gardez votre brief, votre matériel source et votre travail de design ensemble dans un espace de travail local. Vérifiez la configuration propre au skill avant de l’ajouter à votre flux de travail.

Télécharger OpenDesignParcourir les skills de design
Fichier source amont
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/visual-hierarchy/SKILL.md