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 du für Nutzer außerhalb von Russland entwickelst, aktualisiere den Button Zu Google Wallet hinzufügen. Lade dazu die nachfolgenden Assets herunter.

Dieser Abschnitt der Dokumentation hilft dir 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“

Die Schaltfläche 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 Google Wallet (in der mobilen App oder im Web) angezeigt. Nutzer können dort der Anleitung zum Speichern von Karten/Tickets auf ihrem Mobilgerä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 die Schaltfläche 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 Buttons 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 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 deinem Markt keine lokalisierte Version des Buttons verfügbar ist, verwende die englische Version des Buttons.

Die Schaltflächen Zu Google Wallet hinzufügen 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, Großbritannien, 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 du für Nutzer in diesen Ländern entwickelst, verwende immer den unten aufgeführten lokalisierten Namen – sowohl für das Web als auch für E‑Mails und für Printmedien. 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) *Verwende diesen Namen in den USA, wenn deine UI auf Spanisch ist.	Billetera de Google

Größe

Passe die Höhe und Breite des Buttons Zu Google Wallet hinzufügen an dein Layout an. Wenn sich andere Buttons auf der Seite befinden, muss der Button Zu Google Wallet hinzufügen mindestens so groß wie diese Buttons 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. Erstelle keine Buttons mit selbst übersetztem Text.

Primär	Komprimiert
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: Behalte das Button-Verhältnis bei, wenn du die Größe des Buttons Zu Google Wallet hinzufügen anpasst.	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

Die Schaltfläche 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.

Veranstaltungstickets

Der Button Zu Google Wallet hinzufügen muss am Ende des Kaufvorgangs oder auf Bestätigungsbildschirmen einer App, Webseite oder in E-Mails angezeigt werden. Wir empfehlen, den Button Zu Google Wallet hinzufügen dort zu platzieren, wo Nutzer in deiner App oder auf deiner Website auf ihre Tickets zugreifen.

   

Verwendung des Google Wallet-Produktnamens im Text

Du kannst den Nutzer mit einem Text darüber informieren, dass sein Veranstaltungsticket 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

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.

Verwenden Sie immer die lokalisierte Version von „Google Wallet“.

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 der 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/Tickets

Damit Ihre Karten/Tickets gut aussehen und funktionieren, beachten Sie bitte die folgenden Richtlinien zu Zeichenbeschränkungen, 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 stark gesättigte „lebendige“ Bereiche (z. B. Neongrün #00FF00 oder elektrisches Cyan #00FFFF). Diese Farben belasten die Augen stark 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

Weißlich

#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 der Karte/des Tickets angezeigt.

Wenn Sie noch kein Bild haben, sollten Sie eines hinzufügen. Wenn Sie ein Bild haben, müssen Sie die folgenden Spezifikationen beachten. Wenn Sie kein Bild auswählen, wird ein Fallback-Bild der Karten-/Ticketkategorie 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 der Karte/des Tickets 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 hinzu, um visuell etwas Platz zu schaffen. 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 Verständlichkeit für Nutzer 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 in andere Sprachen übersetzt, was zu einer unterschiedlichen Nutzererfahrung auf verschiedenen Geräten und in verschiedenen Regionen führt. Vereinfachen Sie im Zweifelsfall den Inhalt, ohne dabei wichtige Details wegzulassen.

Feld	Limit
Titelbeschreibung	< 47 Zeichen
Untertitel-Label	< 88 Zeichen
Feld-/Titellabel (z.B. Datum, Beschreibung, Klasse, Name des Fahrgasts)	< 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 zwei Felder pro Zeile und nach Möglichkeit auf maximal drei Zeilen beschränken.

Benachrichtigungen

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

Es wird empfohlen, die Zeichenbeschränkungen einzuhalten, um zu verhindern, dass der Text bei Nutzern mit kleinen Geräten oder größeren Schriftarten abgeschnitten wird. Weitere Informationen findest du unter Benachrichtigungen | Mobilgeräte | Android-Entwickler.

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 × 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 von Veranstaltungstickets, Bordkarten, Fahrkarten mit QR-Code, Kundenkarten, Angeboten, Geschenkkarten, generischen Karten/Tickets und generischen persönlichen Ausweisen 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	1280 × 400 px
Mindestgröße	400 px Höhe, Breite proportional (weitere Informationen im Abschnitt „Seitenverhältnis“) Verwenden Sie breite, rechteckige Bilder.
Seitenverhältnis	16:5
Farbe	Verwenden Sie für Karten/Tickets mit dunklem Hintergrund eine sehr helle Farbe mit hohem Kontrast (z. B. Weiß). Verwenden Sie für Karten/Tickets 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. Verwende dieses Feld nur, wenn für deine Karte/dein Ticket ein zusätzliches Bild erforderlich ist, um die Verständlichkeit für den Nutzer zu verbessern.

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, wenn zwei Bilder vorhanden sind. Im quadratischen Format 80 × 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 du in deine Klassen und Objekte aufnehmen musst, damit deine 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	Verwende bis zu zwei infoModuleData, entweder in deiner Klasse oder in den von dir 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 findest du in den Karten-/Ticket-Designabschnitten für die verschiedenen Branchen.