Ringkasan
Panduan ini disediakan bagi developer yang berpartisipasi dalam program kami untuk menawarkan penagihan alternatif kepada pengguna di Wilayah Ekonomi Eropa (EEA) ke sistem penagihan Google Play tanpa pilihan pengguna. Developer dengan pengguna di EEA yang berpartisipasi dalam uji coba penagihan sesuai pilihan pengguna dan menawarkan sistem penagihan alternatif bersama sistem penagihan Google Play harus menggunakan panduan UX penagihan sesuai pilihan pengguna. Panduan UX ini bertujuan untuk mempertahankan pengalaman pengguna yang konsisten dengan mengharuskan developer menampilkan layar informasi kepada setiap pengguna saat pengguna pertama kali memulai pembelian. Pesan yang ditampilkan kepada pengguna dan spesifikasi UI untuk layar informasi harus diterapkan sesuai dengan panduan berikut.
Aplikasi developer |
Layar informasi untuk pengguna |
Pilih bahasa
Pilih bahasa pengguna untuk melihat string teks UI yang sesuai dalam spesifikasi desain berikut.
- Tampilkan semua bahasa
- Pilih bahasa
- Bulgaria
- Katala
- Kroasia
- Ceko
- Denmark
- Belanda
- Inggris
- Estonia
- Finlandia
- Prancis
- Jerman
- Yunani
- Magyar
- Islandia
- Italia
- Latvia
- Lituania
- Norsk
- Polandia
- Portugis (Brasil)
- Portugis (Eropa)
- Rumania
- Slovakia
- Slovenia
- Spanyol
- Swedia
Informasi untuk pengguna
Layar informasi membantu pengguna memahami dampak perubahan.
Kapan menampilkan
Layar informasi harus ditampilkan kepada pengguna di awal pembelian pertama mereka. Pesan ini tidak perlu ditampilkan pada pembelian berikutnya oleh pengguna yang sama. Tampilkan layar informasi segera setelah pengguna melakukan tindakan eksplisit untuk memulai pembelian.
Kapan menampilkan harga
Harga pembelian harus dapat dilihat dan jelas bagi pengguna sebelum layar informasi ditampilkan.
Cara menampilkan
Layar informasi harus ditampilkan di sheet bawah modal. Sheet bawah modal mirip dengan dialog modal yang bergerak ke atas dari bagian bawah layar dan tetap tersemat di bawah. Sheet ini melayang di atas semua elemen UI di layar utama. Layar di bawahnya diburamkan dengan scrim gelap untuk menunjukkan bahwa layar itu tidak akan merespons interaksi pengguna.
Lihat Desain Material Google untuk informasi selengkapnya tentang desain dan implementasi sheet bawah modal.
Tindakan pengguna
Sheet bawah harus dipicu saat pengguna mengetuk tombol atau elemen UI lain dalam aplikasi Anda yang memulai pembelian. Pengguna dapat melakukan dua kemungkinan tindakan dari layar informasi:
Oke
Mengetuk tombol "Oke" akan menutup layar informasi dan meluncurkan layar berikutnya dalam alur pembayaran Anda.
Pelajari lebih lanjut
Mengetuk tombol "Pelajari lebih lanjut" akan meluncurkan artikel Pusat Bantuan Google di browser web.
Tutup
Jika ingin menutup sheet bawah dan kembali ke layar di bawahnya, pengguna dapat menutup sheet bawah dengan:
- Mengetuk di luar penampung sheet bawah
- Mengetuk tombol "Kembali" sistem Android
Layar informasi tidak perlu ditampilkan lagi setelah ditutup atau setelah pengguna mengetuk “Oke”.
Contoh: Saat pengguna mengetuk untuk membeli di aplikasi Anda, tombol akan memicu layar informasi.
Spesifikasi desain
Layar informasi dibagi menjadi tiga komponen: judul, pesan, dan tombol. Ketiga komponen tersebut wajib ada dan harus berisi elemen teks dan UI yang sama persis seperti yang ditentukan dalam panduan ini. Jangan sertakan teks atau gambar tambahan di layar ini, tetapi Anda dapat menyertakan teks dan gambar tambahan ke layar lainnya.
- Judul
- Teks 1
- Teks 2
- Tombol
- Sheet bawah
- Scrim latar belakang
Judul
| Teks |
Pilih bahasa
|
| Font | Roboto (berlaku untuk semua font) |
| Ukuran font | 18sp |
| Warna font | #202124 |
Teks 1
Digunakan untuk menyoroti poin utama yang dianggap sebagai informasi penting.
| Teks |
Pilih bahasa
|
| Ukuran font | 14sp |
| Tinggi baris | 20 |
| Warna font | #5F6368 |
Teks 2
Digunakan untuk informasi sekunder yang memiliki prioritas lebih rendah.
| Teks |
Pilih bahasa
|
| Ukuran font | 12sp |
| Tinggi baris | 16 |
| Warna font | #5F6368 |
Tombol 1
| Teks |
Pilih bahasa
|
| Perataan teks | Tengah |
| Ukuran font | 14sp |
| Ketebalan font | Medium |
| Warna font | #01875F |
| Warna latar belakang | #FFFFFF |
| Dimensi | Tinggi: 36, Lebar: menyesuaikan ruang |
| Radius sudut | 4dp |
| Garis batas | 1dp, #DADCE0 |
| Link | Link ke artikel bantuan Google Play |
Tombol 2
| Teks |
Pilih bahasa
|
| Perataan teks | Tengah |
| Ukuran font | 14sp |
| Ketebalan font | Medium |
| Warna font | #FFFFFF |
| Warna latar belakang | #01875F |
| Dimensi | Tinggi: 36, Lebar: menyesuaikan ruang |
| Radius sudut | 4dp |
| Link | Link ke layar berikutnya di alur pembayaran Anda |
Sheet bawah
| Dimensi | Tinggi: bervariasi, Lebar: 100% |
| Radius sudut | 8dp, 8dp, 0, 0 |
| Latar belakang | #FFFFFF |
| Padding dalam | Kiri: 24dp, Kanan: 24dp, Atas: 32dp, Bawah: 24dp |
| Elevasi | 8dp |
Lanskap
Sheet bawah tampilan lanskap lebih lebar daripada tampilan potret, tetapi mengikuti spesifikasi dan fungsi desain yang sama.
| Sheet bawah | Lebar: maksimum 500dp, Padding dalam: 24dp |
| Judul | Sama dengan tampilan potret |
| Pesan | Sama dengan tampilan potret |
| Tombol | Tinggi: 36, Lebar: menyesuaikan ruang |
Untuk mengetahui detail tambahan tentang program EEA untuk penagihan alternatif tanpa pilihan pengguna dan pertanyaan umum (FAQ), harap kunjungi Pusat Bantuan kami.