Este documento apresenta diretrizes sobre como exibir um botão "Fazer login com o Google" no seu site ou app. Seu site ou app precisa seguir estas diretrizes para concluir o processo de verificação.
Nossos SDKs dos Serviços de Identificação do Google renderizam o botão "Fazer login com o Google", que sempre segue as diretrizes mais recentes da promoção de marca do Google. Eles são a maneira recomendada de mostrar o botão "Fazer login com o Google" no seu site ou app. Nos casos em que não é possível usar a opção de botão renderizado pelo Google, é possível renderizar um elemento de botão HTML, fazer o download dos nossos recursos de marca pré-aprovados ou, como opção, criar um botão personalizado "Fazer login com o Google".
Elemento do botão HTML "Renderizar"
Fornecemos um configurador HTML que permite personalizar a aparência do botão "Fazer login com o Google". Em seguida, você pode fazer o download de um snippet HTML e CSS que renderizará o botão no seu site.Gerar elemento de botão HTML
Faça o download dos ícones de marca pré-aprovados
Como alternativa ao uso de um botão de imagem personalizada, você pode fazer o download dos nossos botões "Fazer login com o Google" pré-aprovados, fornecidos nos formatos PNG e SVG para todas as plataformas.Os botões de imagens fornecidas estão disponíveis nos modos padrão e de ícone e incluem as opções de estilo abaixo:
- Tema : claro, neutro, escuro
- Forma : retangular, pílula
| Tema | Botões | Descrição |
|---|---|---|
| Claro |
|
Botão retangular grande "Fazer login com o Google" com tema claro grande |
| Escuro |
|
Botão "Fazer login com o Google" em formato de pílula padrão escuro |
Modos de botão compatíveis
| Claro |
|
|
| Escuro |
|
|
| Neutro |
|
|
Criar um botão "Fazer login com o Google" personalizado
É altamente recomendável usar os SDKs dos Serviços de Identificação do Google ou qualquer uma das outras opções abordadas nas seções anteriores, porque assim os usuários podem identificar a marca do Google com mais facilidade. Quanto mais facilmente os usuários conseguirem identificar um botão de ação, maior será a probabilidade de interagirem com ele.
No entanto, se você precisar adaptar o botão para combinar com o design do seu app, siga as diretrizes a seguir.
Tamanho
Você pode dimensionar o botão conforme necessário para diferentes dispositivos e tamanhos de tela, mas é necessário preservar a proporção para que o logotipo do Google não fique esticado.
Texto
Para incentivar os usuários a clicar no botão, recomendamos o texto de call-to-action "Fazer login com o Google", "Inscrever-se com o Google" ou "Continuar com o Google". Precisa ficar claro para o usuário que ele está fazendo login ou se inscrevendo no seu app com as credenciais do Google, e não para uma Conta do Google no seu app.
Cor
O estado padrão dos botões é mostrado abaixo. O botão precisa sempre incluir a cor padrão do "G" do Google.
| Tema | Exemplo | |
|---|---|---|
| Claro |
|
Preenchimento: #FFFFFF Traço: #747775 | 1 px | dentro de Fonte: #1F1F1F | Roboto Medium | 14/20 |
| Escuro |
|
Preenchimento: #131314 Traço: #8E918F | 1 px | no interior de Fonte: #E3E3E3 | Roboto Medium | 14/20 |
| Neutro |
|
Preenchimento: #F2F2F2 Traço: sem traço Fonte: #1F1F1F | Roboto Medium | 14/20 |
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 e depois clicar em "Instalar fonte". No Windows, arraste o arquivo para "Meu computador" > "Windows" > pasta "Fontes".
Padding
| Android |
|
| iOS |
|
| Web (dispositivo móvel + computador) |
|
| Referência |
|
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, seja qual for o texto. Ele precisa ser a versão colorida padrão e aparecer em um fundo branco. Se você precisar criar seu próprio logotipo do Google com tamanho personalizado, comece com qualquer um dos tamanhos de logotipo incluídos no pacote de download.
Design incorreto do botão
 O que fazer Use as diretrizes de design do Google Material 3 para limites de botão e esquema de cores. |
 O que não fazer Use o ícone ou o logotipo do Google sozinho, sem o limite do botão e sem texto para indicar a ação do usuário. |
 O que fazer Use a cor da marca Google no ícone do Google nos modos escuro, claro e neutro. |
 O que não fazer Use as versões monocromáticas do "G" do Google para o botão. |
 O que fazer Escolha o botão no modo de cor correto para ter acessibilidade e destaque. |
 O que não fazer Coloque o ícone "G" do Google com a cor padrão em um fundo colorido que não seja claro, escuro ou neutro. |
 O que fazer Use o "G" do Google com padding e tamanho fixos. |
 O que não fazer Crie seu próprio ícone para o botão. |
 O que fazer Se necessário, use o "G" do Google sozinho para o botão de ação. |
 O que não fazer Use o próprio termo "Google" no botão para representar a ação do "Fazer login com o Google". |
Fazer login com as práticas recomendadas de branding do Google
Fazer login com o Google e outras opções de login de terceiros
O botão "Fazer login com o Google" precisa ser exibido com um destaque pelo menos igual ao de outras opções de login de terceiros. Por exemplo, os botões precisam ser aproximadamente do mesmo tamanho e ter peso visual semelhante.
Outras diretrizes
Se você solicitar escopos adicionais, faça isso com autorização incremental (Android, iOS, Web), solicitando autorização apenas ao usuário quando ele começar a interagir com um recurso que requer acesso à API.
Se você 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.
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 mais informações, consulte as Diretrizes de uso das características da marca Google por terceiros.