Use o Login do Google com os escopos básicos profile ou email e inclua os seguintes botões padrão no seu app da Web ou para dispositivos móveis:
| Estilo | Botões | Arquivos de imagem |
|---|---|---|
| Claro |
|
Inclui botões de login nos formatos PNG, SVG, EPS e Sketch, em muitas resoluções. Inclui os estados básico, passar cursor ou pressionar. |
| Escuro |
|
Arquivos Sketch, SVG e EPS estão incluídos no download para que você possa traduzir o texto "Sign in with" ou "Sign in". Nesses arquivos, é necessário utilizar a fonte Roboto.
Se você quiser solicitar mais escopos, faça isso com uma autorização complementar (Android, iOS, Web). Só solicite autorização do usuário quando ele começar a utilizar um recurso que exija acesso à API.
Se quiser solicitar escopos do YouTube, use um botão do YouTube.
Se você usa os serviços relacionados a jogos do Google Play, consulte também as Diretrizes da promoção de marca dos serviços relacionados a jogos do Google Play.
Login do Google e outras opções de login de terceiros
Destaque igual
O botão do Login do Google tem que ser exibido com um destaque pelo menos igual ao de outras opções de login de terceiros. Por exemplo, os botões precisam ter aproximadamente o mesmo tamanho e um peso visual semelhante.
Como combinar com o estilo do seu app
É altamente recomendado que o botão padrão do Login do Google seja utilizado, já que isso permite aos usuários identificar a opção do Google mais rapidamente. Caso você precise adaptar o botão para que ele combine com o design do seu app ou caso queira traduzir o texto "Sign in with" ou "Sign in", siga estas diretrizes.
Tamanho
Você pode dimensionar o botão conforme necessário para diferentes dispositivos e tamanhos de tela, mas a proporção precisa ser preservada para que o logotipo do Google não fique esticado.
Texto
Recomendamos o uso do texto de call-to-action "Fazer login com o Google" ou "Inscrever-se com o Google" para incentivar os usuários a clicar no botão. É preciso ficar claro para o usuário que ele está fazendo login ou se inscrevendo no seu app usando as próprias credenciais do Google, ou seja, que ele não está se inscrevendo em uma conta do Google no seu app.
Texto "Google"
A palavra "Google" pode ser usada sozinha no botão desde que esteja acompanhada por um texto adjacente que deixe claro qual é a ação. Por exemplo:
Fazer login com:
Cor
A cor de um botão claro não pressionado é #FFFFFF (branca). A cor de um botão escuro (azul) não pressionado é #4285F4. O plano de fundo do botão pode ser azul ou branco, mas o botão precisa sempre incluir o "G" do Google de cor padrão dentro de um bloco branco.
Fonte
A fonte do botão é Roboto Medium, uma fonte TrueType. Para instalar, primeiro faça o download da fonte Roboto e descompacte o pacote de download. No Mac, basta clicar duas vezes em Roboto-Medium.ttf, depois clicar em "Instalar fonte". No Windows, arraste o arquivo para "Meu computador"> "Windows"> pasta "Fontes". Não use outras fontes no botão, exceto conforme indicado para situações em que é possível combinar com o estilo do seu app.
Para sites que usam um botão de login personalizado, é possível carregar a fonte Roboto do Google Fonts.
Padding
O padding à esquerda (e à direita) do texto tem que ser de 8dp. O logotipo precisa ter 18dp, e tem que haver 24dp entre o logotipo e o texto do botão.
Logotipo do Google no botão "Fazer login com o Google"
Não é possível alterar o tamanho ou a cor do logotipo "G" do Google, independentemente do texto. O logotipo precisa ter a cor padrão e aparecer em um plano de fundo branco. Se você precisar criar um logotipo do Google com tamanho personalizado, comece com qualquer um dos tamanhos de logotipo incluídos no pacote de download.
Design de botão incorreto
 |
Não use o ícone ou o logotipo do Google sozinho sem o contorno do botão e sem um texto que indique a ação do usuário. |
|
Não use um ícone do Google sozinho para representar o Login do Google. |
 |
Não use versões escuras ou claras do "G" do Google. |
|
Não coloque o ícone "G" do Google de cor padrão em um plano de fundo colorido. |
 |
Não crie seu próprio ícone para o botão. |
 |
Não use o termo "Google" sozinho no botão sem o ícone do Google correspondente. |
O uso de marcas do Google de maneiras não expressamente cobertas por este documento não é permitido sem o consentimento prévio por escrito do Google. Para saber mais informações, consulte as Diretrizes para o uso das características da marca Google por terceiros (link em inglês).