Utilisez Google Sign-In avec les champs d'application profile ou email de base, et intégrez les boutons standards suivants dans votre application mobile ou Web:
| Style | Boutons | Fichiers image |
|---|---|---|
| Clair |
|
Inclut des boutons de connexion aux formats PNG, SVG, EPS et Sketch, dans de nombreuses résolutions. Inclut les états de base, de survol et de pression. |
| Sombre |
|
Les fichiers Sketch, SVG et EPS sont inclus dans le téléchargement pour que vous puissiez traduire le texte "Se connecter avec" ou "Se connecter". Ces fichiers nécessitent la police Roboto.
Si vous demandez des champs d'application supplémentaires, utilisez l'autorisation incrémentielle (Android, iOS, Web) afin de ne demander l'autorisation à l'utilisateur que lorsqu'il commence à interagir avec une fonctionnalité nécessitant un accès à l'API.
Si vous demandez des champs d'application 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.
Google Sign-In et autres options de connexion tierces
Égalité de proéminence
Le bouton Google Sign-In doit être affiché au moins de manière aussi visible que les autres options de connexion tierces. Par exemple, les boutons doivent avoir à peu près la même taille et avoir une épaisseur visuelle similaire.
Adapter le style de votre application
Nous vous recommandons vivement d'utiliser le bouton standard Google Sign-In, car il permet aux utilisateurs Google d'identifier plus rapidement l'option Google. Si vous devez adapter le bouton au style de votre application, ou traduire le texte "Se connecter avec" ou "Se connecter", suivez ces consignes.
Taille
Vous pouvez adapter le bouton selon les besoins de différents appareils et tailles d'écran, mais vous devez conserver les proportions afin 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" ou "S'inscrire avec Google". L'utilisateur doit indiquer clairement qu'il se connecte à votre application ou s'inscrit à celle-ci avec ses identifiants Google, et non lors de l'inscription ou de l'inscription à un compte Google dans votre application.
Texte "Google"
Vous pouvez utiliser le mot "Google" seul dans le bouton s'il est accompagné d'un texte adjacent qui indique clairement l'action. Exemple:
Connectez-vous avec:
Couleur
La couleur d'un bouton clair non appuyé est #FFFFFF (blanc). La couleur d'un bouton sombre (bleu) non appuyé est le #4285F4. L'arrière-plan du bouton peut être bleu ou blanc, mais le bouton doit toujours inclure la couleur standard Google "G" sur une tuile blanche.
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 package à télécharger. Sur Mac, double-cliquez sur Roboto-Medium.ttf, puis cliquez sur "Installer la police". Sous Windows, faites glisser le fichier vers "Poste de travail" > "Windows" > "Polices". N'utilisez pas d'autres polices sur le bouton, sauf indication contraire pour les correspondre au style de votre application.
Pour les sites Web utilisant un bouton de connexion personnalisé, vous pouvez charger la police Roboto depuis Google Fonts.
Marge intérieure
La marge intérieure du texte (à gauche et à droite) doit être de 8 dp. La taille du logo doit être de 18 dp, et de 24 dp entre le logo et le texte du bouton.
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 Google "G". Il doit s'agir de la version couleur standard et s'afficher 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 package de téléchargement.
Conception incorrecte des boutons
 |
N'utilisez pas l'icône ou le logo Google seul sans la bordure du bouton ni le texte pour indiquer l'action de l'utilisateur. |
|
N'utilisez pas une icône Google seule pour représenter Google Sign-In. |
 |
N'utilisez pas de version sombre ou claire du Google "G". |
|
Ne placez pas l'icône Google standard "G" sur un arrière-plan coloré. |
 |
Ne créez pas votre propre icône pour le bouton. |
 |
N'utilisez pas le terme "Google" seul dans le bouton sans icône Google. |
L'utilisation des marques Google d'une manière non expressément autorisée par le présent document est interdite sans l'accord écrit préalable de Google (pour en savoir plus, consultez les Consignes relatives à l'utilisation par des tiers des caractéristiques de la marque Google).