Esta seção da documentação foi projetada para ajudar a criar imagens e outros elementos da interface do usuário. Com isso, eles terão uma aparência incrível no app Google Pay.
Logotipos
O Google Pay exibe o seu logotipo em um formato circular.
Diretrizes para imagens de logotipos
Esta é uma lista de recomendações de interface do usuário para imagens de logotipos:
| Diretriz | Exemplo |
|---|---|
| Tipo de arquivo preferido: PNG. | |
| O tamanho mínimo é 660 x 660 pixels. | |
| Proporção da imagem: 1:1. Proporção da arte: 1:1. | |
| O tamanho real do pixel será dimensionado para o tamanho do dispositivo. | |
| O logotipo será mascarado para caber em um design circular. Certifique-se de que o logotipo se encaixe na área segura. Não corte o logotipo antes do envio. Deixe o logotipo em um quadrado com uma cor de fundo totalmente preenchida. O logotipo precisa ter uma margem de 15%. Dessa maneira, ele não é cortado quando colocado no formato circular. |  |
Cor de fundo do cartão
A cor de fundo pode ser definida usando o campo hexBackgroundColor. Se não houver
valor definido, um algoritmo analisará o logotipo para encontrar a cor dominante a ser usada como a
cor de fundo do cartão.
Imagens principais
O campo class.heroImage aparece como um banner de largura total atravessando o corpo
do cartão.
Diretrizes para imagens principais
Esta é uma lista de recomendações de interface do usuário para imagens principais:
| Diretriz | Exemplo |
|---|---|
| Tipo de arquivo preferido: PNG. | |
| O tamanho recomendado é 1032 x 336 pixels. Use imagens largas e retangulares. Use uma imagem com um fundo colorido para conseguir resultados melhores. | |
| Proporção 3:1 ou mais larga. | |
| O tamanho de exibição será a largura total do cartão, além da altura dimensionada proporcionalmente. |  |
Imagens de largura total
O campo *.imageModulesData.mainImage em uma classe ou objeto é exibido como uma
imagem de largura total em um programa de fidelidade ou uma oferta expandidos.
Diretrizes para imagens de largura total
Esta é uma lista de recomendações de interface do usuário para imagens de largura total:
| Diretriz | Exemplo |
|---|---|
| Tipo de arquivo preferido: PNG. | |
| O tamanho mínimo é 1860 pixels de largura, com altura variável. Use imagens largas e retangulares. Use uma imagem com um fundo colorido para conseguir os melhores resultados. | |
| Proporção variável. | |
| O tamanho de exibição será a largura total do modelo ("cartão" de fundo branco), além da altura dimensionada proporcionalmente. | |
| Use o mesmo esquema de cores utilizado na imagem do logotipo. |
Imagens de código de barras
Algumas indústrias permitem imagens acima e abaixo do código de barras.
Imagens acima do código de barras
Veja a seguir uma lista de recomendações para imagens acima do código de barras na interface do usuário:
| Diretriz | Exemplo |
|---|---|
| Tipo de arquivo preferido: PNG. | |
| A altura máxima é 20 dp (em proporção máxima). O tamanho recomendado é de 80 pixels de altura, com largura de 80 a 780 pixels, se houver duas imagens. Isso permite que elas fiquem lado a lado. | Se uma imagem for um quadrado e a outra for um retângulo, as imagens deverão ter 80 x 80 pixels e 780 x 80 pixels. |
| Sem proporção restrita. Para um máximo de 20 dp de altura e largura de uma única imagem, use uma proporção 20:1. | Para usar apenas uma imagem acima do código de barras, ocupe toda a largura (exceto preenchimento). As imagens precisam ter 1600 x 80 pixels. |
| O tamanho máximo de exibição de uma única imagem é 20 dp de altura e 400 dp de largura. |
Imagem abaixo do código de barras
Veja a seguir uma lista de recomendações para a imagem abaixo do código de barras na interface do usuário:
| Diretriz | Exemplo |
|---|---|
| Tipo de arquivo preferido: PNG. | |
| A altura máxima é 20 dp (em proporção máxima). O tamanho recomendado é 80 pixels de altura e de 80 a 1600 pixels de largura. | Se for quadrado, 80 x 80 pixels. Se for retangular, 1600 x 80 pixels. |
| Sem proporção restrita. Para um máximo de 20 dp de altura e largura, use uma proporção 20:1. | Para ocupar toda a largura com uma imagem (exceto preenchimento), ela deve ter 1600 x 80 pixels. |
| O tamanho máximo de exibição é 20 dp de altura e 400 dp de largura. |
Módulos
Um módulo representa um agrupamento de campos em uma seção específica de um modelo. A tabela a seguir contém diretrizes para o número de módulos que você precisa incluir nas classes e nos objetos para garantir que os cartões sejam exibidos corretamente no app Google Pay.
| Diretriz | Exemplo |
|---|---|
Use apenas um imageModulesData na sua classe ou nos objetos
criados. |
|
Use até dois infoModuleData na classe ou nos objetos
criados. |
Um infoModuleData pode definir informações específicas da conta do usuário, como
"Nome do membro" e "Número da assinatura". |
Use até quatro URIs linksModuleData no total na classe ou nos
objetos criados. |
Você pode ter dois URIs linksModuleData na classe: um para o URI
do site e outro para um número de telefone da central de ajuda. Você pode ter dois URIs
linksModuleData no objeto que define um URI específico da conta do usuário e
locais nas proximidades. |
Use até dois campos textModulesData entre a classe e os objetos
criados. |
Você pode ter um textModulesData na classe que define os detalhes do programa
e outro textModulesData no objeto que define os detalhes específicos de uma conta do
usuário. |
infoModuleData
InfoModuleData contém informações do membro e personalizáveis e é mostrado na
exibição expandida. Informações como data de validade, saldo de pontos ou saldo do valor armazenado
precisam ser armazenadas no módulo de informações.
linksModuleData
O módulo de links contém URIs para páginas da Web, números de telefone e endereços de e-mail. Esta é uma lista de recomendações para interface do usuário destinada ao módulo de links:
| Diretriz | Exemplo |
|---|---|
Use o prefixo http: ao definir um URI para um site ou um local no
Google Maps. Esse prefixo permite que um consumidor toque no link e navegue até o site
ou visualize o local no Google Maps. Esse prefixo também cria um ícone de um link ou mapa na frente
da descrição no cartão. |
'uri': 'http://maps.google.com/?q=google''uri': 'http://developer.google.com/pay/passes/' |
Use o prefixo tel: ao definir um número de telefone. Esse prefixo permite que um
consumidor toque no link para discar o número. Ele também cria um ícone de um telefone
na frente da descrição no cartão. |
'uri': 'tel:6505555555' |
Use o prefixo mailto: ao definir um endereço de e-mail. Esse prefixo permite que um
consumidor toque no link para enviar um e-mail ao endereço. Ele também cria um ícone
de um e-mail na frente da descrição no cartão. |
'uri': 'mailto:jonsmith@email.com' |
Títulos, rótulos e nomes
A primeira letra de cada palavra em títulos, rótulos e nomes precisa ser escrita em maiúscula.
Políticas de conteúdo
O conteúdo de cada campo em um cartão precisa aderir às políticas de conteúdo do Payments. O conteúdo dos sites referenciados na classe também precisa aderir a essas políticas.
Botão Salvar no Google Pay
Design
Use os campos height e size da
tag HTML
g:savetoandroidpay para modificar a altura e largura dos botões Salvar no Google Pay.
Quando você especifica textsize=large, o tamanho do texto e do botão aumenta drasticamente,
o que pode ser útil em implementações para dispositivos móveis ou casos com requisitos especiais de IU.
Use theme para definir a cor dos botões. A tabela a seguir mostra como essas
configurações afetam o botão Salvar no Google Pay resultante.
| Configuração | Resultado |
|---|---|
theme de dark |
|
theme de light |
|
Posicionamento
Para garantir que os usuários possam salvar, resgatar e se engajar com cartões desenvolvidos por você, recomendamos colocar os botões ou os links Salvar no Google Pay (S2GP) em todos os fluxos contextuais. Em geral, o botão precisa ser posicionado próximo de botões de ação de uso semelhante, como o botão Imprimir oferta.
As sugestões a seguir são maneiras de integrar o botão Salvar no Google Pay aos fluxos que foram boas para alguns parceiros.
Cartões de fidelidade
Considere colocar o botão Salvar no Google Pay no fluxo em que um usuário visualize o número ou o cartão de fidelidade no app Android ou site. Alguns parceiros foram bem-sucedidos apresentando o botão aos usuários depois que eles fizeram login ou se inscreveram no app.
Vales-presente
Considere colocar o botão Salvar no Google Pay na tela de confirmação depois que um usuário comprar um vale-presente no seu site ou app. Você também pode inseri-lo no e-mail, no SMS ou na tela de confirmação exibida ao destinatário do vale-presente.
Ofertas
É possível colocar o botão Salvar no Google Pay no site ou no app em que um usuário acessa a oferta ou em qualquer e-mail ou SMS usado para distribuir a oferta (usando nossos links para salvar).
Ingressos
O botão pode ser colocado ao final de um fluxo de compra, quando um usuário compra um ingresso no site ou no app, no e-mail de confirmação ou no SMS após uma compra. Considere colocar o botão Salvar no Google Pay no mesmo lugar em que um usuário acessa o ingresso no app ou no site.
Cartões de embarque
Você pode colocar o botão no final do fluxo de check-in no site para computadores e dispositivos móveis ou no seu app para dispositivos móveis. Também é possível inseri-lo na tela em que um usuário vê o cartão de embarque no seu site ou app para dispositivos móveis ou no e-mail ou SMS de confirmação após o check-in.
Download
Quando você usa um link para permitir que usuários façam o download de um cartão de fidelidade, um vale-presente ou uma oferta, uma imagem do botão do Google Pay sobreposta ao link direto garante uma experiência consistente ao usuário. Clique em Fazer download dos recursos para salvar os botões do Google Pay, que estão disponíveis em vários idiomas como arquivos EPS ou SVG:
Fazer o download dos recursos: EPS Fazer o download dos recursos: SVGPosicionamento dos dados da plataforma do parceiro
Para garantir que os usuários acessem seu app repleto de recursos ou o site sobre o
cartão, incorpore o link direto do app ou do site na classe do cartão ou na
propriedade linksModuleData.* do objeto. Isso permite ao
usuário navegar até a plataforma pelo cartão exibido no Google Pay. Para ver
como ele é renderizado, consulte as seções de design das indústrias de cartões.