Panoramica
Il programma pilota relativo alla fatturazione scelta dall'utente consente agli sviluppatori partecipanti di provare l'offerta di un'opzione di fatturazione alternativa oltre al sistema di fatturazione di Google Play ed è stato pensato per aiutarci a esaminare l'offerta di questa scelta agli utenti. Queste linee guida per l'esperienza utente mirano a mantenere un'esperienza utente coerente e aiutare gli utenti a prendere una decisione consapevole.
Se partecipi al progetto pilota, devi mostrare una schermata informativa e una schermata separata per la scelta della fatturazione. La schermata informativa deve essere mostrata a ogni utente solo la prima volta che avvia un acquisto, mentre la schermata di scelta della fatturazione deve essere mostrata prima di ogni acquisto. I messaggi e le specifiche dell'interfaccia utente per entrambe le schermate devono essere implementati in base alle seguenti linee guida.
![]() App per sviluppatori |
![]() Schermata informativa per gli utenti |
![]() Schermata di scelta della fatturazione |
Seleziona paese e lingua
Seleziona il paese e la lingua dei tuoi utenti per visualizzare le stringhe di testo dell'interfaccia utente corrispondenti nelle specifiche di progettazione riportate di seguito.
Informazioni per gli utenti
La schermata informativa aiuta gli utenti a comprendere il contesto della modifica e fornisce maggiori informazioni per aiutarli a fare una scelta consapevole.
Quando visualizzare
La schermata informativa deve essere mostrata agli utenti all'inizio del loro primo acquisto dopo l'aggiunta di un sistema di fatturazione alternativo. Questo messaggio non deve essere visualizzato negli acquisti successivi dello stesso utente. Mostra 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 chiaro per gli utenti prima che venga mostrata la schermata delle informazioni o la schermata di scelta della fatturazione.
Come visualizzare
La schermata delle informazioni deve essere visualizzata in un foglio modale nella parte inferiore dello schermo. Un foglio inferiore modale è simile a una finestra di dialogo modale che si anima dal basso dello schermo e rimane bloccata nella parte inferiore. Si trova sopra tutti gli elementi UI della schermata sottostante. Lo schermo sottostante è oscurato da una tela scura per indicare che non risponderà all'interazione dell'utente.
Per ulteriori informazioni su progettazione e implementazione dei fogli modali inferiori, consulta Google Material Design.
Azioni utente
Il foglio inferiore deve essere attivato quando un utente tocca un pulsante o un altro elemento dell'interfaccia utente nell'app che avvia un acquisto. Dalla schermata delle informazioni, l'utente può eseguire tre possibili azioni:
Continua
Se tocchi il pulsante "Continua", la schermata informativa viene chiusa e viene visualizzata la schermata di scelta della fatturazione.
Scopri di più
Se tocchi il pulsante "Scopri di più", si apre un articolo del Centro assistenza Google in un browser web.
Ignora
Se gli utenti vogliono chiudere il foglio inferiore e tornare alla schermata sottostante, possono chiuderlo:
- Toccando al di fuori del contenitore del foglio inferiore
- Toccando il pulsante "Indietro" del sistema Android
La schermata informativa non deve essere visualizzata di nuovo dopo essere stata chiusa o dopo che l'utente ha toccato "Continua".
Esempio: quando l'utente tocca per acquistare nella tua app, il pulsante attiva la schermata delle informazioni.
Specifiche di progettazione
La schermata informativa è divisa in tre componenti: titolo, messaggio e pulsanti. Tutti e tre i componenti sono obbligatori e devono contenere il testo e gli elementi dell'interfaccia utente esatti definiti in queste linee guida. Non includere testo o immagini aggiuntivi in questa schermata, ma puoi includere testo e immagini aggiuntivi in altre schermate.
- Titolo
- Testo 1
- Testo 2
- Pulsanti
- Riquadro inferiore
- Background scrim
Titolo
Testo |
Seleziona il paese e la lingua
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Carattere | Roboto (applica a tutti i caratteri) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Dimensioni carattere | 18sp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Colore carattere | #202124 |
Testo 1
Utilizzato per evidenziare i punti chiave considerati informazioni critiche.
Testo |
Seleziona il paese e la lingua
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Dimensioni carattere | 14sp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Altezza riga | 20 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Colore carattere | #5F6368 |
Testo 2
Utilizzato per informazioni secondarie di priorità inferiore.
Testo |
Seleziona il paese e la lingua
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Dimensioni carattere | 12sp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Altezza riga | 16 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Colore carattere | #5F6368 |
Pulsante 1
Testo |
Seleziona il paese e la lingua
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Allineamento del testo | Centrato | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Dimensioni carattere | 14sp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Spessore del carattere | Media | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Colore carattere | #01875F | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Colore sfondo | #FFFFFF | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Dimensioni | Altezza:36, larghezza: scala al contenitore | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Raggio d'angolo | 4dp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Contorno | 1dp, #DADCE0 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Link | Link all'articolo della guida di Google Play |
Pulsante 2
Testo |
Seleziona il paese e la lingua
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Allineamento del testo | Centrato | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Dimensioni carattere | 14sp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Spessore del carattere | Media | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Colore carattere | #FFFFFF | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Colore sfondo | #01875F | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Dimensioni | Altezza:36, larghezza: scala al contenitore | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Raggio d'angolo | 4dp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Link | Link alla schermata di scelta della fatturazione |
Riquadro inferiore
Dimensioni | Altezza: variabile, larghezza: 100% |
Raggio d'angolo | 8dp, 8dp, 0, 0 |
Sfondo | #FFFFFF |
Imbottitura interna | Sinistra: 24 dp, destra: 24 dp, in alto: 32 dp, in basso: 24 dp |
Altitudine | 8dp |
Orizzontale
Nella visualizzazione orizzontale, il foglio inferiore è più largo rispetto alla visualizzazione verticale, ma per il resto segue le stesse specifiche di progettazione e funzionalità.
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 di scelta della fatturazione
La schermata di scelta della fatturazione offre agli utenti due opzioni di pagamento per completare l'acquisto. Per aiutare gli utenti a prendere una decisione informata, ogni opzione di servizio di fatturazione mostra anche le forme di pagamento disponibili. Una volta effettuata la scelta, gli utenti continueranno a completare l'acquisto tramite il sistema di fatturazione.
Quando visualizzare
Se l'utente ha già visualizzato la schermata informativa durante un acquisto precedente, la schermata di scelta della fatturazione dovrebbe essere visualizzata immediatamente dopo che l'utente ha intrapreso un'azione esplicita per avviare un acquisto.
Come visualizzare
La schermata di scelta della fatturazione deve essere visualizzata in un foglio modale inferiore e seguire le stesse specifiche della schermata informativa.
Rappresentazione visiva equa
I pulsanti per il sistema di fatturazione alternativo e per quello di Google Play devono essere rappresentati in modo equo e paritario. Sono inclusi, a titolo esemplificativo, dimensioni dei pulsanti, dimensioni/stile del testo, target di tocco e dimensioni delle icone. Non aggiungere testo, immagini o modifiche di stile aggiuntivi non definiti in queste linee guida.
Esempio: quando un utente tocca per effettuare un acquisto nella tua app, il pulsante attiverà la schermata di scelta della fatturazione solo se l'utente ha già visualizzato la schermata informativa durante un acquisto precedente.
Specifiche di progettazione
La schermata di scelta della fatturazione è composta da quattro componenti distinti: titolo, descrizione, pulsante sviluppatore e pulsante Google Play. Tutti i componenti devono essere utilizzati e devono contenere il testo e gli elementi dell'interfaccia utente esatti definiti in queste linee guida. Ti chiediamo di non includere testo o immagini aggiuntivi in questa schermata, ma puoi includere testo e immagini aggiuntivi in altre schermate di tua proprietà.
Le risorse visive 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
- Background scrim
Titolo
Testo |
Seleziona il paese e la lingua
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Carattere | Roboto (applica a tutti i caratteri) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Dimensioni carattere | 18sp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Colore carattere | #202124 |
Descrizione
Testo |
Seleziona il paese e la lingua
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Dimensioni carattere | 14sp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Colore carattere | #5F6368 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Link testuale |
Seleziona il paese e la lingua
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Destinazione del link | Link alla Guida di Google Play | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Dimensioni carattere | 14sp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Decorazione | Sottolineato | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Colore 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 di 360 dp
- Larghezza di 480 dp
Icone dei metodi di pagamento
Ridimensiona in base alla larghezza dello schermo
Contenitore pulsanti
Contorno | 1pt, #DADCE0 |
Raggio d'angolo | 4dp |
Imbottitura interna | 16dp, 16dp, 16dp, 16dp |
Icona dell'app
Dimensioni | Altezza: 24 dp, larghezza: variabile |
Titolo
Testo | {App Name} |
Dimensioni carattere | 14sp |
Colore carattere | #202124 |
Metodi di pagamento
Dimensioni | Altezza: 32 dp, larghezza: 20 dp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Raggio d'angolo | 2dp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Quantità | Massimo 5, se sono disponibili più di 5, viene visualizzato un indicatore aggiuntivo | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Indicatore aggiuntivo |
Seleziona il paese e la lingua
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Dimensioni carattere | 12sp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Colore carattere | #5F6368 |
Pulsante Google Play
- Icona
- Titolo
- Metodi di pagamento accettati
- Indicatore aggiuntivo
Contenitore pulsanti
Contorno | 1pt, #DADCE0 |
Raggio d'angolo | 4dp |
Imbottitura interna | 16dp, 16dp, 16dp, 16dp |
Icona dell'app
Risorsa immagine | Prisma di Google Play |
Dimensioni | Altezza: 24 dp, larghezza: 24 dp |
Titolo
Testo | Google Play |
Dimensioni carattere | 14sp |
Colore carattere | #202124 |
Metodi di pagamento
Risorsa immagine | Link | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Indicatore aggiuntivo |
Seleziona il paese e la lingua
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Dimensioni carattere | 12sp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Colore carattere | #5F6368 |
Orizzontale
Esempio: nella visualizzazione orizzontale, il foglio inferiore è più largo rispetto alla visualizzazione verticale, ma per il resto segue le stesse specifiche di progettazione e funzionalità.
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 progetto pilota di fatturazione a scelta dell'utente e sulle domande frequenti, visita il nostro Centro assistenza.