Reminder: By Aug 31, 2024, all new apps and updates to existing apps must use Billing Library version 6 or newer. If you need more time to update your app, you will be able to request an extension until Nov 1, 2024. Learn more.

Halaman ini diterjemahkan oleh Cloud Translation API.

Panduan UX sementara untuk sistem penagihan dalam aplikasi alternatif

Ringkasan

Untuk mempertahankan pengalaman pengguna yang konsisten dan untuk membantu pengguna membuat pilihan yang tepat, Anda harus menampilkan layar informasi dan layar pilihan penagihan terpisah jika menawarkan sistem penagihan dalam aplikasi selain sistem penagihan Google Play. Layar informasi hanya perlu ditampilkan kepada setiap pengguna saat pengguna pertama kali memulai pembelian, sementara layar pilihan penagihan harus ditampilkan sebelum setiap pembelian. Pesan yang ditampilkan kepada pengguna dan spesifikasi UI untuk kedua layar harus diterapkan sesuai dengan panduan berikut.

Informasi untuk pengguna

Layar informasi membantu pengguna memahami konteks perubahan dan memberikan informasi lebih lanjut untuk membantu mereka membuat pilihan yang tepat.

Kapan menampilkan

Layar informasi harus ditampilkan kepada pengguna di awal pembelian pertama setelah Anda menambahkan sistem penagihan alternatif dalam aplikasi. 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 atau layar pilihan penagihan 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.

Sheet bawah harus dipicu saat pengguna mengetuk tombol atau elemen UI lain dalam aplikasi Anda yang memulai pembelian. Pengguna dapat melakukan tiga kemungkinan tindakan dari layar informasi:

Lanjutkan

Mengetuk tombol "Lanjutkan" akan menutup layar informasi dan meluncurkan layar pilihan penagihan.

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 batas sheet bawah
Mengetuk tombol "Kembali" sistem Android

Layar informasi tidak perlu ditampilkan lagi setelah ditutup atau setelah pengguna mengetuk “Lanjutkan”.

Contoh: Harga pembelian ditampilkan dengan jelas sebelum pengguna memulai pembelian. Mengetuk tombol "gabung sekarang" akan memicu layar informasi.

layar informasi pengguna

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.

layar opsi checkout yang menunjukkan posisi komponen wajib

Judul
Pesan
Tombol
Sheet bawah
Scrim latar belakang

Judul

Teks	Perubahan pada opsi checkout
Font	Roboto (berlaku untuk semua font)
Ukuran font	18sp
Warna font	#202124

Pesan

Teks 1	Saat ini, Anda memiliki lebih banyak opsi terkait checkout karena adanya perubahan peraturan terbaru di Korea Selatan. Pilihan Anda akan menentukan: Siapa yang mengamankan pembelian Anda, memproses pembayaran Anda, dan menyimpan setiap informasi pembayaran Yang memberikan dukungan pelanggan untuk pembelian Metode pembayaran yang dapat Anda gunakan Manfaat apa saja yang tersedia dengan pembelian Anda
Ukuran font	14sp
Tinggi baris	20
Warna font	#5F6368
Teks 2	Hanya pembelian melalui Google Play yang dijamin oleh Google. Fitur Play seperti kartu voucher Play, Play Points, kontrol pembelian, dan pengelolaan langganan hanya tersedia jika Anda memilih Google Play saat melakukan checkout.
Ukuran font	12sp
Tinggi baris	16
Warna font	#5F6368

Tombol 1

Teks	Pelajari lebih lanjut
Perataan teks	Tengah
Ukuran font	14sp
Ketebalan font	Sedang
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	Lanjutkan
Perataan teks	Tengah
Ukuran font	14sp
Ketebalan font	Sedang
Warna font	#FFFFFF
Warna latar belakang	#01875F
Dimensi	Tinggi: 36, Lebar: menyesuaikan ruang
Radius sudut	4dp
Tautkan	Link ke Layar pilihan penagihan

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.

layar opsi checkout dalam mode lanskap

Sheet bawah	Lebar: maksimum 500dp, Padding dalam: 24dp
Judul	Sama dengan tampilan potret
Pesan	Sama dengan tampilan potret
Tombol	Tinggi: 36, Lebar: menyesuaikan ruang

Layar pilihan penagihan

Layar pilihan penagihan memberi pengguna dua opsi checkout untuk menyelesaikan pembelian. Untuk membantu pengguna membuat keputusan yang tepat, setiap opsi layanan penagihan juga menampilkan metode pembayaran yang tersedia. Setelah pengguna menentukan pilihan, mereka akan menyelesaikan pembelian melalui layanan penagihan tersebut.