Pedoman brand

Jika Anda mengembangkan aplikasi untuk pengguna di Rusia, gunakan tombol “Simpan ke ponsel” karena Google Wallet belum tersedia di negara ini. Lihat aset dan panduan yang relevan. Jika Anda mengembangkan aplikasi untuk pengguna di luar Rusia, perbarui tombol Tambahkan ke Google Wallet dengan mendownload aset di bawah.

Bagian dokumentasi ini dirancang untuk membantu Anda membuat gambar dan elemen antarmuka pengguna lainnya agar terlihat bagus di aplikasi Google Wallet.

Aset

Tombol Tambahkan ke Google Wallet

Tombol Tambahkan ke Google Wallet digunakan setiap kali Anda mengarahkan pengguna untuk menyimpan kartu pas atau kartu dari aplikasi atau situs Anda ke Wallet mereka. Tombol Tambahkan ke Google Wallet harus memanggil salah satu alur Google Wallet API. Alur ini menampilkan aplikasi Google Wallet tempat pengguna dapat mengikuti petunjuk untuk menyimpan kartu ke perangkat Android dan Akun Google mereka. Tombol ini dapat digunakan di aplikasi, situs, atau email.

Tombol Tambahkan ke Google Wallet tersedia dalam format XML, SVG, dan PNG Android.

Mendownload aset - XML Android Mendownload aset - SVG Mendownload aset - PNG

Tombol Lihat di Google Wallet

Tombol Lihat di Google Wallet digunakan untuk menautkan dalam pengguna ke wallet mereka untuk melihat kartu atau kartu yang disimpan sebelumnya. Tombol ini dapat digunakan di aplikasi, situs, atau email.

Tombol Lihat di Google Wallet tersedia dalam format SVG dan PNG.

Download aset - SVG Download aset - PNG

Semua tombol yang ditampilkan di situs, aplikasi, atau komunikasi email Anda harus mematuhi pedoman merek yang diuraikan di halaman ini. Contoh pedoman ini mencakup, tetapi tidak terbatas pada, hal-hal berikut:

• Ukuran relatif terhadap tombol atau elemen serupa lainnya di halaman
• Bentuk dan warna tombol tidak boleh diubah
• Ruang kosong

Tombol yang dilokalkan

Tombol Google Wallet yang dilokalkan disediakan untuk semua pasar tempat Wallet tersedia. Jika Anda mengembangkan aplikasi untuk pengguna di pasar ini, selalu gunakan tombol yang ditautkan di atas. Jangan membuat versi tombol Anda sendiri. Jika versi tombol yang dilokalkan tidak tersedia di pasar Anda, gunakan tombol versi bahasa Inggris.

Tombol Tambahkan ke Google Wallet tersedia dalam bahasa Albania, Arab, Armenia, Azerbaijan, Bosnia, Bulgaria, Katalan, China (Hong Kong), China (Tradisional), Kroasia, Ceko, Denmark, Belanda, Inggris (India, Singapura, Afrika Selatan, Australia, Kanada, Inggris Raya, Amerika Serikat), Estonia, Filipina, Finlandia, Prancis (Kanada), Prancis (Prancis), Georgia, Jerman, Yunani, Ibrani, Hungaria, Islandia, Indonesia, Italia, Jepang, Kazak, Kirgiz, Latvia, Lituania, Makedonia, Melayu, Norwegia, Polandia, Portugis (Brasil), Portugis (Portugal), Rumania, Rusia (Belarus), Serbia, Slovakia, Slovenia, Spanyol (Amerika Latin), Spanyol (Spanyol), Swedia, Thailand, Turkiye, Ukraina, Uzbekistan, dan Vietnam.

Nama yang dilokalkan

Agar pengguna lebih jelas, nama produk Google Wallet dilokalkan di pasar tertentu. Jika Anda mengembangkan aplikasi untuk pengguna di negara-negara ini, selalu gunakan nama yang dilokalkan di bawah untuk web, email, dan cetak. Jangan membuat versi “Google Wallet” yang dilokalkan sendiri. Jika pasar Anda tidak tercantum di bawah, gunakan “Google Wallet” dalam bahasa Inggris.

Negara	Nama
Belarus	Google Кошелек
Brasil	Carteira do Google
Cile	Billetera de Google
Ceko	Peněženka Google
Yunani	Google Wallet
Hong Kong	Google 錢包
Lituania	Google Piniginė
Polandia	Portfel Google
Portugal	Carteira da Google
Rumania	Portofel Google
Slovakia	Peňaženka Google
Taiwan	Google 錢包
Turki	Google Cüzdan
UEA	Google Wallet
Ukraina	Google Гаманець
Amerika Serikat (Spanyol) *Gunakan nama ini di Amerika Serikat jika UI Anda dalam bahasa Spanyol	Billetera de Google

Ukuran

Sesuaikan tinggi dan lebar tombol Tambahkan ke Google Wallet agar sesuai dengan tata letak Anda. Jika ada tombol lain di halaman, tombol Tambahkan ke Google Wallet harus berukuran sama atau lebih besar. Jangan membuat tombol Tambahkan ke Google Wallet lebih kecil daripada tombol lainnya.

Gaya

Tombol Tambahkan ke Google Wallet tersedia dalam dua variasi: utama dan ringkas. Tombol Tambahkan ke Google Wallet hanya tersedia dalam warna hitam. Versi tombol yang dilokalkan disediakan. Jangan membuat tombol dengan teks yang dilokalkan sendiri.

Utama	Condensed
Gunakan tombol utama pada latar belakang putih dan terang.	Gunakan tombol ringkas jika tidak ada cukup ruang untuk tombol primer atau lebar penuh.

Ruang kosong

Selalu pertahankan ruang kosong minimum 8 dp di semua sisi tombol Tambahkan ke Google Wallet. Pastikan ruang kosong tidak pernah terganggu oleh grafis atau teks.

Tinggi minimum

Semua tombol Tambahkan ke Google Wallet harus memiliki tinggi minimum 48 dp.

Anjuran dan larangan

Dos	Larangan
Lakukan: Gunakan hanya tombol Tambahkan ke Google Wallet yang disediakan oleh Google.	Jangan: Membuat tombol Tambahkan ke Google Wallet Anda sendiri atau mengubah font, warna, radius tombol, atau padding dalam tombol dengan cara apa pun.
Lakukan: Gunakan gaya tombol yang sama di seluruh situs Anda.	Jangan: Membuat tombol Tambahkan ke Google Wallet lebih kecil daripada tombol lainnya.
Lakukan: Pastikan ukuran tombol Tambahkan ke Google Wallet tetap sama atau lebih besar daripada tombol lainnya.	Jangan: Mengubah warna tombol.
Lakukan: Pertahankan rasio tombol yang sama saat mengubah ukuran tombol Tambahkan ke Google Wallet.	Jangan: Mengubah skala tombol secara bebas.
Lakukan: Gunakan tombol versi yang dilokalkan yang disediakan.	Jangan: Membuat versi tombol yang dilokalkan sendiri.

Praktik terbaik untuk penempatan tombol

Tampilkan tombol Tambahkan ke Google Wallet di layar aplikasi konfirmasi, halaman web, atau email. Lihat praktik terbaik berikut untuk memandu desain UI Anda.

Loyalitas, Kartu voucher, Penawaran

Menampilkan tombol Tambahkan ke Google Wallet di layar konfirmasi. Anda juga dapat menampilkan tombol di situs atau aplikasi, atau menyertakannya dalam email yang relevan.

   

Penggunaan nama produk Google Wallet dalam teks

Anda dapat menggunakan teks untuk menunjukkan kepada pengguna bahwa kartu voucher mereka disimpan ke perangkat mereka.

Gunakan huruf kapital untuk huruf "G" dan "W"

Selalu gunakan "G" besar dan "W" besar yang diikuti dengan huruf kecil untuk merujuk ke Google Wallet. Jangan tulis nama lengkap "Google Wallet" dengan huruf kapital, kecuali jika untuk menyesuaikan gaya tipografi di UI Anda.

Jangan menyingkat Google Wallet

Selalu tulis kata "Google" dan "Wallet".

Mencocokkan gaya di UI Anda

Tetapkan "Google Wallet" dalam font dan gaya tipografi yang sama dengan teks lainnya di UI Anda. Jangan meniru gaya tipografi Google.

Selalu gunakan versi "Google Wallet" yang dilokalkan

Selalu tulis "Google Wallet" dalam teks yang dilokalkan yang disediakan.

Desain

Gunakan kolom height dan size dari tag HTML g:savetoandroidpay untuk mengubah tinggi dan lebar tombol Tambahkan ke Google Wallet. Gunakan spesifikasi textsize=large untuk meningkatkan ukuran teks dan tombol secara signifikan untuk penerapan seluler atau kasus dengan persyaratan UI khusus.

Gunakan theme untuk menyetel warna tombol. Tabel berikut menunjukkan pengaruh setelan ini terhadap tombol Tambahkan ke Google Wallet.

Panduan Pembuatan Kartu

Untuk memastikan kartu Anda terlihat bagus dan berfungsi dengan baik, ikuti panduan berikut untuk batas karakter, notifikasi, warna latar belakang, dan gambar utama.

Warna Latar Belakang Kartu

Anda dapat menetapkan warna latar belakang dengan kolom hexBackgroundColor. Jika Anda tidak menyetel nilai, algoritma akan menganalisis logo, menemukan warna dominan, dan menggunakannya untuk warna latar belakang.

Hindari zona "Cerah" dengan saturasi tinggi (misalnya, hijau neon #00FF00 atau cyan elektrik #00FFFF). Warna ini menyebabkan ketegangan mata yang parah dan menyebabkan teks "berdarah" atau menghilang ke latar belakang. Gunakan salah satu warna yang direkomendasikan.

Warna yang direkomendasikan

Abu-abu tua

#1a1a1a

Abu-abu sedang

#677088

Abu-abu muda

#e8eaed

Putih kekuningan

#f8f9fa

Putih

#ffffff

Merah

#d6322d

Orange

#f78f48

Kuning

#f9bb2d

Hijau

#1e7e3b

Biru

#216acf

Ungu

#9147df

Merah muda terang

#fce8e6

Hijau muda

#e6fffa

Biru muda

#e8f0fe

Gambar utama

Kolom class.heroImage akan muncul sebagai gambar lebar penuh di bawah kolom data kartu Anda.

Pertimbangkan untuk menambahkan gambar jika Anda belum memilikinya. Jika Anda memiliki gambar, pastikan untuk mengikuti spesifikasi di bawah. Jika Anda tidak memilih gambar, kami akan menampilkan gambar pengganti kategori kartu.

Berikut adalah daftar rekomendasi antarmuka pengguna untuk gambar utama:

Panduan	Deskripsi
Jenis file pilihan	PNG. Jika Anda ingin warna latar belakang kartu ditampilkan, gunakan PNG transparan.
Ukuran yang direkomendasikan	1032x812 px
Rasio aspek	1032:812 (sekitar 5:4)
Anjuran dan larangan	Dos Larangan Gunakan foto atau ilustrasi beresolusi tinggi. Sematkan teks ke dalam gambar Anda. Konten ini tidak akan dilokalkan. Sertakan padding 20 dp di bagian atas dan bawah untuk ruang visual. Memastikan konten utama gambar menyentuh bagian atas dan bawah gambar. Gunakan gambar yang berbentuk persegi atau hampir persegi. Gunakan gambar persegi panjang tipis.

Konten

Judul, subjudul, label kolom, & data kolom: Untuk meningkatkan pemahaman pengguna, buat judul dan kolom lainnya sesingkat mungkin. Batas karakter berikut berlaku untuk bahasa Inggris, tetapi akan diterjemahkan ke bahasa lain sehingga menghasilkan pengalaman pengguna yang bervariasi di berbagai perangkat dan wilayah. Jika ragu, sederhanakan konten sambil tetap menyampaikan detail penting.

Kolom	Batas
Label judul	< 47 karakter
Label subtitel	< 88 karakter
Label kolom/judul (mis. Tanggal, Deskripsi, Kelas, Nama penumpang)	< 20 karakter
Label data kolom (misalnya, 19 Okt 2026, Economy Plus)	< 15 karakter

Untuk memastikan keterbacaan, batasi data hingga dua kolom per baris, dan hingga 3 baris jika memungkinkan.

Notifikasi

Kolom	Batas
Judul	< 29 karakter
Isi yang diciutkan	< 40 karakter
Isi yang diperluas	< 80 karakter

Kepatuhan terhadap batas karakter direkomendasikan untuk mencegah pemotongan bagi pengguna dengan perangkat kecil atau ukuran font yang lebih besar. Lihat Notifikasi | Seluler | Android Developers untuk mengetahui informasi selengkapnya.

Logo

Panduan gambar logo

Google Wallet menyamarkan logo Anda ke dalam bentuk lingkaran.

Berikut adalah daftar rekomendasi antarmuka pengguna untuk gambar logo:

Panduan	Deskripsi
Jenis file pilihan	PNG
Ukuran minimum	660 x 660 piksel
Rasio aspek gambar	1:1
Rasio aspek karya seni	1:1
Ukuran piksel sebenarnya	Menskalakan ke ukuran perangkat
Masker lingkaran logo	Logo Anda ditutupi agar sesuai dengan desain lingkaran. Pastikan logo Anda sesuai dengan Area Aman. Jangan membuat mask sebelum logo Anda. Biarkan logo dalam persegi dengan warna latar belakang tanpa batas yang jelas. Logo harus memiliki margin 15% agar tidak terpotong saat ditutupi.

Google Wallet menyamarkan logo Anda ke dalam bentuk lingkaran.

Panduan gambar logo lebar

Gambar logo lebar didukung oleh tiket acara, boarding pass, kartu transportasi umum dengan kode QR, kartu loyalitas, penawaran, kartu voucher, kartu pas generik, dan kartu pas pribadi generik. Berikut adalah daftar rekomendasi antarmuka pengguna untuk gambar logo lebar:

Panduan	Deskripsi
Jenis file	PNG Transparan
Ukuran yang direkomendasikan	1.280 x 400 piksel
Ukuran minimum	400 px untuk tinggi, lebar proporsional (panduan selengkapnya di bagian rasio aspek) Gunakan gambar persegi panjang yang lebar.
Rasio aspek	16:5
Warna	Gunakan warna yang sangat terang dengan kontras tinggi (seperti putih) untuk kartu dengan latar belakang gelap. Gunakan warna yang sangat gelap dengan kontras tinggi (seperti hitam) untuk kartu dengan latar belakang terang.

Gambar tambahan

Kolom *.imageModulesData.mainImage dalam class atau objek muncul sebagai gambar lebar penuh dalam kartu di bawah gambar utama. Hanya gunakan jika kartu Anda memerlukan gambar tambahan agar pengguna lebih memahami kartu tersebut.

Panduan gambar tambahan

Berikut adalah daftar rekomendasi antarmuka pengguna untuk gambar tambahan:

Panduan	Deskripsi
Jenis file pilihan	PNG
Ukuran minimum	Lebar 1860 px, tinggi bervariasi. Gunakan gambar persegi panjang yang lebar. Gunakan gambar dengan latar belakang berwarna untuk mendapatkan hasil terbaik.
Ukuran tampilan	Lebar penuh template, dan tinggi proporsional.

Gambar kode batang

Vertical tertentu mengizinkan gambar di atas dan di bawah kode batang.

Gambar di atas kode batang

Berikut adalah daftar rekomendasi antarmuka pengguna untuk gambar di atas kode batang:

Panduan	Deskripsi
Jenis file pilihan	PNG
Tinggi maksimum	20 dp (pada rasio aspek maksimum) Ukuran yang direkomendasikan adalah tinggi 80 px dan lebar 80-780 px jika ada dua gambar. Dengan begitu, keduanya dapat ditampilkan berdampingan. Jika salah satu gambar berbentuk persegi dan yang lainnya berbentuk persegi panjang, maka gambar tersebut harus berukuran 80x80 px dan 780x80 px.
Rasio aspek	Tidak dibatasi. Untuk tinggi dan lebar maksimum 20 dp dari satu gambar, gunakan rasio aspek 20:1. Jika Anda hanya menginginkan satu gambar di atas kode batang, ambil lebar penuh (tidak termasuk padding). Gambar harus berukuran 1600x80 px.
Ukuran tampilan maksimum (gambar tunggal)	Tinggi 20 dp dan lebar 400 dp

Gambar di bawah kode batang

Berikut adalah daftar rekomendasi antarmuka pengguna untuk gambar di bawah kode batang:

Panduan	Deskripsi
Jenis file pilihan	PNG
Tinggi maksimum	20 dp (pada rasio aspek maksimum) Ukuran yang direkomendasikan adalah tinggi 80 px dan lebar 80-1600 px. Jika persegi, 80x80 piksel. Jika persegi panjang, 1600x80 piksel.
Rasio aspek tidak dibatasi. Untuk tinggi dan lebar maksimum 20 dp, gunakan rasio aspek 20:1.	Jika Anda menginginkan gambar lebar penuh (tidak termasuk padding), gambar harus berukuran 1.600x80 piksel.
Ukuran tampilan maksimum adalah tinggi 20 dp dan lebar 400 dp.

Modul

Modul merepresentasikan sekelompok kolom di bagian tertentu dalam template. Tabel berikut berisi panduan untuk jumlah modul yang harus Anda sertakan dalam class dan objek untuk memastikan kartu Anda ditampilkan dengan benar di aplikasi Google Wallet.

Panduan	Deskripsi
imageModulesData	Gunakan hanya satu imageModulesData baik di class maupun di objek yang Anda buat.
infoModuleData	Gunakan hingga dua infoModuleData, baik di class Anda maupun di objek yang Anda buat. infoModuleData dapat menentukan informasi khusus akun pengguna seperti "Nama Anggota" dan "Nomor Keanggotaan".
linksModuleData	Gunakan total hingga empat URI linksModuleData di kelas Anda atau di objek yang Anda buat. Anda mungkin memiliki dua URI linksModuleData di class Anda; satu untuk URI situs Anda dan satu untuk nomor telepon pusat bantuan Anda. Dua URI linksModuleData di objek Anda dapat menentukan URI khusus akun pengguna dan lokasi terdekat.
textModulesData	Gunakan hingga dua kolom textModulesData antara class dan objek yang Anda buat. Anda mungkin memiliki satu URI textModuleData di class yang menentukan detail program dan textModulesData lainnya di objek yang menentukan detail khusus akun pengguna.

infoModuleData

InfoModuleData berisi informasi anggota dan yang dapat disesuaikan dan muncul dalam tampilan yang diperluas. Gunakan modul ini untuk menyimpan informasi seperti tanggal habis masa berlaku, saldo poin kedua, atau saldo nilai tersimpan.

linksModuleData

Modul link berisi URI ke halaman web, nomor telepon, dan alamat email. Berikut adalah daftar rekomendasi antarmuka pengguna untuk modul link:

Panduan	Contoh setelan	Contoh gambar
Gunakan awalan http: saat Anda menetapkan URI ke situs atau lokasi di Google Maps. Dengan awalan ini, konsumen dapat menyentuh link dan membuka situs atau melihat lokasi di Google Maps. Awalan ini juga menyebabkan ikon link atau peta di depan deskripsi di kartu Anda.	'uri': 'http://maps.google.com/?q=google'
	'uri': 'http://developer.google.com/wallet/'
Gunakan awalan tel: saat Anda menentukan nomor telepon. Awalan ini memungkinkan konsumen menyentuh link untuk menghubungi nomor tersebut. Awalan ini juga membuat ikon telepon di depan deskripsi teks pada kartu.	'uri': 'tel:6505555555'
Gunakan awalan mailto: saat Anda menentukan alamat email. Awalan ini memungkinkan konsumen menyentuh link untuk mengirim email ke alamat tersebut. Awalan ini juga membuat ikon email di depan deskripsi teks pada kartu.	'uri': 'mailto:jonsmith@email.com'

Judul, label, dan nama

Tulis judul, label, dan nama dalam kapitalisasi judul, sehingga setiap kata dimulai dengan huruf kapital.

Kebijakan konten

Konten setiap kolom dalam Kartu harus mematuhi kebijakan konten Pembayaran. Isi situs yang Anda referensikan dalam class juga harus mematuhi kebijakan ini.

Penempatan data platform partner

Untuk memastikan pengguna dapat mengakses aplikasi atau situs Anda yang kaya fitur tentang Kartu, pastikan untuk menyertakan deep link aplikasi atau situs Anda di properti linksModuleData.*class atau linksModuleData.*object Kartu. Hal ini memungkinkan pengguna membuka platform Anda dari Kartu, yang muncul di Google Wallet. Untuk melihat cara merendernya, buka bagian desain Pass verticals.