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.
![Ícone do Google G](https://developers.google.cn/static/identity/images/g-logo.png?authuser=6&hl=pt-br)
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.