Linee guida per la progettazione delle impostazioni Android

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

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

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'".

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

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

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