Dokumen ini menyoroti prinsip dan pedoman bagi siapa saja yang merancang setelan platform Android, setelan inti GMS (Setelan Google), atau pengembang mana pun yang merancang setelan untuk aplikasi Android mereka.
Prinsip desain
Berikan gambaran yang bagus
Pengguna harus dapat melihat sekilas layar pengaturan dan memahami semua pengaturan individual dan nilainya.
Gambar 1. Pengaturan dan nilainya saat ini disajikan di layar tingkat atas
Atur item secara intuitif
Tempatkan pengaturan yang sering digunakan di bagian atas layar. Batasi jumlah pengaturan pada satu layar. Menampilkan lebih dari 10-15 item bisa sangat melelahkan. Buat menu intuitif dengan memindahkan beberapa pengaturan ke layar terpisah.
Gambar 2. Pengaturan umum ada di bagian atas layar
Jadikan pengaturan mudah ditemukan
Dalam beberapa kasus, mungkin berguna untuk menduplikasi pengaturan individual pada dua layar berbeda. Situasi yang berbeda dapat memicu pengguna untuk mengubah setelan, jadi menyertakan setelan di beberapa tempat akan membantu pengguna menemukan item ini.
Untuk pengaturan duplikat, buat layar terpisah untuk pengaturan tersebut dan miliki titik masuk dari tempat yang berbeda.
 |  |
Gambar 3 & 4. "Suara notifikasi default" muncul di layar "Pemberitahuan" dan "Suara"
Gunakan judul dan status yang jelas
Buat judul pengaturan Anda singkat dan bermakna. Hindari penggunaan judul yang tidak jelas seperti "Pengaturan umum". Di bawah judul, tampilkan status untuk menyorot nilai pengaturan. Tunjukkan detail spesifiknya, bukan hanya menjelaskan judulnya.
Judul harus:
- Letakkan teks terpenting pada label Anda terlebih dahulu.
- Ubah kata-kata negatif seperti "jangan" atau "jangan pernah" menjadi istilah netral seperti "blokir".
- Gunakan label impersonal seperti "Pemberitahuan" dan bukan "Beri tahu saya". Pengecualian: Jika merujuk pada pengguna diperlukan untuk memahami pengaturan, gunakan orang kedua ("Anda") dan bukan orang pertama ("Saya").
Judul harus menghindari:
- Istilah umum, seperti mengatur, mengubah, mengedit, memodifikasi, mengelola, menggunakan, memilih, atau memilih.
- Mengulangi kata-kata dari pemisah bagian atau judul sublayar.
- Jargon teknis.
Jenis halaman
Daftar pengaturan
Ini adalah jenis layar yang paling umum. Ini memungkinkan beberapa pengaturan ditempatkan bersamaan. Daftar pengaturan dapat berupa gabungan kontrol, seperti tombol, menu, dan penggeser.
Jika terdapat banyak pengaturan dalam satu kategori, maka dapat dikelompokkan menjadi satu. Lihat Pengelompokan & pembagi untuk lebih jelasnya.
Gambar 5. Contoh daftar pengaturan
Tampilan daftar
Tampilan daftar digunakan untuk menampilkan daftar item seperti aplikasi, akun, perangkat, dan lainnya. Kontrol untuk memfilter atau mengurutkan dapat ditambahkan ke layar.
Gambar 6. Contoh tampilan Daftar
Layar entitas
Layar entitas digunakan untuk menampilkan pengaturan item berbeda seperti aplikasi, akun, perangkat, jaringan Wi-Fi, dll.
Secara visual, entitas ditampilkan di bagian atas dengan ikon, judul, dan subjudul. Semua pengaturan di layar ini harus terkait dengan entitas ini.
Gambar 7. Contoh layar Entitas yang digunakan dalam info Aplikasi
Gambar 8. Contoh layar Entity yang digunakan di Storage
Pengaturan utama
Pengaturan utama paling baik digunakan ketika seluruh fitur dapat diaktifkan atau dinonaktifkan, seperti Wi-Fi atau Bluetooth. Dengan menggunakan tombol di bagian atas layar, pengguna dapat dengan mudah mengontrol fitur ini. Menggunakan pengaturan utama untuk menonaktifkan fitur akan menonaktifkan semua pengaturan terkait lainnya.
Jika suatu fitur memerlukan deskripsi teks yang lebih panjang, pengaturan utama dapat digunakan karena jenis layar ini memungkinkan teks footer yang lebih panjang.
Jika suatu pengaturan perlu diduplikasi atau ditautkan dari beberapa layar, gunakan pengaturan utama. Karena pengaturan utama adalah layar terpisah, Anda tidak akan memiliki banyak saklar di tempat berbeda untuk pengaturan yang sama.
Gambar 9. Contoh pengaturan utama yang digunakan di layar notifikasi Aplikasi; mematikan tombol utama akan mematikan seluruh fitur untuk aplikasi ini
Gambar 10. Contoh pengaturan utama yang digunakan di layar notifikasi Aplikasi dengan tombol utama dimatikan
Layar pemilihan tombol radio
Layar ini digunakan ketika pengguna perlu membuat pilihan untuk suatu pengaturan. Tombol radio dapat ditampilkan dalam dialog atau pada layar terpisah. Tombol radio tidak boleh digunakan bersama penggeser, menu, atau tombol.
Layar tombol radio dapat berisi gambar di bagian atas dan teks footer di bagian bawah. Tombol radio individual dapat memiliki subteks bersama dengan judul.
Gambar 11. Tombol radio tidak boleh digunakan dalam daftar pengaturan
Gambar 12. Ini adalah cara menggunakan tombol radio dengan benar di pengaturan
Komponen
Tajuk
Mulai Android 8.0, toolbar tindakan menyajikan pencarian dan bantuan serta tindakan terkait lainnya. Menu yang berlebihan tidak disarankan karena pengguna mungkin tidak menemukan tindakan tersembunyi di menu ini.
Untuk toolbar tanpa tindakan khusus layar. Tampilkan tindakan pencarian dan bantuan.
Gambar 13. Toolbar dengan tindakan pencarian dan bantuan
Untuk toolbar dengan satu tindakan : Sajikan tindakan sebelum pencarian.
Gambar 14. Toolbar dengan satu tindakan sebelum tindakan pencarian dan bantuan
Untuk toolbar dengan lebih dari 1 tindakan : Pertimbangkan untuk menempatkan tindakan utama sebelum pencarian, sambil menempatkan tindakan lanjutan di menu tambahan.
Jika semua tindakan bersifat lanjutan atau hanya berguna untuk sekelompok kecil pengguna, pertimbangkan untuk menempatkan semua tindakan di menu tambahan.
Gambar 15. Toolbar dengan menu tambahan untuk tindakan
Tajuk entitas
Header entitas dapat menampilkan judul saja, atau judul dengan subteks (beberapa baris diperbolehkan untuk subteks). Tindakan di bawah ini bersifat opsional. Anda dapat melakukan maksimal dua tindakan.
Gambar 16. Header entitas
Bagian ikon dan judul (Aplikasi1) akan bergulir di bawah header (Info aplikasi).
Gambar 17. Judul info aplikasi di sini adalah bagian dari toolbar, sedangkan layar lainnya akan bergulir di bawahnya
Tautan menu
Judul itu wajib. Anda juga harus menampilkan subteks yang menyoroti status pengaturan. Menggunakan ikon adalah opsional.
Cobalah untuk menjaga teks judul tetap ringkas. Jika judulnya panjang, judulnya dapat dilanjutkan ke baris berikutnya alih-alih terpotong. Jangan aktifkan menu atau tindakan saat ditekan lama.
Contoh:
Gambar 18. Tautan menu dengan ikon, judul, dan subteks
Gambar 19. Tautan menu dengan judul dan subteks
Gambar 20. Tautan menu dengan judul saja
Tautan menu dengan ikon, judul, subteks, dan target sasaran terpisah di sebelah kanan
Target tap lainnya harus menggunakan warna tema.
Gambar 21. Contoh menu target dua ketukan
Tautan menu dengan ikon, judul, subteks dan ikon statistik/angka/peringatan
Nilai numerik seperti persentase dan waktu dapat ditampilkan di sebelah kanan bersama dengan subteks, sedangkan grafik batang dapat ditampilkan di bawah.
Biasanya nilai numerik disajikan di sebelah kanan sehingga pengguna dapat dengan mudah melihat dan membandingkannya.
Gambar 22. Contoh menu dengan icon, title, stat dan grafik
Pengelompokan & pembagi
Jika suatu layar memiliki banyak pengaturan, pengaturan tersebut dapat dikelompokkan dan dipisahkan dengan pemisah. Tidak seperti versi Android yang lebih lama, pembagi kini digunakan untuk mengelompokkan pengaturan dalam satu grup, bukan memisahkan pengaturan individual.
Jika pengaturan dalam grup berkaitan erat, Anda dapat menambahkan judul grup. Jika Anda menggunakan judul grup, Anda harus selalu menyertakan pembatas.
Gambar 23. Pengaturan dikelompokkan dengan pembagi
Mengalihkan
Beralih dengan ikon, judul, dan subteks
Gambar 24. Beralih dengan ikon, judul, dan subteks
Beralih dengan judul dan subteks
Gambar 25. Beralih dengan judul dan subteks
Beralih dengan judul saja
Judul dapat disertai ikon di sebelah kiri.
Gambar 26. Beralih dengan judul saja
Item daftar + tombol
Anda dapat menggabungkan item daftar dengan saklar. Mengetuk sisi kiri garis vertikal berfungsi seperti tautan dan membawa pengguna ke layar berikutnya. Sisi kanan berperilaku seperti saklar standar.
Untuk item daftar di sebelah kiri, judul wajib diisi. Ikon dan subteks bersifat opsional.
Gambar 27. Daftar item dan saklar
Penggeser
Ikon ini opsional di penggeser.
Gambar 28. Penggeser
Tombol di layar
Tindakan positif menggunakan warna tema sedangkan tindakan negatif menggunakan warna abu-abu. Tindakan positif mungkin termasuk membuka aplikasi, memasang aplikasi, menambahkan item baru, dll. Tindakan negatif termasuk menghapus data, menghapus instalasi aplikasi, menghapus item, dll.
Gambar 29. Tombol abu-abu untuk "Uninstall" dan "Force stop"
Gambar 30. Tombol biru untuk "Aktifkan sekarang"
Pengungkapan progresif (Lanjutan)
Pengaturan yang tidak sering digunakan sebaiknya disembunyikan. Gunakan "Lanjutan" hanya ketika ada setidaknya 3 item yang disembunyikan.
Di sini, subteksnya menunjukkan judul pengaturan yang disembunyikan. Subteksnya harus hanya satu baris. Teks tambahan terpotong dengan elipsis.
Gambar 31. Lanjutan digunakan pada layar "Display'".
Menu drop down
Menu tarik-turun tersedia, tetapi idealnya Anda harus menggunakan layar pemilihan dialog atau tombol radio. Hal ini disarankan untuk menyederhanakan pengaturan, karena saat ini terdapat tiga pola berbeda untuk pemilihan tunggal.
Jika diperlukan, menu tarik-turun dapat digunakan jika pengaturan memiliki opsi sederhana.
Gambar 32. Menu tarik-turun
kotak centang
Gunakan peralihan kotak centang jika memungkinkan.
Kotak centang dapat digunakan:
- Untuk tindakan negatif seperti membatasi aplikasi atau memblokir layanan.
- Untuk menghindari terlalu banyak tombol di layar.
Gambar 33. Kotak centang digunakan untuk mengurangi jumlah tombol pada layar ini
Tautan
Tidak disarankan menggunakan tautan dalam pengaturan. Hanya gunakan tautan jika benar-benar diperlukan. Tautan harus menggunakan warna aksen tanpa garis bawah.
Gambar 34. Tautan yang digunakan dalam pengaturan
catatan kaki
Teks footer dapat digunakan untuk menambahkan konten penjelasan. Footer harus selalu memiliki pembatas di bagian atas. Footer ditampilkan di bagian bawah layar. Footer dapat memiliki tautan, jika diperlukan.
Gambar 35. Teks footer
Pola
Data
Data penting dapat ditampilkan dalam grafik seperti diagram batang atau lingkaran. Data ini dapat ditampilkan di header entitas. Contohnya termasuk data dan penyimpanan seluler.
Data lain yang kurang penting dapat disajikan dengan menggunakan tampilan daftar biasa.
Gambar 36. Contoh yang menunjukkan Penyimpanan
Gambar 37. Contoh menunjukkan Jaringan
Pendidikan pengguna
Beberapa fitur mungkin memerlukan penjelasan atau pendidikan pengguna. Anda dapat menggunakan animasi atau gambar bersama dengan teks. Animasi atau gambar sebaiknya disajikan di bagian atas layar, sedangkan teks footer dapat digunakan untuk menambahkan penjelasan.
Gambar 38. Setting menggunakan animasi dan teks footer
Formulir
Jika formulir memiliki satu kolom masukan, gunakan dialog normal. Ini memberikan cara mudah bagi pengguna untuk memasukkan satu masukan.
Namun, jika formulir memiliki beberapa bidang, pertimbangkan untuk menggunakan dialog layar penuh . Ini memberikan lebih banyak ruang layar untuk mengatur bidang dalam pola yang jelas.
Gambar 39. Bentuk dengan dialog normal
Hasil Pencarian
Hasil pencarian menunjukkan judul, subteks (jika tersedia), dan lokasi runut tautan pengaturan.
Gambar 40. Hasil pencarian