Diretrizes de botão

Nestas diretrizes, você encontrará ajuda para implementar a API Google Pay for Passes nos seus apps ou sites.

Botão "Salvar no smartphone"

Quando você usar um link para permitir que os usuários façam o download de um cartão COVID, adicione uma imagem do botão do Google "Salvar no smartphone" ao lado do link direto para oferecer uma experiência mais consistente ao usuário. Esse botão pode ser usado em apps, sites, e-mails ou SMS de comerciantes.

Clique em Fazer o download dos recursos para fazer o download dos botões do Google, que estão disponíveis nos formatos PNG e SVG, além de arquivos XML do drawable vetorial do Android:

Fazer o download dos recursos

Aviso: não use o botão Salvar no Google Pay JavaScript. Use as imagens "Salvar no smartphone" especificamente criadas para os cartões COVID.

Todos os botões Salvar no smartphone exibidos nos seus sites, apps ou e-mails precisam aderir às diretrizes da marca descritas nesta página. Elas incluem, mas não se limitam a:

  • Dimensão em relação a outros botões ou elementos semelhantes da página
  • Contraste com a cor de fundo da área circundante
  • Espaço livre

No momento, os botões Salvar no smartphone estão disponíveis apenas em inglês.

Tamanho

Ajuste a altura e a largura do botão Salvar no smartphone para que ele caiba no layout. Se houver outros botões na página, o botão Salvar no smartphone precisará ser igual ou maior que esses botões. Não reduza o botão Salvar no smartphone de forma que fique menor do que os outros botões.

Estilo

Os botões Salvar no smartphone estão disponíveis em três variações: preto, branco e branco com contorno em preto. Se você precisar de uma versão localizada do botão, entre em contato com google-pay-passes-support@google.com

Botão "Salvar no smartphone" em preto Botão "Salvar no smartphone" em branco Botão "Salvar no smartphone" em branco com contorno
Preto Branco Branco com contorno
Use o botão preto com planos de fundo brancos ou claros para que haja contraste. Não use esse botão em planos de fundo escuros. Como alternativa, use o botão branco. Use o botão branco com planos de fundo escuros ou coloridos. Não use esse botão em fundos brancos ou claros. Como alternativa, use o botão preto ou o botão branco com contorno. Use o botão branco com contorno como alternativa ao botão preto em planos de fundo brancos ou claros. Não use esse botão em fundos escuros ou coloridos. Nesse caso, use o botão branco padrão.

Espaço livre

Sempre mantenha o espaço livre mínimo de 8 dp em todos os lados do botão Salvar no smartphone. O espaço livre não pode ser preenchido por imagens ou textos.

Altura mínima

Todos os botões Salvar no smartphone precisam ter uma altura mínima de 36 dp.

Recomendações e restrições

O que fazer: Restrições
Recomendação: use somente os botões Salvar no smartphone fornecidos pelo Google. Restrição: não crie de maneira alguma seus próprios botões Salvar no smartphone nem altere a fonte, a cor, o raio ou o preenchimento do botão.
Recomendação: use o mesmo estilo de botão em todo o site. Se a cor do plano de fundo mudar, adapte a cor dos botões. Restrição: não deixe os botões Salvar no smartphone menores do que os outros.
Recomendação: garanta que o tamanho dos botões Salvar no smartphone seja igual ou maior que o de outros. Restrição: não use uma cor de botão que seja semelhante à cor do plano de fundo. Por exemplo, não use o botão branco em um fundo branco.
Recomendação: escolha uma cor de botão que contraste com o plano de fundo. Restrição: não dimensione o botão livremente.
Recomendação: mantenha a proporção dos botões Salvar no smartphone ao redimensioná-los.

Práticas recomendadas para posicionamento de botões

Para maximizar o número de objetos salvos, evidencie os botões Salvar no smartphone no seu app, site ou e-mail. É preciso aderir às práticas recomendadas abaixo para receber a aprovação da marca do Google.

Cartões COVID

Para garantir que os usuários possam salvar, resgatar e interagir com os cartões COVID que você desenvolveu, recomendamos colocar os botões ou os links Salvar no smartphone em todos os fluxos contextuais. Em geral, posicione o botão ao lado de botões de ação semelhantes, como Imprimir cartão.

Considere colocar o botão Salvar no smartphone em um fluxo em que o usuário visualize os dados de teste ou vacinação no seu 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.