Linee guida per i controlli visualizzazione elenco e visualizzazione griglia

[Questo articolo contiene informazioni specifiche per le app UWP e Windows 10. Per indicazioni su Windows 8.1, scarica il PDF delle linee guida per Windows 8.1.]

Gli elenchi consentono di visualizzare i contenuti delle app basate su raccolte in modi coerenti e ottimizzati per il tocco. I controlli visualizzazione elenco e visualizzazione griglia possono essere utili per visualizzare gli elenchi in modo efficace. Con i controlli visualizzazione elenco e visualizzazione griglia puoi categorizzare gli elementi e assegnare intestazioni di gruppo, trascinare e rilasciare elementi, curare il contenuto e riordinare gli elementi.

Visualizzazione elenco o visualizzazione griglia?

Le visualizzazioni elenco e le visualizzazioni griglia hanno caratteristiche simili ma usi diversi.

Le visualizzazioni elenco sono consigliate per:

  • La visualizzazione di raccolte di contenuto costituite principalmente da testo.
  • Lo spostamento in una raccolta di contenuti singola o organizzata per categorie.
  • La creazione del riquadro master nel modello master/dettagli. Il modello master/dettagli è spesso usato nelle app per l'email, in cui un riquadro contiene un elenco di elementi selezionabili e l'altro riquadro contiene una visualizzazione dettagliata dell'elemento selezionato. Per un esempio di questa visualizzazione, vedi Scegliere il modello appropriato in questo articolo.

il layout elenco include intestazioni di gruppo e viene visualizzato come una colonna singola, si legge dall'alto verso il basso e si sposta o scorre in verticale.

Esempio di una visualizzazione elenco con quattro tipi di unità principali

Le visualizzazioni griglia sono consigliate per:

  • La visualizzazione di raccolte di contenuto costituite principalmente da immagini.
  • La visualizzazione di raccolte di contenuto. Per un esempio di questa visualizzazione, vedi Scegliere il modello appropriato in questo articolo.
  • Formattazione delle due visualizzazioni del contenuto con lo zoom semantico.

Il layout a griglia scorre in verticale e gli elementi sono disposti con un ordine di lettura da sinistra a destra, quindi dall'alto verso il basso.

Esempio di layout della visualizzazione griglia

Scegliere il modello appropriato

Gli elenchi vengono usati per visualizzare raccolte di contenuto, dati master/dettagli o dati statici.

  • Raccolta di contenuto

    Usa una raccolta di contenuto per visualizzare un insieme di contenuto. Questo strumento viene spesso usato per la presentazione di contenuto multimediale, come immagini e video. In una raccolta di contenuto, gli utenti si aspettano di poter toccare un elemento per richiamare un'azione.

    Esempio di una raccolta di contenuto

     

  • Dati master/dettagli

    Quando usi un modello master/dettagli, puoi usare una visualizzazione elenco per organizzare il riquadro master. Nel riquadro master viene visualizzato un elenco di elementi selezionabili. Gli elementi selezionati dall'utente nel riquadro master vengono visualizzati nel riquadro dettagli con maggiori informazioni. Il riquadro dei dettagli contiene spesso una visualizzazione griglia.

    Esempio di un modello master/dettagli

     

    Puoi concatenare diversi elenchi per creare complesse gerarchie master/dettagli. Per altre info, vedi il modello master/dettagli.

  • Dati statici

    I dati statici vengono usati esclusivamente per presentare contenuto non interattivo, mentre la maggior parte dei tipi di interattività è disabilitata. Questo modello è utile per le raccolte di elementi di sola lettura che non possono essere attivate né esplorate.

Modalità di selezione

Questa modalità consente agli utenti di selezionare elementi ed eseguire azioni sulla selezione. È possibile richiamarla tramite un menu di scelta rapida facendo CTRL+clic o MAIUSC+clic su un elemento oppure con un effetto di attivazione su un elemento in una visualizzazione della raccolta.

Esistono tre diverse modalità di selezione:

  • Singola - L'utente può selezionare un solo elemento alla volta.
  • Multipla - L'utente può selezionare più elementi senza usare tasti di modifica.
  • Estesa - L'utente può selezionare più elementi usando tasti di modifica, ad esempio premendo MAIUSC.

Quando la modalità di selezione è attiva, vengono visualizzate caselle di controllo accanto a ogni elemento di elenco e possono essere visualizzate azioni nella parte superiore o inferiore dello schermo.

Il tocco in qualsiasi punto di un elemento consente di selezionarlo. Il tocco su un'azione nella barra dei comandi ha effetto su tutti gli elementi selezionati. Se non sono selezionati elementi, le azioni della barra dei comandi devono essere inattive, ad eccezione di "Seleziona tutto".

Per la modalità di selezione non è disponibile un modello di chiusura leggero. Il tocco al di fuori del frame in cui è attiva la modalità di selezione non comporta l'annullamento di questa modalità. Lo scopo è quello di evitare disattivazioni accidentali della modalità. Fare clic sul pulsante Indietro consente di chiudere la modalità a selezione multipla.

Deve esserci una conferma visiva della selezione di un'azione. Puoi mostrare animazioni quando opportuno. Valuta se visualizzare una finestra di dialogo di conferma per alcune azioni, in particolare per azioni distruttive come l'eliminazione.

La modalità di selezione è limitata alla pagina in cui è attiva e non può influire su alcun elemento al di fuori di tale pagina.

Il punto di ingresso alla modalità di selezione dovrebbe essere adeguato al contenuto su cui ha effetto.

Per consigli sulle barre dei comandi, vedi Linee guida per le barre dei comandi.

Modalità di selezione multipla

La modalità di modifica consente di manipolare singoli elementi. Può essere richiamata tramite il pulsante della modalità di modifica nella barra dei comandi o tramite un menu di scelta rapida.

Il punto di ingresso per la modalità di selezione multipla dovrebbe essere posizionato dall'elenco che modifica.

Fare clic sul pulsante Indietro consente di chiudere la modalità a selezione multipla. L'attivazione della modalità di modifica rimuove qualsiasi barra dei comandi. Se sono visibili altri frame quando viene attivata la modalità di selezione, questi frame vengono offuscati.

Per la modalità di modifica non è disponibile un modello di chiusura leggero. Il tocco al di fuori del frame in cui è attiva la modalità di modifica non comporta l'annullamento di questa modalità. Lo scopo è quello di evitare disattivazioni accidentali della modalità.

La modalità di modifica è limitata alla pagina in cui è attiva e non può influire su alcun elemento al di fuori di tale pagina.

Consigli

  • Gli elementi nello stesso controllo visualizzazione griglia o elenco devono avere lo stesso comportamento.
  • Se l'elenco è diviso in gruppi, usa lo zoom semantico, che rende più semplice lo spostamento dell'utente all'interno di contenuto raggruppato.

Argomenti correlati

Applicazione hub

Master/dettagli

Riquadro di spostamento

Zoom semantico