102.3K+Scarica
Vai alla guida all’uso
User Flow Diagramdi Owl-Listener

User Flow Diagram Skill.

Mostra i percorsi che un utente può seguire per completare un solo obiettivo.

  • Prototipazione
  • Flussi utente
Scarica OpenDesignVedi la guida all'uso
Revisione della fonte · User Flow DiagramSKILL.md
Attività Prototipazione Produce • Un diagramma di flusso per un singolo obiettivo dell'utente. • Decisioni, trigger, operazioni in background e uscite con etichette. • Percorsi di errore e di recupero accanto al percorso riuscito. Prima di iniziare La fonte non richiede alcuna applicazione di diagrammi; il formato di output scelto deve mantenere una notazione chiara.
Sintesi editoriale · fonte esaminata 2026-10-07 · non è un esempio generato

01 Funzionalità

Mappa percorsi, decisioni e recupero

Una guida ai diagrammi di flusso a livello di schermata, con elementi standard, etichette dei trigger, annotazioni di sistema e rami di recupero.

Flusso di lavoro basato sulla fonteNon è un benchmark di esecuzione

L'approccio di lavoro

User Flow Diagram mappa il movimento all'interno di un prodotto a livello di schermate e azioni. Distingue punti di ingresso, schermate, decisioni, azioni dell'utente, processi in background e punti finali, così che un diagramma comunichi sia il percorso sia ciò che causa ogni transizione.

La fonte consiglia di partire dal percorso ideale (happy path), poi aggiungere rami, errori, recupero e uscite. Quest'ordine mantiene leggibile il flusso senza trattare il fallimento come un ripensamento. Distingue inoltre tra flusso lineare di attività, flusso utente con ramificazioni e wire flow con miniature delle schermate.

Risultati attesi

  • Un diagramma di flusso per un singolo obiettivo dell'utente.
  • Decisioni, trigger, operazioni in background e uscite con etichette.
  • Percorsi di errore e di recupero accanto al percorso riuscito.
Vedi il brief di esempio

Dal brief alla revisione

  1. 01
    Definisci obiettivo e ingresso

    Individua che cosa significa completamento e da dove l'utente può iniziare.

  2. 02
    Disegna il percorso principale

    Mappa schermate e azioni con una notazione coerente prima di aggiungere i rami.

  3. 03
    Aggiungi decisioni e recupero

    Etichetta condizioni, eventi di sistema, ritardi, errori e uscite, così che ogni freccia abbia un motivo.

02 Quando usarlo

Quando usarlo

La fonte non richiede alcuna applicazione di diagrammi; il formato di output scelto deve mantenere una notazione chiara.

Un buon caso d'uso

  • Attività su più schermateUtile quando i team devono concordare come un utente raggiunge un risultato attraverso più schermate.
  • Flussi di lavoro con ramificazioniAiuta a far emergere i diversi percorsi causati da permessi, scelte o operazioni non riuscite.

Limiti da verificare

  • Non è un percorso emotivoNon sostituisce una customer journey map end-to-end di emozioni e punti di contatto.
  • Non è un mockup visivo dell'interfacciaUn flusso può fare riferimento a wireframe, ma descrive soprattutto percorsi, non il design finale delle schermate.

Cosa portare

  • Obiettivo dell'attivitàIndica il risultato e la condizione di completamento.
  • Schermate e punti di ingressoFornisci le viste note e i punti da cui gli utenti possono iniziare.
  • Regole dei ramiIncludi permessi, validazione, errori ed eventi lato sistema.

03 Decisioni importanti

Decisioni che contano

  1. Le frecce spiegano il comportamento

    I connettori con etichetta rendono il flusso operativo; una linea senza etichetta nasconde il trigger di cui l'implementazione ha bisogno.

  2. Un solo obiettivo mantiene la leggibilità

    Separare obiettivi non correlati evita che un unico diagramma diventi una mappa illeggibile dell'intero prodotto.

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 a cui si fa riferimento. Questa voce descrive un metodo di design mirato, non un'applicazione eseguibile.

File sorgente originale
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/prototyping-testing/skills/user-flow-diagram/SKILL.md

La fonte non richiede alcuna applicazione di diagrammi; il formato di output scelto deve mantenere una notazione chiara.

Parti da un solo risultato

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

Brief di esempio
Usa user-flow-diagram per l'invito di un collega a uno spazio di lavoro. Includi l'ingresso dalle impostazioni e da una schermata di team vuoto, i rami per account esistente e nuovo account, inviti scaduti ed errori di permesso. Etichetta ogni connettore e distingui le azioni dell'utente dall'invio dell'email in background.

Controlla il risultato

Confronta l'output effettivo con questi criteri osservabili.

  • Ogni freccia ha un trigger o una condizione.
  • Il completamento e le uscite anticipate sono espliciti.
  • Almeno i percorsi di errore noti hanno un percorso di recupero.

OpenDesign offre uno spazio di lavoro di design locale per gli agenti di programmazione. Questa scheda non significa che la skill sia inclusa nel pacchetto né 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 fissata, collegata qui sotto. Il comportamento e i requisiti upstream possono cambiare.

Titolare della fonte
Owl-Listener
Repository
Owl-Listener/designer-skills
File della skill
prototyping-testing/skills/user-flow-diagram/SKILL.md
Licenza
MIT
Snapshot esaminato
2026-10-07 · 9a6930cf84a8
Sintesi editoriale della fonte
Una guida ai diagrammi di flusso a livello di schermata, con elementi standard, etichette dei trigger, annotazioni di sistema e rami di recupero.

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

06 Domande prima di iniziare

Domande prima di iniziare

Che cos'è un wire flow?

Combina un diagramma del percorso con miniature di wireframe, così che il percorso e la struttura approssimativa delle schermate si leggano insieme.

Deve coprire l'intero prodotto?

La fonte consiglia un flusso per ogni obiettivo, per mantenere comprensibili i rami.

In che cosa si differenzia da una macchina a stati?

Un flusso utente descrive il percorso attraverso schermate e azioni. Una macchina a stati specifica stati e transizioni validi per un comportamento mirato.

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/prototyping-testing/skills/user-flow-diagram/SKILL.md