Se stai sviluppando per utenti in Russia, utilizza i pulsanti "Salva sullo smartphone", poiché Google Wallet non è attivo in questo paese. Consulta gli asset e le linee guida pertinenti. Se stai sviluppando per utenti al di fuori della Russia, aggiorna il pulsante Aggiungi a Google Wallet scaricando gli asset 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 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 richiamare uno dei flussi dell'API Google Wallet. Questi flussi mostrano Google Wallet (nell'app mobile o sul web) dove gli utenti possono seguire le istruzioni per salvare le tessere sul proprio dispositivo mobile e sul proprio Account Google. Questo pulsante può essere utilizzato in app, siti web o email.
I pulsanti Aggiungi a Google Wallet sono disponibili nei formati XML, SVG e PNG di Android.
Scarica gli asset - XML Android Scarica gli asset - SVG Scarica gli asset - PNGPulsante Visualizza in Google Wallet
Il pulsante Visualizza in Google Wallet viene utilizzato per creare un deep link che indirizza 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 nei formati SVG e PNG.
Scarica gli asset - SVG Scarica gli 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 modificati
- Spazio vuoto
Pulsanti localizzati
I pulsanti Google Wallet localizzati sono forniti per tutti i mercati in cui Wallet è disponibile. Se stai sviluppando per gli utenti di questi mercati, utilizza sempre i pulsanti collegati sopra. Non creare una tua versione dei pulsanti. Se non è disponibile una versione localizzata del pulsante nel tuo mercato, utilizza la versione in inglese.
I pulsanti Aggiungi a Google Wallet sono disponibili nelle seguenti lingue: 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 nei confronti degli utenti, il nome del prodotto Google Wallet è localizzato in alcuni mercati. Se stai sviluppando per utenti di questi paesi, utilizza sempre il nome localizzato di seguito per il web, le email e la stampa. Non creare una tua 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 |
| Repubblica Ceca | Peněženka Google |
| Grecia | Πορτοφόλι Google |
| Hong Kong | Google 錢包 |
| Lituania | Google Piniginė |
| Polonia | Portfel Google |
| Portogallo | Carteira da Google |
| Romania | Portofel Google |
| Slovacchia | Peňaženka Google |
| Taiwan | Google 錢包 |
| Turchia | Google Cüzdan |
| EAU | محفظة Google |
| Ucraina | Google Гаманець |
|
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: principale e compresso. Il pulsante Aggiungi a Google Wallet è disponibile solo in nero. Sono disponibili versioni localizzate del pulsante. Non creare pulsanti con il tuo testo localizzato.
| Principale | Ridotta |
|---|---|
|
|
| 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 lo spazio vuoto minimo di 8 dp su tutti i lati del pulsante Aggiungi a Google Wallet. Assicurati che l'area di rispetto non sia mai interrotta da elementi grafici 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 |
|---|---|
| Cosa fare: utilizza solo i pulsanti Aggiungi a Google Wallet forniti da Google. | Da evitare: creare i tuoi pulsanti Aggiungi a Google Wallet o modificare in qualsiasi modo il carattere, il colore, il raggio o il padding all'interno del pulsante. |
| Da fare: utilizza lo stesso stile di pulsante in tutto il sito. | Da evitare: non rendere i pulsanti Aggiungi a Google Wallet più piccoli degli altri pulsanti. |
| Cosa fare: assicurati che le dimensioni dei pulsanti Aggiungi a Google Wallet rimangano uguali o superiori a quelle degli altri pulsanti. | Da evitare: modificare il colore del pulsante. |
| Cosa fare: mantieni le stesse proporzioni del pulsante quando ridimensioni i pulsanti Aggiungi a Google Wallet. | Da evitare: ridimensionare il pulsante in modo libero. |
| Cosa fare: utilizza la versione localizzata dei pulsanti fornita. | Da evitare: creare una versione localizzata del pulsante. |
Best practice per il posizionamento dei pulsanti
Mostra il pulsante Aggiungi a Google Wallet nelle schermate di conferma dell'app, nelle pagine web o nelle email. Consulta le seguenti best practice per progettare la tua UI.
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 carta fedeltà è salvata sul suo dispositivo.
Scrivi le lettere "G" e "W" in maiuscolo
Utilizza sempre una "G" maiuscola e una "W" maiuscola seguite da lettere minuscole per fare riferimento a Google Wallet. Non scrivere in lettere maiuscole il nome completo "Google Wallet", a meno che non sia necessario per rispettare lo stile tipografico della tua UI.
Non abbreviare Google Wallet
Scrivi sempre le parole "Google" e "Wallet".
Adatta lo stile alla tua UI
Imposta "Google Wallet" con lo stesso carattere e stile tipografico del resto del testo nella UI. Non imitare lo stile tipografico di Google.
Utilizza sempre la versione localizzata di "Google Wallet"
Scrivi sempre "Google Wallet" nel testo localizzato fornito.
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 seguente mostra in che modo queste impostazioni influiscono sul pulsante Aggiungi a Google Wallet.
Linee guida per la creazione di tessere
Per assicurarti che le tue tessere abbiano un aspetto gradevole e funzionino correttamente, segui le linee guida riportate di seguito relative a limiti di caratteri, notifiche, colori di sfondo e immagini hero.
Colore sfondo scheda
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.
Evita le zone "Vivaci" ad alta saturazione (ad esempio, verde neon #00FF00 o ciano elettrico #00FFFF). Questi colori creano un intenso affaticamento degli occhi e fanno sì che il testo "sbiadisca" o svanisca sullo sfondo. Utilizza invece uno dei colori consigliati.
Colori consigliati
#1a1a1a
#677088
#e8eaed
#f8f9fa
#ffffff
#d6322d
#f78f48
#f9bb2d
#1e7e3b
#216acf
#9147df
#fce8e6
#e6fffa
#e8f0fe
Immagini hero
Il campo class.heroImage viene visualizzato come immagine a larghezza intera sotto i campi di dati della tessera.
Se non l'hai ancora fatto, valuta la possibilità di aggiungere un'immagine. Se hai un'immagine, assicurati di seguire le specifiche riportate di seguito. Se non selezioni un'immagine, mostreremo un'immagine di riserva della categoria della tessera.
Di seguito è riportato un elenco di consigli per l'interfaccia utente relativi alle immagini hero:
| Linee guida | Descrizione | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Tipo di file preferito | .PNG. Se vuoi che il colore di sfondo della tessera sia visibile, utilizza un file PNG trasparente. | ||||||||
| Dimensioni consigliate | 1032x812 px | ||||||||
| Proporzioni | 1032:812 (circa 5:4) | ||||||||
| Cosa fare e cosa non fare |
|
Contenuti
Titoli, sottotitoli, etichette dei campi e dati dei campi: per aumentare la comprensione da parte degli utenti, mantieni i titoli e gli altri campi il più brevi possibile. I seguenti limiti di caratteri si applicano all'inglese, ma verranno tradotti in altre lingue, con un'esperienza utente diversa a seconda dei dispositivi e delle regioni. In caso di dubbi, semplifica i contenuti, ma trasmetti comunque i dettagli chiave.
| Campo | Limite |
|---|---|
| Etichetta titolo | < 47 caratteri |
| Etichetta sottotitolo | < 88 caratteri |
| Etichetta del campo/titolo (ad es. Data, Descrizione, Classe, Nome passeggero) | < 20 caratteri |
| Etichetta dei dati sul campo (ad es. 19 ottobre 2026, Economy Plus) | < 15 caratteri |
Per garantire la leggibilità, limita i dati a due campi per riga e, se possibile, a un massimo di tre righe.
Notifiche
| Campo | Limite |
|---|---|
| Titolo | < 29 caratteri |
| Corpo compresso | < 40 caratteri |
| Corpo espanso | < 80 caratteri |
Ti consigliamo di rispettare i limiti di caratteri per evitare il troncamento per gli utenti con dispositivi di piccole dimensioni o dimensioni dei caratteri aumentate. Per saperne di più, consulta Notifiche | Dispositivi mobili | Android for Developers.
Loghi
Linee guida per l'immagine del logo
Google Wallet maschera il tuo logo in una forma circolare.
Di seguito è riportato un elenco di consigli per l'interfaccia utente relativi alle immagini del logo:| Linee guida | Descrizione |
|---|---|
| Tipo di file preferito | PNG |
| Dimensioni minime | 660 x 660 px |
| Proporzioni immagine | 1:1 |
| Proporzioni dell'artwork | 1:1 |
| Dimensioni effettive dei pixel | Scala in base alle dimensioni del dispositivo |
| Maschera circolare del logo |
Il logo è mascherato per adattarsi a un design circolare. Assicurati che il tuo logo rientri nell'area di sicurezza. Non pre-mascherare il 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 largo
Le immagini del logo largo sono supportate da biglietti per un evento, carte d'imbarco, tessere per il trasporto pubblico con codice QR, carte fedeltà, offerte, carte regalo, tessere generiche e documenti personali generici. Di seguito è riportato un elenco di consigli per l'interfaccia utente relativi alle immagini del logo largo:
| Linee guida | Descrizione |
|---|---|
| Tipo di file | PNG trasparente |
| Dimensioni consigliate | 1280 x 400 px |
| Dimensioni minime |
400 px per l'altezza, la larghezza è proporzionale (ulteriori indicazioni nella sezione sulle proporzioni) Utilizza immagini ampie e rettangolari. |
| Proporzioni |
16:5 
|
| Colore |
Utilizza un colore molto chiaro con un contrasto elevato (ad esempio il bianco) per le tessere con uno sfondo scuro. Utilizza un colore molto scuro con un contrasto elevato (ad esempio il nero) per le tessere con uno sfondo chiaro. 
|
Ulteriori immagini
Il campo *.imageModulesData.mainImage in una classe o un oggetto viene visualizzato come immagine a larghezza intera in una tessera sotto l'immagine hero. Utilizza questa opzione solo se la tessera richiede un'immagine aggiuntiva per una migliore comprensione da parte dell'utente.
Ulteriori linee guida per le immagini
Di seguito è riportato un elenco di consigli per l'interfaccia utente relativi alle immagini aggiuntive:
| Linee guida | Descrizione |
|---|---|
| Tipo di file preferito | PNG |
| Dimensioni minime |
Larghezza 1860 px, altezza variabile. Utilizza immagini ampie e rettangolari. Per risultati ottimali, utilizza un'immagine con uno sfondo colorato. |
| Dimensioni display |
La larghezza completa del modello e l'altezza proporzionale. 
|
Immagini di 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 relativi alle immagini sopra il codice a barre:
| Linea guida | Descrizione |
|---|---|
| Tipo di file preferito | PNG |
| 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, i due elementi saranno affiancati. Se un'immagine è quadrata e l'altra è rettangolare, le immagini devono essere di 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, utilizza l'intera larghezza (escludi la spaziatura interna). L'immagine deve essere di 1600 x 80 px. |
| Dimensioni massime di visualizzazione (immagine singola) | 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 relativi all'immagine sotto il codice a barre:
| Linea guida | Descrizione |
|---|---|
| Tipo di file preferito | PNG |
| 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 non vincolate. Per un'altezza e una larghezza massime di 20 dp, utilizza proporzioni 20:1. | Se vuoi un'immagine a larghezza intera (esclusa la spaziatura interna), l'immagine deve essere di 1600 x 80 px. |
| Le dimensioni massime di visualizzazione 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 tabella seguente contiene le linee guida per il numero di moduli che devi includere nelle tue classi e nei tuoi oggetti per assicurarti che le tue tessere 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 sui membri e personalizzabili e viene visualizzato nella visualizzazione espansa. Utilizza questo modulo per memorizzare informazioni come date di scadenza, saldi di punti secondari o saldi di valore memorizzato.
linksModuleData
Il modulo dei link contiene URI di 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 accedere al sito web o visualizzare la posizione in Google Maps.
Questo prefisso fa sì che venga visualizzata anche l'icona di un link o di una mappa davanti alla descrizione nella scheda.
|
'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 della 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 della scheda.
|
'uri': 'mailto:jonsmith@email.com'
|
|
Intestazioni, 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 nel corso 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à relativo alla tessera, assicurati di incorporare il deep link 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 come viene visualizzato, vai alle sezioni di progettazione dei verticali dei pass.