Linee guida per il branding

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.

Importante:abbiamo aggiornato le nostre linee guida. Consulta la nuova sezione Linee guida per la creazione di tessere di seguito per i requisiti aggiornati relativi a limiti di caratteri, notifiche, colori di sfondo e immagini hero.

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 - PNG

Pulsante 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 - PNG

Tutti 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 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	Google Wallet
Repubblica Ceca	Google Wallet
Grecia	Google Wallet
Hong Kong	Google 錢包
Lituania	Google Piniginė
Polonia	Portfel Google
Portogallo	Carteira da Google
Romania	Portofel Google
Slovacchia	Google Wallet
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 il tuo testo localizzato.

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 libero 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 di conferma dell'app, nelle pagine web o nelle email. 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 carta regalo è stata salvata sul dispositivo.

Scrivi in maiuscolo le lettere "G" e "W".

Per fare riferimento a Google Wallet, utilizza sempre una "G" maiuscola e una "W" maiuscola seguite da lettere minuscole. 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.

Nota:l'attributo text è stato ritirato. Il pulsante viene visualizzato allo stesso modo, indipendentemente dalla verticale specifica.

Linee guida per la creazione di tessere

Per assicurarti che le tessere abbiano un aspetto ottimale e funzionino correttamente, rispetta le seguenti linee guida per limiti di caratteri, notifiche, colori di sfondo e immagini hero.

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.

Evita le zone "Vivace" ad alta saturazione (ad esempio, verde neon #00FF00 o ciano elettrico #00FFFF). Questi colori causano un affaticamento intenso della vista e fanno "sbavare" o scomparire il testo sullo sfondo. Utilizza uno dei colori consigliati.

Colori consigliati

Grigio scuro

#1a1a1a

Grigio medio

#677088

Grigio chiaro

#e8eaed

Bianco sporco

#f8f9fa

Bianco

#ffffff

Rosso

#d6322d

Orange

#f78f48

Giallo

#f9bb2d

Verde

#1e7e3b

Blu

#216acf

Viola

#9147df

Rosa chiaro

#fce8e6

Verde chiaro

#e6fffa

Azzurro

#e8f0fe

Immagini hero

Il campo class.heroImage viene visualizzato come un'immagine a tutta larghezza sotto i campi dati della tua tessera.

Valuta di aggiungere un'immagine, se non ne hai già una. Se hai un'immagine, assicurati di rispettare 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 delle immagini hero:

Linea guida	Descrizione
Tipo di file preferito	.PNG. Se vuoi che il colore di sfondo della tessera sia visibile, utilizza un PNG trasparente.
Dimensioni consigliate	1032x812 px
Proporzioni	1032:812 (circa 5:4)
Cosa fare e cosa non fare	Dos Azioni da evitare Utilizza fotografie o illustrazioni ad alta risoluzione. Incorpora il testo nelle immagini. Questi contenuti non verranno localizzati. Includi un padding di 20 dp nella parte superiore e inferiore per lo spazio visivo. Il contenuto principale dell'immagine deve toccare la parte superiore e inferiore dell'immagine. Utilizza un'immagine quadrata o quasi quadrata. Utilizza immagini rettangolari sottili.

Contenuti

Titoli, sottotitoli, etichette dei campi e dati dei campi:per aumentare la comprensione 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 conseguente esperienza utente variabile su dispositivi e 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 fino a tre righe, se possibile.

Notifiche

Campo	Limite
Titolo	< 29 caratteri
Corpo compresso	< 40 caratteri
Corpo espanso	< 80 caratteri

Il rispetto dei limiti di caratteri è consigliato per evitare il troncamento per gli utenti con dispositivi piccoli o dimensioni dei caratteri aumentate. Per saperne di più, consulta Notifiche | Mobile | Android 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 per le immagini del logo:

Linea 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 tuo 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:

Linea guida	Descrizione
Tipo di file	PNG trasparente
Dimensioni consigliate	1280 x 400 px
Dimensioni minime	400 px per l'altezza, la larghezza è proporzionale (maggiori indicazioni nella sezione sulle proporzioni) Utilizza immagini rettangolari larghe.
Proporzioni	16:5
Colore	Utilizza un colore molto chiaro ad alto contrasto (ad esempio il bianco) per le tessere con uno sfondo scuro. Utilizza un colore molto scuro ad alto contrasto (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 un'immagine a tutta larghezza in una tessera sotto l'immagine promozionale. Utilizzalo 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 per le immagini aggiuntive:

Linea 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.
Dimensioni display	L'intera larghezza del modello e l'altezza proporzionale.

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 80x80 px e 780x80 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 l'intera larghezza (escluso 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 larghezza intera (escluso il padding), l'immagine deve essere 1600x80 px.
Le dimensioni di visualizzazione massime 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 tessere vengano visualizzate correttamente nell'app Google Wallet.

Linea guida	Descrizione
imageModulesData	Utilizza un solo imageModulesData nella classe o negli oggetti che crei.
infoModuleData	Utilizza fino a due infoModuleData, nella tua classe o negli oggetti che crei. Un infoModuleData potrebbe definire informazioni specifiche dell'account utente, ad esempio "Nome membro" e "Numero di iscrizione".
linksModuleData	Utilizza fino a quattro URI linksModuleData in totale nella tua classe o negli oggetti che crei. Potresti avere due URI linksModuleData nella tua classe: uno per l'URI del tuo sito web e uno per un numero di telefono del tuo Centro assistenza. Due URI linksModuleData nell'oggetto potrebbero definire un URI specifico dell'account utente e le località vicine.
textModulesData	Utilizza fino a due campi textModulesData tra la classe e gli oggetti che crei. Potresti avere un URI textModuleData nella tua classe che definisce i dettagli del programma e un altro URI textModulesData nell'oggetto che definisce i dettagli specifici dell'account utente.

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.

Nota:utilizziamo una sola colonna per elencare i moduli informativi.

linksModuleData

Il modulo dei link contiene URI a pagine web, numeri di telefono e indirizzi email. Di seguito è riportato un elenco di suggerimenti 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 località 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 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 di testo sulla scheda.	'uri': 'tel:[phone]'
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:[e-mail]'

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 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 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 delle verticali delle tessere.

Nota:assicurati che il deep link indirizzi gli utenti all'installazione della tua app nel Play Store, se devono ancora installarla. Sono preferibili i deep link differiti che indirizzano gli utenti ai dettagli della tessera pertinenti dopo l'installazione e l'accesso.