Branding-Richtlinien für „Über Google anmelden“

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
Hier zwei Beispiele:
Design Schaltflächen Beschreibung
Leicht Beispiel für eine große, helle Standardschaltfläche „Über Google anmelden“ Große Standardschaltfläche „Über Google anmelden“ in hellem Design
Dunkel Beispiel für die Standardschaltfläche „Über Google anmelden“ in dunklem Design Standardschaltfläche „Über Google anmelden“ in dunklem Design
Vorab genehmigte Markensymbole herunterladen

Unterstützte Schaltflächenmodi

Leicht

Schaltfläche „Über Google anmelden“ in hellem Design

Schaltfläche „Über Google anmelden“ in hellem Design

Helle, pillenförmige Schaltfläche „Über Google anmelden“

Schaltfläche „Über Google anmelden“ in hellem Design

Dunkel

Schaltfläche „Über Google anmelden“ in dunklem Design

Schaltfläche „Über Google anmelden“ in dunklem Design

Schaltfläche „Über Google anmelden“ in dunklem Design

Schaltfläche „Über Google anmelden“ in dunklem Design

Neutral

Schaltfläche „Über Google anmelden“ in neutralem Design

Schaltfläche „Über Google anmelden“ in neutralem Design

Schaltfläche „Über Google anmelden“ in neutralem Design

Schaltfläche „Über Google anmelden“ in neutralem Design

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 Helle, pillenförmige Schaltfläche „Über Google anmelden“ Füllung: #FFFFFF
Strich: #747775 | 1 px | innen
Schriftart: #1F1F1F | Roboto Medium | 14/20
Dunkel Schaltfläche „Über Google anmelden“ in dunklem Design Füllung: #131314
Strich: #8E918F | 1 px | innen
Schriftart: #E3E3E3 | Roboto Medium | 14/20
Neutral Schaltfläche „Über Google anmelden“ in neutralem Design 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 12 Pixel Abstand links vor dem Google-Logo, 10 Pixel Abstand rechts nach dem Google-Logo und 12 Pixel rechter Abstand nach dem Text „Über Google anmelden“
iOS 16 Pixel Abstand links vor dem Google-Logo, 12 Pixel Abstand rechts nach dem Google-Logo und 16 Pixel Abstand rechts nach dem Text „Über Google anmelden“
Web (Mobilgeräte + Computer) 12 Pixel Abstand links vor dem Google-Logo, 10 Pixel Abstand rechts nach dem Google-Logo und 12 Pixel rechter Abstand nach dem Text „Über Google anmelden“
Referenz Referenz für den Abstand der „Über Google anmelden“-Schaltfläche

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.

Google G-Symbol

Falsches Schaltflächendesign

Bildbeispiel für das Branding
Richtig

Beachten Sie für die Schaltflächenbegrenzung und das Farbschema die Designrichtlinien von Material 3 von Google.

Bildbeispiel für das Branding
Nicht erlaubt

Verwende das Google-Symbol oder -Logo ohne die Begrenzung der Schaltfläche und ohne Text, um die Nutzeraktion anzuzeigen.

Bildbeispiel für das Branding
Richtig

Verwenden Sie die Google-Markenfarbe für das Google-Symbol für den dunklen, hellen und neutralen Modus.

Bildbeispiel für das Branding
Nicht erlaubt

Verwenden Sie einfarbige Versionen des Google-G für die Schaltfläche.

Bildbeispiel für das Branding
Richtig

Wählen Sie für die Schaltfläche den richtigen Farbmodus aus, damit sie barrierefrei und gleich hervorgehoben ist.

Bildbeispiel für das Branding
Nicht erlaubt

Platziere das Google-Symbol „G“ in der Standardfarbe auf einem anderen farbigen Hintergrund als hell, dunkel oder neutral.

Bildbeispiel für das Branding
Richtig

Bleiben Sie beim Google-G mit festem Abstand und fester Größe.

Bildbeispiel für das Branding
Nicht erlaubt

Erstellen Sie Ihr eigenes Symbol für die Schaltfläche.

Bildbeispiel für das Branding
Richtig

Verwenden Sie bei Bedarf das „G“ von Google für die Aktionsschaltfläche.

Bildbeispiel für das Branding
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.