Questo documento evidenzia i principi e le linee guida per chiunque progetta le impostazioni della piattaforma Android, le impostazioni principali GMS (Impostazioni Google) o qualsiasi sviluppatore che progetti le impostazioni per la propria app per Android.
Principi di progettazione
Fornire una buona panoramica
Gli utenti devono 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 attuali vengono visualizzati nella schermata di primo livello
Organizza gli elementi in modo intuitivo
Posiziona le impostazioni utilizzate di frequente nella parte superiore dello schermo. Limita il numero di impostazioni su una sola schermata. Mostrare più di 10-15 elementi può essere molto impegnativo. Crea menu intuitivi spostando alcune impostazioni in 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 schermi diversi. Diverse situazioni possono indurre gli utenti a modificare un'impostazione, quindi includerla in più posizioni aiuta gli utenti a trovare questo elemento.
Per le impostazioni duplicate, crea una schermata separata per l'impostazione e includi punti di ingresso da posizioni diverse.
 |
 |
Figura 3 e 4. Viene visualizzato il messaggio "Suono di notifica predefinito" in entrambe le schermate
Utilizza un titolo e uno stato chiari
Fai in modo che i titoli delle impostazioni siano 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 anziché descrivere semplicemente il titolo.
Per i titoli segui queste indicazioni:
- Inserisci per primo il testo più importante dell'etichetta.
- Riformula le parole negative come "non" o "mai" in termini neutri come "bloccare".
- Utilizza etichette impersonali come "Notifiche" anziché "Avvisami". Eccezione: se per comprendere l'impostazione è necessario fare riferimento all'utente, utilizza la seconda persona ("tu") anziché la prima ("I").
I titoli devono evitare:
- Termini generici, come impostare, cambiare, modificare, modificare, gestire, utilizzare, selezionare o scegliere.
- Parole ripetute dal divisore di sezione o dal titolo della schermata secondaria.
- gergo tecnico.
Tipi di pagina
Elenco impostazioni
È il tipo di schermo più comune. Consente di combinare più impostazioni. Gli elenchi di impostazioni possono essere una combinazione di controlli, come interruttori, menu e cursori.
Se in una categoria ci sono molte impostazioni, puoi raggruppare insieme le impostazioni. Per ulteriori dettagli, vedi Raggruppare e divisori.
Figura 5. Esempio di elenco di impostazioni
Visualizzazione elenco
La visualizzazione elenco viene utilizzata per mostrare un elenco di elementi, come app, account, dispositivi e altro ancora. I controlli per filtrare o ordinare possono essere aggiunti alla schermata.
Figura 6. Esempio di visualizzazione elenco
Schermata entità
La schermata dell'entità viene utilizzata per presentare le impostazioni di un elemento distinto, ad esempio un'app, un account, un dispositivo, una rete Wi-Fi e così via.
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 della schermata Entità utilizzata in Informazioni app
Figura 8. Esempio della schermata di entità utilizzata in Storage
Impostazione principale
L'impostazione principale viene utilizzata al meglio quando è possibile attivare o disattivare un'intera funzionalità, ad esempio Wi-Fi o Bluetooth. L'utente può controllare la funzionalità usando un sensore nella parte superiore dello schermo. Se usi l'impostazione principale per disabilitare la funzionalità, disattiverai tutte le altre impostazioni correlate.
Se una funzionalità richiede una descrizione di testo più lunga, puoi utilizzare l'impostazione principale perché questo tipo di schermata consente di inserire un testo a piè di pagina più lungo.
Se un'impostazione deve essere duplicata o collegata da più schermate, utilizza l'impostazione principale. Poiché l'impostazione principale ha una schermata separata, eviterai di avere più sensori in posizioni diverse per la stessa impostazione.
Figura 9. Esempio di impostazione principale usata nella schermata Notifiche app; la disattivazione dell'opzione Principale disattiva l'intera funzione per questa app
Figura 10. Esempio di impostazione principale usata nella schermata Notifiche app con l'opzione principale disattivata
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 mostrati in una finestra di dialogo o su una schermata separata. I pulsanti di opzione non devono essere utilizzati insieme a cursori, menu o opzioni.
Una schermata di pulsanti di opzione può contenere un'immagine in alto e del testo a piè di pagina in basso. I singoli pulsanti di opzione possono avere un sottotesto e un titolo.
Figura 11. I pulsanti di opzione non devono essere utilizzati nell'elenco delle impostazioni
Figura 12. Come usare correttamente i pulsanti di opzione nelle impostazioni
Componenti
Intestazione
A partire da Android 8.0, la barra degli strumenti delle azioni include la ricerca e la guida, oltre ad altre azioni correlate. Sconsigliamo di utilizzare i menu extra perché gli utenti potrebbero non scoprire le azioni nascoste in questi menu.
Per le barre degli strumenti senza azioni specifiche sullo schermo. Mostra le azioni di ricerca e guida.
Figura 13. Barra degli strumenti con azioni di ricerca e guida
Per le barre degli strumenti con una sola 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 un'azione: valuta la possibilità di inserire l'azione principale prima della ricerca, inserendo le azioni avanzate nel menu extra.
Se tutte le azioni sono avanzate o utili solo per un gruppo limitato di utenti, valuta la possibilità di inserire tutte le azioni nel menu extra.
Figura 15. Barra degli strumenti con un menu extra per le azioni
Intestazione 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 al massimo due azioni.
Figura 16. Intestazione entità
La parte relativa all'icona e all'intestazione (App1) scorrerà sotto l'intestazione (Informazioni app).
Figura 17. Il titolo delle informazioni sulle app qui fa parte della barra degli strumenti, mentre il resto della schermata scorrerà sotto
Link al menu
Il titolo è obbligatorio. Dovresti anche mostrare un sottotitolo che evidenzia lo stato dell'impostazione. L'utilizzo di un'icona è facoltativo.
Cerca di mantenere un testo del titolo conciso. Se i titoli sono lunghi, possono continuare nella riga successiva anziché essere troncati. Non attivare menu o azioni con una pressione prolungata.
Esempi:
Figura 18. Link del menu con icona, titolo e sottotesto
Figura 19. Link al menu con titolo e sottotesto
Figura 20. Link al menu solo con titolo
Link del menu con icona, titolo, sottotesto e un hit target separato a destra
Altri target dei tocchi devono utilizzare il colore del tema.
Figura 21. Esempio di menu target con due tocchi
Link al menu con icona, titolo, sottotitolo e icona statistiche/numero/avviso
I valori numerici, come la percentuale e il tempo, possono essere visualizzati a destra insieme al sottotesto, mentre di seguito può essere mostrato un grafico a barre.
Di solito, i valori numerici sono presentati a destra, in modo che gli utenti possano facilmente consultarli e confrontarli.
Figura 22. Esempio di menu con icona, titolo, statistica e grafico
Raggruppamento e divisori
Se una schermata ha molte impostazioni, puoi raggrupparle e separarle con 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 di un gruppo sono strettamente correlate, puoi aggiungere un'intestazione del gruppo. Se usi l'intestazione di un gruppo, devi sempre includere un divisore.
Figura 23. Impostazioni raggruppate con divisori
Cambia
Cambiare con icona, titolo e sottotesto
Figura 24. Cambia con icona, titolo e sottotesto
Cambiare 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 più opzione
Puoi combinare un elemento dell'elenco con un sensore. Il tocco sul lato sinistro della linea verticale funge da link e porta l'utente alla schermata successiva. Il lato destro si comporta come un sensore standard.
Il titolo è obbligatorio per la voce dell'elenco a sinistra. L'icona e il sottotitolo sono facoltativi.
Figura 27. Voce dell'elenco e un sensore
Dispositivo di scorrimento
L'icona è facoltativa nel cursore.
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 essere l'apertura e l'installazione di un'app, l'aggiunta di un nuovo elemento e così via. Le azioni negative includono la cancellazione di dati, la disinstallazione di un'app, l'eliminazione di elementi e così via.
Figura 29. Pulsanti grigi per "Disinstalla" e "Forza interruzione"
Figura 30. Pulsante blu per "Attiva ora"
Divulgazione progressiva (avanzata)
Le impostazioni che non vengono utilizzate di frequente devono essere nascoste. Usa "Avanzate" solo quando ci sono almeno tre elementi da nascondere.
Qui, il sottotesto mostra i titoli delle impostazioni nascosti. Il sottotesto deve essere costituito da una sola riga. Il testo aggiuntivo viene troncato con i puntini di sospensione.
Figura 31. Opzioni avanzate utilizzate sullo schermo "Display"
Menu a discesa
Sono disponibili menu a discesa, ma idealmente dovresti utilizzare una finestra di dialogo o una schermata di selezione del pulsante di opzione. Questa opzione è consigliata per semplificare le impostazioni, poiché esistono tre pattern diversi per una singola selezione.
Se necessario, puoi utilizzare i menu a discesa nei casi in cui l'impostazione presenta opzioni semplici.
Figura 32. Menu a discesa
Casella di controllo
Se possibile, utilizza i sensori per le caselle di controllo.
È possibile utilizzare le caselle di controllo:
- Per azioni negative come la limitazione delle app o il blocco di un servizio.
- Per evitare di avere troppi sensori sullo schermo.
Figura 33. Le caselle di controllo vengono utilizzate per ridurre il numero di opzioni in questa schermata
Link
L'utilizzo dei link nelle impostazioni non è consigliato. Usa i link solo se assolutamente necessario. I link devono utilizzare un colore intenso senza sottolineatura.
Figura 34. Link utilizzato nelle impostazioni
Footer
Il testo a piè di pagina può essere utilizzato per aggiungere contenuti esplicativi. Il piè di pagina deve sempre avere un divisore nella parte superiore. Il piè di pagina viene mostrato nella parte inferiore dello schermo. Se necessario, i piè di pagina possono contenere link.
Figura 35. Testo a piè di pagina
Motivi
Dati
I dati critici possono essere visualizzati in un grafico come un grafico a barre o a torta. Questi dati possono essere mostrati nell'intestazione dell'entità. Gli esempi includono i dati mobili e l'archiviazione.
Altri dati meno critici possono essere presentati utilizzando una normale visualizzazione elenco.
Figura 36. Esempio che mostra lo spazio di archiviazione
Figura 37. Esempio di Rete
Formazione utenti
Alcune funzionalità potrebbero richiedere una spiegazione o informazioni fornite agli utenti. Puoi usare un'animazione o un'immagine insieme al testo. L'animazione o l'immagine dovrebbero essere presentate 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 del piè di pagina
Moduli
Se il modulo ha un solo campo di immissione, utilizza una finestra di dialogo normale. Ciò fornisce agli utenti un modo semplice per inserire un singolo input.
Tuttavia, se il modulo ha diversi campi, puoi utilizzare una finestra di dialogo a schermo intero. In questo modo avrai più spazio sullo schermo per disporre i campi in una sequenza chiara.
Figura 39. Modulo con una finestra di dialogo normale
Risultati di ricerca
I risultati di ricerca mostrano il titolo, il sottotesto (se disponibile) e la posizione del breadcrumb dell'impostazione.
Figura 40. Risultato di ricerca