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
| Motyw | Przyciski | Opis |
|---|---|---|
| Jasny |
|
Standardowy duży prostokąt z motywem jasnego i przyciskiem Zaloguj się przez Google |
| Ciemny |
|
Standardowy przycisk Zaloguj się przez Google w kształcie pigułki z ciemnym motywem |
Obsługiwane tryby przycisku
| Jasny |
|
|
| Ciemny |
|
|
| Neutralny |
|
|
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 |
|
Wypełnienie: #FFFFFF Kreska: #747775 | 1 piksel | wewnątrz Czcionka: #1F1F1F | Roboto Medium | 14/20 |
| Ciemny |
|
Wypełnienie: #131314 Styl: #8E918F | 1 piks. | wewnątrz Czcionka: #E3E3E3 | Roboto Medium | 14/20 |
| Neutralny |
|
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 |
|
| iOS |
|
| Internet (urządzenia mobilne i komputery) |
|
| Dokumentacja |
|
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.
Nieprawidłowy układ przycisku
 Tak W przypadku obramowania i schematu kolorów przycisku postępuj zgodnie ze wskazówkami dotyczącymi projektowania w Google Material 3. |
 Nie Używaj ikony lub logo Google bez obramowania przycisku i bez tekstu wskazującego działanie użytkownika. |
 Tak Używaj ikony Google w kolorze marki Google w trybie ciemnym, jasnym i neutralnym. |
 Nie Użyj monochromatycznej wersji Google „G” dla przycisku. |
 Tak Wybierz przycisk w odpowiednim trybie kolorów, aby zadbać o ułatwienia dostępu i równą widoczność. |
 Nie Umieść ikonę Google „G” w standardowym kolorze na innym kolorowym tle niż jasne, ciemne lub neutralne. |
 Tak Trzymaj się liter Google „G” ze stałym dopełnieniem i stałym rozmiarem. |
 Nie Utwórz własną ikonę przycisku. |
 Tak W razie potrzeby jako przycisku polecenia użyj samej litery „G”. |
 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).