Dokumen ini memberikan panduan tentang cara menampilkan tombol Login dengan Google di situs atau aplikasi Anda. Situs atau aplikasi Anda harus mengikuti panduan ini untuk menyelesaikan proses verifikasi aplikasi.
Google Identity Services SDK kami merender tombol Login dengan Google yang selalu mematuhi pedoman branding Google terbaru. Cara tersebut direkomendasikan untuk menampilkan tombol Login dengan Google di situs atau aplikasi Anda. Jika tidak dapat menggunakan opsi tombol yang dirender Google, Anda dapat merender elemen tombol HTML, mendownload aset branding kami yang telah disetujui, atau memilih membuat tombol Login dengan Google kustom.
Elemen Tombol HTML Render
Kami menyediakan konfigurator HTML yang memungkinkan Anda menyesuaikan tampilan tombol Login dengan Google. Selanjutnya, Anda dapat mendownload cuplikan HTML dan CSS yang akan merender tombol di situs Anda.Buat Elemen Tombol HTML
Download Ikon Merek yang Telah Disetujui Sebelumnya
Selain menggunakan tombol gambar kustom, Anda dapat mendownload tombol Login dengan Google yang telah disetujui dan disediakan dalam format PNG dan SVG untuk semua platform.Tombol gambar yang disediakan tersedia dalam mode standar dan ikon serta menyertakan opsi gaya di bawah ini:
- Tema : Terang, Netral, Gelap
- Bentuk : Rectangular, Pil
| Tema | Tombol | Deskripsi |
|---|---|---|
| Ringan |
|
Login dengan tombol Google persegi panjang standar dengan tema terang |
| Gelap |
|
Tombol login dengan Google bentuk pil tema gelap standar |
Mode Tombol yang Didukung
| Ringan |
|
|
| Gelap |
|
|
| Netral |
|
|
Membuat Tombol Login dengan Google kustom
Penggunaan Google Identity Services SDK kami atau salah satu opsi lain yang dibahas di bagian sebelumnya sangat direkomendasikan karena akan memungkinkan pengguna Google mengidentifikasi merek Google dengan lebih mudah. Semakin mudah pengguna mengidentifikasi tombol tindakan, semakin besar kemungkinan mereka untuk berinteraksi dengannya.
Namun, jika Anda perlu menyesuaikan tombol agar cocok dengan desain aplikasi, ikuti panduan berikut.
Ukuran
Anda dapat menskalakan tombol sesuai kebutuhan untuk berbagai perangkat dan ukuran layar, tetapi Anda harus mempertahankan rasio aspek agar logo Google tidak direntangkan.
Teks
Untuk mendorong pengguna mengklik tombol tersebut, sebaiknya gunakan teks pesan ajakan (CTA) "Login dengan Google", "Daftar dengan Google", atau "Lanjutkan dengan Google". Harus jelas bagi pengguna bahwa mereka login ke aplikasi Anda atau mendaftar ke aplikasi Anda dengan kredensial Google mereka, bukan mendaftar atau registrasi untuk Akun Google di aplikasi Anda.
Warna
Status default tombol ditampilkan di bawah ini. Tombol tersebut harus selalu menyertakan warna standar untuk "G" Google.
| Tema | Contoh | |
|---|---|---|
| Ringan |
|
Isi: #FFFFFF Goresan: #747775 | 1px | di dalam Font: #1F1F1F | Roboto Medium | 14/20 |
| Gelap |
|
Isi: #131314 Goresan: #8E918F | 1px | di dalam Font: #E3E3E3 | Roboto Medium | 14/20 |
| Netral |
|
Isi: #F2F2F2 Goresan: Tanpa goresan Font: #1F1F1F | Roboto Medium | 14/20 |
Font
Font tombolnya adalah Roboto Medium, sebuah font TrueType. Untuk menginstal, download font Roboto terlebih dahulu, dan ekstrak paket download. Di Mac, cukup klik dua kali Roboto-Medium.ttf, lalu klik "Install Font". Di Windows, tarik file ke folder "My Computer" > "Windows" > "Fonts".
Padding
| Android |
|
| iOS |
|
| Web (seluler + desktop) |
|
| Referensi |
|
Logo Google di tombol "Login dengan Google"
Apa pun teksnya, Anda tidak dapat mengubah ukuran atau warna logo "G" Google. Versi ini harus versi warna standar dan muncul di latar belakang putih. Jika Anda perlu membuat logo Google ukuran kustom sendiri, mulailah dengan ukuran logo apa pun yang disertakan dalam paket download.
Desain tombol salah
 Anjuran Gunakan panduan desain Google Material 3 untuk batas tombol dan skema warna. |
 Larangan Gunakan ikon atau logo Google saja tanpa batas tombol dan tanpa teks untuk menunjukkan tindakan pengguna. |
 Anjuran Gunakan warna merek Google untuk ikon Google pada mode gelap, terang, dan netral. |
 Larangan Gunakan versi monokrom Google "G" untuk tombol tersebut. |
 Anjuran Pilih tombol dalam mode warna yang tepat untuk aksesibilitas dan keterlihatan yang sama. |
 Larangan Tempatkan ikon "G" Google warna standar pada latar belakang berwarna selain terang, gelap, atau netral. |
 Anjuran Tetap gunakan Google "G" dengan padding dan ukuran tetap. |
 Larangan Buat ikon Anda sendiri untuk tombol tersebut. |
 Anjuran Gunakan "G" Google saja untuk tombol tindakan jika diperlukan. |
 Larangan Gunakan istilah "Google" saja di tombol untuk mewakili tindakan Login dengan Google. |
Praktik Terbaik Login dengan Branding Google
Opsi login dengan Google dan login pihak ketiga lainnya
Tombol Login dengan Google harus ditampilkan setidaknya sama jelasnya dengan opsi login pihak ketiga lainnya. Misalnya, tombol harus kurang lebih berukuran sama dan memiliki bobot visual yang sama.
Panduan Lainnya
Jika Anda meminta cakupan tambahan, lakukan dengan otorisasi inkremental (Android, iOS, web), yang hanya meminta pengguna untuk memberikan otorisasi saat pengguna mulai berinteraksi dengan fitur yang memerlukan akses API.
Jika Anda meminta cakupan YouTube, gunakan tombol YouTube.
Jika Anda menggunakan layanan game Google Play, lihat juga pedoman branding layanan game Google Play.
Dilarang menggunakan merek Google dengan cara-cara yang tidak tercakup dalam dokumen ini tanpa persetujuan tertulis sebelumnya dari Google (lihat Pedoman Penggunaan Fitur Merek Google oleh Pihak Ketiga untuk informasi lebih lanjut).