Pedoman brand

Jika Anda mengembangkan aplikasi untuk pengguna di RU, harap gunakan tombol “Simpan ke ponsel” karena Google Wallet tidak tersedia di negara-negara tersebut. Lihat aset dan panduan yang relevan. Jika Anda mengembangkan aplikasi untuk pengguna di luar RU, perbarui tombol Add to Google Wallet dengan mendownload aset di bawah.

Bagian dokumentasi ini didesain 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 atau kartu dari aplikasi atau situs Anda ke dompet 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 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 Android XML, SVG, dan PNG.

Download aset - XML Android Download aset - SVG Download aset - PNG

Tombol Lihat di Google Wallet

Tombol Lihat di Google Wallet digunakan untuk melakukan deep link bagi pengguna ke dompet mereka untuk melihat kartu atau tiket 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 brand yang dijelaskan di halaman ini. Contoh pedoman ini mencakup, tetapi tidak terbatas pada, berikut ini:

  • Ukuran relatif terhadap tombol atau elemen serupa lainnya pada 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 melakukan pengembangan untuk pengguna di pasar-pasar ini, selalu gunakan tombol yang ditautkan di atas. Jangan membuat versi tombol sendiri. Jika versi tombol yang dilokalkan tidak tersedia di pasar Anda, gunakan tombol versi bahasa Inggris.

Tombol Tambahkan ke Google Wallet tersedia di Albania Swedia, Arab Saudi, Armenia, Azerbaijan, Bosnia, Bulgaria, Katalan, China (Hong Kong), China (Aksara Tradisional), Kroasia, Ceko, Denmark, Belanda, Inggris (India, Singapura, Afrika Selatan, Australia, Kanada, Britania Raya, Amerika Serikat), Estonia, Prancis, Filipina

Nama yang dilokalkan

Agar lebih jelas bagi pengguna, 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 ini untuk web, email, dan media cetak. Jangan membuat versi lokal dari "Google Wallet". Jika pasar Anda tidak tercantum di bawah, gunakan “Google Wallet” dalam bahasa Inggris.

Negara Nama
Belarus Google Кошелек
Brasil Carteira do Google
Cile Billetera Google
Ceko Pen?Google
Yunani ᠐퐑 rentang ( siap ) Google
Hong Kong Google 錢包
Lituania Pinigin Google
Polandia Google Portfel
Portugal Karteira dan Google
Rumania Google Portofel
Slovakia Pe!!
Taiwan Google 錢包
Turkiye Google Cüzdan
UEA محفظة Google
Ukraina Google dekoder
Amerika Serikat (Spanyol)
*Gunakan nama ini di AS jika UI Anda berbahasa Spanyol
Billetera Google

Ukuran

Sesuaikan tinggi dan lebar tombol Tambahkan ke Google Wallet agar sesuai dengan tata letak Anda. Jika ada tombol lain di halaman tersebut, 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 berwarna hitam. Versi tombol yang dilokalkan disediakan. Jangan membuat tombol dengan teks Anda sendiri yang dilokalkan.

Utama Condensed
Tombol Tambahkan ke Google Wallet utama Tombol Tambahkan ke Google Wallet yang diringkas
Gunakan tombol utama dengan latar belakang putih dan terang. Gunakan tombol ringkas jika tidak ada cukup ruang untuk lebar utama atau lebar penuh.

Ruang kosong

Selalu pertahankan ruang kosong minimum 8 dp di semua sisi tombol Add to Google Wallet. Pastikan ruang kosong tidak pernah rusak dengan gambar atau teks.

Tambahkan ke tombol Google Wallet harus memiliki ruang sebesar 8 dp di semua sisi.

Tinggi minimum

Semua tombol Add to Google Wallet harus memiliki tinggi minimum 48 dp.

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

Anjuran dan larangan

Anjuran Larangan
Lakukan: Hanya gunakan tombol Tambahkan ke Google Wallet yang disediakan oleh Google. Jangan lakukan: Membuat tombol Tambahkan ke Google Wallet Anda sendiri atau mengubah font, warna, radius tombol, atau padding di dalam tombol dengan cara apa pun.
Anjuran: Gunakan gaya tombol yang sama di seluruh situs Anda. Jangan lakukan: Membuat tombol Tambahkan ke Google Wallet lebih kecil dari tombol lainnya.
Lakukan: Pastikan ukuran tombol Tambahkan ke Google Wallet tetap sama dengan atau lebih besar daripada tombol lainnya. Jangan lakukan: Mengubah warna tombol.
Lakukan: Pertahankan rasio tombol yang sama saat mengubah ukuran tombol Add to Google Wallet. Jangan lakukan: Menskalakan tombol secara bebas.
Lakukan: Menggunakan versi tombol yang dilokalkan dan disediakan. Jangan lakukan: Membuat versi tombol yang dilokalkan.

Praktik terbaik untuk penempatan tombol

Tampilkan tombol Add to 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 Anda, atau menyertakannya dalam email yang relevan.

Kartu voucher     Kartu loyalitas kopi

Penggunaan nama produk Google Wallet dalam teks

Anda dapat menggunakan teks untuk menunjukkan kepada pengguna bahwa kartu loyalitas mereka disimpan ke perangkatnya.

Gunakan huruf besar pada huruf "G" dan "W"

Selalu gunakan huruf besar "G" dan "W" dalam huruf besar diikuti dengan huruf kecil untuk merujuk ke Google Wallet. Jangan gunakan huruf besar untuk nama lengkap "Google Wallet", kecuali agar sesuai dengan gaya tipografi di UI Anda.

Jangan menyingkat Google Wallet

Selalu tuliskan kata "Google" dan "Wallet".

Cocokkan gaya di UI Anda

Setel "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" di salinan yang dilokalkan dan 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 implementasi atau kasus seluler dengan persyaratan UI khusus.

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

Banner besar

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

Panduan banner besar

Berikut adalah daftar rekomendasi antarmuka pengguna untuk banner besar:

Pedoman Deskripsi
Jenis file yang diinginkan 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.

Ukuran tampilan harus menggunakan rasio aspek 3 banding 1, atau yang lebih lebar.

Gambar lebar penuh

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

Panduan gambar lebar penuh

Berikut adalah daftar rekomendasi antarmuka pengguna untuk gambar lebar penuh:

Pedoman Deskripsi
Jenis file yang diinginkan PNG
Ukuran minimum

Lebar 1860 px, tinggi variabel.

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.

Ukuran tampilan harus menggunakan rasio aspek 3 banding 1, atau yang lebih lebar.
Gunakan skema warna yang sama dengan yang digunakan untuk logo Anda.

Gambar kode batang

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

Gambar di atas kode batang

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

Panduan Deskripsi
Jenis file yang diinginkan PNG
Tinggi maksimum

20 dp (pada rasio aspek maksimum)

Ukuran yang direkomendasikan adalah tinggi 80 piksel dan lebar 80-780 piksel jika ada dua gambar. Hal ini memungkinkan keduanya berdampingan.

Jika satu gambar berbentuk persegi dan gambar lainnya berbentuk persegi panjang, gambar harus berukuran 80x80 px dan 780x80 px.

Rasio aspek

Tidak dibatasi. Untuk tinggi dan lebar maksimum 20 dp satu gambar, gunakan rasio aspek 20:1.

Jika Anda hanya menginginkan satu gambar di atas kode batang, ambil lebar penuh (kecualikan padding). Gambar harus berukuran 1600x80 px.

Ukuran tampilan maksimum (gambar tunggal) Tinggi 20 dp dan lebar 400 dp

Gambar di bawah kode batang

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

Panduan Deskripsi
Jenis file yang diinginkan PNG
Tinggi maksimum

20 dp (pada rasio aspek maksimum)

Ukuran yang direkomendasikan adalah tinggi 80 px dan lebar 80-1600 px.

Jika persegi, berukuran 80x80 px.

Jika persegi panjang, berukuran 1600x80 px.

Rasio aspek tidak dibatasi. Untuk tinggi dan lebar maksimum 20 dp, gunakan rasio aspek 20:1. Jika Anda menginginkan gambar dengan lebar penuh (tidak termasuk padding), gambar harus berukuran 1600x80 px.
Ukuran tampilan maksimum adalah tinggi 20 dp dan lebar 400 dp.  

Modul

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

Pedoman Deskripsi
imageModulesData Hanya gunakan satu imageModulesData baik di class Anda maupun di objek yang Anda buat.
infoModuleData

Gunakan maksimum 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 baik di class maupun di objek yang Anda buat.

Anda mungkin memiliki dua URI linksModuleData di class; satu untuk URI untuk situs dan satu lagi untuk nomor telepon untuk pusat bantuan. Dua URI linksModuleData dalam objek Anda mungkin menentukan URI khusus akun pengguna dan lokasi terdekat.

textModulesData

Gunakan maksimum 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 dalam objek yang menentukan detail spesifik per akun pengguna.

infoModuleData

InfoModuleData berisi informasi anggota dan informasi yang dapat disesuaikan, serta muncul dalam tampilan yang diluaskan. Gunakan modul ini untuk menyimpan informasi seperti tanggal habis masa berlaku, saldo poin kedua, atau saldo nilai yang 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. Awalan ini memungkinkan konsumen menyentuh link dan membuka situs atau melihat lokasi di Google Maps. Awalan ini juga menimbulkan ikon link atau peta di depan deskripsi pada kartu Anda. 'uri': 'http://maps.google.com/?q=google' Indikator pin untuk lokasi peta.
'uri': 'http://developer.google.com/wallet/' Indikator globe untuk situs.
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' Indikator telepon untuk link telepon.
Gunakan awalan mailto: saat Anda menentukan alamat email. Awalan ini memungkinkan konsumen menyentuh link untuk mengirim email ke alamat tersebut. Awalan ini juga akan membuat ikon email di depan deskripsi teks pada kartu. 'uri': 'mailto:jonsmith@email.com' Indikator email bagi link untuk mengirim email.

Heading, label, dan nama

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

Kebijakan konten

Konten setiap kolom dalam Kartu harus mematuhi Kebijakan konten pembayaran. Konten situs yang Anda rujuk di kelas juga harus mematuhi kebijakan ini.

Penempatan data platform partner

Untuk memastikan pengguna dapat membuka aplikasi atau situs Anda yang kaya fitur tentang Kartu, pastikan untuk memasukkan deep link atau situs aplikasi Anda di properti linksModuleData.* objek atau class Pass. Tindakan ini memungkinkan pengguna membuka platform Anda dari Kartu, yang muncul di Google Wallet. Untuk melihat bagaimana renderingnya, buka bagian desain vertical Pass.