Linee guida per il branding

Se hai sviluppato il servizio per gli 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 per utenti al di fuori della Russia, aggiorna il pulsante Aggiungi a Google Wallet scaricando gli asset riportati di seguito.

Questa sezione della documentazione è pensata 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 chiedi agli utenti di salvare una tessera o una carta dalla tua app o dal tuo sito web nel loro portafoglio. 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 nell'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 - Android XML Scarica asset - SVG Scarica asset - PNG

Pulsante Visualizza in Google Wallet

Il pulsante Visualizza in Google Wallet viene utilizzato per collegare direttamente un utente al suo portafoglio 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 - PNG

Tutti i pulsanti visualizzati sul tuo sito, nella tua app o nelle tue 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:

  • Dimensione 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 disponibili per tutti i mercati in cui è disponibile Wallet. Se stai sviluppando il programma per gli utenti di questi mercati, utilizza sempre i pulsanti indicati in precedenza. Non creare una versione personalizzata dei pulsanti. Se una versione localizzata del pulsante non è disponibile nel tuo mercato, utilizza la versione in inglese del pulsante.

I pulsanti Aggiungi a Google Wallet sono disponibili in albanese, arabo, armeno, azero, azero, bosniaco, bulgaro, catalano, cinese (Hong Kong), cinese (tradizionale), croato, ceco, arabo, serbo, slovacco, francese, giapponese, indonesiano, inglese (India, Singapore, Sudafrica, filippino, francese, filippino di lingua ucraina, russo, spagnolo, portoghese brasiliano, slovacco, spagnolo, portoghese brasiliano, slovacco, portoghese , russo, spagnolo, portoghese, russo, spagnolo, tedesco, filippino

Nome localizzato

Per chiarezza per gli utenti, il nome del prodotto Google Wallet è localizzato in alcuni mercati. Se ti occupi di sviluppo per gli 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 Billetera de Google
Cechia Peneženka Google
Grecia La parola a Google
Hong Kong Google 錢包
Lituania Google Piniginì
Polonia Portfel - Google
Portogallo Carteira da Google
Romania Portofel Google
Slovacchia Google
Taiwan Google 錢包
Turchia Google Cüzdan
Emirati Arabi Uniti 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 ridurre le dimensioni del pulsante Aggiungi a Google Wallet rispetto agli altri pulsanti.

Stile

I pulsanti Aggiungi a Google Wallet sono disponibili in due varianti: principali e brevi. Il pulsante Aggiungi a Google Wallet è disponibile solo in nero. Vengono fornite versioni localizzate del pulsante. Non creare pulsanti con testo localizzato personalmente.

Principale Condensed
Pulsante principale Aggiungi a Google Wallet Pulsante Aggiungi a Google Wallet ridotto
Usa il pulsante principale su sfondi bianchi e chiari. Utilizza il pulsante ridotto se non c'è abbastanza spazio 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.

I pulsanti Aggiungi a Google Wallet devono avere 8 dp di spazio su tutti i lati.

Altezza minima

Tutti i pulsanti Aggiungi a Google Wallet devono avere un'altezza minima di 48 dp.

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. Non: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: utilizza lo stesso stile del pulsante in tutto il sito. Non: riduci le dimensioni dei pulsanti Aggiungi a Google Wallet rispetto agli altri pulsanti.
Sì. 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: mantieni lo stesso rapporto del pulsante quando ridimensioni i pulsanti Aggiungi a Google Wallet. No: Ridimensiona il pulsante liberamente.
Azione: utilizza la versione localizzata dei pulsanti fornita. Non creare la tua 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 la progettazione dell'interfaccia utente.

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 proprie tessere nella tua app o sul tuo sito web.

Carta d'imbarco Sky Air     Carta d'imbarco generica

Utilizzo del nome del prodotto Google Wallet nel testo

Puoi utilizzare del testo per indicare all'utente che la carta d'imbarco è stata salvata sul suo dispositivo.

Utilizza le lettere maiuscole per le lettere "G" e "W"

Per fare riferimento a Google Wallet, utilizza sempre una "G" maiuscola e una "W" maiuscola seguita da lettere minuscole. Il nome completo "Google Wallet" non deve essere scritto in maiuscolo, a meno che non si tratti di uno 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 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 del testo e dei pulsanti per le implementazioni mobile o per i casi con requisiti UI speciali.

Usa theme per impostare il colore dei pulsanti. La tabella seguente mostra in che modo queste impostazioni influiscono sul pulsante Aggiungi a Google Wallet.

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 relativi all'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 risultati ottimali, utilizza un'immagine con uno sfondo colorato.

Formato 3:1 o più ampio
Dimensioni di visualizzazione

L'intera larghezza della scheda e l'altezza proporzionale.

Le dimensioni del display devono avere proporzioni pari o superiori a 3:1.

Immagini a larghezza intera

Il campo *.imageModulesData.mainImage in una classe o in un oggetto viene visualizzato come un'immagine a larghezza intera in una pass.

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

1860 px di larghezza, altezza variabile.

Utilizza immagini larghe e rettangolari.

Per risultati ottimali, utilizza un'immagine con uno sfondo colorato.

Formato Variabile
Dimensioni di visualizzazione

La larghezza intera del modello e l'altezza proporzionale.

Le dimensioni del display devono avere proporzioni pari o superiori a 3:1.
Utilizza la stessa combinazione di colori che utilizzi per il logo.

Immagini di codici a barre

Alcuni verticali consentono le immagini sopra e sotto il codice a barre.

Immagini sopra il codice a barre

Di seguito è riportato un elenco di suggerimenti relativi all'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 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 20:1.

Se vuoi un'unica immagine sopra il codice a barre, utilizza la larghezza intera (esclusa la spaziatura interna). L'immagine deve essere 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 relativi all'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), l'immagine deve essere di 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 le linee guida per il numero di moduli che devi includere nei tuoi corsi e oggetti per assicurarti che le tue 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 infoModuleData, nella tua classe o negli oggetti che crei.

Un infoModuleData potrebbe definire informazioni specifiche per l'account utente, ad esempio "Nome membro" e "N. abbonamento".

linksModuleData

Utilizza fino a quattro URI linksModuleData 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 Centro assistenza. Due URI linksModuleData nell'oggetto potrebbero definire un URI specifico dell'account utente e le località nelle vicinanze.

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 textModulesData nell'oggetto che definisce i dettagli specifici dell'account utente.

infoModuleData

InfoModuleData contiene informazioni sui membri e personalizzabili e viene mostrato 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 raggiungere il sito web o visualizzare la posizione in Google Maps. Questo prefisso causa anche l'icona di un link o di una mappa davanti alla descrizione nella scheda. 'uri': 'http://maps.google.com/?q=google' Un indicatore di segnaposto per una posizione sulla mappa.
'uri': 'http://developer.google.com/wallet/' Un indicatore a forma di globo per un sito web.
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 testuale sulla scheda. 'uri': 'tel:6505555555' Un indicatore di telefono per un collegamento telefonico.
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 l'icona di un'email davanti alla descrizione testuale sulla scheda. 'uri': 'mailto:jonsmith@email.com' Un indicatore di posta per un link per l'invio di un'email.

Intestazioni, etichette e nomi

Scrivi intestazioni, etichette e nomi utilizzando 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 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 ricchi di funzionalità relativi alla tessera, assicurati di incorporare il link diretto dell'app o il sito web nella proprietà linksModuleData.* dell'oggetto o della classe della tessera. Questa autorizzazione consente all'utente di accedere alla tua piattaforma dal pass, visualizzato in Google Wallet. Per vedere come viene visualizzato, vai alle sezioni relative alla progettazione dei verticali del pass.