Google si impegna a promuovere l'equità razziale per le comunità nere. Vedi come.
Questa pagina è stata tradotta dall'API Cloud Translation.
Switch to English

Linee guida per la progettazione delle impostazioni Android

Questo documento evidenzia i principi e le linee guida per chiunque stia progettando impostazioni della piattaforma Android, impostazioni core GMS (Impostazioni Google) o qualsiasi sviluppatore che stia progettando impostazioni per la propria app Android.

Principi di progettazione

Fornire una buona panoramica

Gli utenti dovrebbero essere in grado di dare un'occhiata alle schermate delle impostazioni e comprendere tutte le singole impostazioni e i loro valori.

Figura 1. Le impostazioni e i loro valori correnti sono presentati nella schermata di livello superiore

Organizza gli oggetti in modo intuitivo

Posiziona le impostazioni utilizzate di frequente nella parte superiore dello schermo. Limitare il numero di impostazioni su una schermata. Mostrare più di 10-15 articoli può essere travolgente. Crea menu intuitivi spostando alcune impostazioni su uno schermo separato.

Figura 2. Le impostazioni comuni sono nella parte superiore dello schermo

Rendi le impostazioni facili da trovare

In alcuni casi, può essere utile duplicare una singola impostazione su due schermi diversi. Situazioni diverse possono indurre gli utenti a modificare un'impostazione, quindi includere l'impostazione in più posizioni aiuterà gli utenti a trovare questo elemento.

Per impostazioni duplicate, creare una schermata separata per l'impostazione e disporre di punti di ingresso da luoghi diversi.

Figure 3 e 4. "Suono di notifica predefinito" appare su entrambe le schermate "Notifica" e "Suono"

Usa un titolo e uno stato chiari

Rendi i titoli delle tue impostazioni brevi e significativi. Evita di usare titoli vaghi come "Impostazioni generali". Sotto il titolo, mostra lo stato per evidenziare il valore dell'impostazione. Mostra i dettagli specifici invece di descrivere semplicemente il titolo.

I titoli dovrebbero:

  • Metti prima il testo più importante della tua etichetta.
  • Sostituisci le parole negative come "non" o "mai" in termini neutri come "blocco".
  • Utilizza etichette impersonali come "Notifiche" anziché "Avvisami". Eccezione: se è necessario fare riferimento all'utente per comprendere l'impostazione, utilizzare la seconda persona ("tu") anziché la prima persona ("I").

I titoli dovrebbero evitare:

  • Termini generici, come impostare, cambiare, modificare, modificare, gestire, utilizzare, selezionare o scegliere.
  • Ripetizione di parole dal divisore di sezione o dal titolo della schermata secondaria.
  • Gergo tecnico.

Tipi di pagina

Elenco delle impostazioni

Questo è il tipo più comune di schermo. Consente di mettere insieme più impostazioni. Gli elenchi di impostazioni possono essere un mix di controlli, come interruttori, menu e cursori.

Se ci sono molte impostazioni in una categoria, possono essere raggruppate insieme. Vedi Raggruppamento e divisori per maggiori dettagli.

Figura 5. Esempio di elenco delle impostazioni

Visualizzazione elenco

La visualizzazione elenco viene utilizzata per mostrare un elenco di elementi come app, account, dispositivi e altro. I controlli per filtrare o ordinare possono essere aggiunti allo schermo.

Figura 6. Esempio di visualizzazione Elenco

Schermata dell'entità

La schermata dell'entità viene utilizzata per presentare le impostazioni di un elemento distinto come un'app, un account, un dispositivo, una rete Wi-Fi, ecc.

Visivamente, l'entità viene mostrata in alto con un'icona, un titolo e un sottotitolo. Tutte le impostazioni su questa schermata devono essere correlate a questa entità.

Figura 7. Esempio di schermata Entity utilizzata nelle informazioni sull'app

Figura 8. Esempio di schermata Entity utilizzata in Storage

Impostazione principale

L'impostazione principale viene utilizzata al meglio quando è possibile attivare o disattivare un'intera funzione, ad esempio Wi-Fi o Bluetooth. Utilizzando un interruttore nella parte superiore dello schermo, l'utente può facilmente controllare questa funzione. L'uso dell'impostazione principale per disabilitare la funzione disabilita tutte le altre impostazioni correlate.

Se una funzione richiede una descrizione del testo più lunga, è possibile utilizzare l'impostazione principale in quanto questo tipo di schermo consente un testo a piè di pagina più lungo.

Se un'impostazione deve essere duplicata o collegata da più schermate, utilizzare l'impostazione principale. Poiché l'impostazione principale è una schermata separata, eviterai di avere più interruttori in luoghi diversi per la stessa impostazione.

Figura 9. Esempio di impostazione principale utilizzata nella schermata Notifiche app; la disattivazione dell'interruttore principale disattiverà l'intera funzionalità di questa app

Figura 10. Esempio di impostazione principale utilizzata nella schermata delle notifiche dell'app con l'interruttore principale disattivato

Schermata di selezione del pulsante di opzione

Questa schermata viene utilizzata quando l'utente deve effettuare una selezione per un'impostazione. I pulsanti di opzione possono essere visualizzati in una finestra di dialogo o in una schermata separata. I pulsanti di opzione non devono essere utilizzati insieme a cursori, menu o interruttori.

La schermata di un pulsante di opzione può contenere un'immagine nella parte superiore e il testo a piè di pagina nella parte inferiore. I singoli pulsanti di opzione possono avere sottotesto insieme a un titolo.

Figura 11. I pulsanti di opzione non devono essere utilizzati nell'elenco delle impostazioni

Figura 12. Ecco come utilizzare correttamente i pulsanti di opzione nelle impostazioni

componenti

A partire da Android 8.0, la barra degli strumenti delle azioni presenta la ricerca e la guida insieme ad altre azioni correlate. I menu di overflow sono scoraggiati poiché gli utenti potrebbero non scoprire le azioni nascoste in questi menu.

Per barre degli strumenti senza azioni specifiche dello schermo. Mostra azioni di ricerca e aiuto.

Figura 13. Barra degli strumenti con azioni di ricerca e aiuto

Per le barre degli strumenti con una sola azione : presentare l'azione prima della ricerca.

Figura 14. Barra degli strumenti con un'azione prima della ricerca e delle azioni di aiuto

Per le barre degli strumenti con più di 1 azione : considera di posizionare l'azione principale prima della ricerca, inserendo nel menu di overflow azioni avanzate.

Se tutte le azioni sono avanzate o utili solo per un piccolo gruppo di utenti, considerare di inserire tutte le azioni nel menu di overflow.

Figura 15. Barra degli strumenti con un menu di overflow per le azioni

Intestazione dell'entità

L'intestazione dell'entità può mostrare solo un'intestazione o un'intestazione con sottotesto (sono consentite più righe per il sottotesto). L'azione seguente è facoltativa. Puoi avere un massimo di due azioni.

Figura 16. Intestazione dell'entità

L'icona e la parte dell'intestazione (App1) scorreranno sotto l'intestazione (Informazioni sull'app).

Figura 17. Il titolo delle informazioni sull'app qui fa parte della barra degli strumenti, mentre il resto dello schermo scorrerà sotto di essa

Il titolo è obbligatorio Dovresti anche mostrare il sottotesto che evidenzia lo stato dell'impostazione. L'uso di un'icona è facoltativo.

Cerca di mantenere conciso il testo del titolo. Se i titoli sono lunghi, possono continuare sulla riga successiva invece di essere troncati. Non abilitare menu o azioni a pressione prolungata.

Esempi:

Figura 18. Collegamento al menu con icona, titolo e sottotesto

Figura 19. Link al menu con titolo e sottotesto

Figura 20. Link al menu solo con titolo

Collegamento al menu con icona, titolo, sottotesto e un target di hit separato sulla destra

Altri target dei tocchi dovrebbero usare il colore del tema.

Figura 21. Esempio di menu target a due tocchi

Collegamento al menu con icona, titolo, sottotesto e icona stats / number / alert

Valori numerici come percentuale e tempo possono essere visualizzati a destra insieme al sottotesto, mentre un grafico a barre può essere mostrato di seguito.

Di solito, i valori numerici sono presentati a destra in modo che gli utenti possano facilmente guardarli e confrontarli.

Figura 22. Esempio di menu con icona, titolo, stat e grafico

Raggruppamento e divisori

Se una schermata ha molte impostazioni, possono essere raggruppate e separate da un divisore. A differenza delle versioni precedenti di Android, i divisori vengono ora utilizzati per raggruppare le impostazioni in un gruppo, anziché separare le singole impostazioni.

Se le impostazioni in un gruppo sono strettamente correlate, è possibile aggiungere un'intestazione di gruppo. Se si utilizza un'intestazione di gruppo, è necessario includere sempre un divisore.

Figura 23. Impostazioni raggruppate con divisori

Interruttore

Passa con icona, titolo e sottotesto

Figura 24. Passa con icona, titolo e sottotesto

Passa a titolo e sottotesto

Figura 25. Passa a titolo e sottotesto

Passa solo al titolo

I titoli possono essere accompagnati da un'icona a sinistra.

Figura 26. Passa solo al titolo

Voce di elenco + interruttore

È possibile combinare una voce di elenco con un interruttore. Toccando sul lato sinistro della linea verticale si comporta come un collegamento e porta l'utente alla schermata successiva. Il lato destro si comporta come un interruttore standard.

Per la voce di elenco sul lato sinistro, è obbligatorio un titolo. L'icona e il sottotesto sono opzionali.

Figura 27. Voce di elenco e un interruttore

Slider

L'icona è facoltativa nel dispositivo di scorrimento.

Figura 28. Cursore

Pulsante sullo schermo

Le azioni positive usano il colore del tema mentre le azioni negative sono grigie. Le azioni positive possono includere l'apertura di un'app, l'installazione di un'app, l'aggiunta di un nuovo elemento, ecc. Le azioni negative includono la cancellazione di dati, la disinstallazione di un'app, l'eliminazione di elementi, ecc.

Figura 29. Pulsanti grigi per "Disinstalla" e "Arresto forzato"

Figura 30. Pulsante blu per "Attiva ora"

Divulgazione progressiva (avanzata)

Le impostazioni non utilizzate di frequente devono essere nascoste. Usa "Avanzate" solo quando ci sono almeno 3 elementi da nascondere.

Qui, il sottotesto mostra i titoli delle impostazioni che sono nascosti. Il sottotesto dovrebbe essere solo una riga. Il testo aggiuntivo viene troncato con un'ellissi.

Figura 31. Avanzate utilizzate nella schermata "Display"

Sono disponibili menu a discesa, ma idealmente dovresti utilizzare una finestra di dialogo o una schermata di selezione dei pulsanti di opzione. Si consiglia di semplificare le impostazioni, poiché al momento sono disponibili tre diversi modelli per la selezione singola.

Se necessario, i menu a discesa possono essere utilizzati nei casi in cui l'impostazione ha opzioni semplici.

Figura 32. Menu a discesa

casella di controllo

Utilizzare le caselle di controllo quando possibile.

Le caselle di controllo possono essere utilizzate:

  • Per azioni negative come la limitazione di app o il blocco di un servizio.
  • Per evitare di avere troppi interruttori sullo schermo.

Figura 33. Le caselle di controllo vengono utilizzate per ridurre il numero di interruttori in questa schermata

L'uso dei collegamenti nelle impostazioni non è raccomandato. Utilizzare i collegamenti solo dove assolutamente necessario. I collegamenti dovrebbero usare un colore accento senza sottolineature.

Figura 34. Link utilizzato nelle impostazioni

Il testo a piè di pagina può essere utilizzato per aggiungere contenuti esplicativi. Il piè di pagina dovrebbe sempre avere un divisore in alto. Il piè di pagina è mostrato nella parte inferiore dello schermo. I piè di pagina possono avere collegamenti, se necessario.

Figura 35. Testo piè di pagina

Patterns

Dati

I dati critici possono essere visualizzati in un grafico come una barra o un grafico a torta. Questi dati possono essere visualizzati nell'intestazione dell'entità. Gli esempi includono dati e archiviazione mobili.

Altri dati meno critici possono essere presentati utilizzando una normale visualizzazione elenco.

Figura 36. Esempio che mostra l'archiviazione

Figura 37. Esempio che mostra la rete

Formazione dell'utente

Alcune funzioni potrebbero richiedere una spiegazione o formazione dell'utente. È possibile utilizzare un'animazione o un'immagine insieme al testo. L'animazione o l'immagine devono essere presentate nella parte superiore dello schermo, mentre il testo del piè di pagina può essere utilizzato per aggiungere una spiegazione.

Figura 38. Impostazione mediante l'animazione e il testo a piè di pagina

Forme

Se il modulo ha un campo di input, utilizzare una finestra di dialogo normale. Ciò fornisce un modo semplice per gli utenti di inserire un singolo input.

Tuttavia, se il modulo ha diversi campi, considerare l'utilizzo di una finestra di dialogo a schermo intero . Ciò fornisce più spazio sullo schermo per disporre i campi in modo chiaro.

Figura 39. Modulo con una finestra di dialogo normale

Risultati di ricerca

I risultati della ricerca mostrano il titolo, il sottotesto (se disponibile) e la posizione breadcrumb dell'impostazione.

Figura 40. Risultato della ricerca