Wenn du für Nutzer in Russland entwickelst, verwende die Schaltfläche „Auf dem Smartphone speichern“, da Google Wallet in diesen Ländern nicht verfügbar ist. Hier findest du die entsprechenden Assets und Richtlinien. Wenn du für Nutzer außerhalb von RU entwickelst, aktualisiere bitte die Schaltfläche Zu Google Wallet hinzufügen, indem du die unten aufgeführten Assets herunterlädst.
Dieser Abschnitt der Dokumentation hilft Ihnen dabei, Bilder und andere Elemente der Benutzeroberfläche so zu erstellen, dass sie in der Google Wallet App toll aussehen.
Assets
Schaltfläche „Zu Google Wallet hinzufügen“
Die Schaltfläche Zu Google Wallet hinzufügen wird immer dann verwendet, wenn du Nutzer anweist, eine Karte bzw. ein Ticket aus deiner App oder Website in ihrem Wallet zu speichern. Über die Schaltfläche Zu Google Wallet hinzufügen muss einer der Google Wallet API-Abläufe aufgerufen werden. Dabei wird die Google Wallet App angezeigt. Nutzer können dort der Anleitung zum Speichern von Karten/Tickets auf ihrem Android-Gerät und in ihrem Google-Konto folgen. Diese Schaltfläche kann in Apps, auf Websites oder in E-Mails verwendet werden.
Die Schaltfläche Zu Google Wallet hinzufügen ist in den Formaten Android XML, SVG und PNG verfügbar.
Assets herunterladen – Android XML Assets herunterladen – SVG Assets herunterladen – PNGSchaltfläche „In Google Wallet ansehen“
Die Schaltfläche In Google Wallet ansehen wird verwendet, um einen Nutzer per Deeplink mit seiner Brieftasche zu verknüpfen, um eine zuvor gespeicherte Karte bzw. ein zuvor gespeichertes Ticket aufzurufen. Diese Schaltfläche kann in Apps, auf Websites oder in E-Mails verwendet werden.
Die Schaltflächen In Google Wallet ansehen sind im SVG- und PNG-Format verfügbar.
Assets herunterladen – SVG Assets herunterladen – PNGAlle Schaltflächen auf deiner Website, in deiner App oder in E-Mails müssen den Markenrichtlinien auf dieser Seite entsprechen. Beispiele für diese Richtlinien:
- Größe im Vergleich zu anderen Schaltflächen oder Elementen der Seite
- Form und Farbe von Schaltflächen dürfen nicht geändert werden
- Mindestabstand
Lokalisierte Schaltflächen
Es gibt lokalisierte Google Wallet-Schaltflächen für alle Märkte, in denen Wallet verfügbar ist. Wenn du für Nutzer in diesen Märkten entwickelst, verwende immer die oben verlinkten Schaltflächen. Erstellen Sie keine eigene Version der Schaltflächen. Wenn in deinem Markt keine lokalisierte Version der Schaltfläche verfügbar ist, verwende die englische Version der Schaltfläche.
Die Schaltfläche Zu Google Wallet hinzufügen ist in den folgenden Sprachen verfügbar: Albanisch, Arabisch, Arabisch, Armenisch, Aserbaidschan, Bosnisch, Dänisch, Deutsch, Englisch (Indien, Englisch, Finnisch, Finnisch, Finnisch, Chinesisch), Chinesisch (traditionell), Chinesisch (traditionell), Chinesisch (traditionell), Chinesisch (traditionell), Chinesisch (traditionell), Chinesisch (China, Opa), Finnisch, Polnisch, Polnisch, Polnisch, Polnisch, Polnisch, Polnisch, Polnisch, Kanton
Lokalisierter Name
Zur Verdeutlichung für die Nutzer wird der Google Wallet-Produktname in ausgewählten Märkten lokalisiert. Wenn du für Nutzer in diesen Ländern entwickelst, verwende für Web, E-Mail und Print immer den lokalisierten Namen. Erstelle keine eigene lokalisierte Version von „Google Wallet“. Wenn dein Markt unten nicht aufgeführt ist, verwende „Google Wallet“ auf Englisch.
| Land | Name |
|---|---|
| Belarus | Google КоКелек |
| Brasilien | Carteira do Google |
| Chile | Basilika von Google |
| Tschechien | Peněženka (Google) |
| Griechenland | |
| Hongkong | Google 錢包 |
| Litauen | Google Pinigin |
| Polen | Portfel-Google |
| Portugal | Carteira da Google |
| Rumänien | Portofel |
| Slowakei | Peňaženka (Google) |
| Taiwan | Google 錢包 |
| Türkei | Google Cüzdan |
| Vereinigte Arabische Emirate | |
| Ukraine | |
|
USA (Spanisch)
*Verwende diesen Namen in den USA, wenn deine UI auf Spanisch ist. |
Basilika von Google |
Größe
Passe die Höhe und Breite der Schaltfläche Zu Google Wallet hinzufügen an dein Layout an. Wenn sich auf der Seite andere Schaltflächen befinden, muss die Schaltfläche Zu Google Wallet hinzufügen gleich groß oder größer sein. Die Schaltfläche Zu Google Wallet hinzufügen darf nicht kleiner als andere Schaltflächen sein.
Stil
Die Schaltfläche Zu Google Wallet hinzufügen ist in zwei Varianten verfügbar: die primäre und die komprimierte Version. Die Schaltfläche Zu Google Wallet hinzufügen gibt es nur in Schwarz. Es werden lokalisierte Versionen der Schaltfläche bereitgestellt. Erstelle keine Schaltflächen mit selbst übersetztem Text.
| Primär | Schmal |
|---|---|
|
|
| Verwende die Hauptschaltfläche auf weißem und hellem Hintergrund. | Verwende die komprimierte Schaltfläche, wenn nicht genügend Platz für die primäre oder die volle Breite vorhanden ist. |
Mindestabstand
Halte an allen Seiten der Schaltfläche Zu Google Wallet hinzufügen einen Mindestabstand von 8 dp ein. Achte darauf, dass sich innerhalb des Mindestabstands keine Grafiken und kein Text befinden.
Mindesthöhe
Die Schaltfläche Zu Google Wallet hinzufügen muss immer eine Mindesthöhe von 48 dp haben.
Empfohlene und zu vermeidende Vorgehensweisen
| Dos | Don'ts |
|---|---|
| Richtig: Verwende nur die von Google bereitgestellten Zu Google Wallet hinzufügen-Schaltflächen. | Falsch: Eigene Google Wallet-Schaltflächen erstellen oder die Schriftart, die Farbe, den Schaltflächenradius oder den Abstand innerhalb der Schaltfläche ändern. |
| Richtig: Verwende auf deiner Website immer denselben Schaltflächentyp. | Falsch: Die Schaltfläche Zu Google Wallet hinzufügen kleiner machen als andere Schaltflächen. |
| Richtig: Achte darauf, dass die Schaltfläche Zu Google Wallet hinzufügen immer mindestens so groß ist wie andere Schaltflächen. | Falsch: Die Farbe der Schaltfläche ändern. |
| Richtig: Behalte das Schaltflächenverhältnis bei, wenn du die Größe der Schaltfläche Zu Google Wallet hinzufügen anpasst. | Falsch: Die Schaltfläche kostenlos skalieren. |
| Richtig: Verwende die lokalisierte Version der Schaltfläche. | Falsch: Erstelle eine eigene lokalisierte Version der Schaltfläche. |
Best Practices für die Platzierung der Schaltfläche
Die Schaltfläche Zu Google Wallet hinzufügen muss auf Bestätigungsbildschirmen einer App, auf Webseiten oder in E-Mails angezeigt werden. Nachfolgend findest du Best Practices für die Gestaltung der Benutzeroberfläche.
Treuepunkteprogramme, Geschenkkarten und Angebote
Die Schaltfläche Zu Google Wallet hinzufügen muss auf Bestätigungsbildschirmen angezeigt werden. Du kannst die Schaltfläche auch auf deiner Website oder in deiner App einblenden lassen oder sie in die entsprechenden E-Mails einfügen.
Verwendung des Google Wallet-Produktnamens im Text
Du kannst den Nutzer mit einem Text darüber informieren, dass seine Kundenkarte auf seinem Gerät gespeichert ist.
Die Buchstaben „G“ und „W“ in Großbuchstaben schreiben
Verwende immer ein großes „G“ und ein großes „W“ gefolgt von Kleinbuchstaben, wenn du auf Google Wallet verweist. Schreibe den Namen „Google Wallet“ nie vollständig in Großbuchstaben, es sei denn, dies entspricht dem typografischen Stil deiner Benutzeroberfläche.
Google Wallet nicht abkürzen
Schreiben Sie immer die Wörter „Google“ und „Wallet“ auf.
Dem Stil der Benutzeroberfläche entsprechen
Verwende für „Google Wallet“ dieselbe Schriftart und denselben typografischen Stil wie für den übrigen Text in deiner UI. Ahme nicht den typografischen Stil von Google nach.
Verwende immer die lokalisierte Version von „Google Wallet“.
Schreiben Sie immer „Google Wallet“ in die bereitgestellte lokalisierte Kopie.
Design
Mit den Feldern height und size des HTML-Tags g:savetoandroidpay können Sie die Höhe und Breite der Schaltfläche Zu Google Wallet hinzufügen ändern. Verwende die textsize=large-Spezifikation, um Text- und Schaltflächengrößen für Implementierungen auf Mobilgeräten oder in Fällen mit speziellen UI-Anforderungen erheblich zu erhöhen.
Mit theme können Sie die Farbe der Schaltfläche festlegen. Die folgende Tabelle zeigt, wie sich diese Einstellungen auf die Schaltfläche Zu Google Wallet hinzufügen auswirken.
Logos
Google Wallet maskiert Ihr Logo in eine kreisförmige Form.
Richtlinien für Logobilder
Im Folgenden finden Sie eine Liste mit Empfehlungen für Logobilder auf der Benutzeroberfläche:
| Richtlinie | Beschreibung |
|---|---|
| Bevorzugter Dateityp | PNG |
| Mindestgröße | 660 x 660 Pixel |
| Bildseitenverhältnis | 1:1 |
| Seitenverhältnis des Kunstwerks | 1:1 |
| Tatsächliche Pixelgröße | Auf Gerätegröße skalieren |
| Runde Maske mit Logo |
Ihr Logo ist so maskiert, dass es in ein kreisförmiges Design passt. Achte darauf, dass dein Logo in den Sicherheitsbereich passt. Maskieren Sie Ihr Logo nicht vorab. Belassen Sie das Logo im quadratischen Format und wählen Sie eine randlose Hintergrundfarbe aus. Das Logo muss einen Rand von 15% haben, damit es beim Maskieren nicht abgeschnitten wird. 
|
Hintergrundfarbe der Karte
Die Hintergrundfarbe lässt sich mit dem Feld hexBackgroundColor festlegen. Wenn Sie den Wert nicht festlegen, analysiert ein Algorithmus das Logo, sucht nach der Hauptfarbe und verwendet diese als Hintergrundfarbe.
Hero-Images
Das Feld class.heroImage wird als Banner in voller Breite im Text der Karte angezeigt.
Richtlinien für Hero-Images
Im Folgenden finden Sie eine Liste mit Empfehlungen für Hero-Images auf der Benutzeroberfläche:
| Richtlinie | Beschreibung |
|---|---|
| Bevorzugter Dateityp | PNG |
| Empfohlene Größe |
1032 x 336 px Verwenden Sie breite, rechteckige Bilder. Die besten Ergebnisse erzielen Sie mit einem Bild, das einen farbigen Hintergrund hat. |
| Seitenverhältnis | 3:1 oder breiter |
| Anzeigegröße |
Die volle Breite der Karte und die proportionale Höhe. 
|
Bilder in voller Breite
Das Feld *.imageModulesData.mainImage in einer Klasse oder einem Objekt wird in einem Ticket in voller Breite angezeigt.
Richtlinien für Bilder in voller Breite
Im Folgenden finden Sie eine Liste mit Empfehlungen für Bilder in voller Breite auf der Benutzeroberfläche:
| Richtlinie | Beschreibung |
|---|---|
| Bevorzugter Dateityp | PNG |
| Mindestgröße |
Breite von 1.860 Pixel, variable Höhe. Verwenden Sie breite, rechteckige Bilder. Die besten Ergebnisse erzielen Sie mit einem Bild, das einen farbigen Hintergrund hat. |
| Seitenverhältnis | Variable |
| Anzeigegröße |
Die volle Breite der Vorlage und ihre proportionale Höhe.
|
| Verwenden Sie dasselbe Farbschema wie für Ihr Logo. |
Barcode-Bilder
In bestimmten Branchen können Bilder über und unter dem Barcode platziert werden.
Bilder über dem Barcode
Im Folgenden finden Sie eine Liste mit Empfehlungen für Bilder über dem Barcode auf der Benutzeroberfläche:
| Richtlinie | Beschreibung |
|---|---|
| Bevorzugter Dateityp | PNG |
| Maximale Höhe |
20 dp (bei maximalem Seitenverhältnis) Die empfohlene Größe ist 80 Pixel hoch und 80–780 Pixel breit, wenn zwei Bilder vorhanden sind. Dadurch können sie nebeneinander platziert werden. Wenn ein Bild quadratisch und das andere ein Rechteck ist, müssen die Bilder 80 x 80 und 780 x 80 Pixel groß sein. |
| Seitenverhältnis |
Uneingeschränkt. Verwenden Sie ein Seitenverhältnis von 20:1, um eine Höhe und Breite von maximal 20 dp zu erreichen. Wenn über dem Barcode nur ein einzelnes Bild angezeigt werden soll, verwenden Sie die volle Breite (Abstand ausgenommen). Das Bild muss 1.600 x 80 Pixel groß sein. |
| Maximale Anzeigegröße (einzelnes Bild) | 20 dp hoch und 400 dp breit |
Bild unter dem Barcode
Im Folgenden finden Sie eine Liste mit Empfehlungen für Bilder unter dem Barcode auf der Benutzeroberfläche:
| Richtlinie | Beschreibung |
|---|---|
| Bevorzugter Dateityp | PNG |
| Maximale Höhe |
20 dp (bei maximalem Seitenverhältnis) Die empfohlene Größe ist 80 Pixel hoch und 80–1.600 Pixel breit. Im quadratischen Format 80 x 80 Pixel. Im rechteckigen Format 1.600 x 80 Pixel. |
| Uneingeschränktes Seitenverhältnis. Verwenden Sie für eine maximale Höhe und Breite von 20 dp ein Seitenverhältnis von 20:1. | Wenn Sie ein Bild in voller Breite (Abstand ausgenommen) wünschen, muss das Bild 1.600 x 80 Pixel groß sein. |
| Die maximale Anzeigegröße ist 20 dp hoch und 400 dp breit. |
Module
Ein Modul steht für eine Gruppe von Feldern in einem bestimmten Abschnitt einer Vorlage. Die folgende Tabelle enthält Richtlinien für die Anzahl der Module, die Sie in Ihre Klassen und Objekte aufnehmen müssen, damit Ihre Karten in der Google Wallet App korrekt angezeigt werden.
| Richtlinie | Beschreibung |
|---|---|
imageModulesData
|
Verwenden Sie nur ein imageModulesData-Element in Ihrer Klasse oder in den von Ihnen erstellten Objekten.
|
infoModuleData
|
Verwenden Sie bis zu zwei
Mit |
linksModuleData
|
Verwenden Sie insgesamt bis zu vier
Sie haben möglicherweise zwei |
textModulesData
|
Verwenden Sie bis zu zwei
Möglicherweise haben Sie einen |
infoModuleData
InfoModuleData enthält Informationen zu Mitgliedern und anpassbare Informationen und wird in der maximierten Ansicht angezeigt. Verwenden Sie dieses Modul, um Informationen wie Ablaufdatum, zweite Punkte oder gespeicherte Wertguthaben zu speichern.
linksModuleData
Das Modul enthält Links zu Webseiten, Telefonnummern und E-Mail-Adressen. Hier ist eine Liste mit Empfehlungen für das Modul „Links“ auf der Benutzeroberfläche:
| Richtlinie | Beispieleinstellung | Beispielbild |
|---|---|---|
Verwenden Sie das Präfix http:, wenn Sie einer Website oder einem Standort in Google Maps einen URI zuweisen. Mit diesem Präfix kann ein Nutzer auf den Link tippen und die Website aufrufen oder den Standort in Google Maps aufrufen.
Dieses Präfix führt auch dazu, dass vor der Beschreibung deiner Karte ein Symbol für einen Link oder eine Karte angezeigt wird.
|
'uri': 'http://maps.google.com/?q=google'
|
|
'uri': 'http://developer.google.com/wallet/'
|
|
|
Verwenden Sie das Präfix tel:, wenn Sie eine Telefonnummer definieren. Mit diesem Präfix kann ein Nutzer auf den Link tippen, um die Nummer zu wählen. Mit diesem Präfix wird auch ein Telefonsymbol vor der Textbeschreibung auf der Karte erstellt.
|
'uri': 'tel:6505555555'
|
|
Verwenden Sie das Präfix mailto:, wenn Sie eine E-Mail-Adresse definieren.
Mit diesem Präfix kann ein Nutzer auf den Link tippen, um eine E-Mail an die Adresse zu senden. Mit diesem Präfix wird auch ein E-Mail-Symbol vor der Textbeschreibung auf der Karte erstellt.
|
'uri': 'mailto:jonsmith@email.com'
|
|
Überschriften, Labels und Namen
Schreiben Sie Überschriften, Labels und Namen so, dass jedes Wort mit einem Großbuchstaben beginnt.
Inhaltsrichtlinien
Der Inhalt der einzelnen Felder in Karten/Tickets muss den Inhaltsrichtlinien für Zahlungen entsprechen. Auch die Inhalte der Websites, auf die Sie in der Klasse verweisen, müssen diesen Richtlinien entsprechen.
Platzierung von Daten auf Partnerplattformen
Damit Nutzer auf Ihre App oder Website mit umfangreichem Funktionsumfang über die Karte bzw. das Ticket zugreifen können, müssen Sie den Deeplink oder die Website Ihrer App in die Klasse oder das Objekt linksModuleData.* der Karte/des Tickets einfügen. So kann ein Nutzer über die in Google Wallet angezeigte Karte bzw. das in Google Wallet angezeigte Ticket Ihre Plattform aufrufen. Wie sie gerendert wird, erfahren Sie in den Designbereichen der Karten-/Ticketkartenbranchen.