Modello di progettazione dei dettagli elenco
Il modello di dettaglio elenco include un riquadro principale e un riquadro dei dettagli per il contenuto. Il riquadro principale è in genere una visualizzazione elenco. Quando si seleziona un elemento nell'elenco, il riquadro dettagli viene aggiornato. Questo modello è ovviamente ideale per i casi in cui è presente un'area di visualizzazione più ampia. Esso viene spesso usato per la posta elettronica e le rubriche.
Sfruttando i due schermi distinti e bloccando il limite naturale, è possibile usare una schermata per visualizzare l'elenco di elementi e l'altro per visualizzare i dettagli dell'elemento selezionato.
La separazione dello spostamento o della panoramica dai dettagli consente agli utenti di approfondire il contenuto mantenendo la posizione nell'elenco complessivo o nell'aggregazione.
Procedure consigliate
Ecco alcuni scenari utili per facilitare l'applicazione di questo modello di progettazione:
| Cosa fare | Cosa non fare |
|---|---|
| Utilizzare il lato sinistro della schermata per visualizzare un elenco e il lato destro per visualizzare i dettagli dell'elemento selezionato dall'elenco. | Non visualizzare l'elenco tra le due schermate, usare la seconda schermata per una visualizzazione dettagli. |
| Cosa fare | Cosa non fare |
|---|---|
| Fare in modo che nella schermata sinistra sia presente un menu inferiore rispetto all'elenco nella schermata sinistra. | Non è disponibile uno spostamento nel menu inferiore nella schermata sinistra e l'elenco si estende su due schermi. |
| Cosa fare | Cosa non fare |
|---|---|
| Usa un menu laterale con l'elenco nella schermata sinistra e i dettagli sulla schermata destra. | Non è disponibile uno spostamento di menu inferiore tra due schermate in dettaglio elenco. |
| Cosa fare | Cosa non fare |
|---|---|
| Visualizza i dettagli quando il dispositivo viene ruotato in un doppio orientamento orizzontale (con un pulsante Indietro per tornare all'elenco). | Non visualizzare l'elenco su una schermata e i dettagli sull'altra schermata quando il dispositivo viene ruotato in un doppio orientamento orizzontale. |
| Cosa fare | Cosa non fare |
|---|---|
| Usare la seconda schermata per visualizzare un'immagine più grande dall'elenco della raccolta immagini. | Non visualizzare la raccolta di elenchi su due schermi che passano attraverso la cerniera. |
Tipi di app che possono trarre vantaggio da questo modello
- App con elenchi o raccolte
- App di posta elettronica
- App di pianificazione
- App per la selezione di immagini o foto
- App musicali con playlist e dettagli relativi ai brani
- App con una struttura di navigazione avanzata
Esempi di codice
Questi progetti mostrano una semplice implementazione del modello di progettazione dei dettagli elenco che è possibile usare nelle app:
Nota
Utilizzo della visualizzazione Elenco-dettagli
Assicurarsi che quando si passa da una singola schermata a una modalità di dettaglio elenco estesa, si seleziona un elemento per visualizzare l'utente per la visualizzazione dettagli. In caso contrario, la schermata di visualizzazione dei dettagli può risultare interrotta per l'utente. Può infastidire l'utente, richiedendo un'azione per riempirla di informazioni.
Alcune opzioni includono l'ultimo elemento toccato nella visualizzazione elenco o l'elemento superiore nell'elenco o l'ultimo elemento modificato.
Passaggi successivi
Considerare questi altri modelli di progettazione: