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
Intestazione
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 guida
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
Collegamento al menù
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".
Menu a discesa
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
Collegamenti
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
Piè di pagina
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 degli utenti
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