Panduan desain setelan Android

Dokumen ini menyoroti prinsip dan panduan untuk siapa saja yang merancang setelan platform Android, setelan inti GMS (Setelan Google), atau developer yang mendesain setelan untuk aplikasi Android mereka.

Prinsip-prinsip desain

Berikan gambaran umum yang baik

Pengguna harus dapat melihat sekilas layar setelan dan memahami semua setelan individual dan nilainya.

Gambar 1. Setelan dan nilainya saat ini ditampilkan di layar tingkat atas

Mengatur item secara intuitif

Tempatkan setelan yang sering digunakan di bagian atas layar. Batasi jumlah pengaturan di satu layar. Menampilkan lebih dari 10-15 item dapat membingungkan. Buat menu yang intuitif dengan memindahkan beberapa setelan ke layar terpisah.

Gambar 2. Setelan umum ada di bagian atas layar

Membuat setelan mudah ditemukan

Dalam beberapa kasus, sebaiknya duplikasi setelan individual di dua layar yang berbeda. Situasi yang berbeda dapat memicu pengguna mengubah setelan, jadi menyertakan setelan di beberapa tempat akan membantu pengguna menemukan item ini.

Untuk setelan duplikat, buat layar terpisah untuk setelan dan buat titik entri dari tempat yang berbeda.

Gambar 3 & 4. "Suara notifikasi default" muncul di layar "Notifikasi" dan "Suara"

Gunakan judul dan status yang jelas

Buat judul setelan yang singkat dan bermakna. Hindari penggunaan judul yang tidak jelas seperti "Setelan umum". Di bawah judul, tampilkan status untuk menyoroti nilai setelan. Tampilkan detail spesifik, bukan hanya menjelaskan judul.

Judul harus:

  • Letakkan teks yang paling penting dari label Anda terlebih dahulu.
  • Susun ulang kata-kata negatif seperti "jangan" atau "tidak pernah" menjadi istilah netral seperti "blokir".
  • Gunakan label yang tidak bersifat pribadi seperti "Notifikasi", bukan "Beri tahu saya". Pengecualian: Jika rujukan ke pengguna diperlukan untuk memahami setelan, gunakan orang kedua ("Anda"), bukan orang pertama ("I").

Judul harus menghindari:

  • Istilah umum, seperti menetapkan, mengubah, mengedit, memodifikasi, mengelola, menggunakan, memilih, atau memilih.
  • Kata berulang dari pemisah bagian atau judul sublayar.
  • Jargon teknis.

Jenis halaman

Daftar setelan

Ini adalah jenis layar yang paling umum. Hal ini memungkinkan beberapa setelan ditempatkan bersama. Daftar setelan dapat berupa campuran kontrol, seperti tombol, menu, dan slider.

Jika ada beberapa setelan dalam satu kategori, setelan tersebut dapat dikelompokkan bersama. Lihat Pengelompokan dan pemisah untuk mengetahui detail selengkapnya.

Gambar 5. Contoh daftar setelan

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 entity digunakan untuk menampilkan setelan item yang berbeda, seperti aplikasi, akun, perangkat, jaringan Wi-Fi, dll.

Secara visual, entity ditampilkan di bagian atas dengan ikon, judul, dan subtitel. Semua setelan di layar ini harus terkait dengan entity ini.

Gambar 7. Contoh layar Entity yang digunakan dalam info Aplikasi

Gambar 8. Contoh layar Entity yang digunakan di Storage

Setelan utama

Setelan utama paling baik digunakan saat seluruh fitur dapat diaktifkan atau dinonaktifkan, seperti Wi-Fi atau Bluetooth. Dengan menggunakan tombol di bagian atas layar, pengguna dapat mengontrol fitur ini. Menggunakan setelan utama untuk menonaktifkan fitur akan menonaktifkan semua setelan terkait lainnya.

Jika fitur memerlukan deskripsi teks yang lebih panjang, setelan utama dapat digunakan karena jenis layar ini memungkinkan teks footer yang lebih panjang.

Jika setelan perlu diduplikasi atau ditautkan dari beberapa layar, gunakan setelan utama. Karena setelan utama adalah layar terpisah, Anda tidak perlu memiliki beberapa tombol di tempat yang berbeda untuk setelan yang sama.

Gambar 9. Contoh setelan utama yang digunakan di layar Notifikasi aplikasi; menonaktifkan tombol utama akan menonaktifkan seluruh fitur untuk aplikasi ini

Gambar 10. Contoh setelan utama yang digunakan di layar Notifikasi aplikasi dengan tombol utama dinonaktifkan

Layar pemilihan tombol pilihan

Layar ini digunakan ketika pengguna perlu membuat pilihan untuk setelan. Tombol radio dapat ditampilkan dalam dialog atau di layar terpisah. Tombol pilihan tidak boleh digunakan bersama penggeser, menu, atau tombol.

Layar tombol pilihan dapat berisi gambar di bagian atas dan teks footer di bagian bawah. Setiap tombol pilihan dapat memiliki subteks beserta judul.

Gambar 11. Tombol pilihan tidak boleh digunakan dalam daftar setelan

Gambar 12. Berikut ini cara menggunakan tombol pilihan dengan benar di setelan

Komponen

Mulai Android 8.0, toolbar tindakan menyajikan penelusuran dan bantuan serta tindakan terkait lainnya. Menu tambahan tidak disarankan karena pengguna mungkin tidak menemukan tindakan yang tersembunyi di menu ini.

Untuk toolbar tanpa tindakan khusus layar. Menampilkan tindakan penelusuran dan bantuan.

Gambar 13. Toolbar dengan tindakan penelusuran dan bantuan

Untuk toolbar dengan satu tindakan: Tampilkan tindakan sebelum melakukan penelusuran.

Gambar 14. Toolbar dengan satu tindakan sebelum tindakan penelusuran dan bantuan

Untuk toolbar dengan lebih dari 1 tindakan: Pertimbangkan untuk menempatkan tindakan utama sebelum penelusuran, saat menempatkan tindakan lanjutan di menu tambahan.

Jika semua tindakan bersifat lanjutan atau hanya berguna untuk sekelompok kecil pengguna, sebaiknya tempatkan semua tindakan di menu tambahan.

Gambar 15. Toolbar dengan menu tambahan untuk tindakan

Header entitas

Header entity hanya dapat menampilkan judul, atau judul dengan subteks (beberapa baris diizinkan untuk subteks). Tindakan di bawah bersifat opsional. Anda dapat memiliki maksimum dua tindakan.

Gambar 16. Header entitas

Bagian ikon dan judul (App1) akan di-scroll di bawah header (Info aplikasi).

Gambar 17. Judul info aplikasi di sini adalah bagian dari toolbar, sedangkan bagian layar lainnya akan ter-scroll di bawahnya

Judulnya wajib diisi. Anda juga harus menampilkan subteks yang menyoroti status setelan. Penggunaan ikon bersifat opsional.

Cobalah untuk membuat teks judul tetap ringkas. Jika judul panjang, judul dapat berlanjut ke baris berikutnya tanpa terpotong. Jangan mengaktifkan menu atau tindakan dengan menekan lama.

Contoh:

Gambar 18. Link menu dengan ikon, judul, dan subteks

Gambar 19. Link menu dengan judul dan subteks

Gambar 20. Link menu hanya dengan judul

Link menu dengan ikon, judul, subteks, dan target hit terpisah di sebelah kanan

Target ketuk lainnya harus menggunakan warna tema.

Gambar 21. Contoh menu target ketuk dengan dua kali

Link menu dengan ikon, judul, subteks, dan ikon statistik/angka/notifikasi

Nilai numerik seperti persentase dan waktu dapat ditampilkan di sebelah kanan bersama dengan subteksnya, sedangkan grafik batang dapat ditampilkan di bawah ini.

Biasanya, nilai numerik disajikan di sebelah kanan sehingga pengguna dapat dengan mudah melihat dan membandingkannya.

Gambar 22. Contoh menu dengan ikon, judul, statistik, dan grafik

Pengelompokan dan pembagi

Jika layar memiliki banyak setelan, mereka dapat dikelompokkan dan dipisahkan oleh pemisah. Tidak seperti versi Android lama, pemisah kini digunakan untuk mengelompokkan setelan dalam grup, bukan memisahkan setelan individual.

Jika setelan dalam grup terkait erat, Anda dapat menambahkan judul grup. Jika menggunakan {i>heading<i} grup, Anda harus selalu menyertakan {i>divider<i}.

Gambar 23. Setelan yang dikelompokkan dengan pemisah

Alihkan

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 dengan ikon di sebelah kiri.

Gambar 26. Ganti dengan judul saja

Item daftar plus tombol

Anda dapat menggabungkan item daftar dengan tombol. Mengetuk sisi kiri garis vertikal bertindak seperti tautan dan membawa pengguna ke layar berikutnya. Sisi kanan berperilaku seperti {i>switch<i} standar.

Untuk item daftar di sisi kiri, judul wajib diisi. Ikon dan subteks bersifat opsional.

Gambar 27. Item daftar dan tombol

Penggeser

Ikon bersifat opsional di penggeser.

Gambar 28. Penggeser

Tombol di layar

Tindakan positif menggunakan warna tema sedangkan tindakan negatif menggunakan warna abu-abu. Tindakan positif dapat mencakup membuka aplikasi, menginstal aplikasi, menambahkan item baru, dll. Tindakan negatif meliputi menghapus data, meng-uninstal aplikasi, menghapus item, dll.

Gambar 29. Tombol abu-abu untuk "Uninstal" dan "Paksa berhenti"

Gambar 30. Tombol biru untuk "Aktifkan sekarang"

Pengungkapan progresif (Lanjutan)

Setelan yang tidak sering digunakan harus disembunyikan. Gunakan "Advanced" hanya jika ada setidaknya 3 item yang disembunyikan.

Di sini, subteks menunjukkan judul pengaturan yang tersembunyi. Subteks hanya boleh satu baris. Teks tambahan terpotong dengan elipsis.

Gambar 31. Lanjutan yang digunakan di layar "Tampilan'"

Menu drop-down tersedia, tetapi idealnya Anda harus menggunakan dialog atau layar pemilihan tombol pilihan. Tindakan ini direkomendasikan untuk menyederhanakan setelan, karena ada tiga pola berbeda untuk satu pilihan.

Jika diperlukan, menu drop-down dapat digunakan jika setelan memiliki opsi sederhana.

Gambar 32. Menu tarik-turun

Kotak centang

Gunakan tombol alih-alih 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

Tidak disarankan menggunakan link di setelan. Hanya gunakan link jika benar-benar diperlukan. Link harus menggunakan warna aksen tanpa garis bawah.

Gambar 34. Link digunakan di setelan

Teks footer dapat digunakan untuk menambahkan konten penjelasan. {i>Footer<i} harus selalu memiliki {i>divider<i} di bagian atas. Footer ditampilkan di bagian bawah layar. Footer dapat memiliki link, jika diperlukan.

Gambar 35. Teks footer

Pola

Data

Data penting dapat ditampilkan dalam grafik seperti diagram batang atau diagram lingkaran. Data ini dapat ditampilkan di header entity. Contohnya meliputi data seluler dan penyimpanan.

Data yang kurang penting lainnya dapat disajikan dengan menggunakan tampilan daftar reguler.

Gambar 36. Contoh menampilkan Penyimpanan

Gambar 37. Contoh yang menampilkan Jaringan

Edukasi pengguna

Beberapa fitur mungkin memerlukan penjelasan atau edukasi pengguna. Anda dapat menggunakan animasi atau gambar beserta teks. Animasi atau gambar harus ditampilkan di bagian atas layar, sedangkan teks footer dapat digunakan untuk menambahkan penjelasan.

Gambar 38. Setelan menggunakan animasi dan teks footer

Formulir

Jika formulir memiliki satu kolom input, gunakan dialog normal. Hal ini memberikan cara mudah bagi pengguna untuk memasukkan satu input.

Namun, jika formulir memiliki beberapa kolom, pertimbangkan untuk menggunakan dialog layar penuh. Ini memberikan lebih banyak ruang layar untuk mengatur kolom dalam pola yang jelas.

Gambar 39. Formulir dengan dialog normal

Hasil penelusuran

Hasil penelusuran menampilkan judul, subteks (jika tersedia), dan lokasi breadcrumb setelan.

Gambar 40. Hasil penelusuran