Navigation Patternsdi Owl-Listener

Navigation Patterns Skill.

Trasforma una gerarchia informativa in controlli di navigazione riconoscibili e in percorsi chiari tra le destinazioni.

Interaction design
Navigazione

Scarica OpenDesign Vedi la guida all'uso

Revisione della fonte · Navigation PatternsSKILL.md

Attività Interaction design Produce • Un pattern di navigazione consigliato con motivazione basata sulle attività. • Assegnazione della navigazione globale, locale, di servizio e contestuale. • Requisiti per gli stati attivo, hover, focus, disabilitato e badge. Prima di iniziare Richiede una gerarchia informativa e le priorità delle attività; non è fornito alcun pacchetto di componenti di navigazione.

Sintesi editoriale · fonte rivista 2026-10-07 · non è un esempio generato

01 Funzionalità

Scegli come gli utenti si muovono in un prodotto

Una guida alla scelta della navigazione che copre pattern globali e locali, indicazioni di orientamento, convenzioni di piattaforma e progettazione degli stati.

Flusso di lavoro basato sulla fonteNon è un benchmark di esecuzione

Il metodo di lavoro

Navigation Patterns seleziona l'interfaccia che rende visibile la struttura del prodotto: tab mobile, barre laterali desktop, navigazione superiore, breadcrumb, link contestuali o drawer. Mantiene distinte la navigazione globale, locale e di servizio, così le destinazioni di livelli diversi non competono nello stesso controllo.

La fonte dà importanza all'orientamento quanto allo spostamento. L'utente deve sapere dove si trova, prevedere dove porta un'etichetta e trovare la via del ritorno. Gli stati attivi devono restare riconoscibili oltre il colore, e il pattern deve adattarsi alla piattaforma e alla frequenza d'uso, non solo risparmiare spazio sullo schermo.

Risultati attesi

Un pattern di navigazione consigliato con motivazione basata sulle attività.
Assegnazione della navigazione globale, locale, di servizio e contestuale.
Requisiti per gli stati attivo, hover, focus, disabilitato e badge.

Vedi il brief di esempio

Dal brief alla revisione

01
Leggi la struttura
Individua destinazioni principali, sezioni annidate e funzioni di servizio occasionali nell'architettura informativa esistente.
02
Abbina il pattern al contesto
Considera piattaforma, numero di destinazioni, profondità della gerarchia e raggiungibilità su mobile prima di scegliere i controlli.
03
Verifica l'orientamento
Specifica gli indicatori della posizione corrente e testa etichette e attività tra sezioni con utenti rappresentativi.

02 Quando usarlo

Quando usarla

Richiede una gerarchia informativa e le priorità delle attività; non è fornito alcun pacchetto di componenti di navigazione.

Adatta a

Scegliere tra tab e drawerUtile quando le opzioni di navigazione comportano compromessi diversi in termini di visibilità e raggiungibilità.
Strutture di prodotto profondeAiuta a combinare breadcrumb e navigazione locale senza mescolare i livelli della gerarchia.

Limiti da verificare

Non sostituisce l'architettura informativaCategorie ed etichette poco chiare possono richiedere una ristrutturazione prima che qualsiasi controllo funzioni bene.
Nessuna prova automatica di usabilitàI pattern consigliati richiedono una validazione con test del primo clic o basati su attività.

Cosa portare

Gerarchia delle destinazioniFornisci le sezioni definite e le loro relazioni padre-figlio.
Priorità d'usoIndica le attività frequenti, gli spostamenti tra sezioni e le destinazioni di servizio.
PiattaformeDescrivi vincoli, convenzioni e requisiti di accessibilità per desktop e mobile.

03 Decisioni importanti

Decisioni importanti

La visibilità ha un costo
Nascondere la navigazione può semplificare il layout, ma rende più difficile scoprire le destinazioni importanti.
Stato oltre il colore
Peso del carattere, sottolineature o indicatori possono rendere percepibile la posizione corrente senza affidarsi solo alla tinta.

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 il metodo di installazione documentato nel repository e conserva eventuali file complementari indicati. Questa scheda descrive un metodo di progettazione mirato, non un'applicazione eseguibile.

File sorgente originale

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/navigation-patterns/SKILL.md

Richiede una gerarchia informativa e le priorità delle attività; non è fornito alcun pacchetto di componenti di navigazione.

Parti da un solo risultato

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

Brief di esempio

Usa navigation-patterns per un'app di analytics desktop con sei sezioni principali, cartelle di report annidate e accesso da mobile. Confronta una barra laterale con la navigazione superiore, separa le funzioni di servizio e specifica breadcrumb e stati attivo/focus. Spiega quali questioni di architettura informativa vanno risolte prima dell'implementazione.

Esamina il risultato

Confronta l'output effettivo con questi criteri osservabili.

I livelli globale e locale non vengono mescolati per errore.
La destinazione corrente è indicata con qualcosa in più del colore.
Le attività tra sezioni hanno un percorso individuabile e una via di ritorno.

OpenDesign offre uno spazio di lavoro di design locale per agenti di coding. Questa scheda non significa che la skill sia inclusa nel pacchetto né che strumenti esterni, credenziali e dipendenze software siano compresi.

Scarica OpenDesign Leggi la guida rapida

05 Fonte e licenza

Fonte e licenza

Questa pagina descrive la revisione della fonte fissata e collegata qui sotto. Comportamento e requisiti upstream possono cambiare.

Titolare della fonte: Owl-Listener
Repository: Owl-Listener/designer-skills
File della skill: interaction-design/skills/navigation-patterns/SKILL.md
Licenza: MIT
Versione rivista: 2026-10-07 · 9a6930cf84a8

Sintesi editoriale della fonte

Una guida alla scelta della navigazione che copre pattern globali e locali, indicazioni di orientamento, convenzioni di piattaforma e progettazione degli stati.

Sintesi originale di OpenDesign, basata sulla fonte collegata. Le stelle del repository sono un indicatore di popolarità datato, non misurano l'uso della skill né ne indicano la qualità.

06 Domande prima di iniziare

Domande prima di iniziare

La navigazione mobile deve usare sempre un drawer?

No. La fonte privilegia tab visibili per un piccolo insieme di destinazioni principali e considera i drawer un compromesso in termini di scopribilità.

Quando sono utili i breadcrumb?

Aiutano a chiarire posizione e ascendenza in gerarchie di contenuti più profonde, spesso insieme alla navigazione locale.

Può correggere nomi di sezione poco familiari?

Può segnalarli e consigliare test delle etichette, ma le categorie sottostanti potrebbero richiedere un lavoro di architettura informativa.

OpenDesign

Fai spazio alla prossima iterazione del 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 OpenDesign Sfoglia le skill di design