Antarmuka pengguna (UI) Konfirmasi Terlindungi terdiri dari enam elemen yang diperlukan. Beberapa elemen dapat disesuaikan, tetapi ada persyaratan yang perlu diikuti. Gunakan panduan berikut saat menyesuaikan UI dan pastikan persyaratan terpenuhi. Jika elemen ditandai dengan Persyaratan: elemen tersebut harus menggunakan properti yang tercantum.
Panduan berikut menggunakan jenis font Roboto, yang dapat Anda download dari fonts.google.com.
UI dengan tombol fisik
Konfirmasi Terlindungi Android dapat menggunakan tombol hardware di perangkat untuk mengonfirmasi dan membatalkan input.
Ikon
Ikon perisai
| Ikon |  |
|---|---|
| Download | Perisai keamanan |
| Ukuran ikon | 32dp |
Ikon Panah
| Ikon |  |
|---|---|
| Download | Panah kanan keyboard |
| Ukuran ikon | 24dp |
| Radius sudut penampung | 4dp |
Pesan input
Ada dua jenis input yang digunakan di Konfirmasi Terlindungi: confirm dan cancel.
String konfirmasi
Pesan ini harus menunjukkan tombol mana yang digunakan sebagai konfirmasi.
| Pesan | Tekan dua kali (tombol) untuk mengonfirmasi |
|---|---|
| Panjang maksimum | Persyaratan: Pesan konfirmasi tidak boleh lebih dari dua baris. |
| Warna | #000000 87% |
| Tampilan font | Roboto-Medium |
| Ukuran font | Persyaratan: 14sp |
| Tinggi baris | Persyaratan: 20dp |
Batalkan string
Pesan batal harus terlihat jelas dan mudah dibedakan dari tombol konfirmasi. Gunakan properti berikut beserta satu kata Cancel.
| Pesan | Batal |
|---|---|
| Warna | #000000 87% |
| Tampilan font | Roboto-Medium |
| Ukuran font | Persyaratan: 14sp |
| Tinggi baris | Persyaratan: 20dp |
Teks header
Sertakan teks header Android Protected Confirmation di Trusted UI untuk mengidentifikasi fitur. Gunakan properti berikut untuk teks header.
| Pesan | Persyaratan: Konfirmasi Dilindungi Android |
|---|---|
| Warna | #000000 87% |
| Tampilan font | Roboto-Regular |
| Ukuran font | Persyaratan: 22sp |
| Tinggi baris | Persyaratan: 28dp |
Isi teks
Gunakan properti berikut saat menerapkan elemen teks isi. Pesan yang sebenarnya ditulis oleh developer API (developer aplikasi).
| Pesan | Teks isi disediakan oleh developer aplikasi yang memanggil Konfirmasi Terlindungi. |
|---|---|
| Warna | #000000 87% |
| Tampilan font | Roboto-Regular |
| Ukuran font | Persyaratan: 16sp |
| Tinggi baris | Persyaratan: 24dp |
Teks subheader
Gunakan teks subheader untuk menjelaskan alasan pengguna melihat layar Konfirmasi Terlindungi. Tempatkan teks ini di bagian bawah layar dan gunakan properti berikut.
| Pesan | Persyaratan: Konfirmasi ini memberikan lapisan keamanan tambahan untuk tindakan yang akan Anda lakukan. |
|---|---|
| Panjang maksimum | Persyaratan: Pesan konfirmasi tidak boleh lebih dari empat baris. |
| Warna | #000000 87% |
| Tampilan font | Roboto-Regular |
| Ukuran font | Persyaratan: 14sp |
| Tinggi baris | Persyaratan: 20dp |
UI dengan tombol software
Konfirmasi Terlindungi Android dapat menggunakan tombol software untuk mengonfirmasi dan membatalkan input. Panduan berikut menjelaskan UI menggunakan tombol software.
Ikon perisai
Download aset ikon di Ikon Perisai Konfirmasi yang Dilindungi Android. Tempatkan ikon di bagian atas layar.
Ikon perisai Konfirmasi Terlindungi adalah elemen wajib. Warna perisai dapat disesuaikan, tetapi harus terlihat jelas.
Input
Gunakan bentuk tombol utama dan sekunder untuk konfirmasi dan input batal.
| Label tombol | Gunakan kapitalisasi kalimat untuk label tombol. |
|---|---|
| Radius tombol | 4dp |
| Warna aksen | #1a73e8 |
| Tampilan font | Roboto-Medium |
| Ukuran font | Persyaratan: 14sp |
Teks header
Sertakan teks header Android Protected Confirmation di Trusted UI untuk mengidentifikasi fitur. Gunakan properti berikut untuk teks header.
| Pesan | Persyaratan: Konfirmasi Dilindungi Android |
|---|---|
| Warna | #000000 87% |
| Tampilan font | Roboto-Medium |
| Ukuran font | Persyaratan: 24sp |
| Tinggi baris | Persyaratan: 20dp |
Isi teks
Gunakan properti berikut saat menerapkan elemen teks isi. Pesan yang sebenarnya ditulis oleh developer aplikasi.
| Pesan | Teks isi disediakan oleh developer aplikasi yang memanggil Konfirmasi Terlindungi |
|---|---|
| Warna | #000000 87% |
| Tampilan font | Roboto-Medium |
| Ukuran font | Persyaratan: 16sp |
| Tinggi baris | Persyaratan: 24dp |
Teks subheader
Gunakan teks subheader untuk menjelaskan alasan pengguna melihat layar Konfirmasi Terlindungi. Tempatkan teks ini di bagian bawah layar dan gunakan properti berikut.
| Pesan | Persyaratan: Konfirmasi ini memberikan lapisan keamanan tambahan untuk tindakan yang akan Anda lakukan. |
|---|---|
| Panjang maksimum | Persyaratan: Pesan konfirmasi tidak boleh lebih dari empat baris. |
| Warna | #000000 54% |
| Tampilan font | Roboto-Medium |
| Ukuran font | Persyaratan: 14sp |
| Tinggi baris | Persyaratan: 20dp |
Pelokalan
Anda dapat menemukan pelokalan untuk komponen yang dijelaskan dalam implementasi C mandiri dari tabel pencarian sebagai bagian dari AOSP.