Linee guida per il brand

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

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

Tutti 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 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
EAU Google
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
Pulsante principale Aggiungi a Google Wallet Pulsante Aggiungi a Google Wallet ridotto
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.

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

Carta d'imbarco Sky Air     Carta d'imbarco generica

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.

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.

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

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.

Le dimensioni del display devono avere proporzioni pari o superiori a 3 a 1.
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 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 in totale nella tua classe o negli oggetti che crei.

Potresti avere due URI linksModuleData nel tuo corso: uno per l'URI del tuo sito web e uno per il 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 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' Un indicatore con segnaposto di 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 del testo sulla scheda. 'uri': 'tel:6505555555' Un indicatore del telefono per un link a un telefono.
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' Un indicatore di posta per un link per l'invio di un'email.

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.