Fisarmonica contro Schede
Una fisarmonica apre sezioni in una pagina e ne può mantenere diverse aperte. Le schede mostrano una sezione alla volta in un unico spazio condiviso.
Usa un accordion per domande o sezioni che le persone possono leggere insieme. Usa le schede per poche viste separate quando ne conta solo una alla volta.
Vedi cosa fa ogni modello
Prova ogni esempio. Poi leggi del lavoro che è stato creato per fare.
Fisarmonica
Una fisarmonica impila sezioni le cui intestazioni possono aprire o chiudere i propri contenuti.
Fisarmonica
Una fisarmonica impila sezioni le cui intestazioni possono aprire o chiudere i propri contenuti.
Scegli quando
Usalo per sezioni opzionali che hanno ciascuna un'intestazione chiara e separata.
Una FAQ mostra prima le domande. Una persona può aprire una risposta senza lasciare la pagina.
- Usalo quando
- Usalo per sezioni opzionali che hanno ciascuna un'intestazione chiara e separata.
- Non usarlo quando
- Non nascondere mai informazioni brevi ed essenziali solo per far sembrare la pagina ordinata.
- Nome usato nel codice
<details><summary>
Schede
Le schede utilizzano etichette per cambiare contenuto in un pannello condiviso. Il compito principale rimane aperto.
Panoramica, Attività e Permessi cambiano il pannello sottostante mentre lo stesso progetto rimane aperto.
- Usalo quando
- Usa tabulazioni per alcune sezioni allo stesso livello quando le loro etichette devono rimanere visibili.
- Non usarlo quando
- Non usare mai schede come piccoli link a pagine che non hanno nulla a che fare l'una con l'altra.
- Nome usato nel codice
role="tablist"
Confronto rapido
| Pattern UI | Migliore per | Non per | Nome usato nel codice |
|---|---|---|---|
| FisarmonicaAccordion | Usalo per sezioni opzionali che hanno ciascuna un'intestazione chiara e separata. | Non nascondere mai informazioni brevi ed essenziali solo per far sembrare la pagina ordinata. | <details><summary> |
| SchedeTabs | Usa tabulazioni per alcune sezioni allo stesso livello quando le loro etichette devono rimanere visibili. | Non usare mai schede come piccoli link a pagine che non hanno nulla a che fare l'una con l'altra. | role="tablist" |
Prima di spedire
- 01
Scrivi cosa la persona deve fare.
- 02
Testare tastiera, focus, touch, zoom, caricamento, stati vuoti e di errore.
- 03
Assicurati che le persone possano ottenere le stesse informazioni senza hover o movimento.
- 04
Testare con contenuti reali sia su schermi piccoli che grandi.
Richiesta di confronto che puoi copiare
Copia questo quando il tuo team ha bisogno di aiuto per scegliere tra i modelli.
Scegli il modello migliore da Fisarmonica (Accordion), Schede (Tabs) per il nostro reale flusso utente. Usa questa regola: Una fisarmonica apre sezioni in una pagina e ne può mantenere diverse aperte. Le schede mostrano una sezione alla volta in un unico spazio condiviso. Scrivi il compito, la quantità di contenuti e il costo di interrompere il flusso. Controlla il comportamento della tastiera, del touch, del caricamento, degli errori e della modalità ridotta. Spiega la tua scelta, quindi costruisci la versione più piccola accessibile con il sistema di design del progetto.