Se sviluppi per utenti in Russia, utilizza i pulsanti "Salva sullo smartphone", poiché Google Wallet non è disponibile in questi paesi. Consulta gli asset e le linee guida pertinenti. Se sviluppi per utenti al di fuori della Russia, aggiorna il pulsante Aggiungi a Google Wallet scaricando le risorse riportate di seguito.
Questa sezione della documentazione è progettata per aiutarti a creare immagini e altri elementi dell'interfaccia utente in modo che abbiano un aspetto ottimale nell'app Google Wallet.
Asset
Pulsante Aggiungi a Google Wallet
Il pulsante Aggiungi a Google Wallet viene utilizzato ogni volta che inviti 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 XML, SVG e PNG per Android.
Scaricare gli asset - XML Android Scaricare gli asset - SVG Scaricare gli asset - PNGPulsante Visualizza in Google Wallet
Il pulsante Visualizza in Google Wallet viene utilizzato per collegare in modo diretto un utente al suo wallet per visualizzare una tessera o una carta salvata 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 tuo sito, nella tua app o nelle tue comunicazioni via email devono rispettare le linee guida per il brand descritte in questa pagina. Alcuni esempi di queste linee guida includono, a titolo esemplificativo:
- Dimensioni rispetto ad altri pulsanti o elementi simili della pagina
- La forma e il colore dei pulsanti non devono essere alterati
- Spazio vuoto
Pulsanti localizzati
I pulsanti Google Wallet localizzati sono forniti per tutti i mercati in cui è disponibile Wallet. Se sviluppi per utenti in questi mercati, utilizza sempre i pulsanti collegati sopra. Non creare una tua versione dei pulsanti. Se nel tuo mercato non è disponibile una versione localizzata del pulsante, utilizza la versione in inglese.
I pulsanti Aggiungi a Google Wallet sono disponibili in albanese, arabo, armeno, azero, bosniaco, bulgaro, catalano, cinese (Hong Kong), cinese (tradizionale), croato, ceco, danese, olandese, inglese (India, Singapore, Sudafrica, Australia, Canada, Gran Bretagna, Stati Uniti), estone, filippino, finlandese, francese (Canada), francese (Francia), georgiano, tedesco, greco, ebraico, ungherese, islandese, indonesiano, italiano, giapponese, kazako, kirghiso, lettone, lituano, macedone, malese, norvegese, polacco, portoghese (Brasile), portoghese (Portogallo), rumeno, russo (Bielorussia), serbo, slovacco, sloveno, spagnolo (America Latina), spagnolo (Spagna), svedese, tailandese, turco, ucraino, uzbeko e vietnamita.
Nome localizzato
Per chiarezza per gli utenti, il nome del prodotto Google Wallet è localizzato in mercati selezionati. Se sviluppi per utenti in 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 | Google Wallet |
| Repubblica Ceca | Google Wallet |
| Grecia | Google Wallet |
| Hong Kong | Google 錢包 |
| Lituania | Google Piniginė |
| Polonia | Portfel Google |
| Portogallo | Google Wallet |
| Romania | Portofel Google |
| Slovacchia | Peňaženka Google |
| Taiwan | Google 錢包 |
| Turchia | Google Cüzdan |
| EAU | Google Wallet |
| Ucraina | Google Гаманець |
|
Stati Uniti (spagnolo)
*Utilizza questo nome negli Stati Uniti se la tua UI è in spagnolo |
Google Wallet |
Dimensioni
Regola l'altezza e la larghezza del pulsante Aggiungi a Google Wallet in base al layout. Se nella pagina sono presenti altri pulsanti, il pulsante Aggiungi a Google Wallet deve avere dimensioni uguali o maggiori. Non rimpicciolisci il pulsante Aggiungi a Google Wallet rispetto agli altri pulsanti.
Stile
I pulsanti Aggiungi a Google Wallet sono disponibili in due varianti: principale e compatto. Il pulsante Aggiungi a Google Wallet è disponibile solo in nero. Vengono fornite versioni localizzate del pulsante. Non creare pulsanti con testo localizzato personalizzato.
| Principale | Condensed |
|---|---|
|
|
| Utilizza il pulsante principale su sfondi bianchi e chiari. | Utilizza il pulsante compresso se non c'è spazio sufficiente per il pulsante 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 venga mai interrotto da grafiche 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
| Dos | Azioni da evitare |
|---|---|
| Azione consigliata:utilizza solo i pulsanti Aggiungi a Google Wallet forniti da Google. | Non creare pulsanti Aggiungi a Google Wallet o modificare il carattere, il colore, il raggio del pulsante o il padding all'interno del pulsante in alcun modo. |
| Consigliato: utilizza lo stesso stile di pulsante in tutto il sito. | Non: rendere i pulsanti Aggiungi a Google Wallet più piccoli degli altri pulsanti. |
| Azione consigliata: assicurati che le dimensioni dei pulsanti Aggiungi a Google Wallet rimangano uguali o superiori a quelle degli altri pulsanti. | Non:modificare il colore del pulsante. |
| Azione consigliata:mantieni lo stesso rapporto tra i pulsanti quando ridimensioni i pulsanti Aggiungi a Google Wallet. | Non:ridimensionare liberamente il pulsante. |
| Azione consigliata: utilizza la versione localizzata dei pulsanti forniti. | Non: creare una versione localizzata del pulsante. |
Best practice per il posizionamento dei pulsanti
Mostra il pulsante Aggiungi a Google Wallet nelle schermate, nelle pagine web o nelle email dell'app di conferma. Consulta le seguenti best practice per guidare la progettazione dell'interfaccia utente.
Carte fedeltà, carte regalo, offerte
Mostra il pulsante Aggiungi a Google Wallet nelle schermate di conferma. Puoi anche visualizzare il pulsante sul tuo sito web o nella tua app oppure includerlo nelle email pertinenti.
Utilizzo del nome del prodotto Google Wallet nel testo
Puoi utilizzare il testo per indicare all'utente che la sua offerta è stata salvata sul suo dispositivo.
Scrivi in maiuscolo le lettere "G" e "W".
Utilizza sempre una "G" maiuscola e una "W" maiuscola seguite da lettere minuscole per fare riferimento a Google Wallet. Non scrivere in maiuscolo il nome completo "Google Wallet", a meno che non sia per rispettare lo stile tipografico della tua UI.
Non abbreviare Google Wallet
Scrivi sempre le parole "Google" e "Wallet".
Abbinare lo stile nell'interfaccia utente
Imposta "Google Wallet" con lo stesso carattere e 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 versione 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 del testo e
dei pulsanti per le implementazioni mobile o i casi con requisiti speciali dell'interfaccia utente.
Utilizza theme per impostare il colore dei pulsanti. La tabella
che segue 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 logo in una forma circolare.
Di seguito è riportato un elenco di consigli per l'interfaccia utente per le immagini del logo:| Linee guida | Descrizione |
|---|---|
| Tipo di file preferito | PN |
| Dimensioni minime | 660 px x 660 px |
| Proporzioni immagine | 1:1 |
| Proporzioni della copertina | 1:1 |
| Dimensioni effettive in pixel | Ridimensiona in base alle dimensioni del dispositivo |
| Maschera circolare del logo |
Il logo viene mascherato per adattarsi a un design circolare. Assicurati che il tuo logo rientri nell'area sicura. Non pre-mascherare il logo. Lascia il logo in un quadrato con un colore di sfondo a pagina intera. Il logo deve avere un margine del 15% in modo che non venga tagliato quando viene mascherato. 
|
Google Wallet maschera il logo in una forma circolare.
Linee guida per l'immagine del logo rettangolare
Le immagini del logo in formato orizzontale sono supportate da biglietti per eventi, carte d'imbarco, tessere del trasporto pubblico con codice QR, carte fedeltà, offerte, carte regalo, tessere generiche e tessere private generiche. Di seguito è riportato un elenco di consigli per l'interfaccia utente per le immagini del logo larghe:
| Linee guida | Descrizione |
|---|---|
| Tipo di file preferito |
PN Per risultati ottimali, utilizza un'immagine con un colore di sfondo (ti consigliamo di utilizzare lo stesso colore dello sfondo della tessera) |
| Dimensioni consigliate | 1280 x 400 px |
| Dimensioni minime | 400 px di altezza, la larghezza è proporzionale (maggiori indicazioni nella sezione sulle proporzioni consigliate)
Utilizza immagini rettangolari larghe. |
| Proporzioni consigliate |
Se l'immagine non è impostata sulle proporzioni consigliate, verrà ridimensionata per adattarsi alle proporzioni degli spazi dell'intestazione forniti. Il diagramma seguente mostra in dettaglio come verrà ridimensionata la risorsa immagine in base alle proporzioni. 
|
Colore di sfondo della scheda
Puoi impostare il colore dello 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 tutta larghezza nel corpo della scheda.
Linee guida per l'immagine 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 |
1032x336 px Utilizza immagini rettangolari larghe. Per risultati ottimali, utilizza un'immagine con uno sfondo colorato. |
| Proporzioni | 3:1 o più ampio |
| Dimensioni display |
L'intera larghezza della scheda e l'altezza proporzionale. 
|
Immagini a larghezza intera
Il campo *.imageModulesData.mainImage in una classe o un oggetto
viene visualizzato come immagine a tutta larghezza in una tessera.
Linee guida per le immagini a larghezza intera
Di seguito è riportato un elenco di consigli per l'interfaccia utente per le immagini a tutta larghezza:
| Linee guida | Descrizione |
|---|---|
| Tipo di file preferito | PN |
| Dimensioni minime |
Larghezza 1860 px, altezza variabile. Utilizza immagini rettangolari larghe. Per risultati ottimali, utilizza un'immagine con uno sfondo colorato. |
| Proporzioni | Variabile |
| Dimensioni display |
L'intera larghezza del modello e l'altezza proporzionale.
|
| Utilizza la stessa combinazione di colori che usi per il logo. |
Immagini dei codici a barre
Alcuni verticali consentono di inserire immagini sopra e sotto il codice a barre.
Immagini sopra il codice a barre
Di seguito è riportato un elenco di consigli per l'interfaccia utente per le immagini sopra il codice a barre:
| Linea guida | Descrizione |
|---|---|
| Tipo di file preferito | PN |
| Altezza massima |
20 dp (con proporzioni massime) Le dimensioni consigliate sono 80 px di altezza e 80-780 px di larghezza se sono presenti due immagini. In questo modo, possono essere visualizzati uno accanto all'altro. Se un'immagine è quadrata e l'altra è rettangolare, le dimensioni devono essere 80 x 80 px e 780 x 80 px. |
| Proporzioni |
Senza vincoli. Per un'altezza e una larghezza massime di 20 dp di una singola immagine, utilizza proporzioni 20:1. Se vuoi una sola immagine sopra il codice a barre, prendi la larghezza completa (escludi il padding). L'immagine deve essere 1600 x 80 px. |
| Dimensione massima di visualizzazione (singola immagine) | 20 dp di altezza e 400 dp di larghezza |
Immagine sotto il codice a barre
Di seguito è riportato un elenco di consigli per l'interfaccia utente per l'immagine sotto il codice a barre:
| Linea guida | Descrizione |
|---|---|
| Tipo di file preferito | PN |
| Altezza massima |
20 dp (con proporzioni massime) Le dimensioni consigliate sono 80 px di altezza e 80-1600 px di larghezza. Se è quadrata, 80 x 80 px. Se rettangolare, 1600 x 80 px. |
| Proporzioni senza vincoli. Per un'altezza e una larghezza massime di 20 dp, utilizza proporzioni 20:1. | Se vuoi un'immagine a tutta larghezza (escluso il padding), le dimensioni devono essere 1600x80 px. |
| Le dimensioni massime del display sono 20 dp di altezza e 400 dp di larghezza. |
Moduli
Un modulo rappresenta un gruppo di campi in una sezione specifica di un modello. La seguente tabella contiene le linee guida per il numero di moduli che devi includere nelle classi e negli oggetti per assicurarti che le tue carte vengano visualizzate correttamente nell'app Google Wallet.
| Linee guida | Descrizione |
|---|---|
imageModulesData
|
Utilizza un solo imageModulesData nella 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 personalizzabili e sui membri e
viene visualizzato nella visualizzazione espansa. Utilizza questo modulo per archiviare informazioni come
date di scadenza, saldi dei punti secondari o saldi del valore memorizzato.
linksModuleData
Il modulo dei link contiene URI a pagine web, numeri di telefono e indirizzi email. Di seguito è riportato un elenco di consigli per l'interfaccia utente del modulo dei link:
| Linea 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 a un consumatore di toccare il
link e navigare fino al sito web o visualizzare la posizione in Google Maps.
Questo prefisso fa sì che nella descrizione della scheda venga visualizzata anche un'icona di un link o di una mappa.
|
'uri': 'http://maps.google.com/?q=google'
|
|
'uri': 'http://developer.google.com/wallet/'
|
|
|
Utilizza il prefisso tel: quando definisci un numero di telefono. Questo
prefisso consente a un consumatore di toccare il link per comporre il numero. Questo prefisso
crea anche un'icona di un telefono davanti alla descrizione testuale
sulla scheda.
|
'uri': 'tel:6505555555'
|
|
Utilizza il prefisso mailto: quando definisci un indirizzo email.
Questo prefisso consente a un 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'
|
|
Titoli, etichette e nomi
Scrivi intestazioni, etichette e nomi con le 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 di Google Payments. 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 alla tua app o al tuo sito web ricco di funzionalità relative alla tessera, assicurati di incorporare il link diretto dell'app o il sito web nella proprietà linksModuleData.* della classe o dell'oggetto della tessera. In questo modo, un utente può accedere alla tua
piattaforma dalla tessera, che viene visualizzata in
Google Wallet. Per vedere il rendering, vai alle sezioni di progettazione dei
verticali delle tessere.