Condividi tramite


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.

Il diagramma mostra il modello di progettazione dei dettagli dell'elenco con navigazione e contenuto su schermi diversi.

Procedure consigliate

Ecco alcuni scenari utili per facilitare l'applicazione di questo modello di progettazione:

Il diagramma mostra un elenco su una schermata con contenuto sull'altro anziché sugli elementi dell'elenco che attraversano la cerniera.

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.

Il diagramma mostra un menu inferiore sul lato elenco dello schermo, senza attraversare la cerniera.

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.

Diagramma che mostra l'uso di un menu laterale nella schermata dell'elenco, anziché un menu inferiore che si estende su entrambe le schermate.

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.

Il diagramma mostra una visualizzazione ruotata, che mostra solo il contenuto in entrambe le schermate, non l'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.

Il diagramma mostra una raccolta di immagini nella schermata elenco con un'immagine ingrandita nella seconda schermata.

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: