Markenrichtlinien

Wenn du Inhalte für Nutzer in Russland entwickelst, verwende bitte den Button „Auf dem Smartphone speichern“, da Google Wallet in diesen Ländern nicht verfügbar ist. Hier findest du die entsprechenden Assets und Richtlinien. Wenn Sie für Nutzer außerhalb von Russland entwickeln, aktualisieren Sie den Button Zu Google Wallet hinzufügen. Laden Sie dazu die nachfolgenden Assets herunter.

Dieser Abschnitt der Dokumentation hilft Ihnen bei der Erstellung von Bildern und anderen Elementen der Benutzeroberfläche, damit sie in der Google Wallet App ansprechend aussehen.

Assets

Schaltfläche „Zu Google Wallet hinzufügen“

Der Button Zu Google Wallet hinzufügen wird immer dann verwendet, wenn Sie Nutzer anweisen, eine Karte bzw. ein Ticket aus Ihrer App oder Website in deren Wallet zu speichern. Über den Button 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 bzw. 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.

Der Button Zu Google Wallet hinzufügen ist für Android im XML-, SVG- und PNG-Format verfügbar.

Assets herunterladen – Android XML Assets herunterladen – SVG Assets herunterladen – PNG

Schaltfläche „In Google Wallet ansehen“

Über den Button In Google Wallet ansehen können Nutzer einen Deeplink zu ihrem Wallet verwenden, um zuvor gespeicherte Karten/Tickets anzusehen. 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 – PNG

Alle Schaltflächen, die auf der Website, in der App oder in E-Mails angezeigt werden, müssen den auf dieser Seite beschriebenen Markenrichtlinien entsprechen. Diese Richtlinien umfassen insbesondere folgende Punkte:

• Größe im Vergleich zu anderen ähnlichen Schaltflächen oder Elementen der Seite
• Form und Farbe von Buttons 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 Buttons. Erstelle keine eigene Version der Schaltflächen. Wenn in Ihrem Markt keine lokalisierte Version des Buttons verfügbar ist, verwenden Sie die englische Version des Buttons.

Zu Google Wallet hinzufügen-Schaltflächen sind in den folgenden Sprachen verfügbar: Albanisch, Arabisch, Armenisch, Aserbaidschanisch, Bosnisch, Bulgarisch, Katalanisch, Chinesisch (Hongkong), Chinesisch (traditionell), Kroatisch, Tschechisch, Dänisch, Niederländisch, Englisch (Indien, Singapur, Südafrika, Australien, Kanada, Vereinigtes Königreich, USA), Estnisch, Filipino, Finnisch, Französisch (Kanada), Französisch (Frankreich), Georgisch, Deutsch, Griechisch, Hebräisch, Ungarisch, Isländisch, Indonesisch, Italienisch, Japanisch, Kasachisch, Kirgisisch, Lettisch, Litauisch, Mazedonisch, Malaiisch, Norwegisch, Polnisch, Portugiesisch (Brasilien), Portugiesisch (Portugal), Rumänisch, Russisch (Belarus), Serbisch, Slowakisch, Slowenisch, Spanisch (Lateinamerika), Spanisch (Spanien), Schwedisch, Thailändisch, Türkisch, Ukrainisch, Usbekisch und Vietnamesisch.

Lokalisierter Name

Zur Verdeutlichung für die Nutzer wird der Produktname Google Wallet in einigen Märkten lokalisiert. Wenn Sie für Nutzer in diesen Ländern entwickeln, verwenden Sie immer den lokalisierten Namen. Erstelle keine eigene lokalisierte Version von „Google Wallet“. Wenn dein Markt unten nicht aufgeführt ist, musst du „Google Wallet“ auf Englisch verwenden.

Land	Name
Belarus	Google Кошелек
Brasilien	Carteira do Google
Chile	Billetera de Google
Tschechien	Peněženka Google
Griechenland	Πορτοφόλι Google
Hongkong	Google 錢包
Litauen	Google Piniginė
Polen	Portfel Google
Portugal	Carteira da Google
Rumänien	Portofel Google
Slowakei	Peňaženka Google
Taiwan	Google 錢包
Türkei	Google Cüzdan
VAE	محفظة Google
Ukraine	Google Гаманець
USA (Spanisch) *Verwenden Sie diesen Namen in den USA, wenn Ihre UI auf Spanisch ist.	Billetera de Google

Größe

Passen Sie die Höhe und Breite des Buttons Zu Google Wallet hinzufügen an Ihr Layout an. Wenn sich andere Buttons auf der Seite befinden, muss der Button Zu Google Wallet hinzufügen mindestens so groß wie dieser Button sein. Die Schaltfläche Zu Google Wallet hinzufügen darf nicht kleiner als andere Schaltflächen sein.

Stil

Der Button Zu Google Wallet hinzufügen ist in zwei Varianten verfügbar: die Hauptschaltfläche und der komprimierte Button. Den Button Zu Google Wallet hinzufügen gibt es nur in Schwarz. Es werden lokalisierte Versionen des Buttons bereitgestellt. Erstellen Sie keine Schaltflächen mit selbst übersetztem Text.

Primär	Schmal
Verwende die Hauptschaltfläche auf weißem und hellem Hintergrund.	Verwenden Sie die komprimierte Version, wenn nicht genügend Platz für die Hauptschaltfläche zur Verfügung steht oder der Platz nicht breit genug ist.

Mindestabstand

Der Mindestabstand von 8 dp muss auf allen Seiten des Buttons Zu Google Wallet hinzufügen eingehalten werden. Achte darauf, dass sich innerhalb des Mindestabstands keine Grafiken und kein Text befinden.

Mindesthöhe

Der Button Zu Google Wallet hinzufügen muss immer eine Mindesthöhe von 48 dp haben.

Empfohlene und zu vermeidende Vorgehensweisen

DOS	Don'ts
Richtig: Verwenden Sie nur die von Google bereitgestellten Versionen des Buttons Zu Google Wallet hinzufügen.	Falsch: Eigene Google Wallet-Buttons erstellen oder die Schriftart, die Farbe, den Button-Radius oder den Abstand innerhalb des Buttons ändern.
Richtig: Verwenden Sie dasselbe Schaltflächendesign auf der gesamten Website.	Falsch: Die Schaltfläche Zu Google Wallet hinzufügen kleiner machen als andere Schaltflächen.
Richtig: Achten Sie darauf, dass der Button Zu Google Wallet hinzufügen immer mindestens so groß ist wie andere Buttons.	Falsch: Die Farbe des Buttons ändern.
Richtig: Behalten Sie das Button-Verhältnis bei, wenn Sie die Größe des Buttons Zu Google Wallet hinzufügen anpassen.	Falsch: Den Button ohne Einschränkung skalieren.
Richtig: Verwenden Sie die lokalisierte Version des Buttons.	Falsch: Eine eigene lokalisierte Version des Buttons erstellen.

Best Practices für die Platzierung des Buttons

Der Button Zu Google Wallet hinzufügen kann 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 wird auf den Bestätigungsbildschirmen angezeigt. Sie können den Button auch in Bereichen Ihrer Website oder App einblenden oder ihn in relevante 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“ großschreiben

Verwenden Sie immer ein großes „G“ und ein großes „W“ gefolgt von Kleinbuchstaben, wenn Sie auf Google Wallet verweisen. 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

Schreibe die Wörter „Google“ und „Wallet“ immer aus.

Dem Stil deiner UI anpassen

Verwenden Sie für „Google Wallet“ dieselbe Schriftart und denselben typografischen Stil wie für den übrigen Text in Ihrer Benutzeroberfläche. Ahme nicht den typografischen Stil von Google nach.

Immer die lokalisierte Version von „Google Wallet“ verwenden

Schreibe in den bereitgestellten lokalisierten Texten immer „Google Wallet“.

Design

Mit den Feldern height und size des HTML-Tags g:savetoandroidpay kannst du die Höhe und Breite des Buttons Zu Google Wallet hinzufügen ändern. Mit der Spezifikation textsize=large lassen sich die Text- und Schaltflächengrößen für Implementierungen auf Mobilgeräten oder in Fällen mit speziellen UI-Anforderungen erheblich erhöhen.

Mit theme können Sie die Farbe des Buttons festlegen. In der folgenden Tabelle sehen Sie, wie sich diese Einstellungen auf den Button Zu Google Wallet hinzufügen auswirken.

Richtlinien für die Erstellung von Karten

Damit Ihre Karten gut aussehen und richtig funktionieren, beachten Sie bitte die folgenden Richtlinien zu Zeichenlimits, Benachrichtigungen, Hintergrundfarben und Hero-Bildern.

Hintergrundfarbe der Karte

Die Hintergrundfarbe lässt sich über das Feld hexBackgroundColor festlegen. Wenn Sie keinen Wert festlegen, analysiert ein Algorithmus das Logo, sucht nach der Hauptfarbe und verwendet diese als Hintergrundfarbe.

Vermeiden Sie Zonen mit hoher Sättigung, z. B. „Leuchtend“ (z. B. Neongrün #00FF00 oder elektrisches Cyan #00FFFF). Diese Farben sind sehr anstrengend für die Augen und führen dazu, dass Text „ausblutet“ oder im Hintergrund verschwindet. Verwenden Sie stattdessen eine der empfohlenen Farben.

Empfohlene Farben

Dunkelgrau

#1a1a1a

Mittelgrau

#677088

Hellgrau

#e8eaed

Cremeweiß

#f8f9fa

Weiß

#ffffff

Rot

#d6322d

Orange

#f78f48

Gelb

#f9bb2d

Grün

#1e7e3b

Blau

#216acf

Lila

#9147df

Hellrosa

#fce8e6

Hellgrün

#e6fffa

Hellblau

#e8f0fe

Hero-Images

Das Feld class.heroImage wird als Bild mit voller Breite unter den Datenfeldern Ihrer Karte/Ihres Tickets angezeigt.

Fügen Sie ein Bild hinzu, falls noch keines vorhanden ist. Wenn Sie ein Bild haben, müssen Sie die folgenden Spezifikationen beachten. Wenn Sie kein Bild auswählen, wird ein Ersatzbild der Kartenkategorie angezeigt.

Im Folgenden sehen Sie eine Liste mit Empfehlungen für Hero-Images auf der Benutzeroberfläche:

Richtlinie	Beschreibung
Bevorzugter Dateityp	PNG Wenn die Hintergrundfarbe des Passes durchscheinen soll, verwenden Sie ein transparentes PNG.
Empfohlene Größe	1.032 × 812 px
Seitenverhältnis	1032 × 812 (ca. 5:4)
Empfohlene und zu vermeidende Vorgehensweisen	DOS Don'ts Verwenden Sie Fotos oder Illustrationen mit hoher Auflösung. Text in Bilder einbetten Diese Inhalte werden nicht lokalisiert. Fügen Sie oben und unten ein Padding von 20 dp ein, um für mehr visuellen Freiraum zu sorgen. Der Hauptinhalt des Bildes sollte den oberen und unteren Rand des Bildes berühren. Verwenden Sie ein quadratisches oder fast quadratisches Bild. Verwenden Sie schmale rechteckige Bilder.

Inhalt

Titel, Untertitel, Feldlabels und Felddaten:Um die Nutzerfreundlichkeit zu erhöhen, sollten Titel und andere Felder so kurz wie möglich gehalten werden. Die folgenden Zeichenbeschränkungen gelten für Englisch. Sie werden jedoch in andere Sprachen übersetzt, was zu einer unterschiedlichen Nutzererfahrung auf verschiedenen Geräten und in verschiedenen Regionen führt. Im Zweifelsfall sollten Sie Inhalte vereinfachen, ohne dabei wichtige Details zu verlieren.

Feld	Limit
Titel-Label	< 47 Zeichen
Label für Untertitel	< 88 Zeichen
Feld-/Titel-Label (z.B. „Datum“, „Beschreibung“, „Klasse“, „Name des Fluggasts“)	< 20 Zeichen
Label für Felddaten (z. B. 19. Oktober 2026, Economy Plus)	< 15 Zeichen

Um die Lesbarkeit zu gewährleisten, sollten Sie die Daten auf maximal zwei Felder pro Zeile und möglichst drei Zeilen beschränken.

Benachrichtigungen

Feld	Limit
Titel	< 29 Zeichen
Minimierter Body	< 40 Zeichen
Maximierter Body	< 80 Zeichen

Es wird empfohlen, die Zeichenbeschränkungen einzuhalten, um zu verhindern, dass Text für Nutzer mit kleinen Geräten oder erhöhten Schriftgrößen abgeschnitten wird. Weitere Informationen finden Sie unter Notifications | Mobile | Android Developers.

Logos

Richtlinien für Logobilder

Google Wallet maskiert Ihr Logo in eine kreisförmige Form.

Hier ist 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 der Grafik	1:1
Tatsächliche Pixelgröße	Auf Gerätegröße skalieren
Kreisförmige Logo-Maskierung	Ihr Logo ist so maskiert, dass es in ein kreisförmiges Design passt. Achten Sie darauf, dass Ihr Logo in den empfohlenen Bildbereich passt. Maskieren Sie Ihr Logo nicht vorab. Belassen Sie das Logo im quadratischen Format und wählen Sie eine randlose Hintergrundfarbe aus. Für das Logo muss ein Rand von 15% berücksichtigt werden, damit es beim Maskieren nicht abgeschnitten wird.

Google Wallet maskiert Ihr Logo in eine kreisförmige Form.

Richtlinien für breite Logobilder

Breite Logobilder werden für Veranstaltungstickets, Bordkarten, QR-Code-Fahrkarten, Kundenkarten, Angebote, Geschenkkarten, generische Ausweise und generische persönliche Ausweise unterstützt. Hier ist eine Liste mit Empfehlungen für breite Logobilder auf der Benutzeroberfläche:

Richtlinie	Beschreibung
Dateityp	Transparente PNG-Datei
Empfohlene Größe	1.280 × 400 Pixel
Mindestgröße	400 Pixel für die Höhe, die Breite ist proportional (weitere Informationen im Abschnitt zum Seitenverhältnis) Verwenden Sie breite, rechteckige Bilder.
Seitenverhältnis	16:5
Farbe	Verwenden Sie für Karten mit dunklem Hintergrund eine sehr helle Farbe mit hohem Kontrast, z. B. Weiß. Verwenden Sie für Karten mit hellem Hintergrund eine sehr dunkle Farbe mit hohem Kontrast, z. B. Schwarz.

Weitere Bilder

Das Feld *.imageModulesData.mainImage in einer Klasse oder einem Objekt wird auf Karten/Tickets als Bild mit voller Breite unter dem Hero-Image angezeigt. Nur verwenden, wenn für Ihren Pass ein zusätzliches Bild erforderlich ist, damit Nutzer ihn besser verstehen.

Zusätzliche Richtlinien für Bilder

Hier ist eine Liste mit Empfehlungen für zusätzliche Bilder auf der Benutzeroberfläche:

Richtlinie	Beschreibung
Bevorzugter Dateityp	PNG
Mindestgröße	Breite von 1.860 Pixeln, variable Höhe. Verwenden Sie breite, rechteckige Bilder. Die besten Ergebnisse erzielen Sie mit einem Bild, das einen farbigen Hintergrund hat.
Anzeigegröße	Die volle Breite der Vorlage mit entsprechend proportionaler Höhe.

Barcode-Bilder

In bestimmten Branchen können Bilder über und unter dem Barcode platziert werden.

Bilder über dem Barcode

Im Folgenden sehen Sie eine Liste mit Empfehlungen für Bilder über dem Barcode auf der Benutzeroberfläche:

Best Practice	Beschreibung
Bevorzugter Dateityp	PNG
Maximale Höhe	20 dp (bei maximalem Seitenverhältnis) Empfohlen wird eine Höhe von 80 Pixeln und eine Breite von 80 bis 780 Pixeln, wenn zwei Bilder vorhanden sind. So können sie direkt nebeneinander angeordnet werden. Ist ein Bild quadratisch und das andere ein Rechteck, müssen die Bilder 80 x 80 und 780 x 80 Pixel groß sein.
Seitenverhältnis	Uneingeschränkt. Verwenden Sie bei maximal 20 dp Höhe und Breite eines einzelnen Bilds ein Seitenverhältnis von 20:1. Wenn über dem Barcode nur ein einzelnes Bild angezeigt werden soll, sollten Sie die volle Breite nutzen (Abstand ausgenommen). Das Bild muss 1.600 × 80 Pixel groß sein.
Maximale Anzeigegröße (einzelnes Bild)	Höhe von 20 dp und Breite von 400 dp

Bild unter dem Barcode

Im Folgenden sehen Sie eine Liste mit Empfehlungen für Bilder unter dem Barcode auf der Benutzeroberfläche:

Best Practice	Beschreibung
Bevorzugter Dateityp	PNG
Maximale Höhe	20 dp (bei maximalem Seitenverhältnis) Empfohlen wird eine Höhe von 80 Pixeln und eine Breite von 80 bis 1.600 Pixeln. Im quadratischen Format 80 x 80 Pixel. Im rechteckigen Format 1.600 × 80 Pixel.
Uneingeschränktes Seitenverhältnis. Verwenden Sie bei maximal 20 dp Höhe und Breite ein Seitenverhältnis von 20:1.	Wenn Sie ein Bild in voller Breite (Abstand ausgenommen) verwenden möchten, muss das Bild 1.600 × 80 Pixel groß sein.
Die maximale Anzeigegröße liegt bei 20 dp Höhe und 400 dp Breite.

Module

Ein Modul steht für eine Gruppe von Feldern in einem bestimmten Bereich 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 in Ihrer Klasse oder in den von Ihnen erstellten Objekten.
infoModuleData	Verwenden Sie bis zu zwei infoModuleData, entweder in Ihrer Klasse oder in den von Ihnen erstellten Objekten. Mit infoModuleData können nutzerkontospezifische Informationen wie „Mitgliedsname“ und „Mitgliedschaftsnummer“ definiert werden.
linksModuleData	Verwende insgesamt bis zu vier linksModuleData-URIs, entweder in deiner Klasse oder in den von dir erstellten Objekten. Sie haben möglicherweise zwei linksModuleData-URIs in Ihrer Klasse: einen für die URI Ihrer Website und einen für eine Telefonnummer der Hilfe. Mit zwei linksModuleData-URIs in Ihrem Objekt können ein nutzerkontospezifischer URI und Standorte in der Nähe definiert werden.
textModulesData	Verwenden Sie bis zu zwei textModulesData-Felder zwischen der Klasse und den von Ihnen erstellten Objekten. Möglicherweise haben Sie einen textModuleData-URI in Ihrer Klasse, mit dem Programmdetails definiert werden, und einen anderen textModulesData im Objekt, mit dem nutzerkontospezifische Details definiert werden.

infoModuleData

InfoModuleData enthält Informationen zu Mitgliedern sowie anpassbare Informationen und wird in der maximierten Ansicht angezeigt. Mit diesem Modul können Sie Informationen wie das Ablaufdatum, den zweiten Punktestand oder gespeicherte Wertguthaben speichern.

linksModuleData

Das Linkmodul enthält URIs zu Websites, Telefonnummern und E‑Mail-Adressen. Hier ist eine Liste mit Empfehlungen für Linkmodule auf der Benutzeroberfläche:

Best Practice	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 sich den Ort in Google Maps ansehen. Dieses Präfix führt auch dazu, dass vor der Beschreibung der Karte ein Link- oder Kartensymbol 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. Außerdem wird vor der Textbeschreibung auf der Karte auch ein Telefonsymbol 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 und eine E‑Mail an diese Adresse senden. Außerdem wird vor der Textbeschreibung auf der Karte auch ein E‑Mail-Symbol erstellt.	'uri': 'mailto:jonsmith@email.com'

Überschriften, Labels und Namen

Schreiben Sie den ersten Buchstaben in Überschriften, Labels und Namen immer groß.

Inhaltsrichtlinien

Der Inhalt der einzelnen Felder in Karten/Tickets muss den Inhaltsrichtlinien für Zahlungen entsprechen. Die Inhalte der Websites, auf die Sie in der Klasse verweisen, müssen ebenfalls diesen Richtlinien entsprechen.

Platzierung von Daten auf Partnerplattformen

Damit Nutzer auf deine App oder Website für die Karte / das Ticket zugreifen können, musst du den Deeplink der App oder die Website korrekt in die Klasse oder das Objekt linksModuleData.* der Karte / des Tickets einfügen. So können Nutzer über die in Google Wallet angezeigte Karte bzw. das in Google Wallet angezeigte Ticket deine Plattform aufrufen. Informationen zum Rendern finden Sie in den Karten-/Ticket-Designabschnitten für die verschiedenen Branchen.