Design d’un pass Apple Wallet et Google Wallet
Un pass se regarde en deux secondes, au soleil, devant une caisse. Il doit être lisible avant d’être beau.
Les éléments visuels
| Élément | Rôle | Où le régler |
|---|---|---|
| Logo | Votre marque, en haut du pass (iOS) | PATCH/wallets (logo) |
| Logo Android | Logo affiché dans un cercle sur Google Wallet | PATCH/wallets (androidLogo) |
| Icône | Affichée dans les notifications et l’écran de verrouillage | PATCH/wallets (icon) |
| Strip | Bandeau image sous l’en-tête : l’offre, la saison, l’événement | strip sur chaque template, overrideStrip pour un client (PATCH/clients/{id}/specific) |
| Couleurs | backgroundColor (fond), foregroundColor (valeurs), labelColor (libellés) | bloc colors de chaque template |
Contraintes de l’API
- Images en PNG ou JPEG, de 1 Ko à 5 Mo.
- Envoi en
multipart/form-data. Le bloccolorspasse en chaîne JSON :colors={"backgroundColor":"#131313","foregroundColor":"#FFFFFF","labelColor":"#9EE00D"}.
Voir Fichiers et images.
Recommandations des plateformes
Source : Apple Human Interface Guidelines et documentation Google Wallet
Les dimensions ci-dessous sont les recommandations publiques d’Apple et de Google, pas des contraintes de l’API eldo wallet.
Apple Wallet (en points, prévoyez une résolution @2x ou @3x) :
| Image | Taille recommandée (@1x) |
|---|---|
| Icône | 29 × 29 pt |
| Logo | 160 × 50 pt maximum |
| Strip (carte de fidélité, coupon, billet d’événement) | 375 × 123 pt environ |
Google Wallet :
| Image | Recommandation |
|---|---|
| Logo | Carré, au moins 660 × 660 px, affiché dans un cercle |
| Image « hero » (équivalent du strip) | 1032 × 336 px |
Les règles qui évitent les mauvaises surprises
- Contraste. Texte clair sur fond foncé, ou l’inverse. Testez en plein soleil.
- Rien d’essentiel dans le strip. Le strip est recadré différemment selon la plateforme. Un prix ou une date écrits dans l’image peuvent disparaître : mettez-les dans les champs.
- Logo sur fond transparent. Un logo avec un fond blanc détonne sur un pass de couleur.
- Logo Android centré. Il est découpé en cercle : gardez une marge autour.
- Pas de texte minuscule. Le pass s’affiche en petit, parfois sur une montre.
- Un strip par opération, pas par jour. Changer le visuel met à jour toutes les cartes.
- Testez sur les deux plateformes. Voir Apple Wallet vs Google Wallet.