Barra laterale vs. Cassetto
Una barra laterale resta nel layout della pagina. Un cassetto scivola dentro per poco tempo e può coprire o spingere la pagina.
Usa una barra laterale per strumenti o collegamenti che le persone usano spesso quando c'è spazio. Usa un cassetto per attività meno comuni o schermi piccoli, e rendilo facile da chiudere.
Vedi cosa fa ogni modello
Prova ogni esempio. Poi leggi del lavoro che è stato creato per fare.
Sidebar Source List
Una Sidebar Source List è un elenco a albero sul lato di una finestra. La fonte o il gruppo scelto decide cosa appare nell'area principale.
Una libreria foto elenca Library, Favorites, gli album e i gruppi condivisi. La collezione scelta riempie l'area dei dettagli.
- Usalo quando
- Usalo quando gruppi o luoghi stabili controllano la vista principale e le persone vi ritornano spesso mentre lavorano.
- Non usarlo quando
- Evitalo per una lista di controllo monouso o per una breve e semplice lista di azioni. Ogni categoria dovrebbe cambiare davvero l'origine del contenuto principale.
- Nome usato nel codice
NSOutlineView source-list style / SwiftUI NavigationSplitView
Cassetto
Un drawer scorre dal bordo dello schermo. Una parte della pagina dietro di esso resta visibile.
Seleziona un ordine per aprirne i dettagli da destra. L'elenco degli ordini rimane visibile dietro.
- Usalo quando
- Usalo per dettagli o per un secondo compito più piccolo quando mantenere il posto attuale è utile.
- Non usarlo quando
- Non comprimere mai un lungo flusso di lavoro con molti passaggi in un cassetto stretto.
- Nome usato nel codice
Dialog + edge positioning
Confronto rapido
| Pattern UI | Migliore per | Non per | Nome usato nel codice |
|---|---|---|---|
| Sidebar Source ListSidebar Source List | Usalo quando gruppi o luoghi stabili controllano la vista principale e le persone vi ritornano spesso mentre lavorano. | Evitalo per una lista di controllo monouso o per una breve e semplice lista di azioni. Ogni categoria dovrebbe cambiare davvero l'origine del contenuto principale. | NSOutlineView source-list style / SwiftUI NavigationSplitView |
| CassettoDrawer | Usalo per dettagli o per un secondo compito più piccolo quando mantenere il posto attuale è utile. | Non comprimere mai un lungo flusso di lavoro con molti passaggi in un cassetto stretto. | Dialog + edge positioning |
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 Sidebar Source List (Sidebar Source List), Cassetto (Drawer) per il nostro reale flusso utente. Usa questa regola: Una barra laterale resta nel layout della pagina. Un cassetto scivola dentro per poco tempo e può coprire o spingere la pagina. 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.