In diesem Dokument finden Sie Richtlinien dazu, wie Sie die Schaltfläche „Über Google anmelden“ auf Ihrer Website oder in Ihrer App anzeigen. Ihre 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 Google-Markenrichtlinien entspricht. Sie sind die empfohlene Methode, um die Schaltfläche „Über Google anmelden“ auf Ihrer Website oder in Ihrer App anzuzeigen. Wenn Sie die von Google gerenderte Schaltflächenoption nicht verwenden können, können Sie ein HTML-Schaltflächenelement rendern, unsere vorab genehmigten Branding-Assets herunterladen oder optional eine benutzerdefinierte Schaltfläche „Über Google anmelden“ erstellen.
HTML-Schaltflächenelement rendern
Wir stellen einen HTML-Konfigurator zur Verfügung, mit dem Sie das Aussehen der Schaltfläche „Über Google anmelden“ anpassen können. Sie können dann ein HTML- und CSS-Snippet herunterladen, mit dem die Schaltfläche auf Ihrer Website gerendert wird.HTML-Schaltflächenelement generieren
Vorab genehmigte Markensymbole herunterladen
Alternativ zur Verwendung einer benutzerdefinierten Bildschaltfläche können Sie unsere vorab genehmigten Schaltflächen für die Anmeldung über Google herunterladen. Sie sind für alle Plattformen im PNG- und SVG-Format verfügbar.Die bereitgestellten Schaltflächen für Bilder sind im Standard- und Symbolmodus verfügbar und bieten die folgenden Stiloptionen:
- Design : Hell, Neutral, Dunkel
- Form : Rechteckig, Pillenförmig
| Design | Tasten | Beschreibung |
|---|---|---|
| Leicht |
|
Rechteckige Standard-Schaltfläche „Über Google anmelden“ im hellen Design |
| Dunkel |
|
Standardmäßige ovale Schaltfläche „Über Google anmelden“ im dunklen Design |
Unterstützte Schaltflächenmodi
| Leicht |
|
|
| Dunkel |
|
|
| Neutral |
|
|
Benutzerdefinierte Schaltfläche „Über Google anmelden“ erstellen
Wir empfehlen Ihnen dringend, unsere Google Identity Services SDKs oder eine der anderen Optionen aus den vorherigen Abschnitten zu verwenden, da Google-Nutzer die Google-Marke so leichter erkennen können. Je leichter Nutzer eine Aktionsschaltfläche erkennen können, desto wahrscheinlicher ist es, dass sie damit interagieren.
Wenn Sie die Schaltfläche jedoch an Ihr App-Design anpassen müssen, beachten Sie die folgenden Richtlinien.
Größe
Sie können die Schaltfläche nach Bedarf für verschiedene Geräte und Bildschirmgrößen skalieren. Das Seitenverhältnis darf dabei jedoch nicht verändert werden, damit das Google-Logo nicht gedehnt wird.
Text
Um Nutzer dazu anzuregen, auf die Schaltfläche zu klicken, empfehlen wir den Call-to-Action-Text „Über Google anmelden“, „Über Google registrieren“ oder „Über Google fortfahren“. Für Nutzer muss klar sein, dass sie sich mit ihren Google-Anmeldedaten in Ihrer App anmelden oder sich in Ihrer App registrieren und sich nicht in Ihrer App für ein Google-Konto registrieren.
Farbe
Der Standardstatus der Schaltflächen ist unten dargestellt. Die Schaltfläche muss immer die Standardfarbe für das Google-G enthalten.
| Design | Beispiel | |
|---|---|---|
| Leicht |
|
Füllung: #FFFFFF Strich: #747775 | 1 px | innen Schriftart: #1F1F1F | Roboto Medium | 14/20 |
| Dunkel |
|
Füllung: #131314 Stroke: #8E918F | 1px | inside Font: #E3E3E3 | Roboto Medium | 14/20 |
| Neutral |
|
Füllung: #F2F2F2 Stroke: Kein Strich Font: #1F1F1F | Roboto Medium | 14/20 |
Schriftart
Die Schaltflächenschriftart ist Roboto Medium, eine TrueType-Schriftart. Zum Installieren müssen Sie zuerst die Roboto-Schriftart herunterladen und das Downloadpaket entpacken. Auf einem Mac doppelklicken Sie einfach auf Roboto-Medium.ttf und dann auf „Schriftart installieren“. Ziehen Sie die Datei unter Windows in den Ordner „Mein Computer“ > „Windows“ > „Schriftarten“.
Abstand
| Android |
|
| iOS |
|
| Web (Mobilgeräte + Computer) |
|
| Referenz |
|
Google-Logo auf der Schaltfläche „Über Google anmelden“
Unabhängig vom Text können Sie die Größe oder Farbe des Google-„G“-Logos nicht ändern. Es muss sich um die Standardfarbversion handeln und auf einem weißen Hintergrund angezeigt werden. Wenn Sie ein eigenes Google-Logo in einer benutzerdefinierten Größe erstellen möchten, beginnen Sie mit einer der im Download-Bundle enthaltenen Logogrößen.
Falsches Schaltflächendesign
 Empfohlen Verwenden Sie die Designrichtlinien von Google Material 3 für die Begrenzung und das Farbschema von Schaltflächen. |
 Nicht empfohlen Verwenden Sie das Google-Symbol oder -Logo ohne Schaltflächenbegrenzung und ohne Text, um die Nutzeraktion anzugeben. |
 Empfohlen Verwenden Sie die Google-Markenfarbe für das Google-Symbol im dunklen, hellen und neutralen Modus. |
 Nicht Verwenden Sie für die Schaltfläche einfarbige Versionen des Google-„G“. |
 Empfohlen Wählen Sie die Schaltfläche im richtigen Farbmodus aus, um Barrierefreiheit und Gleichwertigkeit zu gewährleisten. |
 Nicht empfohlen Das Google-G-Symbol in der Standardfarbe auf einem anderen farbigen Hintergrund als hell, dunkel oder neutral platzieren |
 Empfohlen Verwenden Sie das Google-G mit festem Abstand und fester Größe. |
 Nicht Erstellen Sie ein eigenes Symbol für die Schaltfläche. |
 Empfohlen Verwenden Sie bei Bedarf das Google-G allein als Aktionsschaltfläche. |
 Nicht Verwenden Sie den Begriff „Google“ allein auf der Schaltfläche, um die Aktion „Über Google anmelden“ zu repräsentieren. |
Best Practices für das Branding von „Über Google anmelden“
„Über Google anmelden“ und andere Anmeldeoptionen von Drittanbietern
Die Schaltfläche „Über Google anmelden“ sollte mindestens so gut sichtbar sein wie andere Anmeldeoptionen von Drittanbietern. Schaltflächen sollten beispielsweise ungefähr dieselbe Größe haben und ein ähnliches visuelles Gewicht.
Weitere Richtlinien
Wenn Sie zusätzliche Bereiche anfordern, tun Sie dies mit einer inkrementellen Autorisierung (Android, iOS, Web). Der Nutzer wird nur dann zur Autorisierung aufgefordert, wenn er mit einer Funktion interagiert, für die der API-Zugriff erforderlich ist.
Wenn Sie YouTube-Berechtigungen anfordern, verwenden Sie eine YouTube-Schaltfläche.
Wenn Sie die Google Play-Spieldienste verwenden, lesen Sie auch die Branding-Richtlinien für die Google Play-Spieldienste.
Die Verwendung von Google-Marken in einer Weise, die nicht ausdrücklich durch dieses Dokument abgedeckt wird, ist nur mit vorheriger schriftlicher Zustimmung von Google gestattet. Weitere Informationen finden Sie in den Richtlinien von Google für die Verwendung von Google-Markenkennzeichen durch Dritte.