Adatta il flusso di accesso

Se per la tua app è richiesto l'accesso, devi fornire una procedura di accesso che includa uno o più metodi di accesso suggeriti.

Puoi creare questo flusso adattando il codice campione fornito. La procedura prevede i seguenti passaggi:

  • Scegliere un metodo di accesso principale (ed eventuali metodi di backup)
  • Modificare i contenuti delle schermate di accesso
  • Personalizzare lo stile visivo

Il codice campione è disponibile nell'app automobilistica universale Android Music Player (UAMP). Si tratta di un codice progettato per adattarsi a diverse dimensioni dello schermo, quindi non è necessario fare domande in verticale o in orizzontale.

Durante l'adattamento del codice campione per la tua app, le linee guida qui fornite ti aiuteranno a garantire che l'esperienza di accesso rimanga ottimizzata per il veicolo. Per scoprire come gli utenti accederanno alla tua esperienza di accesso, visita Accesso, impostazioni e ricerca.


Scegli i metodi di accesso

Il primo passaggio per adattare il codice campione è decidere quale dei tre metodi di accesso disponibili vuoi offrire.

Metodo di accesso Come funziona
A) Accedi con Google
(vivamente consigliato)
Inserisci l'Account Google e la password
B) Accesso al telefono
(consigliato come opzione di backup; o opzione principale se la tua app non supporta Accedi con Google)
Inserisci il codice PIN sullo schermo dell'auto sul telefono o viceversa
C) Accesso standard
(opzione migliore come opzione di backup)
Inserisci il nome utente (o l'indirizzo email) e la password per l'app

Accedi con Google dovrebbe essere l'opzione principale se la tua app supporta questa funzionalità, perché è la più semplice per gli utenti. Se la tua app non supporta Accedi con Google, l'opzione Accedi con il telefono è la scelta migliore come opzione principale.

Il flusso di accesso nel codice di esempio include schermate per tutti e tre i metodi. Una volta che hai deciso quali opzioni stai supportando (sia l'opzione principale che le eventuali opzioni di backup che potresti voler supportare), puoi disattivare eventuali opzioni rimanenti nel codice di esempio e concentrarti sulla personalizzazione delle schermate rimanenti.


A) Accedi con Google

Se la tua app supporta la funzionalità Accedi con Google, che è disponibile nel sistema, è meglio impostare questo metodo come opzione principale nel flusso di accesso. Per gli utenti è facile che devono confermare il loro Account Google esistente.

Se offri l'accesso tramite telefono o con accesso standard, queste dovrebbero essere presentate come opzioni di backup disponibili tramite i link di testo nella parte inferiore della schermata di destinazione.

Qui, l'opzione Accedi con Google è disponibile come metodo di accesso principale, come consigliato, mentre gli altri metodi sono disponibili come opzioni di backup.

Flusso di accesso di Google

Se accedi a Google, la pagina di destinazione è l'unica schermata che ti occorre progettare, a meno che tu non offra anche opzioni di backup. L'accesso via telefono e l'accesso standard riepilogano le schermate e i flussi per queste opzioni.

Se un utente seleziona Accedi con Google sulla pagina di destinazione anziché in una delle opzioni di backup, se offerte, Google si occupa del resto della procedura di accesso

B) Accesso tramite telefono

Se la tua app non supporta Accedi con Google, è meglio offrire l'accesso tramite telefono come opzione principale nel flusso di accesso. (L'accesso al telefono può essere offerto anche come opzione di backup per l'opzione Accedi con Google). Con l'accesso con il telefono, gli utenti non hanno bisogno di ricordare un nome utente o una password. ma un PIN che viene loro fornito.

L'accesso al telefono può essere eseguito in due modi:

  • Gli utenti vedono un PIN sullo schermo dell'auto e lo inseriscono sul telefono
  • Gli utenti cercano un PIN sul proprio telefono e lo inseriscono sullo schermo dell'auto

Se viene offerto anche il metodo standard con nome utente e password, deve essere presentato come opzione di backup disponibile in un link di testo nella parte inferiore della schermata di destinazione.

In una versione dell'accesso tramite telefono, gli utenti vedono un PIN da inserire sul telefono
Nell'altra versione dell'accesso tramite telefono, gli utenti possono inserire un PIN ottenuto dai loro telefoni

Flusso di accesso al telefono

Con Accesso al telefono è possibile scegliere tra due versioni della pagina di destinazione: una che mostra un PIN da inserire sul telefono e una che consente agli utenti di inserire un PIN fornito sul telefono.

La schermata per la pagina di destinazione è l'unica che devi progettare, a meno che tu non offra anche l'accesso standard come opzione di backup.

Quando l'opzione di accesso al telefono è principale, l'accesso viene completato quando gli utenti hanno inserito un PIN come richiesto nella pagina di destinazione (a meno che non venga offerta e scelta un'opzione di backup)

C) Accesso standard

L'accesso standard per un'app richiede all'utente di inserire un nome utente (o un indirizzo email) nella pagina di destinazione e poi una password nella pagina successiva.

L'accesso standard può essere offerto come opzione di backup per l'opzione Accedi con Google o per telefono. In alternativa, se non è supportata nessuna delle altre due opzioni, può essere l'opzione di accesso principale. L'accesso standard non è consigliato come opzione principale perché prevede più passaggi e la memorizzazione di nomi utente e password.

Poiché gli utenti potrebbero non ricordare sempre nomi utente e password, è importante offrire opzioni per recuperarli o reimpostarli. Queste opzioni devono essere offerte tramite link di testo nella parte inferiore delle schermate di inserimento, in modo che non competano per l'attenzione con le azioni principali di inserimento di nome utente e password.

Il passaggio 1 dell'accesso standard prevede l'inserimento di un nome utente o di un indirizzo email
Il passaggio 2 dell'accesso standard prevede l'inserimento di una password
Gli utenti che non ricordano i propri nomi utente vengono indirizzati a questa pagina
Gli utenti che non ricordano le proprie password vengono indirizzati a questa pagina

Flusso di accesso standard

Il flusso per l'accesso standard è una sequenza di due schermate (inserimento nome utente e password), con spostamenti laterali facoltativi in altre due schermate. Sono necessarie le versioni di tutti e quattro gli schermi.

Se gli utenti ricordano i propri nomi utente e password, completano due schermate di accesso prima di aver eseguito l'accesso, altrimenti vengono indirizzati a una o due schermate aggiuntive con le istruzioni

Regolare i contenuti degli schermi

Dopo aver stabilito i metodi di accesso supportati dalla tua app, saprai quali schermate saranno incluse nel flusso di accesso. A seconda di ciò che scegli di supportare, potresti avere da 1 a 6 schermate per cui devi determinare i contenuti (e lo stile, come spiegato in Personalizzare lo stile).

Se scegli Accedi con Google o senza accesso al telefono senza opzioni di backup, avrai una schermata di accesso da creare. Se, invece, scegli l'opzione Accedi con Google con entrambe le altre opzioni come backup, avrai sei schermate (una per Accedi con Google, una per Accesso telefono e quattro per Accesso standard).

Questi esempi sono disponibili nelle sezioni Accesso con Google, Accesso al telefono e Accesso standard. Se si lavora dal codice campione, è possibile modificare le versioni di queste schermate create nel codice. Se non utilizzi il codice campione, devi comunque utilizzare questi esempi come modello.

Dovrai apportare alcune modifiche ai contenuti di queste schermate, tra cui:

  • Sostituisci il logo dell'app Aural fittizia con il logo dell'app
  • Modificare il testo e i link per fare riferimento alla tua app e ai contenuti correlati
  • Regola la logica di visualizzazione del PIN

La sostituzione dei loghi e la logica di visualizzazione del PIN sono illustrate più in dettaglio di seguito.

Dopo aver rimosso le schermate che non ti servono dal codice campione, dovresti assicurarti che nelle schermate rimanenti venga visualizzato il logo della tua app anziché il logo dell'app fittizio Aural. Questa sostituzione potrebbe influire su altri aspetti del design della pagina, come spiegato di seguito.

PRIMA: la pagina di destinazione mostra il logo di un'app di musica fittizia chiamata Aural
DOPO: la versione personalizzata sostituisce il logo di Aural con il logo di un'app specifica

La sostituzione del logo potrebbe portare a ulteriori perfezionamenti, ad esempio la personalizzazione dei colori di altri elementi della pagina o la regolazione della spaziatura intorno al logo.

Per assicurarti che il logo della tua app si fonda bene con gli elementi della pagina circostante, puoi personalizzare il codice di accesso per utilizzare il colore intenso dell'app. La personalizzazione dello stile è illustrata nel passaggio successivo, Personalizzare lo stile.

Il colore intenso per l'app Aural fittizia (blu #57D9F7) viene utilizzato per personalizzare gli elementi della pagina, come pulsanti e link, nell'app di esempio e negli esempi in questa sezione

Regolazione della spaziatura del logo

Dopo aver sostituito il logo Aural con il logo della tua app, che verrà ridimensionato alla stessa dimensione del logo Aural, controlla la spaziatura intorno al logo. Se la quantità di spazio vuoto non soddisfa le linee guida per il brand, puoi aggiungere uno spazio intorno ai bordi del logo nel file del logo.

Per aumentare la spaziatura del logo, aggiungi spazio intorno al logo nel file del logo, compensando le dimensioni del logo nel riquadro di delimitazione.

Un altro approccio potrebbe essere quello di regolare la spaziatura sullo schermo. Tuttavia, con questo approccio,dovresti modificare la spaziatura intorno al logo singolarmente per ogni layout. Per questo motivo, il modo più semplice per aggiungere spazio all'interno del file del logo è aumentare lo spazio vuoto attorno al logo.

Regola la logica di visualizzazione del PIN

Il flusso di accesso di esempio genera codici PIN in modo casuale mediante una semplice funzione RAND. Per implementare un metodo di generazione del PIN basato su una logica di business più efficace, devi modificare il codice pertinente in PinCodeSignInFragment.kt, che fa parte dell'app Universal Android Music Player (UAMP).

I link mostrati in questo esempio e la logica che genera il PIN devono essere personalizzati per la tua app

Personalizza lo stile

Dopo aver modificato i contenuti delle schermate di accesso, puoi applicare uno stile globale appropriato per il brand ad aspetti dell'interfaccia utente che interessano più schermate.

Ti consigliamo di personalizzare alcuni o tutti gli elementi seguenti affinché rispecchino lo stile del tuo brand:

  • Stile del campo di immissione: compilato, contorno o sottolineato
  • Stile pulsante: arrotondato o rettangolare
  • Colori: accento, riempimento e testo del pulsante, riempimento e tratto del modulo, errore del modulo
  • Tipi: caratteri, dimensioni del testo

Di seguito sono riportati alcuni esempi di opzioni di personalizzazione. Tieni presente che gli stili personalizzati devono mantenere il contrasto, le dimensioni minime per i target di testo e touch e altri requisiti descritti nelle Linee guida per le schermate personalizzate.

Campi e pulsanti di immissione

Il flusso di accesso di esempio utilizza campi di immissione con contorno e pulsanti arrotondati come stili predefiniti. Modifica questi stili predefiniti se diversi, ad esempio i pulsanti rettangolari invece di quelli arrotondati, esprimono meglio il tuo brand.

Colori

Personalizzare i colori degli accenti e degli stati di errore utilizzati in moduli e pulsanti è un modo utile per esprimere il tuo brand durante tutta la procedura di accesso. La personalizzazione di questi colori è importante anche per assicurarsi che i campi di immissione, i pulsanti e i link abbiano un buon aspetto sulla stessa pagina del logo dell'app, anziché essere abbinati alla stessa app.

Assicurati che tutti i colori specificati mantengano un rapporto di contrasto di almeno 4,5:1 tra gli elementi di pagina adiacenti. Per ulteriori indicazioni sui colori e dettagli sulla tavolozza dei colori utilizzata nel sistema operativo Android Automotive, consulta la pagina Fondazioni visive: Colore.

Tipografia

Anche se la digitazione nel flusso di accesso di esempio può essere personalizzata, presta attenzione quando apporti modifiche che potrebbero compromettere la leggibilità. Consulta Nozioni di base visive: Tipografia per informazioni sui caratteri, sulle dimensioni minime del tipo e su altre considerazioni in merito alla leggibilità del testo sugli schermi delle auto.


Linee guida per l'accesso

Le linee guida di questa sezione riguardano il funzionamento dell'accesso, per un'usabilità ottimale, nel sistema operativo Android Automotive. Nella maggior parte dei casi, il flusso di accesso di esempio fornito nell'app UAMP (Universal Android Music Player) rispetta queste linee guida. Non fornisce un modo per creare un account, perché richiederebbe una logica specifica dell'app.

Se hai seguito la procedura di personalizzazione descritta in questa sezione e non hai modificato il funzionamento del codice, il flusso di accesso deve essere in buone condizioni rispetto alle linee guida riportate di seguito. Tuttavia, assicurati che il tuo stile personalizzato soddisfi i requisiti generali specificati in Linee guida per le schermate personalizzate.

Se hai apportato modifiche più sostanziali al codice o alle schermate di accesso, oltre a quanto descritto in questa sezione, controlla il flusso di accesso rispetto alle Linee guida generali per le schermate personalizzate e alle linee guida specifiche per l'accesso riportate di seguito.

Livello di requisito Linee guida
DOVREBBE Gli sviluppatori di app devono:
  • Presenta l'opzione Accedi con Google come opzione principale se è supportata dall'app e dal sistema
  • Presenta l'accesso tramite telefono (se supportato) come opzione principale se l'app e il sistema non supportano Accedi con Google
  • Mantieni la lunghezza del PIN per l'accesso via telefono a massimo 8 cifre
  • Per l'accesso standard, separare i dati di nome utente e password in due fasi
  • Inserisci un'etichetta nella casella di immissione ("Inserisci password") e mantienila visibile sullo schermo dopo che l'utente inizia a digitare
  • Offri agli utenti la possibilità di mostrare la password (che in genere è nascosta) durante la digitazione
  • Fornire indicazioni per accedere a un nome utente o a una password dimenticati
  • Fornisci un metodo per creare un account
MA Gli sviluppatori di app possono:
  • Fornire l'accesso standard all'app (nome utente e password) come opzione principale se non è possibile utilizzare l'accesso a Google o l'accesso via telefono
  • Fornisci accesso al telefono, accesso standard o entrambi come opzioni di backup quando Accedi con Google è l'opzione principale.
  • Fornire l'accesso standard come opzione di backup quando l'accesso al telefono è l'opzione principale

Motivazione:

  • Esperienza multimediale coerente. Le schermate di accesso progettate per un'app multimediale dovrebbero fornire un'esperienza coerente con le schermate di accesso di altre app multimediali.

  • Aspetto e design coerenti. Le schermate di accesso devono supportare i principi di base per la progettazione e le basi visive per il sistema operativo Android Automotive.