Panoramica
Il pilota per la fatturazione scelta dall'utente consente agli sviluppatori partecipanti di testare l'offerta di un'opzione di fatturazione alternativa oltre al sistema di fatturazione di Google Play ed è progettato per aiutarci a esaminare l'offerta di questa scelta agli utenti. Queste linee guida per l'esperienza utente hanno lo scopo di mantenere un'esperienza utente coerente e aiutare gli utenti a prendere una decisione consapevole.
Se partecipi al progetto pilota, dovrai mostrare una schermata informativa e una schermata per la scelta della fatturazione separata. La schermata delle informazioni deve essere mostrata a ciascun utente solo la prima volta che l'utente avvia un acquisto, mentre la schermata di scelta della fatturazione deve essere mostrata prima di ogni acquisto. I messaggi rivolti agli utenti e le specifiche dell'interfaccia utente per entrambi gli schermi devono essere implementati in base alle seguenti linee guida.
Seleziona paese e lingua
Seleziona il paese e la lingua degli utenti per visualizzare le stringhe di testo dell'interfaccia utente corrispondenti nelle specifiche di progettazione riportate di seguito.
Informazioni per gli utenti
La schermata delle informazioni aiuta gli utenti a comprendere il contesto del cambiamento e fornisce più informazioni per aiutarli a fare una scelta consapevole.
Quando visualizzare
La schermata delle informazioni deve essere mostrata agli utenti all'inizio del loro primo acquisto, dopo l'aggiunta di un sistema di fatturazione alternativo. Non è necessario che questo messaggio venga visualizzato per gli acquisti successivi dello stesso utente. Visualizza la schermata informativa subito dopo che un utente ha intrapreso un'azione esplicita per avviare un acquisto.
Quando mostrare il prezzo
Il prezzo di acquisto deve essere visibile e evidente per gli utenti prima che gli utenti visualizzino la schermata delle informazioni o la schermata di scelta della fatturazione.
Modalità di visualizzazione
La schermata delle informazioni deve essere visualizzata in un riquadro inferiore modale. Un foglio inferiore modale è simile a una finestra di dialogo modale che si anima dalla parte inferiore dello schermo e rimane bloccata nella parte inferiore. È posizionata sopra tutti gli elementi dell'interfaccia utente nella schermata sottostante. Lo schermo sottostante è oscurato da un bordo scuro per indicare che non risponderà all'interazione dell'utente.
Consulta Google Material Design per ulteriori informazioni sul design e sull'implementazione dei fogli inferiori modali.
Azioni utente
Il riquadro inferiore dovrebbe essere attivato quando un utente tocca un pulsante o un altro elemento UI della tua app che avvia un acquisto. Dalla schermata delle informazioni, l'utente può eseguire tre possibili azioni:
Continua
Toccando il pulsante "Continua", si chiude la schermata delle informazioni e si apre la schermata di scelta della fatturazione.
Scopri di più
Toccando il pulsante "Scopri di più", viene avviato un articolo del Centro assistenza Google in un browser web.
Ignora
Se gli utenti vogliono ignorare il riquadro inferiore e tornare alla schermata sottostante, possono procedere come segue:
- Toccando all'esterno del contenitore del foglio inferiore
- Toccare il pulsante "Indietro" del sistema Android.
La schermata delle informazioni non deve essere visualizzata di nuovo dopo essere stata chiusa o dopo che l'utente ha toccato "Continua".
Esempio: quando l'utente tocca per effettuare un acquisto nella tua app, il pulsante attiva la schermata informativa.
Specifiche di progettazione
La schermata delle informazioni è divisa in tre componenti: titolo, messaggio e pulsanti. Tutti e tre i componenti sono obbligatori e devono contenere il testo esatto e gli elementi UI definiti in queste linee guida. Non includere testo o immagini aggiuntivi in questa schermata, ma sei libero di includere testo e immagini aggiuntivi su altre schermate.
- Titolo
- Testo 1
- Testo 2
- Pulsanti
- Riquadro inferiore
- Tela per sfondo
Titolo
Testo |
Seleziona paese e lingua
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Carattere | Roboto (applica a tutti i caratteri) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Dimensione del carattere | 18 g | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Colore del carattere | #202124 |
Testo 1
Utilizzati per evidenziare i punti chiave che sono considerati informazioni critiche.
Testo |
Seleziona paese e lingua
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Dimensione del carattere | 14 g | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Altezza della riga | 20 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Colore del carattere | #5F6368 |
Testo 2
Utilizzato per le informazioni secondarie di priorità inferiore.
Testo |
Seleziona paese e lingua
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Dimensione del carattere | 12 g | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Altezza della riga | 16 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Colore del carattere | #5F6368 |
Pulsante 1
Testo |
Seleziona paese e lingua
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Allineamento del testo | Concentrato | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Dimensione del carattere | 14 g | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Spessore carattere | Medium | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Colore del carattere | #01875F | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Colore dello sfondo | #FFFFFF | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Dimensioni | Altezza:36, Larghezza: scala al contenitore | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Raggio d'angolo | 4dp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Panoramica | 1dp, #DADCE0 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Collega | Link all'articolo del Centro assistenza Google Play |
Pulsante 2
Testo |
Seleziona paese e lingua
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Allineamento del testo | Concentrato | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Dimensione del carattere | 14 g | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Spessore carattere | Medium | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Colore del carattere | #FFFFFF | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Colore dello sfondo | #01875F | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Dimensioni | Altezza:36, Larghezza: scala al contenitore | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Raggio d'angolo | 4dp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Collega | Link alla schermata di scelta Fatturazione |
Riquadro inferiore
Dimensioni | Altezza: variabile, larghezza: 100% |
Raggio d'angolo | 8dp, 8dp, 0, 0 |
Premessa | #FFFFFF |
Spaziatura interna | Sinistra: 24 dp, Destra: 24 dp, In alto: 32 dp, In basso: 24 dp |
Altitudine | 8dp |
Paesaggio
Nella visualizzazione orizzontale, il riquadro inferiore è più largo che in verticale, ma segue le stesse specifiche e funzionalità di progettazione.
Riquadro inferiore | Larghezza: massimo 500 dp, Spaziatura interna: 24 dp |
Titolo | Uguale alla visualizzazione verticale |
Messaggio | Uguale alla visualizzazione verticale |
Pulsanti | Altezza:36, Larghezza: scala al contenitore |
Schermata Scelta fatturazione
La schermata per la scelta della fatturazione presenta agli utenti due opzioni di pagamento per completare l'acquisto. Per aiutare gli utenti a prendere una decisione consapevole, ogni opzione del servizio di fatturazione mostra anche le forme di pagamento disponibili. Una volta che gli utenti hanno fatto la loro scelta, continueranno a completare l'acquisto tramite il sistema di fatturazione.
Quando visualizzare
Se l'utente ha già visualizzato la schermata delle informazioni durante un acquisto precedente, la schermata di scelta della fatturazione dovrebbe apparire subito dopo che l'utente ha intrapreso un'azione esplicita per avviare un acquisto.
Modalità di visualizzazione
La schermata di scelta della fatturazione deve essere visualizzata in un riquadro inferiore modale e seguire le stesse specifiche della schermata informativa.
Rappresentazione visiva uguale
I pulsanti del sistema di fatturazione alternativo e del sistema di fatturazione di Google Play devono essere rappresentati in modo imparziale. Sono incluse, a titolo esemplificativo, dimensioni uguali per i pulsanti, dimensioni/stile del testo, target dei tocchi e dimensioni delle icone. Non aggiungere ulteriori modifiche a testo, immagini o stili non definiti in queste linee guida.
Esempio: quando un utente tocca per effettuare un acquisto nella tua app, il pulsante attiva la schermata di scelta della fatturazione solo se l'utente ha già visualizzato la schermata delle informazioni durante un acquisto precedente.
Specifiche di progettazione
La schermata per la scelta della fatturazione è composta da quattro componenti distinti: titolo, descrizione, pulsante sviluppatore e pulsante Google Play. Devono essere utilizzati tutti i componenti, che devono contenere il testo esatto e gli elementi dell'interfaccia utente definiti in queste linee guida. Ti chiediamo di non includere testo o immagini aggiuntivi in questa schermata, ma sei libero di includere testo e immagini aggiuntivi su altre schermate di tua proprietà.
Gli asset visivi per Google Play e le icone di pagamento sono disponibili tramite i link forniti di seguito.
Esempio: nella visualizzazione verticale, il foglio inferiore deve occupare il 100% della larghezza totale dello schermo.
- Titolo
- Descrizione
- Pulsante sviluppatore
- Pulsante Google Play
- Riquadro inferiore
- Tela per sfondo
Titolo
Testo |
Seleziona paese e lingua
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Carattere | Roboto (applica a tutti i caratteri) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Dimensione del carattere | 18 g | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Colore del carattere | #202124 |
Descrizione
Testo |
Seleziona paese e lingua
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Dimensione del carattere | 14 g | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Colore del carattere | #5F6368 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Link testuale |
Seleziona paese e lingua
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Destinazione link | Link alla Guida di Google Play | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Dimensione del carattere | 14 g | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Decorazione | Sottolineato | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Colore del carattere | #5F6368 |
Pulsante sviluppatore
- Icona dell'app
- Nome dell'app
- Icone dei metodi di pagamento
- Indicatore aggiuntivo
- Numero massimo di icone dei metodi di pagamento
- Larghezza 360 dp
- Larghezza 480 dp
Icone dei metodi di pagamento
Adattare alla larghezza dello schermo
Contenitore del pulsante
Panoramica | 1pt, #DADCE0 |
Raggio d'angolo | 4dp |
Spaziatura interna | 16dp, 16dp, 16dp, 16dp |
Icona dell'app
Dimensioni | Altezza: 24 dp, larghezza: variabile |
Titolo
Testo | {Nome app} |
Dimensione del carattere | 14 g |
Colore del carattere | #202124 |
Metodi di pagamento
Dimensioni | Altezza: 32 dp, Larghezza: 20 dp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Raggio d'angolo | 2dp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Quantità | Massimo 5, se >5 disponibili visualizza indicatori aggiuntivi | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Indicatore aggiuntivo |
Seleziona paese e lingua
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Dimensione del carattere | 12 g | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Colore del carattere | #5F6368 |
Pulsante Google Play
- Icona
- Titolo
- Metodi di pagamento accettati
- Indicatore aggiuntivo
Contenitore del pulsante
Panoramica | 1pt, #DADCE0 |
Raggio d'angolo | 4dp |
Spaziatura interna | 16dp, 16dp, 16dp, 16dp |
Icona dell'app
Asset immagine | Pris di Google Play |
Dimensioni | Altezza: 24 dp, Larghezza: 24 dp |
Titolo
Testo | Google Play |
Dimensione del carattere | 14 g |
Colore del carattere | #202124 |
Metodi di pagamento
Asset immagine | Link | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Indicatore aggiuntivo |
Seleziona paese e lingua
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Dimensione del carattere | 12 g | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Colore del carattere | #5F6368 |
Paesaggio
Esempio: nella visualizzazione orizzontale il riquadro inferiore è più largo che in verticale, ma in caso contrario segue le stesse specifiche e funzionalità di progettazione.
Riquadro inferiore | Larghezza: massimo 500 dp, Spaziatura interna: 24 dp |
Titolo | Uguale alla visualizzazione verticale |
Messaggio | Uguale alla visualizzazione verticale |
Pulsanti | Uguale alla visualizzazione verticale |
Per ulteriori dettagli sul programma pilota relativo alla fatturazione scelta dall'utente e per domande frequenti, visita il nostro Centro assistenza.