Janten naon bédana combobox, multiselect, listbox, sareng dropdown? Sanaos sadaya komponén UI ieu sigana sami, aranjeunna ngagaduhan tujuan anu béda. Pilihan sering turun ka jumlah pilihan anu sayogi sareng pisibilitasna. Hayu urang tingali kumaha aranjeunna béda, naon tujuan aranjeunna ngawula, sarta kumaha carana milih hiji katuhu - Ngahindarkeun salah harti jeung ekspektasi salah sapanjang jalan.
Henteu Sadaya Pola Daptar Sarua Sadaya komponén UI anu disorot di luhur gaduh persis hiji hal anu umum: aranjeunna ngadukung interaksi pangguna sareng daptar. Nanging, aranjeunna ngalakukeunana rada béda. Hayu urang tingali masing-masing, hiji-hiji:
Dropdown → daptar disumputkeun dugi ka dipicu. Combobox → ngetik pikeun nyaring + pilih 1 pilihan. Multiselect → type to filter + pilih seueur pilihan. Listbox → sadaya pilihan daptar katingali sacara standar (+ gulung). Kotak daptar ganda → mindahkeun item antara 2 kotak daptar.
Dina basa sejen, Combobox ngagabungkeun widang input téks kalawan daptar dropdown, jadi pamaké bisa ngetik pikeun nyaring tur pilih hiji pilihan. Kalayan Multiselect, pangguna tiasa milih seueur pilihan (sering ditampilkeun salaku pil atanapi chip). Listboxes mintonkeun sadaya pilihan daptar katempo sacara standar, mindeng jeung ngagulung. Éta mangpaat nalika pangguna kedah langsung ningali sadaya pilihan anu sayogi. Kotak daptar ganda (disebut ogé daptar transfer) nyaéta variasi kotak daptar anu ngamungkinkeun pamaké pikeun mindahkeun barang antara dua kotak daptar (kénca ↔ katuhu), ilaharna pikeun pilihan bulk. Kungsi Sumputkeun Pilihan anu Sering Dipaké Sakumaha didadarkeun di luhur, pilihan komponén UI katuhu gumantung kana 2 faktor: sabaraha pilihan daptar sadia, sarta lamun kabeh pilihan ieu kudu ditingali sacara standar. Sadaya daptar tiasa gaduh struktur tangkal, nyarang, sareng pilihan grup ogé.
Aya hiji prinsip anu kuring parantos mangtaun-taun pikeun komponén UI: henteu pernah nyumputkeun pilihan anu sering dianggo. Upami pangguna sering ngandelkeun pilihan tinangtu, sakedik nilai pikeun nyumputkeunana ti aranjeunna. Urang tiasa ngadamel tos dipilih, atanapi (upami ngan ukur aya 2-3 pilihan anu sering dianggo) nunjukkeun aranjeunna salaku chip atanapi tombol, teras nunjukkeun daptar sesa dina interaksi. Sacara umum, éta mangrupakeun ide nu sae pikeun salawasna mintonkeun pilihan populér - sanajan eta bisa clutter UI. Kumaha Pilih Mana? Henteu unggal daptar peryogi metode pilihan anu kompleks. Pikeun daptar anu kurang ti 5 item, tombol radio saderhana atanapi kotak centang biasana dianggo pangsaéna. Tapi lamun pamaké kudu milih tina daptar badag tina pilihan (misalna 200+ item), combobox + multiselect mantuan sabab gancang nyaring (misalna pilihan nagara).
Kotak daptar ngabantosan nalika jalma kedah ngaksés seueur pilihan sakaligus, khususna upami aranjeunna kedah milih seueur pilihan tina daptar éta ogé. Éta tiasa ngabantosan pikeun saringan anu sering dianggo.
Daptar kotak ganda sering ditingali sareng teu dipalire. Tapi bisa jadi pohara mantuan pikeun tugas kompléks, misalna pilihan bulk, atawa assigning kalungguhan, tugas, tanggung jawab. Ieu hiji-hijina komponén UI anu ngamungkinkeun pamaké marios daptar pilihan pinuh maranéhanana sisi-demi-sisi jeung daptar sumber saméméh committing (ogé disebut "Daptar Transfer"). Nyatana, kotak daptar ganda sering langkung gancang, langkung akurat, sareng langkung diaksés tibatan sered sareng serelek. Pertimbangan Usability Hiji catetan penting pikeun diémutan nyaéta yén sadaya jinis daptar kedah ngadukung navigasi kibor (contona, ↑/↓ kenop panah) pikeun diakses. Sababaraha urang bakal ampir sok ngandelkeun keyboard pikeun milih pilihan nalika aranjeunna mimiti ngetik.
Saluareun éta:
Pikeun daptar kalawan 7+ pilihan, mertimbangkeun nambahkeun "Pilih Sadaya" jeung "Hapus Sadaya" pungsi pikeun streamline interaksi pamaké. Pikeun daptar anu panjang sareng kotak kombo, pasihan sadaya pilihan ka pangguna dina klik / ketok, upami henteu aranjeunna moal pernah katingali, Pangpentingna, ulah mintonkeun elemen non-interaktif salaku tombol pikeun nyegah kabingungan - sarta ulah nembongkeun elemen interaktif salaku labél statik.
Wrapping Up: Henteu Sadayana mangrupikeun Dropdown Ngaran penting. Daptar pilihan nangtung biasana didadarkeun salaku "dropdown" - tapi seringna rada umum teuing janten bermakna. "Dropdown" nunjukkeun yén daptar disumputkeun sacara standar. "Multiselect" nunjukkeun multi-seleksi (kotak centang) dina daptar. "Combobox" nunjukkeun input téks. Sareng "Kotak Daptar" ngan saukur daptar barang anu tiasa dipilih, katingali unggal waktos. Tujuanana henteu konsisten sareng definisi di luhur demi éta. Tapi pikeun nyaluyukeun niat - nyarios basa anu sami nalika mutuskeun, ngarancang, ngawangun, teras nganggo komponén UI ieu. Éta kedah dianggo pikeundulur - désainer, insinyur, jeung pamaké tungtung - salami labél statik teu kasampak kawas tombol interaktif, sarta tombol radio teu meta kawas kotak centang. Minuhan "Pola Desain Pikeun Antarmuka AI" Minuhan Pola Desain Pikeun Antarmuka AI, kursus vidéo anyar Vitaly kalayan conto praktis tina produk kahirupan nyata - kalayan pelatihan UX langsung bakal lumangsung pas. Luncat ka sawangan gratis. Papanggih Pola Desain Pikeun Antarmuka AI, kursus vidéo Vitaly ngeunaan desain antarmuka & UX.
Video + Pelatihan UX ngan pidéoVideo + Pelatihan UX$ 450.00 $ 799.00
Kéngingkeun pidéo + Pelatihan UX30 palajaran pidéo (10h) + Pelatihan UX Langsung.100 dinten ngajamin artos-balik. Video hungkul $ 275.00$ 395.00
Kéngingkeun kursus pidéo30 palajaran pidéo (10h). Diropéa taunan. Ogé sayogi salaku UX Bundle sareng 3 kursus video.
Sumberdaya Mangpaat
Autocomplete: Pedoman UX, ku Vitaly Friedman Combobox, ku eBay 👍 Combobox, ku Elastis Combobox, ku Elisa Combobox, ku MongoDB 👍 Combobox, ku Visa 👍 Combobox, ku Watson (Docplanner) Combobox, ku Wikimedia Combobox, ku Zendesk Multiselect (MongoDB Combobox Design Docs), ku MongoDB 👍 Multiselect Lookup, ku Wikimedia Multi-pilih Combo Box, ku Vaadin Multiselect, ku Visa Transfer (conto Listbox), ku Ant Design Listbox, ku Hopper Daptar Box, ku Vaadin Listbox, ku Visa Pamilih Daptar Ganda, ku Red Hat (PatternFly) Dual Listbox, ku Salesforce (Sistem Desain Kilat) Daptar Transfer, ku Mantine Dual Listbox, ku Dashlite Badges vs Pél vs Chips vs Tags, ku Vitaly Friedman Listboxes vs. Dropdown Lists, ku Anna Kaley (NN/g)
