Schede vs. Controllo Segmentato
Le schede cambiano tra sezioni di contenuto. Un controllo segmentato cambia una piccola modalità, filtro o valore nella stessa vista.
Usa tabulazioni per sezioni di contenuto separate. Usa un controllo segmentato per alcune scelte brevi che cambiano lo stesso contenuto.
Vedi cosa fa ogni modello
Prova ogni esempio. Poi leggi del lavoro che è stato creato per fare.
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"
Gruppo toggle
Un gruppo etichettato di pulsanti attivi o inattivi. Una o più opzioni separate possono restare premute.
Un editor di testo permette di tenere attivi Grassetto e Corsivo allo stesso tempo. Ogni pulsante indica se è premuto.
- Usalo quando
- Usalo per pochi piccoli modi reversibili il cui stato corrente deve rimanere visibile.
- Non usarlo quando
- Usa i pulsanti di opzione quando può essere inviata esattamente una scelta. Usa le caselle di controllo per le scelte normali dei moduli.
- Nome usato nel codice
button[aria-pressed] in a labeled group
Confronto rapido
| Pattern UI | Migliore per | Non per | Nome usato nel codice |
|---|---|---|---|
| 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" |
| Gruppo toggleToggle Group | Usalo per pochi piccoli modi reversibili il cui stato corrente deve rimanere visibile. | Usa i pulsanti di opzione quando può essere inviata esattamente una scelta. Usa le caselle di controllo per le scelte normali dei moduli. | button[aria-pressed] in a labeled group |
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 Schede (Tabs), Gruppo toggle (Toggle Group) per il nostro reale flusso utente. Usa questa regola: Le schede cambiano tra sezioni di contenuto. Un controllo segmentato cambia una piccola modalità, filtro o valore nella stessa vista. 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.