Linee guida per la progettazione delle impostazioni Android

Questo documento evidenzia i principi e le linee guida per chiunque stia progettando le impostazioni della piattaforma Android, le impostazioni principali di GMS (Impostazioni Google) o qualsiasi sviluppatore che progetta 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 relativi valori.

Figura 1. Le impostazioni e i relativi 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. Limita il numero di impostazioni su una schermata. Mostrare più di 10-15 articoli può essere travolgente. Crea menu intuitivi spostando alcune impostazioni su una schermata separata.

Figura 2. Le impostazioni comuni si trovano nella parte superiore dello schermo

Rendi le impostazioni facili da trovare

In alcuni casi può essere utile duplicare una singola impostazione su due schermate diverse. 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 le impostazioni duplicate, crea una schermata separata per l'impostazione e disponi di punti di ingresso da luoghi diversi.

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

Utilizza un titolo e uno status chiari

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

I titoli dovrebbero:

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

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 di schermo più comune. Permette di mettere insieme più impostazioni. Gli elenchi delle impostazioni possono essere un mix di controlli, come interruttori, menu e cursori.

Se in una categoria sono presenti molte impostazioni, è possibile raggrupparle 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. È possibile aggiungere allo schermo controlli per filtrare o ordinare.

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 in questa schermata devono essere correlate a questa entità.

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

Figura 8. Esempio di schermata Entità utilizzata in Archiviazione

Impostazione principale

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

Se una funzione necessita di una descrizione testuale più lunga, è possibile utilizzare l'impostazione principale poiché questo tipo di schermata consente un testo a piè di pagina più lungo.

Se è necessario duplicare o collegare un'impostazione da più schermi, utilizzare l'impostazione principale. Poiché l'impostazione principale è una schermata separata, eviterai di avere più interruttori in posti diversi per la stessa impostazione.

Figura 9. Esempio dell'impostazione principale utilizzata nella schermata Notifiche dell'app; disattivando l'interruttore principale si disattiva l'intera funzionalità di questa app

Figura 10. Esempio di impostazione principale utilizzata nella schermata 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 su uno schermo separato. 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 un testo a piè di pagina nella parte inferiore. I singoli pulsanti di opzione possono avere un 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 extra sono sconsigliati poiché gli utenti potrebbero non scoprire le azioni nascoste in questi menu.

Per barre degli strumenti senza azioni specifiche della schermata. Mostra azioni di ricerca e di aiuto.

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

Per le barre degli strumenti con un'azione : presenta l'azione prima della ricerca.

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

Per le barre degli strumenti con più di 1 azione : valuta la possibilità di posizionare l'azione primaria prima della ricerca, mentre inserisci le azioni avanzate nel menu extra.

Se tutte le azioni sono avanzate o utili solo per un piccolo gruppo di utenti, valuta la possibilità di posizionare tutte le azioni nel menu extra.

Figura 15. Barra degli strumenti con un menu extra 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 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 un sottotesto che evidenzi lo stato dell'impostazione. L'utilizzo di un'icona è facoltativo.

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

Esempi:

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

Figura 19. Collegamento al menu con titolo e sottotesto

Figura 20. Collegamento al menu solo con titolo

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

Gli altri target tocco dovrebbero utilizzare il colore del tema.

Figura 21. Esempio di menu di destinazione a due tocchi

Collegamento al menu con icona, titolo, sottotesto e icona statistiche/numero/avviso

I valori numerici come percentuale e tempo possono essere visualizzati sulla destra insieme al sottotesto, mentre sotto è possibile visualizzare un grafico a barre.

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

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

Raggruppamento e divisori

Se una schermata ha molte impostazioni, è possibile raggrupparle e separarle da un divisore. A differenza delle versioni Android precedenti, i divisori vengono ora utilizzati per raggruppare le impostazioni in un gruppo, anziché separare le singole impostazioni.

Se le impostazioni di un gruppo sono strettamente correlate, puoi aggiungere un'intestazione di gruppo. Se utilizzi un'intestazione di gruppo, dovresti sempre includere un divisore.

Figura 23. Impostazioni raggruppate con divisori

Interruttore

Cambia con icona, titolo e sottotesto

Figura 24. Cambia con icona, titolo e sottotesto

Cambia con titolo e sottotesto

Figura 25. Cambia con titolo e sottotesto

Cambia solo con il titolo

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

Figura 26. Cambia solo con il titolo

Voce di elenco + interruttore

Puoi combinare un elemento dell'elenco con un interruttore. Toccando il lato sinistro della linea verticale funziona come un collegamento e porta l'utente alla schermata successiva. Il lato destro si comporta come un interruttore standard.

Per l'elemento dell'elenco sul lato sinistro, il titolo è obbligatorio. L'icona e il sottotesto sono facoltativi.

Figura 27. Voce di elenco e interruttore

Dispositivo di scorrimento

L'icona è facoltativa nello slider.

Figura 28. Dispositivo di scorrimento

Pulsante sullo schermo

Le azioni positive utilizzano 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 dei dati, la disinstallazione di un'app, l'eliminazione di elementi, ecc.

Figura 29. Pulsanti grigi per "Disinstalla" e "Forza arresto"

Figura 30. Pulsante blu per "Accendi adesso"

Informativa progressiva (Avanzata)

Le impostazioni che non vengono utilizzate frequentemente dovrebbero essere nascoste. Utilizza "Avanzate" solo quando ci sono almeno 3 elementi da nascondere.

Qui il sottotesto mostra i titoli delle impostazioni nascoste. Il sottotesto dovrebbe essere solo una riga. Il testo aggiuntivo viene troncato con i puntini di sospensione.

Figura 31. Avanzate utilizzate nella schermata "Display".

Sono disponibili menu a discesa, ma idealmente dovresti utilizzare invece una finestra di dialogo o una schermata di selezione di pulsanti di opzione. Questo è consigliato per semplificare le impostazioni, poiché attualmente ci sono tre diversi modelli per la selezione singola.

Se necessario, è possibile utilizzare i menu a discesa nei casi in cui l'impostazione presenta opzioni semplici.

Figura 32. Menu a discesa

Casella di controllo

Utilizza gli interruttori sulle caselle di controllo quando possibile.

Le caselle di controllo possono essere utilizzate:

  • Per azioni negative come limitare le app o bloccare 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

Non è consigliabile utilizzare i collegamenti nelle impostazioni. Utilizza i link solo dove assolutamente necessario. I collegamenti dovrebbero utilizzare un colore in risalto senza sottolineature.

Figura 34. Collegamento utilizzato nelle impostazioni

Il testo del piè di pagina può essere utilizzato per aggiungere contenuto esplicativo. Il piè di pagina dovrebbe sempre avere un divisore nella parte superiore. Il piè di pagina viene visualizzato nella parte inferiore dello schermo. I piè di pagina possono contenere collegamenti, se necessario.

Figura 35. Testo del piè di pagina

Modelli

Dati

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

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

Figura 36. Esempio che mostra l'archiviazione

Figura 37. Esempio che mostra Rete

Educazione dell'utente

Alcune funzionalità potrebbero richiedere una spiegazione o un'educazione dell'utente. Puoi utilizzare un'animazione o un'immagine insieme al testo. L'animazione o l'immagine dovrebbe essere presentata nella parte superiore dello schermo, mentre il testo a piè di pagina può essere utilizzato per aggiungere una spiegazione.

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

Forme

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

Tuttavia, se il modulo contiene più campi, valuta la possibilità di utilizzare una finestra di dialogo a schermo intero . Ciò fornisce più spazio sullo schermo per disporre i campi in uno schema 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 del breadcrumb dell'impostazione.

Figura 40. Risultato della ricerca