Verwende Google Log-in mit den Basisbereichen profile oder email und integriere die folgenden Standardschaltflächen in deine mobile oder Web-App:
| Stil | Schaltflächen | Bilddateien |
|---|---|---|
| Leicht |
|
Umfasst Anmeldeschaltflächen in den Formaten PNG, SVG, EPS und Sketch in vielen Auflösungen. Inklusive Basis, Mouseover und Druck. |
| Dunkel |
|
Die Dateien Sketch, SVG und EPS sind im Download enthalten, sodass der Text „Anmelden mit“ oder „Anmelden“ übersetzt werden kann. Für diese Dateien ist die Schriftart Roboto erforderlich.
Wenn Sie zusätzliche Bereiche anfordern, tun Sie dies mit der inkrementellen Autorisierung (Android, iOS, Web). Der Nutzer wird dann nur zur Autorisierung aufgefordert, wenn er mit einer Funktion interagiert, die API-Zugriff erfordert.
Wenn Sie YouTube-Bereiche anfordern, verwenden Sie eine YouTube-Schaltfläche.
Wenn Sie die Google Play-Spieldienste verwenden, lesen Sie auch die Branding-Richtlinien für Google Play-Spieldienste.
Google Log-in und Anmeldeoptionen Dritter
Gleiche Auffälligkeit
Die Google Log-in-Schaltfläche muss mindestens so auffällig dargestellt sein wie andere Anmeldeoptionen von Drittanbietern. Beispielsweise sollten Schaltflächen ungefähr die gleiche Größe und ein ähnliches visuelles Gewicht haben.
Übereinstimmung mit dem Stil deiner eigenen App
Die standardmäßige Google Log-in-Schaltfläche wird dringend empfohlen, da Google-Nutzer so die Google-Option schneller identifizieren können. Wenn du die Schaltfläche an dein App-Design anpassen oder den Text „Anmelden mit“ oder „Anmelden“ übersetzen musst, beachte diese Richtlinien.
Größe
Die Schaltfläche lässt sich nach Bedarf für verschiedene Geräte und Bildschirmgrößen skalieren. Dabei muss jedoch das Seitenverhältnis beibehalten werden, damit das Google-Logo nicht verzerrt wird.
Text
Wenn du Nutzer dazu bewegen möchtest, auf die Schaltfläche zu klicken, empfehlen wir den Call-to-Action-Text „Über Google anmelden“ oder „Über Google anmelden“. Für den Nutzer muss klar zu erkennen sein, dass er sich in der App anmeldet oder sich mit seinen Google-Anmeldedaten für Ihre App anmeldet. Es sollte nicht in einem Google-Konto registriert oder registriert werden.
Google-Text
Du kannst das Wort „Google“ auch nur in der Schaltfläche verwenden, wenn es von Text umgeben ist, der deutlich macht, was die Aktion ist. Beispiel:
Anmelden mit:
Farbe
Die Farbe einer unbetätigten Leuchttaste ist #FFFFFF (weiß). Die Farbe einer nicht gedrückten 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 „G“ auf einer weißen Kachel enthalten.
Schriftart
Die Schriftart der Schaltfläche ist Roboto Medium, eine TrueType-Schriftart. Laden Sie für die Installation zuerst die Roboto-Schriftart herunter und entpacken Sie das Download-Bundle. Klicke auf einem Mac einfach doppelt auf Roboto-Medium.ttf und dann auf „Schriftart installieren“. Ziehen Sie die Datei unter Windows in den Ordner „Computer“ > „Windows“ > „Schriftarten“. Verwende für die Schaltfläche keine anderen Schriftarten, außer bei Situationen, die mit Stil deiner eigenen App abgleichen gekennzeichnet sind.
Für Websites, die eine benutzerdefinierte Anmeldeschaltfläche verwenden, kannst du die Roboto-Schriftart aus Google Fonts laden.
Abstand
Der Abstand (links und rechts) des Textes sollte 8 dp betragen. Das Logo sollte 18 dp groß sein und zwischen dem Logo und dem Schaltflächentext 24 dp liegen.
Google-Logo in der Schaltfläche „Über Google anmelden“
Die Größe oder Farbe des Google-„G“-Logos kann unabhängig vom Text nicht geändert werden. Es muss die Standardfarbversion sein und auf weißem Hintergrund erscheinen. Wenn Sie ein eigenes Google-Logo erstellen möchten, wählen Sie zuerst eine der Logogrößen aus, die im Download-Bundle enthalten sind.
Falsches Schaltflächendesign
 |
Das Google-Symbol oder -Logo darf nicht ohne die Begrenzung der Schaltfläche und ohne Text verwendet werden, um die Nutzeraktion anzuzeigen. |
|
Verwenden Sie für die Darstellung von Google Log-in nicht das Google-Symbol. |
 |
Verwenden Sie keine dunklen oder hellen Versionen des Google „G“. |
|
Das Standardsymbol für Google „G“ darf nicht auf einem farbigen Hintergrund platziert werden. |
 |
Erstelle kein eigenes Symbol für die Schaltfläche. |
 |
Verwende den Begriff „Google“ nicht ohne das Google-Symbol in der Schaltfläche. |
Die Verwendung von Google-Marken auf eine Weise, die nicht ausdrücklich in diesem Dokument beschrieben wird, ist ohne die vorherige schriftliche Zustimmung von Google nicht zulässig. Weitere Informationen finden Sie in den Richtlinien für die Nutzung von Google-Markenkennzeichen durch Dritte.