Antarmuka pengguna (UI) Konfirmasi Dilindungi terdiri dari enam elemen yang diperlukan. Anda dapat menyesuaikan beberapa elemen, tetapi elemen tersebut harus memenuhi beberapa persyaratan. Gunakan panduan berikut saat menyesuaikan UI dan pastikan persyaratan terpenuhi. Jika suatu elemen ditandai dengan Persyaratan: elemen tersebut harus menggunakan properti yang tercantum.
Panduan berikut menggunakan jenis font Roboto, yang dapat Anda download dari Google Fonts.
UI dengan tombol hardware
Konfirmasi Dilindungi oleh Android dapat menggunakan tombol fisik di perangkat untuk mengonfirmasi dan membatalkan input.
Gambar 1. Tata letak desain.
Ikon
Bagian ini menjelaskan ikon yang digunakan di UI.
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 dalam Konfirmasi Dilindungi: konfirmasi dan batalkan.
String konfirmasi
Pesan 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% |
| Font face | Roboto-Medium |
| Ukuran font | Persyaratan: 14sp |
| Tinggi baris | Persyaratan: 20dp |
String batalkan
Pesan batalkan harus terlihat jelas dan mudah dibedakan dari tombol konfirmasi. Gunakan properti berikut bersama dengan satu kata Batalkan:
| Pesan | Batalkan |
|---|---|
| Warna | #000000 87% |
| Font face | Roboto-Medium |
| Ukuran font | Persyaratan: 14sp |
| Tinggi baris | Persyaratan: 20dp |
Teks header
Sertakan teks header Konfirmasi Dilindungi oleh Android di UI Tepercaya untuk mengidentifikasi fitur. Gunakan properti berikut untuk teks header:
| Pesan | Persyaratan: Konfirmasi Dilindungi Android |
|---|---|
| Warna | #000000 87% |
| Font face | Roboto-Regular |
| Ukuran font | Persyaratan: 22sp |
| Tinggi baris | Persyaratan: 28dp |
Teks isi
Gunakan properti berikut saat menerapkan elemen teks isi. Pesan sebenarnya ditulis oleh developer API (developer aplikasi).
| Pesan | Teks isi disediakan oleh developer aplikasi yang memanggil Konfirmasi Dilindungi. |
|---|---|
| Warna | #000000 87% |
| Font face | Roboto-Regular |
| Ukuran font | Persyaratan: 16sp |
| Tinggi baris | Persyaratan: 24dp |
Teks subheader
Gunakan teks subheader untuk menjelaskan alasan pengguna melihat layar Konfirmasi Dilindungi. 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 maksimal empat baris. |
| Warna | #000000 87% |
| Font face | Roboto-Regular |
| Ukuran font | Persyaratan: 14sp |
| Tinggi baris | Persyaratan: 20dp |
UI dengan tombol software
Konfirmasi Dilindungi oleh Android dapat menggunakan tombol software untuk mengonfirmasi dan membatalkan input. Panduan berikut menjelaskan UI menggunakan tombol software:
Gambar 2. Tata letak desain software UI konfirmasi.
Ikon perisai
Download aset ikon di Ikon Perisai Konfirmasi Dilindungi Android. Tempatkan ikon di bagian atas layar.
Gambar 3. Ikon perisai.
Ikon perisai Konfirmasi Dilindungi adalah elemen yang diperlukan. Anda dapat menyesuaikan warna perisai, tetapi harus terlihat jelas.
Input
Gambar 4. Dimensi tombol software.
Gunakan bentuk tombol utama dan sekunder untuk input konfirmasi dan batalkan.
| Label tombol | Gunakan kapitalisasi kalimat untuk label tombol. |
|---|---|
| Radius tombol | 4dp |
| Warna aksen | #1a73e8 |
| Font face | Roboto-Medium |
| Ukuran font | Persyaratan: 14sp |
Teks header
Sertakan teks header Konfirmasi Dilindungi oleh Android di UI Tepercaya untuk mengidentifikasi fitur. Gunakan properti berikut untuk teks header:
| Pesan | Persyaratan: Konfirmasi Dilindungi Android |
|---|---|
| Warna | #000000 87% |
| Font face | Roboto-Medium |
| Ukuran font | Persyaratan: 24sp |
| Tinggi baris | Persyaratan: 20dp |
Teks isi
Gunakan properti berikut saat menerapkan elemen teks isi. Pesan sebenarnya ditulis oleh developer aplikasi.
| Pesan | Teks isi disediakan oleh developer aplikasi yang memanggil Konfirmasi Dilindungi. |
|---|---|
| Warna | #000000 87% |
| Font face | Roboto-Medium |
| Ukuran font | Persyaratan: 16sp |
| Tinggi baris | Persyaratan: 24dp |
Teks subheader
Gunakan teks subheader untuk menjelaskan alasan pengguna melihat layar Konfirmasi Dilindungi. 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 maksimal empat baris. |
| Warna | #000000 54% |
| Font face | 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.