Questo documento mette in evidenza i principi e le linee guida per chiunque stia progettando le impostazioni della piattaforma Android, le impostazioni principali GMS (Impostazioni Google) o qualsiasi sviluppatore che progetta le 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 ei 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. Limita il numero di impostazioni su una schermata. Mostrare più di 10-15 articoli può essere schiacciante. Crea menu intuitivi spostando alcune impostazioni su una schermata separata.
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 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, creare una schermata separata per l'impostazione e disporre di punti di ingresso da luoghi diversi.
 |  |
Figure 3 e 4. "Suono di notifica predefinito" viene visualizzato in 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 per primo il testo più importante della tua etichetta.
- Riformula parole negative come "non" o "mai" in termini neutri come "blocco".
- Usa etichette impersonali come "Notifiche" invece di "Avvisami". Eccezione: se è necessario fare riferimento all'utente per comprendere l'impostazione, utilizzare la seconda persona ("tu") anziché la prima persona ("io").
I titoli dovrebbero evitare:
- Termini generici, come impostare, modificare, 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. Consente di mettere insieme più impostazioni. Gli elenchi delle impostazioni possono essere un mix di controlli, come interruttori, menu e dispositivi di scorrimento.
Se ci sono molte impostazioni in una categoria, possono essere raggruppate insieme. Vedere 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
Schermo 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 in Informazioni app
Figura 8. Esempio di schermata Entità utilizzata in Archiviazione
Impostazione principale
L'impostazione principale viene utilizzata al meglio quando un'intera funzione può essere attivata o disattivata, come Wi-Fi o Bluetooth. Utilizzando un interruttore nella parte superiore dello schermo, l'utente può controllare facilmente questa funzione. L'utilizzo dell'impostazione principale per disabilitare la funzione disabilita tutte le altre impostazioni correlate.
Se una funzione necessita di una descrizione di testo più lunga, è possibile utilizzare l'impostazione principale poiché questo tipo di schermata consente un testo più lungo del piè di pagina.
Se è necessario duplicare o collegare un'impostazione 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 delle notifiche dell'app; la disattivazione dell'interruttore principale disattiva l'intera funzione per 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 su una schermata separata. I pulsanti di opzione non devono essere utilizzati insieme a cursori, menu o interruttori.
Una schermata del pulsante di opzione può contenere un'immagine in alto e un testo a piè di pagina in basso. 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 di overflow sono sconsigliati poiché gli utenti potrebbero non scoprire le azioni nascoste in questi menu.
Per barre degli strumenti senza azioni specifiche dello schermo. Mostra le azioni di ricerca e aiuto.
Figura 13. Barra degli strumenti con ricerca e azioni di aiuto
Per le barre degli strumenti con un'azione : presenta 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 : valuta di posizionare l'azione principale prima della ricerca, mentre metti le azioni avanzate nel menu di overflow.
Se tutte le azioni sono avanzate o utili solo per un piccolo gruppo di utenti, considera 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 l'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 menu
Il titolo è obbligatorio. Dovresti anche mostrare il sottotesto che evidenzia lo stato dell'impostazione. L'uso di un'icona è facoltativo.
Cerca di mantenere il testo del titolo conciso. Se i titoli sono lunghi, possono continuare sulla riga successiva invece di essere troncati. Non abilitare menu o azioni durante la pressione prolungata.
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 con solo titolo
Collegamento al menu con icona, titolo, sottotesto e un target separato sulla destra
Altri target di 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 statistiche/numero/icona di avviso
I valori numerici come percentuale e tempo possono essere mostrati a destra insieme al sottotesto, mentre un grafico a barre può essere mostrato sotto.
Di solito, i valori numerici sono presentati sulla destra in modo che gli utenti possano guardarli e confrontarli facilmente.
Figura 22. Esempio di menu con icona, titolo, statistica 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, 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 dell'elenco + interruttore
È possibile combinare un elemento dell'elenco con un interruttore. Il tocco sul lato sinistro della linea verticale agisce come un collegamento e porta l'utente alla schermata successiva. Il lato destro si comporta come un interruttore standard.
Per la voce dell'elenco sul lato sinistro, un titolo è obbligatorio. L'icona e il sottotesto sono facoltativi.
Figura 27. Elemento dell'elenco e un interruttore
Dispositivo di scorrimento
L'icona è facoltativa nel dispositivo di scorrimento.
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 "Arresto forzato"
Figura 30. Pulsante blu per "Accendi ora"
Divulgazione progressiva (avanzata)
Le impostazioni che non vengono utilizzate di frequente dovrebbero essere nascoste. Usa "Avanzate" solo quando ci sono almeno 3 oggetti da nascondere.
Qui, il sottotesto mostra i titoli delle impostazioni che sono nascoste. Il sottotesto dovrebbe essere solo una riga. Il testo aggiuntivo viene troncato con i puntini di sospensione.
Figura 31. Avanzato utilizzato nella schermata "Display'".
Menu a discesa
Sono disponibili menu a discesa, ma idealmente dovresti invece utilizzare una finestra di dialogo o una schermata di selezione del pulsante di opzione. Questo è consigliato per semplificare le impostazioni, poiché attualmente esistono tre diversi modelli per la selezione singola.
Se necessario, è possibile utilizzare i menu a discesa nei casi in cui l'impostazione ha opzioni semplici.
Figura 32. Menu a discesa
Casella di controllo
Utilizzare le caselle di controllo dei passaggi 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. Utilizzare i collegamenti solo dove strettamente necessario. I collegamenti devono utilizzare un colore di accento senza sottolineatura.
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 in alto. Il piè di pagina viene visualizzato nella parte inferiore dello schermo. I piè di pagina possono avere collegamenti, se necessario.
Figura 35. Testo del piè di pagina
Modelli
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 mobili e archiviazione.
Altri dati meno critici possono essere presentati utilizzando una normale visualizzazione elenco.
Figura 36. Esempio di archiviazione
Figura 37. Esempio di rete
Formazione degli utenti
Alcune funzionalità potrebbero richiedere una spiegazione o una formazione dell'utente. È possibile utilizzare un'animazione o un'immagine insieme al testo. L'animazione o l'immagine deve essere presentata nella parte superiore dello schermo, mentre il testo del piè di pagina può essere utilizzato per aggiungere una spiegazione.
Figura 38. Impostazione utilizzando l'animazione e il testo del piè di pagina
Le forme
Se il modulo ha un campo di input, utilizzare una normale finestra di dialogo. Ciò fornisce agli utenti un modo semplice per inserire un singolo input.
Tuttavia, se il modulo contiene più campi, considera l'utilizzo di 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 normale finestra di dialogo
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