Google is committed to advancing racial equity for Black communities. See how.
This page was translated by the Cloud Translation API.
Switch to English

Panduan Desain Pengaturan Android

Dokumen ini menyoroti prinsip dan pedoman bagi siapa saja yang merancang pengaturan platform Android, pengaturan inti GMS (Pengaturan Google) atau pengembang yang merancang pengaturan untuk aplikasi Android mereka.

Prinsip desain

Berikan gambaran yang bagus

Pengguna harus dapat melihat sekilas layar pengaturan dan memahami semua pengaturan individu dan nilainya.

Gambar 1. Pengaturan dan nilainya saat ini disajikan di layar level 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 membuat Anda kewalahan. Buat menu intuitif dengan memindahkan beberapa pengaturan ke layar terpisah.

Gambar 2. Pengaturan umum ada di bagian atas layar

Buat setelan mudah ditemukan

Dalam beberapa kasus, mungkin berguna untuk menduplikasi pengaturan individu pada dua layar yang berbeda. Situasi yang berbeda dapat memicu pengguna untuk mengubah pengaturan, jadi menyertakan pengaturan di banyak tempat akan membantu pengguna menemukan item ini.

Untuk pengaturan duplikat, buat layar terpisah untuk pengaturan dan memiliki titik masuk dari tempat yang berbeda.

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

Gunakan judul dan status yang jelas

Buat judul pengaturan Anda singkat dan bermakna. Hindari menggunakan judul yang tidak jelas seperti "Pengaturan umum". Di bawah judul, tunjukkan status untuk menyoroti nilai pengaturan. Tunjukkan detail spesifik, bukan hanya mendeskripsikan judul.

Judul harus:

  • Letakkan teks terpenting dari label Anda terlebih dahulu.
  • Ubah kata-kata negatif seperti "jangan" atau "tidak pernah" menjadi istilah netral seperti "blok".
  • Gunakan label impersonal seperti "Notifikasi", bukan "Beri tahu saya". Pengecualian: Jika merujuk ke pengguna diperlukan untuk memahami setelan, gunakan orang kedua ("Anda") daripada 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 sub-layar.
  • Jargon teknis.

Jenis halaman

Daftar pengaturan

Ini adalah jenis layar yang paling umum. Ini memungkinkan beberapa pengaturan untuk ditempatkan bersama. Daftar pengaturan dapat berupa campuran kontrol, seperti sakelar, menu, dan penggeser.

Jika ada banyak pengaturan dalam satu kategori, mereka dapat dikelompokkan bersama. Lihat Pengelompokan & pemisah untuk lebih jelasnya.

Gambar 5. Contoh daftar pengaturan

Tampilan daftar

Tampilan daftar digunakan untuk menunjukkan 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 yang berbeda seperti aplikasi, akun, perangkat, jaringan Wi-Fi, dll.

Secara visual, entitas ditampilkan di atas dengan ikon, judul, dan subjudul. Semua pengaturan di layar ini harus terkait dengan entitas ini.

Gambar 7. Contoh layar Entity yang digunakan dalam info Aplikasi

Gambar 8. Contoh layar Entity yang digunakan dalam Storage

Pengaturan master

Pengaturan master paling baik digunakan saat seluruh fitur dapat dihidupkan atau dimatikan, seperti Wi-Fi atau Bluetooth. Dengan menggunakan sakelar di bagian atas layar, pengguna dapat dengan mudah mengontrol fitur ini. Menggunakan pengaturan master untuk menonaktifkan fitur ini menonaktifkan semua pengaturan terkait lainnya.

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

Jika pengaturan perlu diduplikasi atau ditautkan dari beberapa layar, gunakan pengaturan utama. Karena pengaturan utama adalah layar terpisah, Anda akan menghindari beberapa sakelar di tempat berbeda untuk pengaturan yang sama.

Gambar 9. Contoh pengaturan master yang digunakan di layar notifikasi Aplikasi; mematikan sakelar utama akan mematikan seluruh fitur untuk aplikasi ini

Gambar 10. Contoh pengaturan utama yang digunakan di layar notifikasi Aplikasi dengan sakelar utama dimatikan

Layar pemilihan tombol radio

Layar ini digunakan saat pengguna perlu membuat pilihan untuk suatu pengaturan. Tombol radio dapat ditampilkan dalam dialog atau pada layar terpisah. Tombol radio tidak boleh digunakan di samping penggeser, menu, atau sakelar.

Layar tombol radio dapat berisi gambar di bagian atas dan teks footer di bagian bawah. Tombol radio individu dapat memiliki subteks bersama dengan judul.

Gambar 11. Tombol radio sebaiknya tidak digunakan dalam daftar pengaturan

Gambar 12. Ini adalah cara menggunakan tombol radio dengan benar dalam pengaturan

Komponen

Mulai Android 8.0, toolbar tindakan menyajikan pencarian dan bantuan bersama dengan tindakan terkait lainnya. Menu tambahan tidak disarankan karena pengguna mungkin tidak menemukan tindakan yang tersembunyi dalam menu ini.

Untuk bilah alat tanpa tindakan khusus layar. Tampilkan pencarian dan tindakan bantuan.

Gambar 13. Toolbar dengan tindakan pencarian dan bantuan

Untuk bilah alat dengan satu tindakan : Sajikan tindakan sebelum menelusuri.

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

Untuk bilah alat dengan lebih dari 1 tindakan : Pertimbangkan untuk menempatkan tindakan utama sebelum menelusuri, sambil meletakkan 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

Header entitas

Header entitas hanya dapat menampilkan judul, atau judul dengan subteks (beberapa baris diperbolehkan untuk subteks). Tindakan di bawah ini opsional. Anda dapat memiliki maksimal dua tindakan.

Gambar 16. Header entitas

Bagian ikon dan heading (App1) akan bergulir di bawah header (App info).

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

Judulnya wajib. Anda juga harus menunjukkan subteks yang menyoroti status pengaturan. Menggunakan ikon adalah opsional.

Cobalah untuk membuat teks judul tetap ringkas. Jika judulnya panjang, judul tersebut dapat melanjutkan di baris berikutnya alih-alih terpotong. Jangan aktifkan menu atau tindakan jika ditekan lama.

Contoh:

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

Gambar 19. Link menu dengan judul dan subteks

Gambar 20. Link menu dengan judul saja

Tautan menu dengan ikon, judul, subteks, dan target sasaran terpisah di sebelah kanan

Target ketuk lainnya harus menggunakan warna tema.

Gambar 21. Contoh menu target dua ketuk

Tautan menu dengan ikon, judul, subteks, dan statistik / angka / ikon 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 ikon, judul, stat dan grafik

Pengelompokan & pemisah

Jika layar memiliki banyak pengaturan, mereka dapat dikelompokkan dan dipisahkan oleh pembatas. Tidak seperti versi Android yang lebih lama, pemisah sekarang digunakan untuk mengelompokkan pengaturan dalam sebuah grup, daripada memisahkan pengaturan individu.

Jika pengaturan dalam grup terkait erat, Anda dapat menambahkan judul grup. Jika Anda menggunakan judul grup, Anda harus selalu menyertakan pemisah.

Gambar 23. Pengaturan dikelompokkan dengan pemisah

Beralih

Ganti dengan ikon, judul, dan subteks

Gambar 24. Ganti dengan ikon, judul, dan subteks

Ganti dengan judul dan subteks

Gambar 25. Ganti dengan judul dan subteks

Ganti dengan judul saja

Judul dapat disertai dengan ikon di sebelah kiri.

Gambar 26. Beralih dengan judul saja

Item daftar + sakelar

Anda dapat menggabungkan item daftar dengan sakelar. Mengetuk di sisi kiri garis vertikal berfungsi seperti tautan dan membawa pengguna ke layar berikutnya. Sisi kanan berperilaku seperti sakelar standar.

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

Gambar 27. Daftar item dan sakelar

Slider

Ikon ini opsional di penggeser.

Gambar 28. Slider

Tombol di layar

Tindakan positif menggunakan warna tema sedangkan tindakan negatif berwarna abu-abu. Tindakan positif mungkin termasuk membuka aplikasi, menginstal aplikasi, menambahkan item baru, dll. Tindakan negatif termasuk membersihkan data, mencopot aplikasi, menghapus item, dll.

Gambar 29. Tombol abu-abu untuk "Uninstall" dan "Force stop"

Gambar 30. Tombol biru untuk "Nyalakan sekarang"

Pengungkapan progresif (Lanjutan)

Pengaturan yang tidak sering digunakan harus disembunyikan. Gunakan "Lanjutan" hanya jika ada setidaknya 3 item untuk disembunyikan.

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

Gambar 31. Tingkat lanjut digunakan pada layar "Tampilan '"

Menu drop-down tersedia, tetapi idealnya Anda harus menggunakan dialog atau layar pemilihan tombol radio. Ini disarankan untuk menyederhanakan pengaturan, karena saat ini ada tiga pola berbeda untuk satu pilihan.

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

Gambar 32. Menu drop-down

Kotak centang

Gunakan sakelar di atas kotak centang jika memungkinkan.

Kotak centang dapat digunakan:

  • Untuk tindakan negatif seperti membatasi aplikasi atau memblokir layanan.
  • Untuk menghindari terlalu banyak sakelar di layar.

Gambar 33. Kotak centang digunakan untuk mengurangi jumlah sakelar di layar ini

Menggunakan link dalam pengaturan tidak disarankan. Hanya gunakan tautan jika benar-benar diperlukan. Tautan harus menggunakan warna aksen tanpa garis bawah.

Gambar 34. Tautan yang digunakan dalam pengaturan

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 link, jika diperlukan.

Gambar 35. Teks footer

Pola

Data

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

Data kurang penting lainnya dapat disajikan dengan menggunakan tampilan daftar biasa.

Gambar 36. Contoh menunjukkan Penyimpanan

Gambar 37. Contoh yang menunjukkan Jaringan

Pendidikan pengguna

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

Gambar 38. Setting menggunakan animasi dan footer text

Formulir

Jika formulir memiliki satu bidang masukan, gunakan dialog biasa. 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 dari pengaturan.

Gambar 40. Hasil Pencarian