Jadi apakah perbezaan antara combobox, multiselect, listbox dan dropdown? Walaupun semua komponen UI ini mungkin kelihatan serupa, ia mempunyai tujuan yang berbeza. Pilihan selalunya bergantung kepada bilangan pilihan yang tersedia dan keterlihatannya. Mari lihat perbezaannya, tujuan apa yang mereka berikan dan cara memilih yang betul — mengelakkan salah faham dan jangkaan yang salah sepanjang perjalanan.
Tidak Semua Corak Senarai Adalah Sama Semua komponen UI yang diserlahkan di atas mempunyai satu persamaan: mereka menyokong interaksi pengguna dengan senarai. Walau bagaimanapun, mereka melakukannya sedikit berbeza. Mari kita lihat setiap satu, satu demi satu:
Jatuh turun → senarai disembunyikan sehingga ia dicetuskan. Combobox → taip untuk menapis + pilih 1 pilihan. Pilih berbilang → taip untuk menapis + pilih banyak pilihan. Kotak senarai → semua pilihan senarai boleh dilihat secara lalai (+ tatal). Dwi kotak senarai → alihkan item antara 2 kotak senarai.
Dalam erti kata lain, Combobox menggabungkan medan input teks dengan senarai lungsur, jadi pengguna boleh menaip untuk menapis dan memilih satu pilihan. Dengan Multiselect, pengguna boleh memilih banyak pilihan (sering dipaparkan sebagai pil atau cip). Kotak senarai memaparkan semua pilihan senarai yang boleh dilihat secara lalai, selalunya dengan menatal. Ia berguna apabila pengguna perlu melihat semua pilihan yang tersedia dengan segera. Kotak senarai dwi (juga dipanggil senarai pemindahan) ialah variasi kotak senarai yang membenarkan pengguna mengalihkan item antara dua kotak senarai (kiri ↔ kanan), biasanya untuk pemilihan pukal. Jangan Sembunyikan Pilihan Yang Sering Digunakan Seperti yang dinyatakan di atas, pilihan komponen UI yang betul bergantung pada 2 faktor: berapa banyak pilihan senarai tersedia dan jika semua pilihan ini perlu dilihat secara lalai. Semua senarai boleh mempunyai struktur pokok, sarang dan pemilihan kumpulan juga.
Terdapat satu prinsip yang telah saya ikuti selama bertahun-tahun untuk mana-mana komponen UI: jangan sekali-kali menyembunyikan pilihan yang sering digunakan. Jika pengguna sering bergantung pada pilihan tertentu, terdapat sedikit nilai untuk menyembunyikannya daripada mereka. Kita boleh sama ada menjadikannya pra-pilihan, atau (jika terdapat hanya 2–3 pilihan yang kerap digunakan) tunjukkan pilihan tersebut sebagai cip atau butang, dan kemudian tunjukkan senarai yang lain pada interaksi. Secara umum, adalah idea yang baik untuk sentiasa memaparkan pilihan popular — walaupun ia mungkin mengacaukan UI. Bagaimana Memilih Yang Mana? Tidak setiap senarai memerlukan kaedah pemilihan yang kompleks. Untuk senarai dengan kurang daripada 5 item, butang radio ringkas atau kotak semak biasanya berfungsi paling baik. Tetapi jika pengguna perlu memilih daripada senarai besar pilihan (cth., 200+ item), combobox + multiselect membantu kerana penapisan yang lebih pantas (cth., pemilihan negara).
Kotak senarai membantu apabila orang perlu mengakses banyak pilihan sekaligus, terutamanya jika mereka perlu memilih banyak pilihan daripada senarai itu juga. Ia boleh membantu untuk penapis yang kerap digunakan.
Kotak senarai dwi sering diabaikan dan diabaikan. Tetapi ia boleh sangat membantu untuk tugas yang rumit, cth. pemilihan pukal, atau memberikan peranan, tugas, tanggungjawab. Ia satu-satunya komponen UI yang membolehkan pengguna menyemak senarai pilihan penuh mereka bersebelahan dengan senarai sumber sebelum melakukan (juga dipanggil "Senarai pemindahan"). Malah, kotak senarai dwi selalunya lebih pantas, lebih tepat dan lebih mudah diakses daripada seret dan lepas. Pertimbangan Kebolehgunaan Satu nota penting yang perlu diingat ialah semua jenis senarai perlu menyokong navigasi papan kekunci (cth., ↑/↓ kekunci anak panah) untuk kebolehaksesan. Sesetengah orang hampir selalu bergantung pada papan kekunci untuk memilih pilihan sebaik sahaja mereka mula menaip.
Di luar itu:
Untuk senarai dengan 7+ pilihan, pertimbangkan untuk menambahkan fungsi "Pilih Semua" dan "Kosongkan Semua" untuk menyelaraskan interaksi pengguna. Untuk senarai panjang dengan kotak kombo, dedahkan semua pilihan kepada pengguna dengan klik/ketik, kerana jika tidak, mereka mungkin tidak akan pernah dilihat, Paling penting, jangan paparkan elemen bukan interaktif sebagai butang untuk mengelakkan kekeliruan — dan jangan paparkan elemen interaktif sebagai label statik.
Penggulungan: Bukan Semuanya Merupakan Dropdown Nama penting. Senarai menegak pilihan biasanya digambarkan sebagai "dropdown" - tetapi selalunya ia agak terlalu generik untuk menjadi bermakna. "Titik turun" membayangkan bahawa senarai itu disembunyikan secara lalai. "Multipilih" membayangkan berbilang pilihan (kotak pilihan) dalam senarai. "Kotak kombo" membayangkan input teks. Dan "Kotak Senarai" hanyalah senarai item yang boleh dipilih, kelihatan pada setiap masa. Matlamatnya bukan untuk selaras dengan takrifan di atas demi itu. Tetapi sebaliknya untuk menyelaraskan niat — bercakap bahasa yang sama semasa membuat keputusan, mereka bentuk, membina dan kemudian menggunakan komponen UI ini. Ia sepatutnya berfungsi untuksemua orang — pereka bentuk, jurutera dan pengguna akhir — selagi label statik tidak kelihatan seperti butang interaktif dan butang radio tidak bertindak seperti kotak pilihan. Temui "Corak Reka Bentuk Untuk Antara Muka AI" Temui Corak Reka Bentuk Untuk Antara Muka AI, kursus video baharu Vitaly dengan contoh praktikal daripada produk kehidupan sebenar — dengan latihan UX secara langsung akan berlangsung tidak lama lagi. Lompat ke pratonton percuma. Temui Corak Reka Bentuk Untuk Antara Muka AI, kursus video Vitaly tentang reka bentuk antara muka & UX.
Video + Latihan UXVideo sahajaVideo + Latihan UX$ 450.00 $ 799.00
Dapatkan Video + Latihan UX30 pelajaran video (10j) + Latihan UX Langsung.100 hari jaminan wang dikembalikan.Video sahaja$ 275.00$ 395.00
Dapatkan kursus video30 pelajaran video (10j). Dikemas kini setiap tahun. Juga tersedia sebagai Himpunan UX dengan 3 kursus video.
Sumber Berguna
Autolengkap: Garis Panduan UX, oleh Vitaly Friedman Combobox, oleh eBay 👍 Kombobox, oleh Elastik Kombobox, oleh Elisa Combobox, oleh MongoDB 👍 Combobox, melalui Visa 👍 Combobox, oleh Watson (Docplanner) Combobox, oleh Wikimedia Kombobox, oleh Zendesk Multiselect (MongoDB Combobox Design Docs), oleh MongoDB 👍 Carian Berbilang Pilih, oleh Wikimedia Kotak Kombo berbilang pilihan, oleh Vaadin Multiselect, melalui Visa Pemindahan (contoh kotak senarai), oleh Ant Design Kotak senarai, oleh Hopper Kotak Senarai, oleh Vaadin Kotak senarai, melalui Visa Pemilih Senarai Dwi, oleh Red Hat (PatternFly) Dual Listbox, oleh Salesforce (Sistem Reka Bentuk Kilat) Senarai Pemindahan, oleh Mantine Dual Listbox, oleh Dashlite Lencana lwn. Pil lwn Chips lwn Tag, oleh Vitaly Friedman Kotak Senarai lwn. Senarai Turun, oleh Anna Kaley (NN/g)
