Consignes relatives à la marque

Si vous développez votre application pour les utilisateurs en Russie, veuillez utiliser l'option "Enregistrer sur le téléphone" car Google Wallet n'est pas disponible dans ces pays. Consultez les ressources pertinentes consignes. Si vous développez votre application pour des utilisateurs situés en dehors de la Russie, Mettez à jour votre bouton Ajouter à Google Wallet en téléchargeant les éléments ci-dessous.

Cette section de la documentation est conçue pour vous aider à créer des images et d'autres éléments de l'interface utilisateur afin qu'ils s'affichent correctement Application Google Wallet

Éléments

Bouton "Ajouter à Google Wallet"

Le bouton Ajouter à Google Wallet est utilisé chaque fois que vous inciter les utilisateurs à enregistrer un titre ou une carte de votre application ou de votre site Web Google Wallet. Le bouton Ajouter à Google Wallet doit appeler l'une des Flux de l'API Google Wallet. Ces flux permettent d'afficher l'application Google Wallet les utilisateurs peuvent suivre les instructions pour enregistrer des cartes sur leur appareil Android et son compte Google. Vous pouvez utiliser ce bouton dans les applis, les sites Web e-mails.

Les boutons Ajouter à Google Wallet sont disponibles aux formats Android XML, SVG, et PNG.

<ph type="x-smartling-placeholder"></ph> Télécharger les éléments – Android XML Télécharger les assets – SVG Télécharger les assets – PNG

Bouton "Afficher dans Google Wallet"

Le bouton Afficher dans Google Wallet permet de créer un lien profond pour un utilisateur. à son portefeuille pour afficher un titre ou une carte précédemment enregistrés. Ce peut être utilisé dans les applications, les sites Web ou les e-mails.

Les boutons Afficher dans Google Wallet sont disponibles aux formats SVG et PNG.

<ph type="x-smartling-placeholder"></ph> Télécharger les assets – SVG Télécharger les assets – PNG

Tous les boutons affichés sur votre site, dans votre application ou dans vos e-mails doivent être conformes à la marque des consignes décrites sur cette page. Ces consignes incluent, sans s'y limiter, les suivantes:

  • Taille par rapport à d'autres boutons ou éléments similaires de la page
  • Vous ne devez pas modifier la forme et la couleur des boutons
  • Espace libre

Boutons localisés

Les boutons Google Wallet localisés sont disponibles dans tous les pays où Google Wallet est disponible. disponibles. Si vous développez votre application pour les utilisateurs de ces marchés, utilisez toujours le dont les liens sont fournis ci-dessus. Ne créez pas votre propre version des boutons. Si aucune version localisée du bouton n'est disponible pour votre marché, utilisez l' Version anglaise du bouton.

Les boutons Ajouter à Google Wallet sont disponibles en albanais, Arabe, arménien, Azerbaïdjan, bosnien, bulgare, catalan, chinois Anglais (Hong Kong), chinois (traditionnel), croate, danois, néerlandais, tchèque (Afrique du Sud, Australie, Canada, États-Unis, Inde, Grande-Bretagne, Singapour estonien, finnois, français (Canada), philippin, français (France), Géorgien, allemand, grec, hébreu, hongrois, islandais, indonésien, italien, japonais, kazakh, kirghize, letton, lituanien, macédonien, malais, norvégien, polonais, portugais (Brésil), portugais (Portugal), roumain, russe (Biélorussie), espagnol (Amérique latine), slovaque, slovène, slovène (Espagne), suédois, thaï, turc, ukrainien, ouzbek et vietnamien.

Nom localisé

Pour plus de clarté, le nom du produit Google Wallet est localisé dans marchés. Si vous développez votre application pour les utilisateurs de ces pays, utilisez toujours la le nom localisé ci-dessous pour le Web, l'e-mail et la presse. Ne pas créer les vôtres version localisée de "Google Wallet". Si votre marché ne figure pas dans la liste ci-dessous, utilisez "Google Wallet" en anglais.

Pays Nom
Biélorussie Google Колелек
Brésil Carteira do Google
Chili Billetera de Google
Tchéquie Peněženka Google
Grèce ΠβΠ équivalent de Google
Hong Kong Google 錢包
Lituanie Google Pigin pouvoir
Pologne Portfel Google
Portugal Carteira da Google
Roumanie Portofel Google
Slovaquie Peńaženka Google
Taïwan Google 錢包
Turquie Google Cüzdan
Émirats arabes unis ممحفظة Google
Ukraine Google Accelerate
États-Unis (espagnol)
*Utilisez ce nom aux États-Unis si votre interface utilisateur est en espagnol
Billetera de Google

Taille

Ajustez la hauteur et la largeur du bouton Ajouter à Google Wallet. pour s'adapter à votre mise en page. Si la page comporte d'autres boutons, le bouton Le bouton Ajouter à Google Wallet doit être au moins de la même taille. Ne réduisez pas le bouton Ajouter à Google Wallet à une taille inférieure .

Style

Les boutons Ajouter à Google Wallet sont disponibles dans deux versions: primaire et condensée. Bouton Ajouter à Google Wallet uniquement en noir. Des versions localisées du bouton sont fournies. Ne pas créer avec votre propre texte localisé.

Principal Condensé
Bouton &quot;Ajouter à Google Wallet&quot; principal Bouton &quot;Ajouter à Google Wallet&quot; condensé
Utilisez le bouton principal sur les fonds blancs et clairs. Utilisez le bouton condensé s'il n'y a pas assez d'espace pour le bouton principal ou en pleine largeur.

Espace libre

Maintenez toujours un espace vide minimal de 8 dp de chaque côté de Bouton Ajouter à Google Wallet. Veillez à ce que cet espace vide jamais cassées de graphiques ou de texte.

Vous devez prévoir 8 dp d&#39;espace de chaque côté pour les boutons &quot;Ajouter à Google Wallet&quot;.

Hauteur minimale

Tous les boutons Ajouter à Google Wallet doivent avoir une hauteur minimale de 48 dp.

La hauteur des boutons &quot;Ajouter à Google Wallet&quot; doit être d&#39;au moins 48 dp.

Choses à faire et à éviter

À faire À NE PAS FAIRE
À faire:n'utilisez Boutons Ajouter à Google Wallet fournis par Google. À éviter:ne créez pas les vôtres. les boutons Ajouter à Google Wallet ou modifier la police, la couleur, le rayon ou la marge intérieure du bouton de quelque manière que ce soit.
À faire:utilisez le même style de bouton. sur l'ensemble de votre site. À éviter : Les boutons Ajouter à Google Wallet sont plus petits que les autres boutons.
À faire:assurez-vous que la taille du La taille des boutons Ajouter à Google Wallet doit être au moins égale à que les autres boutons. À éviter:ne modifiez pas la couleur du bouton.
À faire:conservez les proportions du bouton. lorsque vous redimensionnez les boutons Ajouter à Google Wallet. À éviter:ne redimensionnez pas le bouton librement.
À faire:utilisez les traductions version des boutons. À éviter:ne créez pas vos propres vidéos version du bouton.

Bonnes pratiques concernant l'emplacement des boutons

Affichez le bouton Ajouter à Google Wallet sur l'application de confirmation. des écrans, des pages Web ou des e-mails. Consultez les bonnes pratiques suivantes pour guider votre interface utilisateur conception.

Cartes génériques

Affichez le bouton Ajouter à Google Wallet sur l'application de confirmation. des écrans, des pages Web ou des e-mails. Nous vous recommandons de placer Bouton Ajouter à Google Wallet sur lequel les utilisateurs accèdent à leurs cartes votre application ou votre site Web.

Utiliser le nom du produit Google Wallet dans le texte

Vous pouvez utiliser du texte pour indiquer à l'utilisateur que sa carte générique sont enregistrées sur leur appareil.

Mettre en majuscules les lettres "G" et "W"

Utilisez toujours un "G" majuscule et un "W" majuscule suivi de lettres minuscules pour faire référence à Google Wallet. N'utilisez pas de majuscule pour le nom complet. "Google Wallet" sauf s'il s'agit de correspondre au style typographique de votre interface utilisateur.

Ne pas abréger Google Wallet

Veillez à toujours écrire intégralement les mots "Google". et « Wallet ».

Adapter le style à votre interface utilisateur

Définir "Google Wallet" dans la même police et le même style typographique que les autres du texte dans votre interface utilisateur. N'imitez pas le style typographique de Google.

Toujours utiliser la version localisée de "Google Wallet"

Écrivez toujours "Google Wallet" dans la version localisée qui vous a été fournie.

Conception

Utilisez les champs height et size de g:savetoandroidpay pour modifier la hauteur et la largeur de la Boutons Ajouter à Google Wallet Utilisez le la spécification textsize=large pour augmenter considérablement le texte et la taille des boutons pour les implémentations sur mobile ou les cas avec des exigences particulières en matière d'interface utilisateur.

Utilisez theme pour définir la couleur des boutons. Les éléments suivants : tableau montre l'impact de ces paramètres sur Bouton Ajouter à Google Wallet.

<ph type="x-smartling-placeholder">

Images principales

Le champ class.heroImage apparaît sous la forme d'une bannière en pleine largeur dans le corps de la fiche.

Consignes concernant les images héros

Voici une liste de recommandations d'interface utilisateur pour les images de héros:

Consigne Description
Type de fichier préféré PNG
Taille recommandée

1 032 x 336 px

Utilisez des images rectangulaires larges.

Pour de meilleurs résultats, utilisez une image avec un arrière-plan coloré.

Format 3:1 ou plus large
Taille d'affichage

Pleine largeur de la carte et hauteur proportionnelle.

La taille d&#39;affichage doit correspondre à un format de 3:1 ou plus.

Images en pleine largeur

Le champ *.imageModulesData.mainImage d'une classe ou d'un objet apparaît sous la forme d'une image en pleine largeur dans une carte.

Consignes concernant les images en pleine largeur

Voici une liste de recommandations d'interface utilisateur pour l'affichage pleine largeur images:

Consigne Description
Type de fichier préféré PNG
Taille minimale

Largeur de 1 860 pixels, hauteur variable.

Utilisez des images rectangulaires larges.

Pour de meilleurs résultats, utilisez une image avec un arrière-plan coloré.

Format Variable
Taille d'affichage

Pleine largeur du modèle et hauteur proportionnelle.

La taille d&#39;affichage doit correspondre à un format de 3:1 ou plus.
Utilisez le même jeu de couleurs que pour votre logo.

Images du code-barres

Certains secteurs autorisent les images au-dessus et en dessous du code-barres.

Images au-dessus du code-barres

Voici une liste de recommandations d'interface utilisateur pour les images ci-dessus le code-barres:

Consigne Description
Type de fichier préféré PNG
Hauteur maximale

20 dp (au format maximal)

La taille recommandée est de 80 px de hauteur et de 80 à 780 px de largeur si deux des images. Cela leur permet de se retrouver côte à côte.

Si une image est un carré et l'autre un rectangle, alors les images doivent mesurer 80 x 80 px et 780 x 80 px.

Format

Sans contrainte. Pour une hauteur et une largeur maximales de 20 dp utilisez le format 20:1.

Si vous ne voulez qu'une seule image au-dessus du code-barres, utilisez la pleine largeur (exclure la marge intérieure). Elle doit mesurer 1 600 x 80 px.

Taille maximale d'affichage (une seule image) Hauteur de 20 dp et largeur de 400 dp

Image sous le code-barres

Voici une liste de recommandations d'interface utilisateur pour l'image ci-dessous le code-barres:

Consigne Description
Type de fichier préféré PNG
Hauteur maximale

20 dp (au format maximal)

La taille recommandée est de 80 px de hauteur et de 80 à 1 600 px de largeur.

Si l'image est carrée, la taille doit être de 80 x 80 px.

Si elle est rectangulaire, la taille doit être de 1 600 x 80 px.

Format sans contrainte. Pour une hauteur et une largeur maximales de 20 dp, utilisez au format 20:1. Si vous souhaitez obtenir une image en pleine largeur (sans la marge intérieure), l'image doit être 1 600 x 80 px.
La taille d'affichage maximale est de 20 dp de hauteur et de 400 dp de largeur.  

Modules

Un module représente un groupe de champs dans une section spécifique d'un modèle. Le tableau suivant contient des consignes relatives au nombre de modules que vous à inclure dans vos classes et objets pour vous assurer que vos cartes s'affichent correctement dans l'application Google Wallet.

Consigne Description
imageModulesData N'utilisez qu'un seul imageModulesData dans votre classe ou dans des objets que vous créez.
infoModuleData

Utilisez jusqu'à deux infoModuleData, dans votre cours ou dans des objets que vous créez.

Un élément infoModuleData peut définir des attributs spécifiques à un compte utilisateur des informations telles que "Nom du membre" et "Numéro d'adhésion".

linksModuleData

Utilisez jusqu'à quatre URI linksModuleData au total au format dans votre classe ou dans les objets que vous créez.

Votre classe peut contenir deux URI linksModuleData. la première correspond à l'URI de votre site Web et l'autre au numéro de téléphone dans notre centre d'aide. Deux URI linksModuleData dans votre objet peut définir un URI propre à un compte utilisateur et des établissements à proximité.

textModulesData

Utilisez jusqu'à deux champs textModulesData entre la classe. et les objets que vous créez.

Votre classe peut contenir un URI textModuleData qui définit les détails du programme et un autre élément textModulesData dans objet qui définit les détails spécifiques au compte utilisateur

infoModuleData

InfoModuleData contient des informations sur les membres et des informations personnalisables. s'affiche dans la vue développée. Ce module vous permet de stocker des informations telles que les dates d'expiration, le solde de points ou le solde de porte-monnaie.

<ph type="x-smartling-placeholder">

linksModuleData

Le module de liens contient des URI qui renvoient vers des pages Web, des numéros de téléphone et des adresses e-mail des adresses IP externes. Voici une liste de recommandations d'interface utilisateur pour le module de liens:

Consigne Exemple de paramètre Exemple d'image
Utilisez le préfixe http: lorsque vous attribuez un URI à un site Web ou un lieu dans Google Maps. Ce préfixe permet à un client et accédez au site Web ou affichez l'emplacement dans Google Maps. Ce préfixe affiche également l'icône d'un lien ou d'un plan devant dans votre fiche. 'uri': 'http://maps.google.com/?q=google' Indicateur représentant un repère pour un emplacement sur la carte.
'uri': 'http://developer.google.com/wallet/' Indicateur représentant un globe pour un site Web.
Utilisez le préfixe tel: lorsque vous définissez un numéro de téléphone. Ce permet à un client d'appuyer sur le lien pour composer le numéro. Ce préfixe crée également une icône d’un téléphone devant la description textuelle sur la carte. 'uri': 'tel:6505555555' Indicateur représentant un téléphone pour un lien associé à un numéro de téléphone.
Utilisez le préfixe mailto: lorsque vous définissez une adresse e-mail. Ce préfixe permet à un client d'appuyer sur le lien pour envoyer un e-mail au adresse e-mail. Ce préfixe crée également une icône représentant un e-mail devant le texte descriptif sur la fiche. 'uri': 'mailto:jonsmith@email.com' Indicateur représentant un message pour un lien permettant d&#39;envoyer un e-mail.

En-têtes, libellés et noms

Écrivez les en-têtes, les libellés et les noms de sorte que chaque mot commence par une lettre majuscule.

Règlement relatif au contenu

Le contenu de chaque champ d'une carte doit respecter <ph type="x-smartling-placeholder"></ph> Règlement relatif au contenu de Payments. Le contenu des sites Web auxquels vous faites référence du cours doivent également respecter ces règles.

Emplacement des données de la plate-forme partenaire

Pour vous assurer que les utilisateurs peuvent accéder à votre application ou site Web, riche en fonctionnalités, Réussite, assurez-vous d'intégrer le lien profond de votre application dans la classe ou l'objet de la carte linksModuleData.*. Cela permet à l'utilisateur d'accéder à votre à partir de la carte, qui apparaît dans Google Wallet Pour voir le rendu, accédez aux sections de conception du Passe les secteurs.

<ph type="x-smartling-placeholder">