Consignes relatives à la marque Se connecter avec Google

Ce document explique comment afficher un bouton "Se connecter avec Google" sur votre site Web ou dans votre application. Ils doivent suivre ces consignes pour effectuer la procédure de validation.

Nos SDK Google Identity Services affichent un bouton "Se connecter avec Google" qui respecte toujours les consignes Google les plus récentes concernant la marque. Il s'agit de la méthode recommandée pour afficher le bouton "Se connecter avec Google" sur votre site Web ou dans votre application. Si vous ne pouvez pas utiliser l'option du bouton affiché par Google, vous pouvez afficher un élément de bouton HTML, télécharger nos éléments de marque préapprouvés ou créer un bouton "Se connecter avec Google" personnalisé.

Afficher l'élément du bouton HTML

Nous proposons un configurateur HTML qui vous permet de personnaliser l'apparence du bouton "Se connecter avec Google". Vous pouvez ensuite télécharger un extrait de code HTML et CSS qui permettra d'afficher le bouton sur votre site Web.

Générer un élément de bouton HTML

  
  

Télécharger les icônes de marque pré-approuvées

Au lieu d'utiliser un bouton image personnalisé, vous pouvez télécharger nos boutons préapprouvés "Se connecter avec Google" fournis aux formats PNG et SVG pour toutes les plates-formes.

Les boutons "Images" fournis sont disponibles en mode standard et en mode icône. Ils incluent les options de style ci-dessous:

  • Thème : Clair, Neutre, Sombre
  • Forme : Rectangulaire, Pilule
Voici deux exemples:
Thème Boutons Description
Faible Exemple de bouton "Se connecter avec Google" rectangulaire standard avec thème clair Bouton "Se connecter avec Google" standard rectangulaire avec thème clair
Sombre Exemple de bouton "Se connecter avec Google" standard en forme de pilule sombre Bouton "Se connecter avec Google" standard en forme de pilule sombre
Télécharger les icônes de marque pré-approuvées

Modes de boutons compatibles

Faible

Bouton rond sur le thème clair "Se connecter avec Google"

Bouton carré avec thème clair "Se connecter avec Google"

Bouton "Se connecter avec Google" avec thème clair

Bouton "Se connecter avec Google" à thème clair

Sombre

bouton "Se connecter avec Google" avec thème sombre

bouton "Se connecter avec Google" avec thème sombre

bouton "Se connecter avec Google" avec thème sombre

bouton "Se connecter avec Google" à thème sombre

Neutre

bouton "Se connecter avec Google" à thème neutre de forme ronde

bouton "Se connecter avec Google" avec thème neutre et carré

Bouton "Se connecter avec Google" à thème neutre en forme de pilule

bouton "Se connecter avec Google" à thème neutre de forme rectangulaire

Créer un bouton "Se connecter avec Google" personnalisé

Nous vous recommandons vivement d'utiliser nos SDK Google Identity Services ou toute autre option décrite dans les sections précédentes, car cela permet aux utilisateurs de Google d'identifier plus facilement la marque Google. Plus les utilisateurs peuvent identifier facilement un bouton d'action, plus ils sont susceptibles d'interagir avec celui-ci.

Toutefois, si vous devez adapter le bouton à la conception de votre application, respectez les consignes suivantes.

Taille

Vous pouvez redimensionner le bouton selon vos besoins pour différents appareils et tailles d'écran, mais vous devez conserver le format pour que le logo Google ne soit pas étiré.

Texte

Pour encourager les utilisateurs à cliquer sur le bouton, nous vous recommandons d'ajouter le texte d'incitation à l'action "Se connecter avec Google", "S'inscrire avec Google" ou "Continuer avec Google". L'utilisateur doit clairement se connecter à votre application ou s'y inscrire avec ses identifiants Google, et non s'inscrire ou créer un compte Google sur votre application.

Couleur

Les états par défaut des boutons sont présentés ci-dessous. Le bouton doit toujours inclure la couleur standard du "G" de Google.

Thème Exemple
Faible Bouton "Se connecter avec Google" avec thème clair Remplissage: #FFFFFF
Trait: #747775 | 1 px | à l'intérieur
Police: #1F1F1F | Roboto Medium | 14/20
Sombre bouton "Se connecter avec Google" avec thème sombre Remplissage: #131314
Trait: #8E918F | 1 px | à l'intérieur
Police: #E3E3E3 | Roboto Medium | 14/20
Neutre Bouton "Se connecter avec Google" à thème neutre en forme de pilule Remplissage: #F2F2F2
Trait: Aucun trait
Police: #1F1F1F | Roboto Medium | 14/20

Font

La police du bouton est Roboto Medium, une police TrueType. Pour l'installer, commencez par télécharger la police Roboto et décompressez le package téléchargé. Sous Mac, il vous suffit de double-cliquer sur Roboto-Medium.ttf, puis de cliquer sur "Installer la police". Sous Windows, faites glisser le fichier vers le dossier "Poste de travail" > "Windows" > "Polices".

Marge intérieure

Android Marge intérieure de 12 pixels avant le logo Google, marge intérieure de 10 pixels après le logo Google et marge intérieure de 12 pixels après le texte "Se connecter avec Google"
iOS Marge intérieure de 16 pixels avant le logo Google, marge intérieure de 12 pixels après le logo Google et marge intérieure de 16 pixels après le texte "Se connecter avec Google"
Web (mobile + ordinateur) Marge intérieure de 12 pixels avant le logo Google, marge intérieure de 10 pixels après le logo Google et marge intérieure de 12 pixels après le texte "Se connecter avec Google"
Reference Documentation de référence sur la marge intérieure du bouton "Se connecter avec Google"

Logo Google sur le bouton "Se connecter avec Google"

Quel que soit le texte, vous ne pouvez pas modifier la taille ni la couleur du logo "G" de Google. Il doit s'agir de la version en couleur standard et s'afficher sur un fond blanc. Si vous devez créer votre propre logo Google de taille personnalisée, commencez par l'une des tailles de logo incluses dans le package de téléchargement.

Icône G de Google

La conception du bouton est incorrecte

exemple d'image pour les choses à faire et à ne pas faire avec votre branding
À faire

Suivez les consignes de conception de Google Material 3 pour définir les limites et le jeu de couleurs des boutons.

exemple d'image pour les choses à faire et à ne pas faire avec votre branding
À ne pas faire

Utilisez l'icône ou le logo Google seul, sans les limites du bouton et sans texte pour indiquer l'action de l'utilisateur.

exemple d'image pour les choses à faire et à ne pas faire avec votre branding
À faire

Utilisez la couleur de la marque Google pour l'icône Google dans les modes sombre, clair et neutre.

exemple d'image pour les choses à faire et à ne pas faire avec votre branding
À ne pas faire

Utilisez les versions monochromes du "G" de Google pour le bouton.

exemple d'image pour les choses à faire et à ne pas faire avec votre branding
À faire

Choisissez le bouton dans le mode couleur approprié pour plus d'accessibilité et une meilleure proéminence.

exemple d'image pour les choses à faire et à ne pas faire avec votre branding
À ne pas faire

Placez l'icône Google "G" de couleur standard sur un arrière-plan de couleur autre que clair, sombre ou neutre.

exemple d'image pour les choses à faire et à ne pas faire avec votre branding
À faire

Conservez le "G" de Google avec une marge intérieure et une taille fixes.

exemple d'image pour les choses à faire et à ne pas faire avec votre branding
À ne pas faire

Créez votre propre icône pour le bouton.

exemple d'image pour les choses à faire et à ne pas faire avec votre branding
À faire

Si nécessaire, utilisez le "G" de Google seul pour le bouton d'action.

exemple d'image pour les choses à faire et à ne pas faire avec votre branding
À ne pas faire

Utilisez le terme "Google" seul dans le bouton pour représenter l'action de "Se connecter avec Google".

Bonnes pratiques pour la marque Se connecter avec Google

Se connecter avec Google et d'autres options de connexion tierces

Le bouton "Se connecter avec Google" doit être affiché au moins aussi visible que les autres options de connexion tierces. Par exemple, les boutons doivent avoir approximativement la même taille et avoir un poids visuel similaire.

Autres consignes

Si vous demandez des champs d'application supplémentaires, utilisez une autorisation incrémentielle (Android, iOS, Web). Ne demandez l'autorisation à l'utilisateur que lorsqu'il commence à interagir avec une fonctionnalité nécessitant un accès à l'API.

Si vous demandez des niveaux d'accès YouTube, utilisez un bouton YouTube.

Si vous utilisez les services de jeux Google Play, consultez également les Consignes relatives à la marque des services de jeux Google Play.

L'utilisation des marques Google par des moyens qui ne sont pas expressément couverts par les présentes consignes est interdite sans l'autorisation écrite préalable de Google (pour en savoir plus, consultez les Consignes d'utilisation des marques de Google par les tiers).