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 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, Kazakh, 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 lain.
Lakukan: Pastikan ukuran tombol Tambahkan ke Google Wallet tetap sama dengan 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: Menskalakan 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 penawaran mereka disimpan ke perangkat mereka.

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

Selalu gunakan "G" besar dan "W" besar, 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 salinan 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.

Catatan: Atribut text tidak digunakan lagi. Tombol dirender sama, terlepas dari vertikal tertentu.

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 disamarkan agar sesuai dengan desain melingkar. Pastikan logo Anda sesuai dengan Area Aman. Jangan membuat masking awal pada logo Anda. Biarkan logo dalam persegi dengan warna latar belakang penuh dari sisi ke sisi. 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 pilihan	PNG Gunakan gambar dengan warna latar belakang untuk hasil terbaik (sebaiknya gunakan warna yang sama dengan warna latar belakang kartu Anda)
Ukuran yang direkomendasikan	1.280 x 400 piksel
Ukuran minimum	400 px untuk tinggi, lebar proporsional (panduan selengkapnya di bagian rasio aspek yang direkomendasikan) Gunakan gambar persegi panjang yang lebar.
Rasio aspek yang direkomendasikan	Jika gambar tidak disetel ke rasio aspek yang direkomendasikan, ukurannya akan diubah agar sesuai dengan rasio aspek ruang header yang disediakan. Diagram di bawah menjelaskan cara aset gambar diubah ukurannya berdasarkan rasio aspek.

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.

Gambar utama

Kolom class.heroImage muncul sebagai banner lebar penuh di seluruh isi kartu.

Panduan gambar utama

Berikut adalah daftar rekomendasi antarmuka pengguna untuk gambar utama:

Panduan	Deskripsi
Jenis file pilihan	PNG
Ukuran yang direkomendasikan	1032x336 px Gunakan gambar persegi panjang yang lebar. Gunakan gambar dengan latar belakang berwarna untuk mendapatkan hasil terbaik.
Rasio aspek	3:1 atau lebih lebar
Ukuran tampilan	Lebar penuh kartu dan tinggi proporsional.

Gambar lebar penuh

Kolom *.imageModulesData.mainImage dalam class atau objek muncul sebagai gambar lebar penuh dalam kartu.

Panduan gambar lebar penuh

Berikut adalah daftar rekomendasi antarmuka pengguna untuk gambar lebar penuh:

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.
Rasio aspek	Variabel
Ukuran tampilan	Lebar penuh template, dan tinggi proporsional.
Gunakan skema warna yang sama dengan yang Anda gunakan untuk logo Anda.

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. Hal ini memungkinkan keduanya 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 px.
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 1600x80 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 hingga total 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 di tampilan yang diperluas. Gunakan modul ini untuk menyimpan informasi seperti tanggal habis masa berlaku, saldo poin kedua, atau saldo nilai tersimpan.

Catatan: Kami hanya menggunakan satu kolom untuk mencantumkan modul info.

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. Awalan ini juga membuat ikon telepon di depan deskripsi teks pada kartu.	'uri': 'tel:[phone]'
Gunakan awalan mailto: saat Anda menentukan alamat email. Dengan awalan ini, konsumen dapat menyentuh link untuk mengirim email ke alamat tersebut. Awalan ini juga membuat ikon email di depan deskripsi teks pada kartu.	'uri': 'mailto:[e-mail]'

Heading, label, dan nama

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

Kebijakan konten

Isi setiap kolom dalam Kartu harus mematuhi Kebijakan konten pembayaran. Isi situs yang Anda referensikan di 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.

Catatan: Pastikan deep link mengarahkan pengguna untuk menginstal aplikasi Anda di Play Store, jika mereka masih perlu menginstalnya. Deep link yang ditangguhkan yang mengarahkan pengguna ke detail Kartu yang relevan setelah penginstalan dan login lebih disukai.