Google berkomitmen untuk memajukan ekuitas ras untuk komunitas kulit hitam. Lihat bagaimana.
Halaman ini diterjemahkan oleh Cloud Translation API.
Switch to English

Pedoman 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 ikhtisar yang baik

Pengguna harus dapat melihat layar pengaturan dan memahami semua pengaturan individual dan nilainya.

Gambar 1. Pengaturan dan nilai-nilai mereka saat ini disajikan pada 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 luar biasa. Buat menu intuitif dengan memindahkan beberapa pengaturan ke layar terpisah.

Gambar 2. Pengaturan umum ada di bagian atas layar

Buat pengaturan mudah ditemukan

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

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

Gambar 3 & 4. "Suara pemberitahuan default" muncul di layar "Pemberitahuan" dan "Suara"

Gunakan judul dan status yang jelas

Jadikan judul pengaturan Anda singkat dan bermakna. Hindari menggunakan judul yang tidak jelas seperti "Pengaturan umum." Di bawah judul, tunjukkan status untuk menyorot nilai pengaturan. Perlihatkan detail spesifik alih-alih hanya menggambarkan judul.

Judul harus:

  • Letakkan teks paling penting dari label Anda terlebih dahulu.
  • Ubah kata-kata negatif seperti "jangan" atau "tidak pernah" ke dalam istilah netral seperti "blokir."
  • Gunakan label impersonal seperti "Pemberitahuan" dan bukan "Beri tahu saya." Pengecualian: Jika merujuk ke pengguna diperlukan untuk memahami pengaturan, gunakan orang kedua ("Anda") daripada orang pertama ("Saya").

Judul harus dihindari:

  • Istilah umum, seperti mengatur, mengubah, mengedit, memodifikasi, mengelola, menggunakan, memilih, atau memilih.
  • Mengulangi kata-kata dari pembagi bagian atau judul sub-layar.
  • Jargon teknis.

Jenis halaman

Daftar pengaturan

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

Jika ada banyak pengaturan dalam satu kategori, mereka dapat dikelompokkan bersama. 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 menyajikan pengaturan item yang berbeda seperti aplikasi, akun, perangkat, jaringan Wi-Fi, dll.

Secara visual, entitas ditampilkan di bagian atas dengan ikon, judul, dan subtitle. Semua pengaturan pada 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 ketika 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 menonaktifkan semua pengaturan terkait lainnya.

Jika suatu fitur membutuhkan deskripsi teks yang lebih panjang, pengaturan master dapat digunakan karena tipe layar ini memungkinkan teks footer yang lebih panjang.

Jika suatu pengaturan perlu digandakan atau ditautkan dari beberapa layar, gunakan pengaturan utama. Karena pengaturan master adalah layar terpisah, Anda akan menghindari memiliki 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 master yang digunakan di layar Notifikasi aplikasi dengan sakelar master dimatikan

Layar pemilihan tombol radio

Layar ini digunakan ketika pengguna harus membuat pilihan untuk suatu pengaturan. Tombol radio dapat ditampilkan dalam dialog atau di layar terpisah. Tombol radio tidak boleh digunakan bersama slider, 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 tidak boleh digunakan dalam daftar pengaturan

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

Komponen

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

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

Gambar 13. Toolbar dengan tindakan pencarian dan bantuan

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

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

Untuk bilah alat dengan lebih dari 1 tindakan : Pertimbangkan untuk menempatkan tindakan utama sebelum pencarian, sambil menempatkan tindakan lanjutan di menu melimpah.

Jika semua tindakan lanjutan atau hanya berguna untuk sekelompok kecil pengguna, pertimbangkan untuk menempatkan semua tindakan di menu melimpah.

Gambar 15. Toolbar dengan menu melimpah untuk tindakan

Header entitas

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

Gambar 16. Header entitas

Ikon dan bagian (App1) bagian akan gulir di bawah header (Info aplikasi).

Gambar 17. Judul info aplikasi di sini adalah bagian dari bilah alat, sedangkan sisa layar akan menggulir di bawahnya

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

Usahakan agar teks judul tetap ringkas. Jika judul panjang, mereka dapat melanjutkan ke baris berikutnya alih-alih terpotong. Jangan aktifkan menu atau tindakan dengan pers 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 klik terpisah di sebelah kanan

Target keran 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 melirik dan membandingkannya.

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

Pengelompokan & pembagi

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

Jika pengaturan dalam suatu grup sangat terkait, Anda dapat menambahkan judul grup. Jika Anda menggunakan tajuk grup, Anda harus selalu menyertakan pembagi.

Gambar 23. Pengaturan dikelompokkan dengan pembagi

Beralih

Beralih dengan ikon, judul, dan subteks

Gambar 24. Beralih dengan ikon, judul, dan subteks

Ganti dengan judul dan subteks

Gambar 25. Beralih dengan judul dan subteks

Ganti dengan judul saja

Judul dapat disertai dengan ikon di sebelah kiri.

Gambar 26. Beralih dengan judul saja

Daftar item + switch

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 adalah wajib. Ikon dan subteks adalah opsional.

Gambar 27. Daftar item dan saklar

Slider

Ikon ini opsional di slider.

Gambar 28. Slider

Tombol di layar

Tindakan positif menggunakan warna tema sedangkan tindakan negatif berwarna abu-abu. Tindakan positif dapat mencakup membuka aplikasi, menginstal 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 "Nyalakan sekarang"

Pengungkapan progresif (Lanjutan)

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

Di sini, subteks menunjukkan judul pengaturan yang disembunyikan. Subteks seharusnya hanya satu baris. Teks tambahan akan terpotong dengan elipsis.

Gambar 31. Tingkat lanjut digunakan pada layar "Tampilan"

Menu tarik-turun tersedia, tetapi idealnya Anda harus menggunakan layar pemilihan tombol dialog atau radio. Ini direkomendasikan untuk menyederhanakan pengaturan, karena saat ini ada tiga pola yang berbeda untuk pemilihan tunggal.

Jika perlu, menu drop-down dapat digunakan dalam kasus di mana pengaturan memiliki opsi sederhana.

Gambar 32. Menu drop-down

Kotak centang

Gunakan sakelar di atas kotak centang bila 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 pada layar ini

Tidak disarankan menggunakan tautan dalam pengaturan. Hanya gunakan tautan yang 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 penjelas. Footer harus selalu memiliki pembagi di bagian atas. Footer ditampilkan di bagian bawah layar. Footer dapat memiliki tautan, jika perlu.

Gambar 35. Teks footer

Pola

Data

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

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

Gambar 36. Contoh menunjukkan Penyimpanan

Gambar 37. Contoh memperlihatkan Jaringan

Pendidikan pengguna

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

Gambar 38. Pengaturan menggunakan animasi dan teks footer

Formulir

Jika formulir memiliki satu bidang input, gunakan dialog normal. Ini memberikan cara mudah bagi pengguna untuk memasukkan satu input.

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. Formulir dengan dialog normal

Hasil Pencarian

Hasil pencarian menunjukkan judul, subteks (jika tersedia), dan lokasi remah roti pengaturan.

Gambar 40. Hasil pencarian