102.3K+Scarica
Vai alla guida all’uso
Visual Hierarchydi Owl-Listener

Visual Hierarchy Skill.

Scegli che cosa deve essere notato per primo, poi fai in modo che la composizione sostenga questa scelta.

  • Design UI
  • Composizione
Scarica OpenDesignVedi la guida all'uso
Revisione della fonte · Visual HierarchySKILL.md
Attività Design UI Produce • Una gerarchia dei contenuti con priorità per una singola vista. • Una motivazione della composizione basata su più segnali di attenzione. • Una checklist per la revisione visiva rapida e i test sull'attività. Prima di iniziare Servono contenuti reali e una revisione sul rendering; non è incluso alcuno strumento di valutazione visiva.
Sintesi editoriale · fonte esaminata 2026-10-07 · non è un esempio generato

01 Funzionalità

Rendi visibile l'ordine di lettura previsto

Un riferimento di composizione visiva per distribuire l'attenzione tra i livelli di contenuto con più segnali che si rafforzano a vicenda.

Flusso di lavoro basato sulla fonteNon è un benchmark di esecuzione

L'approccio di lavoro

Visual Hierarchy riguarda l'ordine in cui un'interfaccia attira l'attenzione. Combina dimensione, peso, contrasto, spazio bianco, posizione e densità, invece di affidarsi a un solo titolo enorme o a un pulsante vistoso. La fonte distingue tra informazioni primarie, secondarie, terziarie e di sfondo.

È una guida alla composizione per nuovi lavori, non un sostituto del test di una schermata esistente. Gli schemi di scansione comuni e le differenze di dimensione suggerite sono euristiche. La gerarchia effettiva va verificata in base all'attività e al pubblico, compresi i layout con direzione di lettura diversa dagli esempi da sinistra a destra della fonte.

Risultati attesi

  • Una gerarchia dei contenuti con priorità per una singola vista.
  • Una motivazione della composizione basata su più segnali di attenzione.
  • Una checklist per la revisione visiva rapida e i test sull'attività.
Vedi il brief di esempio

Dal brief alla revisione

  1. 01
    Classifica i contenuti

    Scegli l'azione o il messaggio principale e individua che cosa va scansionato subito dopo o letto su richiesta.

  2. 02
    Assegna il peso visivo

    Usa modifiche coordinate di dimensione, spaziatura, contrasto e raggruppamento, invece di dare risalto a ogni elemento.

  3. 03
    Verifica l'ordine di lettura

    Usa il test dell'occhio socchiuso e l'osservazione di attività reali per vedere se l'attenzione segue la sequenza prevista.

02 Quando usarlo

Quando usarla

Servono contenuti reali e una revisione sul rendering; non è incluso alcuno strumento di valutazione visiva.

Adatta quando

  • Composizione di una nuova schermataUtile quando più blocchi di contenuto competono per il risalto.
  • Priorità delle azioniAiuta a distinguere un'unica azione primaria dai controlli di supporto.

Limiti da verificare

  • Non è una critica completa della schermataLa fonte la presenta come definizione della gerarchia; l'audit di una schermata esistente è un'attività correlata.
  • Le euristiche richiedono contestoLe ipotesi su posizione e scansione vanno verificate in base al pubblico e alla direzione di scrittura.

Cosa fornire

  • Contenuti e azioniFornisci testi, controlli, immagini e metadati reali.
  • Priorità dell'attivitàIndica che cosa un visitatore deve notare o fare per primo.
  • Contesto del layoutIndica viewport, direzione di lettura e vincoli di brand esistenti.

03 Decisioni importanti

Decisioni che contano

  1. Lo spazio bianco porta enfasi

    L'isolamento può rafforzare un elemento senza aggiungere un altro colore o un carattere più pesante.

  2. Il raggruppamento cambia la scansione

    Elementi correlati possono essere letti come un'unità, mentre un elemento isolato attira l'attenzione come eccezione.

04 Esempio di brief

Prova un brief mirato

Il brief di esempio qui sotto non è stato testato. Controlla la configurazione della skill prima di usarlo.

Controlla la configurazione

Usa la procedura di installazione documentata nel repository e conserva gli eventuali file complementari indicati. Questa voce descrive un metodo di design mirato, non un'applicazione eseguibile.

File sorgente originale
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/visual-hierarchy/SKILL.md

Servono contenuti reali e una revisione sul rendering; non è incluso alcuno strumento di valutazione visiva.

Parti da un solo risultato

Adatta ambito, materiale di partenza e vincoli di questo brief prima di eseguire la skill.

Brief di esempio
Usa visual-hierarchy per comporre una schermata di revisione con titolo del documento, feedback non risolti, metadati di versione e un'azione di approvazione. Definisci quattro livelli di priorità e spiega i segnali di dimensione, spaziatura e contrasto. Mantieni una sola azione primaria e tieni conto dell'ordine di lettura su mobile.

Esamina il risultato

Confronta l'output effettivo con questi criteri osservabili.

  • L'elemento primario previsto resta chiaro nel test dell'occhio socchiuso.
  • I metadati di supporto non competono con l'attività principale.
  • Il raggruppamento riflette il significato e non una vicinanza arbitraria.

OpenDesign offre uno spazio di lavoro di design locale per gli agenti di coding. Questo elenco non significa che la skill sia inclusa o che i suoi strumenti esterni, le credenziali e le dipendenze software siano compresi.

Scarica OpenDesignLeggi la guida rapida

05 Fonte e licenza

Fonte e licenza

Questa pagina descrive la revisione della fonte bloccata collegata qui sotto. Il comportamento e i requisiti upstream possono cambiare.

Proprietario della fonte
Owl-Listener
Repository
Owl-Listener/designer-skills
File della skill
ui-design/skills/visual-hierarchy/SKILL.md
Licenza
MIT
Snapshot esaminato
2026-10-07 · 9a6930cf84a8
Sintesi editoriale della fonte
Un riferimento di composizione visiva per distribuire l'attenzione tra i livelli di contenuto con più segnali che si rafforzano a vicenda.

Sintesi originale di OpenDesign, basata sulla fonte collegata. Le stelle del repository sono un segnale di popolarità datato, non un indicatore di uso della skill né un punteggio di qualità.

06 Domande prima di iniziare

Domande prima di iniziare

La gerarchia è solo dimensione del carattere?

No. La fonte combina la dimensione con peso, contrasto, spaziatura, posizione e densità.

Ogni sezione deve avere una CTA primaria?

La guida privilegia una sola azione primaria per vista, anziché più controlli ugualmente dominanti.

Il test dell'occhio socchiuso sostituisce i test con gli utenti?

No. È un controllo rapido della composizione; servono comunque osservazioni basate su attività per valutare se gli utenti seguono l'ordine previsto.

OpenDesign

Fai spazio alla prossima iterazione di design.

Tieni brief, materiale di partenza e lavoro di design insieme in uno spazio di lavoro locale. Controlla la configurazione della skill prima di aggiungerla al tuo flusso di lavoro.

Scarica OpenDesignSfoglia le skill di design
File sorgente originale
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/visual-hierarchy/SKILL.md