Zaloguj się, korzystając ze wskazówek dotyczących promowania marki w Google

Ten dokument zawiera wskazówki dotyczące wyświetlania przycisku Zaloguj się przez Google w witrynie lub aplikacji. Twoja witryna lub aplikacja musi być zgodna z tymi wskazówkami, aby ukończyć proces weryfikacji aplikacji.

Nasze pakiety SDK usług tożsamości Google renderują przycisk Zaloguj się przez Google, który zawsze jest zgodny z najnowszymi wskazówkami dotyczącymi promowania marki Google. To zalecany sposób wyświetlania przycisku Zaloguj się przez Google w Twojej witrynie lub aplikacji. Jeśli nie możesz użyć opcji przycisku renderowanego przez Google, możesz wyrenderować element przycisku HTML, pobrać wstępnie zatwierdzone zasoby marki lub opcjonalnie utworzyć niestandardowy przycisk Zaloguj się przez Google.

Element przycisku renderowania HTML

Udostępniamy konfigurator HTML, który pozwala dostosować wygląd przycisku Zaloguj się przez Google. Następnie możesz pobrać fragment kodu HTML i CSS, który wyrenderuje przycisk na Twojej stronie.

Generuj element przycisku HTML

  
  

Pobierz wstępnie zatwierdzone ikony marki

Zamiast używać niestandardowego przycisku graficznego, możesz pobrać wstępnie zatwierdzone przyciski Zaloguj się przez Google dostępne w formatach PNG i SVG, dostępne na wszystkich platformach.

Wymienione przyciski obrazów są dostępne w trybach standardowych i trybach ikon i obejmują te opcje stylu:

  • Motyw : jasny, neutralny, ciemny
  • Kształt : prostokątny, pigułka
Oto 2 przykłady:
Motyw Przyciski Opis
Jasny Przykładowy prostokątny przycisk Zaloguj się przez Google z dużym jasnym motywem Standardowy duży prostokąt z motywem jasnego i przyciskiem Zaloguj się przez Google
Ciemny Przykład standardowego przycisku Zaloguj się przez Google w kształcie pigułki z ciemnym motywem Standardowy przycisk Zaloguj się przez Google w kształcie pigułki z ciemnym motywem
Pobierz wstępnie zatwierdzone ikony marki

Obsługiwane tryby przycisku

Jasny

okrągły przycisk Zaloguj się przez Google z jasnym motywem

kwadrat z jasnym motywem przycisk Zaloguj się przez Google

przycisk Zaloguj się przez Google w kształcie pigułki z jasnym motywem

prostokąt z jasnym motywem przycisk Zaloguj się przez Google

Ciemny

okrągły przycisk Zaloguj się przez Google z ciemnym motywem

kwadrat z ciemnym motywem przycisk Zaloguj się przez Google

przycisk Zaloguj się przez Google w kształcie pigułki z ciemnym motywem

prostokąt z ciemnym motywem przycisk Zaloguj się przez Google

Neutralny

okrągły przycisk Zaloguj się przez Google z neutralnym motywem

kwadrat z motywem neutralnym w kształcie przycisku Zaloguj się przez Google

przycisk Zaloguj się przez Google w kształcie pigułki

prostokąt w kształcie neutralnego motywu

Utwórz niestandardowy przycisk Zaloguj się przez Google

Zdecydowanie zalecamy korzystanie z pakietów SDK usług tożsamości Google lub dowolnej innej opcji omówionej w poprzednich sekcjach, ponieważ umożliwia ona użytkownikom Google łatwiejsze rozpoznawanie marki Google. Im łatwiej użytkownicy zidentyfikują przycisk działania, tym bardziej prawdopodobne jest, że wejdą w interakcję z nim.

Jeśli jednak musisz dostosować przycisk, aby pasował do grafiki aplikacji, postępuj zgodnie z tymi wskazówkami.

Rozmiar

Możesz skalować przycisk odpowiednio do różnych urządzeń i rozmiarów ekranu, ale musisz zachować proporcje obrazu, aby logo Google nie było rozciągnięte.

Tekst

Jeśli chcesz zachęcić użytkowników do kliknięcia przycisku, użyj tekstu wezwania do działania „Zaloguj się przez Google”, „Zarejestruj się przez Google” lub „Kontynuuj z Google”. Dla użytkownika powinno być jasne to, że loguje się w Twojej aplikacji lub rejestruje się w niej za pomocą swoich danych logowania Google, a nie rejestruje ani nie rejestruje konta Google w aplikacji.

Kolor

Poniżej pokazano domyślny stan przycisków. Przycisk musi zawsze zawierać standardowy kolor litery „G”.

Motyw Przykład
Jasny przycisk Zaloguj się przez Google w kształcie pigułki z jasnym motywem Wypełnienie: #FFFFFF
Kreska: #747775 | 1 piksel | wewnątrz
Czcionka: #1F1F1F | Roboto Medium | 14/20
Ciemny przycisk Zaloguj się przez Google w kształcie pigułki z ciemnym motywem Wypełnienie: #131314
Styl: #8E918F | 1 piks. | wewnątrz
Czcionka: #E3E3E3 | Roboto Medium | 14/20
Neutralny przycisk Zaloguj się przez Google w kształcie pigułki Wypełnienie: #F2F2F2
Kreska: bez kreski
Czcionka: #1F1F1F | Roboto Medium | 14/20

Czcionka

Czcionka przycisku to Roboto Medium, czcionka TrueType. Aby zainstalować, najpierw pobierz czcionkę Roboto i rozpakuj pobrany pakiet. Na Macu kliknij dwukrotnie plik Roboto-Medium.ttf, a potem kliknij „Zainstaluj czcionkę”. W systemie Windows przeciągnij plik do folderu „Mój komputer” > „Windows” > „Czcionki”.

Dopełnienie

Android Dopełnienie po lewej stronie przed logo Google, 10 pikseli po prawej stronie po logo Google i 12 pikseli po prawej stronie po tekście Zaloguj się przez Google
iOS Dopełnienie po lewej stronie przed logo Google, 12 pikseli po prawej stronie po logo Google i 16 pikseli po prawej stronie po tekście Zaloguj się przez Google
Internet (urządzenia mobilne i komputery) Dopełnienie po lewej stronie przed logo Google, 10 pikseli po prawej stronie po logo Google i 12 pikseli po prawej stronie po tekście Zaloguj się przez Google
Dokumentacja Odniesienie do dopełnienia przycisku „Zaloguj się za pomocą Google”

Logo Google w przycisku „Zaloguj się przez Google”

Niezależnie od tekstu nie możesz zmienić rozmiaru ani koloru logo Google „G”. Musi być w standardowej wersji koloru i wyświetlać się na białym tle. Jeśli chcesz utworzyć własne logo Google w rozmiarze niestandardowym, zacznij od dowolnego z rozmiarów logo zawartych w pakiecie do pobrania.

Ikona Google G

Nieprawidłowy układ przycisku

próbka obrazu budowania marki
Tak

W przypadku obramowania i schematu kolorów przycisku postępuj zgodnie ze wskazówkami dotyczącymi projektowania w Google Material 3.

próbka obrazu budowania marki
Nie

Używaj ikony lub logo Google bez obramowania przycisku i bez tekstu wskazującego działanie użytkownika.

próbka obrazu budowania marki
Tak

Używaj ikony Google w kolorze marki Google w trybie ciemnym, jasnym i neutralnym.

próbka obrazu budowania marki
Nie

Użyj monochromatycznej wersji Google „G” dla przycisku.

próbka obrazu budowania marki
Tak

Wybierz przycisk w odpowiednim trybie kolorów, aby zadbać o ułatwienia dostępu i równą widoczność.

próbka obrazu budowania marki
Nie

Umieść ikonę Google „G” w standardowym kolorze na innym kolorowym tle niż jasne, ciemne lub neutralne.

próbka obrazu budowania marki
Tak

Trzymaj się liter Google „G” ze stałym dopełnieniem i stałym rozmiarem.

próbka obrazu budowania marki
Nie

Utwórz własną ikonę przycisku.

próbka obrazu budowania marki
Tak

W razie potrzeby jako przycisku polecenia użyj samej litery „G”.

próbka obrazu budowania marki
Nie

Używaj samego słowa „Google” na przycisku, aby oznaczać działanie funkcji Zaloguj się przez Google.

Promowanie marki Google – sprawdzone metody

Zaloguj się przez Google i inne opcje logowania przez inne firmy

Przycisk Zaloguj się przez Google powinien być wyświetlany co najmniej tak samo dobrze jak inne opcje logowania przez aplikacje zewnętrzne. Na przykład przyciski powinny mieć mniej więcej taki sam rozmiar i podobną masę wizualną.

Inne wytyczne

Jeśli żądasz dodatkowych zakresów, zrób to z użyciem autoryzacji przyrostowej (Android, iOS lub internet), tylko gdy użytkownik będzie chciał korzystać z funkcji, która wymaga dostępu do interfejsu API.

Jeśli poprosisz o zakresy YouTube, użyj przycisku YouTube.

Jeśli korzystasz z Usług gier Google Play, zapoznaj się też ze wskazówkami dotyczącymi promowania marki w usługach gier Google Play.

Wykorzystanie marek Google w sposób, który nie jest wyraźnie opisany w tym dokumencie, jest niedozwolone bez uprzedniej pisemnej zgody Google (więcej informacji znajdziesz w Wytycznych dotyczących korzystania z cech marki Google przez osoby trzecie).