Consignes relatives à la marque de connexion

Utilisez Google Sign-In avec le profile base ou les champs d'application des email - email et intégrez les boutons standard suivants dans votre application mobile ou Web:

Style Boutons Fichiers image
Lumière

Comprend 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 presse.

Sombre

Les fichiers Sketch, SVG et EPS sont inclus dans le téléchargement afin que vous puissiez traduire le texte «Se connecter avec» ou «Se connecter». Ces fichiers nécessitent la police Roboto .

Si vous demandez des étendues supplémentaires, faites-le avec une autorisation incrémentielle ( Android , iOS , Web ), en invitant uniquement l'utilisateur à obtenir une autorisation lorsqu'il commence à interagir avec une fonctionnalité nécessitant un accès à l'API.

Si vous demandez des étendues YouTube, utilisez un bouton YouTube .

Si vous utilisez les services de jeux Google Play, consultez également les consignes de marque des services de jeux Google Play .

Connexion à Google et autres options de connexion tierces

Égale importance

Le bouton de connexion à Google doit être affiché au moins aussi clairement 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.

Correspondant au style de votre propre application

L'utilisation du bouton standard de connexion à Google est fortement recommandée car elle permet aux utilisateurs de Google d'identifier plus rapidement l'option Google. Si vous devez adapter le bouton à la conception de votre application ou traduire le texte "Se connecter avec" ou "Se connecter", suivez ces instructions.

Taille

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

Texte

Pour encourager les utilisateurs à cliquer sur le bouton, nous vous recommandons d'utiliser le texte d'incitation à l'action "Connectez-vous avec Google" ou "Inscrivez-vous avec Google". Il doit être clair pour l'utilisateur qu'il se connecte à votre application ou s'inscrit à votre application avec ses informations d'identification Google, et qu'il ne s'inscrit pas ou ne crée pas de compte Google sur 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 ce qu'est l'action . Par example:

Se connecter avec:

Couleur

Bouton de connexion Google avec fond bleuBouton de connexion Google avec fond blanc

La couleur d'un bouton d'éclairage non enfoncé est #FFFFFF (blanc). La couleur d'un bouton foncé (bleu) non enfoncé est # 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 vignette blanche.

Police de caractère

La police du bouton est Roboto Medium, une police TrueType. Pour l'installer, téléchargez d' abord la police Roboto et décompressez le kit 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 vers le dossier «Poste de travail»> «Windows»> «Polices». N'utilisez pas d'autres polices sur le bouton, sauf comme indiqué pour les situations avec Correspondance du style de votre propre application .

Pour les sites Web qui utilisent un bouton de connexion personnalisé , vous pouvez charger la police Roboto à partir de Google Fonts .

Rembourrage

Le remplissage à gauche (et à droite) du texte doit être de 8dp. Le logo doit être 18dp, et il devrait y avoir 24dp entre le logo et le texte du bouton.

Illustre les dimensions des éléments d'un bouton, y compris le remplissage autour du texte.

Logo Google dans le bouton "Se connecter avec Google"

Quel que soit le texte, vous ne pouvez pas modifier la taille ou la couleur du logo Google "G". Il doit s'agir de la version couleur standard et apparaître 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 kit de téléchargement.

Conception de bouton incorrecte

N'utilisez pas l'icône ou le logo Google seul sans le contour du bouton et sans texte pour indiquer l'action de l'utilisateur.
N'utilisez pas une icône Google seule pour représenter la connexion à Google.
N'utilisez pas de versions sombres ou claires de Google "G".
Ne placez pas l'icône Google "G" de couleur standard sur un fond coloré.
Ne créez pas votre propre icône pour le bouton.
N'utilisez pas le terme "Google" seul dans le bouton sans l'icône Google qui l'accompagne.

L'utilisation des marques Google d'une manière qui n'est pas expressément couverte par ce document n'est pas autorisée sans le consentement écrit préalable de Google (pour plus d'informations, consultez les Directives pour l'utilisation par des tiers des caractéristiques de la marque Google ).