W tym dokumencie znajdziesz wskazówki dotyczące wyświetlania w witrynie lub aplikacji przycisku Zaloguj się przez Google. Aby przejść proces weryfikacji aplikacji, musisz się dostosować do tych wskazówek.
Nasze pakiety SDK usług Google Identity renderują przycisk Zaloguj się przez Google, który jest zawsze zgodny z najnowszymi wytycznymi dotyczącymi marki Google. Jest to zalecany sposób wyświetlania przycisku Zaloguj się przez Google na stronie internetowej lub w aplikacji. Jeśli nie możesz użyć opcji przycisku renderowanego przez Google, możesz wyrenderować element przycisku HTML, pobrać zatwierdzone przez nas wcześniej zasoby marki lub opcjonalnie utworzyć niestandardowy przycisk Zaloguj się przez Google.
Renderowanie elementu przycisku HTML
Udostępniamy konfigurator HTML, który umożliwia dostosowanie wyglądu przycisku Zaloguj się przez Google. Następnie możesz pobrać fragment kodu HTML i CSS, który będzie renderować przycisk w Twojej witrynie.Generowanie elementu przycisku HTML
Pobieranie wstępnie zatwierdzonych ikon marek
Zamiast używać niestandardowego przycisku z obrazem, możesz pobrać zatwierdzone przez nas przyciski Zaloguj się przez Google w formatach PNG i SVG na wszystkie platformy.Dostępne przyciski obrazów są dostępne w trybie standardowym i ikony oraz obejmują te opcje stylu:
- Motyw : Jasny, Neutralny, Ciemny
- Kształt : prostokątny, w kształcie tabletki
| Motyw | Przyciski | Opis |
|---|---|---|
| Jasny |
|
Standardowy duży prostokątny przycisk Zaloguj się przez Google w jasnym motywie |
| Ciemny |
|
Standardowy przycisk Zaloguj się przez Google w ciemnym motywie |
Obsługiwane tryby przycisku
| Jasny |
|
|
| Ciemny |
|
|
| Neutralny |
|
|
Tworzenie niestandardowego przycisku Zaloguj się przez Google
Zalecamy korzystanie z pakietów SDK usług Google Identity lub z innych opcji opisanych w poprzednich sekcjach, ponieważ ułatwia to użytkownikom Google rozpoznawanie marki Google. Im łatwiej użytkownikom jest znaleźć przycisk działania, tym chętniej z niego korzystają.
Jeśli jednak musisz dostosować przycisk do projektu aplikacji, postępuj zgodnie z tymi wskazówkami.
Rozmiar
Możesz skalować przycisk w razie potrzeby na różne urządzenia i rozmiary ekranu, ale musisz zachować proporcje, aby logo Google nie było rozciągnięte.
Tekst
Aby zachęcić użytkowników do kliknięcia przycisku, zalecamy użycie wezwania do działania: „Zaloguj się przez Google”, „Zarejestruj się przez Google” lub „Dalej przez Google”. Użytkownik musi wyraźnie widzieć, że loguje się w aplikacji lub rejestruje się w niej za pomocą danych logowania Google, a nie rejestruje się na konto Google w aplikacji.
Kolor
Domyślny stan przycisków jest pokazany poniżej. Przycisk musi zawsze zawierać standardowy kolor litery „G” w nazwie Google.
| Motyw | Przykład | |
|---|---|---|
| Jasny |
|
Wypełnienie: #FFFFFF Udar: #747775 | 1 px | wewnątrz Czcionka: #1F1F1F | Roboto Medium | 14/20 |
| Ciemny |
|
Wypełnienie: #131314 Obrys: #8E918F | 1px | wewnątrz Czcionka: #E3E3E3 | Roboto Medium | 14/20 |
| Neutralny |
|
Wypełnienie: #F2F2F2 Obrys: brak obrysu Czcionka: #1F1F1F | Roboto Medium | 14/20 |
Czcionka
Czcionka przycisku to Roboto Medium, czcionka TrueType. Aby zainstalować czcionkę, najpierw pobierz czcionkę Roboto i rozpakuj pobrany pakiet. Na Macu kliknij dwukrotnie Roboto-Medium.ttf, a potem kliknij „Zainstaluj czcionkę”. W Windowsie przeciągnij plik do folderu „Mój komputer” > „Windows” > „Fonty”.
Dopełnienie
| Android |
|
| iOS |
|
| Internet (urządzenia mobilne i komputery) |
|
| Dokumentacja |
|
Logo Google na przycisku „Zaloguj się przez Google”
Niezależnie od tekstu nie możesz zmieniać rozmiaru ani koloru litery „G” w logo Google. Musi to być standardowa wersja kolorowa, która będzie widoczna na białym tle. Jeśli chcesz utworzyć własne logo Google w niestandardowym rozmiarze, zacznij od dowolnego rozmiaru logo dostępnego w pakiecie do pobrania.
Nieprawidłowy projekt przycisku
 Do W przypadku granicy przycisku i schematu kolorów należy przestrzegać wskazówek dotyczących projektu w stylu Google Material 3. |
 Nie Używaj ikony lub logo Google bez obramowania przycisku i bez tekstu wskazującego działanie użytkownika. |
 Do Użyj koloru marki Google dla ikony Google w trybie ciemnym, jasnym i neutralnym. |
 Nie Do przycisku użyj wersji litery „G” w wersji monochromatycznej. |
 Do Wybierz przycisk w odpowiednim trybie kolorów, aby zapewnić ułatwienia dostępu i równą widoczność. |
 Nie Umieszczanie standardowej ikony litery „G” Google na kolorowym tle innym niż jasne, ciemne lub neutralne. |
 Do Używaj litery „G” z Google z stałymi odstępami i rozmiarem. |
 Nie Utwórz własną ikonę przycisku. |
 Do W razie potrzeby użyj samej litery „G” z logo Google jako przycisku działania. |
 Nie Używaj słowa „Google” w samym przycisku, aby reprezentowało ono działanie polegające na zalogowaniu się przez Google. |
Sprawdzone metody dotyczące logowania się przez Google
Logowanie się przez Google i inne opcje logowania przez firmy zewnętrzne
Przycisk „Zaloguj się przez Google” powinien być widoczny co najmniej tak samo jak inne opcje logowania oferowane przez firmy zewnętrzne. Na przykład przyciski powinny mieć mniej więcej taki sam rozmiar i podobną wagę wizualną.
Inne wytyczne
Jeśli żądasz dodatkowych zakresów uprawnień, rób to z użyciem stopniowej autoryzacji (Android, iOS, internet), prosząc użytkownika o autoryzację dopiero wtedy, gdy zacznie korzystać z funkcji, która wymaga dostępu do interfejsu API.
Jeśli chcesz uzyskać uprawnienia YouTube, użyj przycisku YouTube.
Jeśli korzystasz z usług gier Google Play, zapoznaj się też z wytycznymi dotyczącymi marki usług gier Google Play.
Korzystanie z marek Google w sposób nieobjęty niniejszym dokumentem jest niedozwolone bez uprzedniej pisemnej zgody Google (więcej informacji znajdziesz w wytycznych dotyczących korzystania przez osoby trzecie z cech marki Google).