Se stai sviluppando app per utenti in Russia, usa i pulsanti "Salva sul telefono" perché Google Wallet non è disponibile in questi paesi. Consulta gli asset e le linee guida pertinenti. Se stai sviluppando il servizio per utenti al di fuori della Russia, aggiorna il pulsante Aggiungi a Google Wallet scaricando gli asset di seguito.
Questa sezione della documentazione è pensata per aiutarti a creare immagini e altri elementi dell'interfaccia utente in modo che vengano visualizzati correttamente nell'app Google Wallet.
Asset
Pulsante Aggiungi a Google Wallet
Il pulsante Aggiungi a Google Wallet viene utilizzato ogni volta che indirizzi gli utenti a salvare una tessera o una carta dalla tua app o dal tuo sito web nel loro Wallet. Il pulsante Aggiungi a Google Wallet deve chiamare uno dei flussi dell'API Google Wallet. Questi flussi mostrano l'app Google Wallet in cui gli utenti possono seguire le istruzioni per salvare le tessere sul proprio dispositivo Android e sul proprio Account Google. Questo pulsante può essere utilizzato in app, siti web o email.
I pulsanti Aggiungi a Google Wallet sono disponibili in formato Android XML, SVG e PNG.
Scarica asset - XML per Android Scarica asset - SVG Scarica asset - PNGPulsante Visualizza in Google Wallet
Il pulsante Visualizza in Google Wallet viene utilizzato per collegare direttamente un utente al suo Wallet in modo da visualizzare una tessera o una carta salvati in precedenza. Questo pulsante può essere utilizzato in app, siti web o email.
I pulsanti Visualizza in Google Wallet sono disponibili in formato SVG e PNG.
Scarica asset - SVG Scarica asset - PNGTutti i pulsanti visualizzati sul sito, nell'app o nelle comunicazioni email devono rispettare le linee guida per il brand descritte in questa pagina. Di seguito sono riportati, a titolo esemplificativo, alcuni esempi di queste linee guida:
- Dimensioni relative ad altri pulsanti o elementi simili della pagina
- La forma e il colore dei pulsanti non devono essere modificati
- Spazio vuoto
Pulsanti localizzati
I pulsanti Google Wallet localizzati sono forniti per tutti i mercati in cui è disponibile Wallet. Se stai sviluppando il servizio per gli utenti di questi mercati, usa sempre i pulsanti indicati sopra. Non creare una versione personalizzata dei pulsanti. Se una versione localizzata del pulsante non è disponibile nel tuo mercato, utilizza la versione in inglese.
I pulsanti Aggiungi a Google Wallet sono disponibili in albanese, arabo, arabo, armeno, francese, giapponese, greco, indonesiano, indonesiano, inglese (latino), lingua albanese, ebraico, ceco, ucraino, portoghese, ebraico, portoghese, filippino, francese, giapponese, greco, indonesiano (Indonesia), slovacco, portoghese, ebraico, francese, giapponese, greco, indonesiano (Indonesia), portoghese, ceco, ucraino, slovacco, slovacco, portoghese, slovacco, portoghese, slovacco, portoghese, slovacco, portoghese, francese, francese, giapponese, greco, indonesiano (Indonesia), portoghese, slovacco, portoghese, slovacco, slovacco, portoghese, slovacco, portoghese, slovacco, portoghese, slovacco, slovacco, spagnolo, portoghese, turco,
Nome localizzato
Per chiarezza per gli utenti, il nome del prodotto Google Wallet è localizzato in alcuni mercati. Se stai sviluppando il servizio per gli utenti di questi paesi, utilizza sempre il nome localizzato riportato di seguito per web, email e stampa. Non creare una versione localizzata di "Google Wallet". Se il tuo mercato non è elencato di seguito, utilizza "Google Wallet" in inglese.
| Paese | Nome |
|---|---|
| Bielorussia | Google Кошелек |
| Brasile | Carteira do Google |
| Cile | Billetera de Google |
| Cechia | Peněženka Google |
| Grecia | |
| Hong Kong | Google 錢包 |
| Lituania | Google Piniginì |
| Polonia | Portfel Google |
| Portogallo | Carteira da Google |
| Romania | Portofel Google |
| Slovacchia | |
| Taiwan | Google 錢包 |
| Turchia | Google Cüzdan |
| EAU | |
| Ucraina | Google FC |
|
Stati Uniti (spagnolo)
*Utilizza questo nome negli Stati Uniti se la tua UI è in spagnolo |
Billetera de Google |
Dimensioni
Regola l'altezza e la larghezza del pulsante Aggiungi a Google Wallet in base al tuo layout. Se nella pagina sono presenti altri pulsanti, il pulsante Aggiungi a Google Wallet deve avere dimensioni uguali o superiori. Non rendere il pulsante Aggiungi a Google Wallet più piccolo di altri pulsanti.
Stile
I pulsanti Aggiungi a Google Wallet sono disponibili in due varianti: principali e ridotti. Il pulsante Aggiungi a Google Wallet è disponibile solo in nero. Vengono fornite versioni localizzate del pulsante. Non creare pulsanti con testo localizzato di tua proprietà.
| Principale | Condensed |
|---|---|
|
|
| Utilizza il pulsante principale su sfondi bianchi e chiari. | Utilizza il pulsante ridotto se non c'è spazio sufficiente per l'elemento principale o a larghezza intera. |
Spazio vuoto
Mantieni sempre uno spazio vuoto minimo di 8 dp su tutti i lati del pulsante Aggiungi a Google Wallet. Assicurati che lo spazio vuoto non sia mai interrotto da grafica o testo.
Altezza minima
Tutti i pulsanti Aggiungi a Google Wallet devono avere un'altezza minima di 48 dp.
Cosa fare e cosa non fare
| Cosa fare | Cosa non fare |
|---|---|
| Azione: utilizza solo i pulsanti Aggiungi a Google Wallet forniti da Google. | Cosa non fare: creare pulsanti Aggiungi a Google Wallet personalizzati o modificare in alcun modo carattere, colore, raggio del pulsante o spaziatura interna all'interno del pulsante. |
| Azione: usa lo stesso stile del pulsante in tutto il sito. | No: riduci le dimensioni dei pulsanti Aggiungi a Google Wallet rispetto agli altri pulsanti. |
| Azione: assicurati che le dimensioni dei pulsanti Aggiungi a Google Wallet rimangano uguali o maggiori rispetto agli altri pulsanti. | No: modifica il colore del pulsante. |
| Azione: mantieni lo stesso rapporto del pulsante quando ridimensioni i pulsanti Aggiungi a Google Wallet. | No: scala liberamente il pulsante. |
| Azione: utilizza la versione localizzata dei pulsanti fornita. | Cosa non fare: crea una versione localizzata del pulsante. |
Best practice per il posizionamento dei pulsanti
Mostra il pulsante Aggiungi a Google Wallet nelle schermate dell'app, nelle pagine web o nelle email di conferma. Consulta le seguenti best practice come guida per la progettazione della tua UI.
Carte d'imbarco
Mostra il pulsante Aggiungi a Google Wallet al termine del flusso di acquisto o nelle schermate di conferma dell'app, nelle pagine web o nelle email. Ti consigliamo di inserire il pulsante Aggiungi a Google Wallet nel punto in cui gli utenti accedono alle loro tessere nella tua app o sul tuo sito web.
Uso del nome del prodotto Google Wallet nel testo
Puoi utilizzare il testo per indicare all'utente che la carta d'imbarco è stata salvata sul suo dispositivo.
Scrivi in maiuscolo le lettere "G" e "W"
Utilizza sempre una "G" maiuscola e una "W" maiuscola seguita da lettere minuscole per fare riferimento a Google Wallet. Non utilizzare le lettere maiuscole per il nome completo "Google Wallet", a meno che non corrisponda allo stile tipografico dell'interfaccia utente.
Non abbreviare Google Wallet
Scrivi sempre le parole "Google" e "Wallet".
Adatta lo stile dell'interfaccia utente
Imposta "Google Wallet" con lo stesso carattere e lo stesso stile tipografico del resto del testo nell'interfaccia utente. Non imitare lo stile tipografico di Google.
Utilizza sempre la versione localizzata di "Google Wallet"
Scrivi sempre "Google Wallet" nella copia localizzata fornita.
Design
Utilizza i campi height e size del tag HTML g:savetoandroidpay per modificare l'altezza e la larghezza dei pulsanti Aggiungi a Google Wallet. Utilizza la specifica textsize=large per aumentare notevolmente le dimensioni di testo e pulsanti in caso di implementazioni mobile o di casi con requisiti UI speciali.
Usa theme per impostare il colore dei pulsanti. La seguente tabella mostra in che modo queste impostazioni influiscono sul pulsante Aggiungi a Google Wallet.
Loghi
Linee guida per l'immagine del logo
Google Wallet maschera il tuo logo in una forma circolare.
Di seguito è riportato un elenco di suggerimenti per l'interfaccia utente per le immagini dei loghi:| Linee guida | Descrizione |
|---|---|
| Tipo di file preferito | PN |
| Dimensioni minime | 660 x 660 px |
| Proporzioni immagine | 1:1 |
| Proporzioni dell'artwork | 1:1 |
| Dimensioni effettive in pixel | Adatta alle dimensioni del dispositivo |
| Maschera circolare con logo |
Il logo è mascherato per adattarsi a un design circolare. Assicurati che il tuo logo rientri nell'area di sicurezza. Non mascherare preventivamente il tuo logo. Lascia il logo in un quadrato con un colore di sfondo al vivo. Il logo deve avere un margine del 15% in modo che non venga tagliato quando viene mascherato. 
|
Google Wallet maschera il tuo logo in una forma circolare.
Linee guida per l'immagine del logo grande
Le immagini dei loghi grandi sono supportate da biglietti per eventi, carte d'imbarco, tessere per il trasporto pubblico con codice QR, carte fedeltà, offerte, carte regalo, tessere generiche e documenti privati generici. Di seguito è riportato un elenco di consigli per l'interfaccia utente per le immagini di loghi larghi:
| Linee guida | Descrizione |
|---|---|
| Tipo di file preferito |
PN Per ottenere risultati ottimali, utilizza un'immagine con un colore di sfondo (consigliamo di utilizzare lo stesso colore dello sfondo della tessera) |
| Dimensioni consigliate | 1280 x 400 px |
| Dimensioni minime | 400 px per l'altezza, la larghezza è proporzionale (maggiori indicazioni nella sezione delle proporzioni consigliate)
Utilizza immagini larghe e rettangolari. |
| Proporzioni consigliate |
Se l'immagine non è impostata nelle proporzioni consigliate, verrà ridimensionata per adattarsi alle proporzioni degli spazi di intestazione forniti. Il diagramma seguente illustra in che modo l'asset immagine verrà ridimensionato in base alle proporzioni. 
|
Colore sfondo carta
Puoi impostare il colore di sfondo con il campo hexBackgroundColor. Se non imposti il valore, un algoritmo analizza il logo, trova il colore dominante e lo utilizza per il colore di sfondo.
Immagini hero
Il campo class.heroImage viene visualizzato come banner a larghezza intera in tutto il corpo della scheda.
Linee guida per le immagini hero
Di seguito è riportato un elenco di consigli per l'interfaccia utente per le immagini hero:
| Linee guida | Descrizione |
|---|---|
| Tipo di file preferito | PN |
| Dimensioni consigliate |
1032 x 336 px Utilizza immagini larghe e rettangolari. Per ottenere risultati ottimali, utilizza un'immagine con uno sfondo colorato. |
| Formato | 3:1 o più |
| Dimensioni di visualizzazione |
L'intera larghezza della scheda e l'altezza proporzionale. 
|
Immagini a larghezza intera
Il campo *.imageModulesData.mainImage in una classe o in un oggetto viene visualizzato come immagine a larghezza intera in una tessera.
Linee guida per le immagini a larghezza intera
Di seguito è riportato un elenco di suggerimenti per l'interfaccia utente per le immagini a larghezza intera:
| Linee guida | Descrizione |
|---|---|
| Tipo di file preferito | PN |
| Dimensioni minime |
Larghezza 1860 px, altezza variabile. Utilizza immagini larghe e rettangolari. Per ottenere risultati ottimali, utilizza un'immagine con uno sfondo colorato. |
| Formato | Variabile |
| Dimensioni di visualizzazione |
La larghezza massima del modello e l'altezza proporzionale.
|
| Utilizza la stessa combinazione di colori che usi per il logo. |
Immagini di codici a barre
Alcuni verticali consentono di visualizzare immagini sopra e sotto il codice a barre.
Immagini sopra il codice a barre
Di seguito è riportato un elenco di suggerimenti dell'interfaccia utente per le immagini sopra il codice a barre:
| Linee guida | Descrizione |
|---|---|
| Tipo di file preferito | PN |
| Altezza massima |
20 dp (con proporzioni massime) La dimensione consigliata è di 80 px di altezza e 80-780 px di larghezza se sono presenti due immagini. In questo modo possono essere affiancati. Se un'immagine è quadrata e l'altra è un rettangolo, le dimensioni delle immagini devono essere 80 x 80 px e 780 x 80 px. |
| Formato |
Senza limiti. Per un'altezza e una larghezza massime di 20 dp di una singola immagine, utilizza proporzioni pari a 20:1. Se vuoi sovrapporre una sola immagine al codice a barre, utilizza la larghezza massima (esclusa la spaziatura interna). L'immagine deve essere di 1600 x 80 px. |
| Dimensioni di visualizzazione massime (immagine singola) | 20 dp in altezza e 400 dp in larghezza |
Immagine sotto il codice a barre
Di seguito è riportato un elenco di suggerimenti dell'interfaccia utente per l'immagine sotto il codice a barre:
| Linee guida | Descrizione |
|---|---|
| Tipo di file preferito | PN |
| Altezza massima |
20 dp (con proporzioni massime) La dimensione consigliata è di 80 px di altezza e 80-1600 px di larghezza. Se quadrato, 80 x 80 px. Se rettangolare, 1600 x 80 px. |
| Proporzioni senza limiti. Per un'altezza e una larghezza massime di 20 dp, utilizza proporzioni di 20:1. | Se vuoi un'immagine a larghezza intera (esclusa la spaziatura interna), le dimensioni devono essere 1600 x 80 px. |
| La dimensione massima del display è 20 dp in altezza e 400 dp in larghezza. |
Moduli
Un modulo rappresenta un gruppo di campi in una sezione specifica di un modello. La seguente tabella contiene linee guida per il numero di moduli che devi includere nei tuoi corsi e oggetti per garantire che le schede vengano visualizzate correttamente nell'app Google Wallet.
| Linee guida | Descrizione |
|---|---|
imageModulesData
|
Utilizza un solo imageModulesData nella tua classe o negli oggetti che crei.
|
infoModuleData
|
Utilizza fino a due
Un |
linksModuleData
|
Utilizza fino a quattro URI
Potresti avere due URI |
textModulesData
|
Utilizza fino a due campi
Potresti avere un URI |
infoModuleData
InfoModuleData contiene informazioni sui membri e personalizzabili e appare nella visualizzazione espansa. Utilizza questo modulo per archiviare informazioni come
date di scadenza, saldi dei secondi o saldi dei valori archiviati.
linksModuleData
Il modulo Link contiene URI di pagine web, numeri di telefono e indirizzi email. Di seguito è riportato un elenco di suggerimenti per l'interfaccia utente per il modulo Link:
| Linee guida | Impostazione di esempio | Immagine di esempio |
|---|---|---|
Utilizza il prefisso http: quando assegni un URI a un sito web o a una posizione in Google Maps. Questo prefisso consente al consumatore di toccare il link e di raggiungere il sito web o di visualizzare la posizione in Google Maps.
Questo prefisso causa anche un'icona di un link o di una mappa davanti alla descrizione della scheda.
|
'uri': 'http://maps.google.com/?q=google'
|
|
'uri': 'http://developer.google.com/wallet/'
|
|
|
Quando definisci un numero di telefono, utilizza il prefisso tel:. Questo prefisso consente al consumatore di toccare il link per comporre il numero. Questo prefisso crea anche un'icona di telefono davanti alla descrizione del testo sulla scheda.
|
'uri': 'tel:6505555555'
|
|
Quando definisci un indirizzo email, utilizza il prefisso mailto:.
Questo prefisso consente al consumatore di toccare il link per inviare un'email all'indirizzo. Questo prefisso crea anche un'icona di un'email davanti alla descrizione testuale sulla scheda.
|
'uri': 'mailto:jonsmith@email.com'
|
|
Intestazioni, etichette e nomi
Scrivi intestazioni, etichette e nomi con iniziali maiuscole, in modo che ogni parola inizi con una lettera maiuscola.
Norme relative ai contenuti
I contenuti di ogni campo di una tessera devono rispettare le norme relative ai contenuti dei pagamenti. Anche i contenuti dei siti web a cui fai riferimento nella classe devono rispettare queste norme.
Posizionamento dei dati della piattaforma partner
Per assicurarti che gli utenti possano accedere al sito web o all'app ricchi di funzionalità relativi al pass, assicurati di incorporare il link diretto o il sito web della tua app nella proprietà linksModuleData.* o nella classe della tessera. Consente all'utente di accedere alla tua piattaforma dalla tessera, visualizzata in Google Wallet. Per vedere come viene visualizzato, vai alle sezioni di progettazione dei verticali di pass.