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, Oval
| 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
Die Verwendung unserer Google Identity Services SDKs oder einer der anderen Optionen, die in den vorherigen Abschnitten beschrieben wurden, wird dringend empfohlen, da Google-Nutzer so die Google-Marke leichter erkennen können. Je leichter Nutzer eine Aktionsschaltfläche erkennen können, desto wahrscheinlicher ist es, dass sie damit interagieren.
Wenn du die Schaltfläche jedoch an dein App-Design anpassen musst, beachte 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
Wir empfehlen den Call-to-Action-Text „Über Google anmelden“, „Über Google anmelden“ oder „Weiter mit Google“, um Nutzer anzuregen, auf die Schaltfläche zu klicken. 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 „Arbeitsplatz“ > „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 farbliche Standardversion handeln und auf einem weißen Hintergrund angezeigt werden. Wenn Sie Ihr eigenes Google-Logo in benutzerdefinierter Größe erstellen müssen, beginnen Sie mit einer der im Downloadset 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 Das Google-Symbol oder -Logo darf nur ohne die Schaltflächenbegrenzung und ohne Text verwendet werden, um auf die Nutzeraktion hinzuweisen. |
 Empfohlen Verwenden Sie die Google-Markenfarbe für das Google-Symbol im dunklen, hellen und neutralen Modus. |
 Falsch 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. |
 Falsch Das Google-G-Symbol in der Standardfarbe auf einem anderen farbigen Hintergrund als hell, dunkel oder neutral platzieren |
 Empfohlen Bleiben Sie beim 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 Verwende in der Schaltfläche nur den Begriff „Google“, um auf die Funktion „Über Google anmelden“ hinzuweisen. |
Best Practices für die Marke „Ü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-Bereiche anfordern, verwenden Sie die 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.