Daftar adalah representasi visual dari satu atau beberapa item terkait. Tombol ini biasanya digunakan untuk menampilkan kumpulan opsi.
Referensi
| Jenis | Link | Status |
|---|---|---|
| Desain | Sumber desain (Figma) | Tersedia |
| Penerapan | Jetpack Compose | Segera hadir |
Sorotan
- Daftar adalah kumpulan teks atau gambar yang berkelanjutan.
- Daftar harus terasa alami dan dapat dipindai.
- Daftar terdiri dari item yang berisi tindakan utama dan tambahan yang diwakili oleh ikon dan teks.
Varian
Ada tiga jenis daftar: daftar satu baris, daftar dua baris, dan daftar tiga baris.
- Daftar satu baris: Satu baris untuk mengomunikasikan setiap item. Desain sederhana ini memastikan setiap item jelas berbeda dari yang lain.
- Daftar dua baris: Menggunakan dua garis sejajar untuk mengomunikasikan setiap item. Desain terstruktur ini memastikan keterbacaan yang alami dan menghindari kelebihan kognitif.
- Daftar tiga baris: Menggunakan tiga garis sejajar untuk mewakili setiap item. Desain dekoratif ini menciptakan tingkat keterlihatan visual yang tinggi.
Anatomi
- Ikon: Grafik kecil yang mewakili objek atau tindakan tertentu, sering digunakan untuk mengomunikasikan ide atau konsep secara visual.
- Overline: Baris teks singkat yang muncul di atas judul atau subtitel, sering digunakan untuk memberikan konteks atau penekanan tambahan.
- Judul: Baris teks besar dan tebal yang berfungsi sebagai judul utama elemen atau halaman desain.
- Subjudul: Baris teks lebih kecil yang memberikan informasi atau konteks tambahan di bawah judul utama.
- Kontrol: Elemen interaktif yang memungkinkan pengguna memasukkan keputusan.
Status
Spesifikasi
Penggunaan
Daftar adalah kelompok teks dan gambar yang diatur secara vertikal. Dioptimalkan untuk pemahaman bacaan, daftar terdiri dari satu kolom item berkelanjutan. Item daftar dapat berisi tindakan utama dan tambahan yang diwakili oleh ikon dan teks.
Anjuran
Item daftar bukan tombol. Item tidak memiliki kontainer. Item daftar, secara default, tidak dipilih dan tidak difokuskan.
Perhatian
Gunakan latar belakang penampung untuk item daftar hanya jika diperlukan.
Kontrol pilihan
Mengontrol tampilan informasi dan tindakan untuk item daftar. Batas ini dapat disejajarkan dengan tepi depan atau akhir item daftar.
- Kotak centang: Pilih satu atau beberapa item daftar.
- Tombol pilihan: Pilih tepat satu item dalam daftar.
- Tombol: Mengaktifkan atau menonaktifkan kontrol.
Anjuran
Gunakan indikator pilihan ikon untuk menampilkan item yang dipilih dalam daftar dengan jelas. Hal ini akan membantu pengguna mengidentifikasi dengan mudah item mana yang 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 tidak memiliki tujuan dan tidak memberikan informasi tambahan.
Larangan
Hindari penggunaan ikon yang sama untuk semua item dalam daftar. Hal ini bisa membingungkan secara visual dan membingungkan bagi pengguna. Sebagai gantinya, gunakan ikon hanya jika ikon memberikan nilai tambah atau memberikan informasi tambahan.
Avatar dan gambar
Item daftar dapat menyertakan gambar dalam pemangkasan melingkar untuk mewakili orang atau entitas.
