Branding-Richtlinien für die Anmeldung

Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Verwende Google Log-in in den Basisbereichen profile oder email und füge die folgenden Standardschaltflächen in deine mobile App oder Web-App ein:

Stil Anstecker Bilddateien
Hell

Enthält Anmeldeschaltflächen in den Formaten PNG, SVG, EPS und Sketch in vielen Auflösungen. Beinhaltet u. a. Basis-, Hover- und Press-Status.

Dunkel

Sketch-, SVG- und EPS-Dateien sind im Download enthalten, damit Sie den Text „Anmelden mit“ und „Anmelden“ übersetzen können. Für diese Dateien ist die Schriftart Roboto erforderlich.

Wenn du zusätzliche Bereiche anfordert, solltest du das mit inkrementeller Autorisierung (Android, iOS, Web) tun und den Nutzer nur dann zu Autorisierungen auffordern, wenn er mit einem Feature interagiert, für das ein API-Zugriff erforderlich ist.

Wenn Sie YouTube-Bereiche anfordern, verwenden Sie eine YouTube-Schaltfläche.

Wenn du Google Play-Spieldienste verwendest, lies bitte auch die Branding-Richtlinien für Google Play-Spieldienste.

Google Log-in und andere Anmeldeoptionen von Drittanbietern

Gleichbedeutend

Die Google Log-in-Schaltfläche muss mindestens so gut sichtbar wie andere Anmeldeoptionen von Drittanbietern sein. Beispielsweise haben Schaltflächen ungefähr die gleiche Größe und ein ähnliches visuelles Gewicht.

Passend zum eigenen App-Stil

Die Verwendung der Standardschaltfläche für Google Log-in wird dringend empfohlen, da Google-Nutzer damit die Google-Option schneller identifizieren können. Wenn du die Schaltfläche anpassen möchtest, damit sie zum App-Design passt oder den Text übersetzt, melde dich mit „oder“ an und befolge diese Richtlinien.

Größe

Die Schaltfläche lässt sich bei Bedarf für verschiedene Geräte und Bildschirmgrößen skalieren. Das Seitenverhältnis muss aber beibehalten werden, damit das Google-Logo nicht gestreckt wird.

Text

Um Nutzer zum Klicken auf die Schaltfläche zu bewegen, empfehlen wir den Call-to-Action-Text „Über Google anmelden“ oder „Mit Google anmelden“. Für den Nutzer muss klar zu erkennen sein, dass er sich mit seinen Google-Anmeldedaten in der App anmeldet oder nicht.

Google-Text

Sie können das Wort „Google“ alleine in der Schaltfläche verwenden, wenn es neben einem Text steht, der deutlich macht, was die Aktion ist. Beispiel:

Anmelden mit:

Color

Google Log-in-Schaltfläche mit blauem Hintergrund Google Log-in-Schaltfläche mit weißem Hintergrund

Die Farbe einer nicht gedrückten Lichttaste lautet #FFFFFF (weiß). Die Farbe einer nicht komprimierten dunklen (blauen) Schaltfläche ist #4285F4. Der Schaltflächenhintergrund kann entweder blau oder weiß sein, aber die Schaltfläche muss immer die Standardfarbe von Google auf einer weißen Kachel enthalten.

Schriftart

Die Schriftart der Schaltfläche ist Roboto Medium, eine TrueType-Schriftart. Zur Installation musst du zuerst die Schriftart Roboto herunterladen und die ZIP-Datei entpacken. Auf einem Mac: Klicken Sie doppelt auf Roboto-Medium.ttf und dann auf „Schriftart installieren“. Ziehen Sie die Datei unter Windows in den Ordner „&Computer“&> "Windows> &Schriftarten&fonts;. Verwende für die Schaltfläche keine anderen Schriftarten, es sei denn, es handelt sich um Situationen mit dem Stil deiner eigenen App.

Bei Websites, die eine benutzerdefinierte Anmeldeschaltfläche verwenden, kannst du die Roboto-Schriftart aus Google Fonts laden.

Padding

Der Abstand links und rechts vom Text sollte 8 dp betragen. Das Logo sollte 18 dp sowie der Abstand zwischen dem Logo und dem Schaltflächentext mindestens 24 dp betragen.

Veranschaulicht die Abmessungen der Elemente einer Schaltfläche, einschließlich Abstand rund um den Text.

Google-Logo in der Schaltfläche „Über Google anmelden“

Unabhängig vom Text kannst du die Größe oder Farbe des Google-Logos nicht ändern. Es muss die Standardfarbversion sein, die auf weißem Hintergrund zu sehen sein muss. Wenn Sie ein eigenes Logo von Google erstellen möchten, verwenden Sie eine der Logogrößen, die im Download-Set enthalten sind.

Falsches Schaltflächendesign

Verwenden Sie das Google-Symbol oder -Logo nicht ohne die Schaltflächengrenze und ohne Text, der die Nutzeraktion darstellt.
Verwende kein Google-Symbol allein, um Google Log-in darzustellen.
Verwende keine dunklen oder hellen Versionen des Google G.
Lege die Google-Standardfarbe nicht auf einem farbigen Hintergrund fest.
Erstellen Sie kein eigenes Symbol für die Schaltfläche.
Verwende den Begriff „Google“ nicht allein in der Schaltfläche ohne ein Google-Symbol.

Die Verwendung von Google-Marken auf eine Weise, die nicht ausdrücklich durch dieses Dokument abgedeckt ist, ist ohne die vorherige schriftliche Einwilligung von Google nicht gestattet. Weitere Informationen hierzu finden Sie in den Richtlinien für die Nutzung von Google-Markenkennzeichen durch Dritte.