Daftar adalah representasi visual dari satu atau beberapa item yang saling terkait. Menu ini biasanya digunakan untuk menampilkan sekumpulan opsi.
Referensi
| Jenis | Link | Status |
|---|---|---|
| Desain | Sumber desain (Figma) | Tersedia |
| Implementasi | Jetpack Compose | Tersedia |
Sorotan
- Daftar adalah kumpulan teks atau gambar yang berkelanjutan.
- Daftar harus terasa alami dan dapat dipindai.
- Daftar terdiri dari item-item yang berisi item yang utama dan tambahan tindakan yang diwakili oleh ikon dan teks.
Varian
Ada tiga jenis daftar: daftar satu baris, daftar dua baris, dan dalam daftar yang terdiri dari tiga baris.
- Daftar satu baris: Satu baris untuk mengomunikasikan setiap item. Sederhana ini desain memastikan setiap item jelas berbeda dari yang lain.
- Daftar dua baris: Menggunakan dua baris sejajar untuk mengomunikasikan setiap item. Desain terstruktur ini memastikan keterbacaan alami dan menghindari kognitif kelebihan beban.
- Daftar tiga baris: Menggunakan tiga garis sejajar untuk mewakili setiap item. Desain dekoratif ini menciptakan keterlihatan visual tingkat tinggi.
Anatomi
- Ikon: Grafik kecil yang mewakili objek atau tindakan tertentu, sering kali digunakan untuk mengkomunikasikan ide atau konsep secara visual.
- Kalimat: Baris teks singkat yang muncul di atas judul atau subjudul. sering digunakan untuk memberikan konteks atau penekanan tambahan.
- Judul: Baris teks besar dan tebal yang berfungsi sebagai judul utama elemen atau laman desain.
- Subjudul: Baris teks lebih kecil yang memberikan informasi tambahan atau konteks di bawah judul utama.
- Kontrol: Elemen interaktif yang memungkinkan pengguna memasukkan keputusan.
Status
Spesifikasi
Penggunaan
Daftar adalah grup teks dan gambar yang diatur secara vertikal. Dioptimalkan untuk pemahaman bacaan, daftar terdiri dari satu kolom item yang kontinu. Item daftar dapat berisi tindakan utama dan tambahan yang direpresentasikan berdasarkan ikon dan teks.
Anjuran
Item daftar bukan tombol. Item tidak memiliki penampung. Item daftar, secara default, tidak dipilih dan tidak difokuskan.
Perhatian
Gunakan latar belakang penampung untuk item daftar hanya jika diperlukan.
Kontrol pilihan
Mengontrol informasi tampilan dan tindakan untuk item daftar. Mereka dapat diselaraskan ke tepi awal atau akhir item daftar.
- Kotak centang: Pilih satu atau beberapa item daftar.
- Tombol pilihan: Pilih satu per satu item baris dalam daftar.
- Tombol: Mengaktifkan atau menonaktifkan kontrol.
Anjuran
Gunakan indikator pemilihan ikon untuk menampilkan item yang dipilih dalam daftar dengan jelas. Hal ini akan membantu pengguna dengan mudah mengidentifikasi item mana yang telah mereka pilih dan meningkatkan pengalaman pengguna secara keseluruhan.
Larangan
Hindari hanya mengandalkan warna latar belakang untuk menunjukkan pilihan dalam daftar.
Larangan
Hindari menempatkan tombol di dalam item daftar karena dapat menyebabkan kebingungan tentang elemen mana yang saat ini menjadi fokus.
Ikon
Anjuran
Jika Anda menampilkan jenis konten yang sama dalam daftar, hapus ikon untuk mengurangi derau visual dan meningkatkan pengalaman pengguna. Hindari penggunaan ikon dalam daftar jika ikon tersebut tidak memiliki tujuan dan tidak memberikan informasi tambahan.
Larangan
Hindari penggunaan ikon yang sama untuk semua item dalam daftar. Hal ini dapat secara visual membingungkan dan membingungkan pengguna. Sebagai gantinya, gunakan ikon hanya jika ikon tersebut memberikan nilai tambah atau memberikan informasi tambahan.
Avatar dan gambar
Item daftar dapat menyertakan gambar dalam pemangkasan melingkar untuk mewakili orang atau entitas.
