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 dostosować swoją witrynę lub aplikację do tych wskazówek.
Nasze pakiety SDK Google Identity Services renderują przycisk Zaloguj się przez Google, który zawsze jest zgodny z najnowszymi wskazówkami 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 wcześniej przez nas 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, okrągły
| Motyw | Przyciski | Opis |
|---|---|---|
| Jasny |
|
Standardowy prostokątny przycisk Zaloguj się przez Google z dużym światłem |
| 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żytkownicy rozpoznają przycisk polecenia, tym większe prawdopodobieństwo, że będą z niego korzystać.
Jeśli jednak chcesz dostosować przycisk, aby pasował do projektu aplikacji, zastosuj się do poniższych wskazówek.
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 tekstu wezwania do działania „Zaloguj się przez Google”, „Zarejestruj się przez Google” lub „Kontynuuj z 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 Uder: #747775 | 1 px | wewnątrz Czcionka: #1F1F1F | Roboto Medium | 14/20 |
| Ciemny |
|
Wypełnienie: #131314 Obrys: #8E918F | 1 px | 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ć, najpierw pobierz czcionkę Roboto i rozpakuj pobrany pakiet. Na Macu kliknij dwukrotnie Roboto-Medium.ttf, a potem kliknij „Zainstaluj czcionkę”. W systemie Windows przeciągnij plik do folderu „Mój komputer” > „Windows” > „Czcionki”.
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 kolory, która jest widoczna na białym tle. Jeśli chcesz utworzyć logo Google o 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 i tekstu do wskazywania działania użytkownika. |
 Tak Używaj koloru marki Google w przypadku ikony Google w trybie ciemnym, jasnym i neutralnym. |
 Nie Użyj monochromatycznej wersji litery „G” Google jako przycisku. |
 Do Wybierz przycisk w odpowiednim trybie kolorów, aby zapewnić ułatwienia dostępu i równą widoczność. |
 Nie Umieść ikonę Google „G” w standardowym kolorze 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ę dla tego przycisku. |
 Do W razie potrzeby użyj nazwy Google jako przycisku polecenia (G). |
 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
Zaloguj się przez Google i inne opcje logowania
Przycisk Zaloguj się przez Google powinien być widoczny co najmniej tak dobrze jak inne opcje logowania oferowane przez inne firmy. Na przykład przyciski powinny mieć mniej więcej ten sam rozmiar i podobną wagę.
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 wymagającej dostępu do interfejsu API.
Jeśli prosisz o zakresy YouTube, użyj przycisku YouTube.
Jeśli korzystasz z Usług gier Google Play, przeczytaj też wskazówki dotyczące promowania marki w tych usługach.
Wykorzystanie marek Google w sposób, który nie został wyraźnie opisany w tym dokumencie, jest niedozwolone bez uprzedniej pisemnej zgody Google (więcej informacji znajdziesz w Wytycznych dotyczących wykorzystania cech marki Google przez osoby trzecie).