In diesem Dokument wird erläutert, wie die Schaltfläche „Über Google anmelden“ auf deiner Website oder in deiner App angezeigt werden soll. Deine Website oder App muss diesen Richtlinien entsprechen, damit die App-Überprüfung abgeschlossen werden kann.
Unsere Google Identity Services SDKs rendern eine Schaltfläche „Über Google anmelden“, die immer den aktuellen Branding-Richtlinien von Google entspricht. Sie sind die empfohlene Methode, um die Schaltfläche „Über Google anmelden“ auf deiner Website oder in deiner App anzuzeigen. Falls du die Option der von Google gerenderten Schaltfläche nicht verwenden kannst, kannst du ein HTML-Schaltflächenelement rendern, unsere vorab genehmigten Marken-Assets herunterladen oder optional eine benutzerdefinierte Schaltfläche „Über Google anmelden“ erstellen.
Element der Schaltfläche „HTML rendern“
Wir stellen einen HTML-Konfigurator zur Verfügung, mit dem du das Erscheinungsbild der Schaltfläche „Über Google anmelden“ anpassen kannst. Anschließend kannst du ein HTML- und CSS-Snippet herunterladen, mit dem die Schaltfläche auf deiner Website gerendert wird.HTML-Schaltflächenelement generieren
Vorab genehmigte Markensymbole herunterladen
Als Alternative zur Verwendung einer benutzerdefinierten Bildschaltfläche kannst du unsere genehmigten „Über Google anmelden“-Schaltflächen herunterladen. Diese sind für alle Plattformen im PNG- und SVG-Format verfügbar.Die bereitgestellten Bildschaltflächen sind im Standard- und Symbolmodus verfügbar und umfassen die folgenden Stiloptionen:
- Design : Hell, Neutral, Dunkel
- Form : Rechteck, pille
| Design | Schaltflächen | Beschreibung |
|---|---|---|
| Leicht |
|
Große Standardschaltfläche „Über Google anmelden“ in hellem Design |
| Dunkel |
|
Standardschaltfläche „Über Google anmelden“ in dunklem Design |
Unterstützte Schaltflächenmodi
| Leicht |
|
|
| Dunkel |
|
|
| Neutral |
|
|
Benutzerdefinierte Schaltfläche „Über Google anmelden“ erstellen
Es wird dringend empfohlen, unsere Google Identity Services SDKs oder eine der anderen Optionen, die in den vorherigen Abschnitten beschrieben wurden, zu verwenden, da Google-Nutzer damit die Marke Google leichter erkennen können. Je leichter Nutzer eine Aktionsschaltfläche erkennen können, desto wahrscheinlicher interagieren sie damit.
Wenn du die Schaltfläche jedoch an dein App-Design anpassen musst, beachte die folgenden Richtlinien.
Größe
Du kannst die Schaltfläche nach Bedarf für verschiedene Geräte und Bildschirmgrößen skalieren. Dabei musst du jedoch das Seitenverhältnis beibehalten, damit das Google-Logo nicht gestreckt wird.
Text
Um Nutzer zum Klicken auf die Schaltfläche anzuregen, empfehlen wir den Call-to-Action-Text „Über Google anmelden“, „Mit Google anmelden“ oder „Weiter mit Google“. Für den Nutzer muss klar erkennbar sein, dass er sich mit seinen Google-Anmeldedaten bei deiner App anmeldet oder dass er sich bei deiner App bei deiner App anmeldet, nicht aber ein Google-Konto.
Farbe
Der Standardstatus der Schaltflächen wird unten angezeigt. Die Schaltfläche muss immer die Standardfarbe für das „G“ von Google enthalten.
| Design | Beispiel | |
|---|---|---|
| Leicht |
|
Füllung: #FFFFFF Strich: #747775 | 1 px | innen Schriftart: #1F1F1F | Roboto Medium | 14/20 |
| Dunkel |
|
Füllung: #131314 Strich: #8E918F | 1 px | innen Schriftart: #E3E3E3 | Roboto Medium | 14/20 |
| Neutral |
|
Füllung: #F2F2F2 Strich: Kein Strich Schriftart: #1F1F1F | Roboto Mittel | 14/20 |
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. Auf einem Mac doppelklicken Sie einfach auf Roboto-Medium.ttf und klicken dann auf "Install Font" (Schriftart installieren). Ziehen Sie unter Windows die Datei in den Ordner „Arbeitsplatz“ > „Windows“ > „Schriftarten“.
Abstand
| Android |
|
| iOS |
|
| Web (Mobilgeräte + Computer) |
|
| Referenz |
|
Google-Logo in der Schaltfläche „Über Google anmelden“
Größe und Farbe des Google-G-Logos können unabhängig vom Text nicht geändert werden. Es muss in der Standardversion der Farbversion vorliegen und auf weißem Hintergrund zu sehen sein. Wenn Sie ein eigenes Google-Logo in benutzerdefinierter Größe erstellen müssen, beginnen Sie mit einer der Logogrößen, die im Download-Bundle enthalten sind.
Falsches Schaltflächendesign
 Richtig Beachten Sie für die Schaltflächenbegrenzung und das Farbschema die Designrichtlinien von Material 3 von Google. |
 Nicht erlaubt Verwende das Google-Symbol oder -Logo ohne die Begrenzung der Schaltfläche und ohne Text, um die Nutzeraktion anzuzeigen. |
 Richtig Verwenden Sie die Google-Markenfarbe für das Google-Symbol für den dunklen, hellen und neutralen Modus. |
 Nicht erlaubt Verwenden Sie einfarbige Versionen des Google-G für die Schaltfläche. |
 Richtig Wählen Sie für die Schaltfläche den richtigen Farbmodus aus, damit sie barrierefrei und gleich hervorgehoben ist. |
 Nicht erlaubt Platziere das Google-Symbol „G“ in der Standardfarbe auf einem anderen farbigen Hintergrund als hell, dunkel oder neutral. |
 Richtig Bleiben Sie beim Google-G mit festem Abstand und fester Größe. |
 Nicht erlaubt Erstellen Sie Ihr eigenes Symbol für die Schaltfläche. |
 Richtig Verwenden Sie bei Bedarf das „G“ von Google für die Aktionsschaltfläche. |
 Nicht erlaubt Der Begriff „Google“ in der Schaltfläche muss für die Aktion „Über Google anmelden“ verwendet werden. |
Best Practices für „Über Google anmelden“
Über Google und andere Anmeldeoptionen von Drittanbietern anmelden
Die Schaltfläche „Über Google anmelden“ sollte mindestens so gut sichtbar sein wie die Anmeldeoptionen anderer Drittanbieter. Schaltflächen sollten beispielsweise ungefähr die gleiche Größe haben und ein ähnliches visuelles Gewicht haben.
Weitere Richtlinien
Wenn Sie zusätzliche Bereiche anfordern, tun Sie dies mit der inkrementellen Autorisierung (Android, iOS, Web). Der Nutzer wird nur dann zur Autorisierung aufgefordert, wenn er beginnt, mit einer Funktion zu interagieren, für die API-Zugriff erforderlich ist.
Wenn Sie YouTube-Bereiche anfordern, verwenden Sie eine YouTube-Schaltfläche.
Wenn du die Google Play-Spieldienste verwendest, lies dir auch die Branding-Richtlinien für die Google Play-Spieldienste durch.
Die Nutzung von Google-Marken auf eine Weise, die nicht ausdrücklich durch dieses Dokument abgedeckt wird, ist ohne vorherige schriftliche Zustimmung von Google nicht zulässig. Weitere Informationen finden Sie in den Richtlinien für die Verwendung von Google-Markenkennzeichen durch Dritte.