Ce document fournit des consignes sur l'affichage d'un bouton Se connecter avec Google sur votre site Web ou dans votre application. Votre site Web ou votre application doivent respecter ces consignes pour terminer le processus de validation de l'application.
Nos SDK Google Identity Services affichent un bouton "Se connecter avec Google" qui respecte toujours les consignes relatives à la marque Google les plus récentes. 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 de bouton généré par Google, vous pouvez afficher un élément de bouton HTML, télécharger nos composants de branding préapprouvés ou créer un bouton Se connecter avec Google personnalisé.
Rendre l'élément de bouton HTML
Nous mettons à votre disposition un outil de configuration HTML qui vous permet de personnaliser l'apparence du bouton "Se connecter avec Google". Vous pouvez ensuite télécharger un extrait HTML et CSS qui affichera le bouton sur votre site Web.Générer un élément de bouton HTML
Télécharger des icônes de marque préapprouvées
Au lieu d'utiliser un bouton d'image personnalisé, vous pouvez télécharger nos boutons de connexion avec Google préapprouvés, disponibles aux formats PNG et SVG pour toutes les plates-formes.Les boutons d'image fournis sont disponibles en mode standard et en mode icône, et incluent les options de style suivantes:
- Thème : Clair, Neutre, Sombre
- Forme : rectangulaire, en forme de pilule
| Thème | Boutons | Description |
|---|---|---|
| Clair |
|
Bouton "Se connecter avec Google" rectangulaire standard de grande taille, dans un thème clair |
| Sombre |
|
Bouton "Se connecter avec Google" standard en forme de pilule, dans un thème sombre |
Modes de bouton compatibles
| Clair |
|
|
| Sombre |
|
|
| Neutre |
|
|
Créer un bouton "Se connecter avec Google" personnalisé
Nous vous recommandons vivement d'utiliser nos SDK Google Identity Services ou l'une des autres options décrites dans les sections précédentes, car cela permet aux utilisateurs Google d'identifier plus facilement la marque Google. Plus les utilisateurs peuvent facilement identifier un bouton d'action, plus ils sont susceptibles d'interagir avec lui.
Toutefois, si vous devez adapter le bouton à la conception de votre application, respectez les consignes suivantes.
Taille
Vous pouvez redimensionner le bouton si nécessaire 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 inciter les utilisateurs à cliquer sur le bouton, nous vous recommandons d'utiliser le texte d'incitation à l'action "Se connecter avec Google", "S'inscrire avec Google" ou "Continuer avec Google". L'utilisateur doit clairement comprendre qu'il se connecte ou s'inscrit à votre application avec ses identifiants Google, et non qu'il crée un compte Google dans votre application.
Couleur
L'état par défaut des boutons est indiqué ci-dessous. Le bouton doit toujours inclure la couleur standard du "G" de Google.
| Thème | Exemple | |
|---|---|---|
| Clair |
|
Remplissage: #FFFFFF Trait: #747775 | 1 px | intérieur Police: #1F1F1F | Roboto Medium | 14/20 |
| Sombre |
|
Remplissage: #131314 Trait: #8E918F | 1 px | intérieur Police: #E3E3E3 | Roboto Medium | 14/20 |
| Neutre |
|
Remplissage: #F2F2F2 Trait: Aucun trait Police: #1F1F1F | Roboto Medium | 14/20 |
Police
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 bundle de téléchargement. Sur Mac, double-cliquez simplement sur Roboto-Medium.ttf, puis cliquez sur "Installer la police". Sous Windows, faites glisser le fichier dans le dossier "Mon ordinateur" > "Windows" > "Polices".
Marge intérieure
| Android |
|
| iOS |
|
| Web (mobile et ordinateur) |
|
| Référence |
|
Logo Google dans le bouton "Se connecter avec Google"
Quel que soit le texte, vous ne pouvez pas modifier la taille ni la couleur du logo Google "G". Il doit s'agir de la version couleur standard et apparaître sur un arrière-plan 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 lot de téléchargement.
Conception de bouton incorrecte
 À faire Utilisez les consignes de conception de Google Material 3 pour la limite et le jeu de couleurs des boutons. |
 À ne pas faire Utilisez l'icône ou le logo Google seul, sans bordure de bouton ni texte pour indiquer l'action de l'utilisateur. |
 À faire Utilisez la couleur de la marque Google pour l'icône Google dans les modes sombre, clair et neutre. |
 À ne pas faire Utilisez des versions monochromes de la lettre G de Google pour le bouton. |
 À faire Choisissez le bouton dans le bon mode de couleur pour l'accessibilité et une visibilité égale. |
 À ne pas faire Placez l'icône Google "G" de couleur standard sur un arrière-plan coloré autre que clair, sombre ou neutre. |
 À faire Utilisez le "G" de Google avec une marge intérieure et une taille fixes. |
 À ne pas faire Créez votre propre icône pour le bouton. |
 À faire Si nécessaire, utilisez le "G" de Google seul pour le bouton d'action. |
 À ne pas faire Utilisez le terme "Google" seul dans le bouton pour représenter l'action de se connecter avec Google. |
Bonnes pratiques concernant le branding de la fonctionnalité 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 bien que les autres options de connexion tierces. Par exemple, les boutons doivent être à peu près de la même taille et avoir un poids visuel similaire.
Autres consignes
Si vous demandez des champs d'application supplémentaires, faites-le avec une autorisation incrémentielle (Android, iOS, Web), en n'invitant l'utilisateur à autoriser l'accès qu'au moment où il commence à interagir avec une fonctionnalité nécessitant un accès à l'API.
Si vous demandez des portées YouTube, utilisez un bouton YouTube.
Si vous utilisez les services de jeux Google Play, consultez également les consignes relatives au branding des services de jeux Google Play.
L'utilisation des marques Google d'une manière non expressément autorisée par ce document est interdite sans l'accord écrit préalable de Google (pour en savoir plus, consultez les Consignes d'utilisation des caractéristiques de la marque Google à l'intention des tiers).