Kaya ano ang pagkakaiba sa pagitan ng combobox, multiselect, listbox, at dropdown? Bagama't maaaring magkatulad ang hitsura ng lahat ng bahagi ng UI na ito, nagsisilbi ang mga ito sa iba't ibang layunin. Ang pagpili ay madalas na bumababa sa bilang ng mga magagamit na opsyon at ang kanilang visibility. Tingnan natin kung paano sila nagkakaiba, kung anong layunin ang kanilang pinaglilingkuran, at kung paano pipiliin ang tama — pag-iwas sa mga hindi pagkakaunawaan at maling mga inaasahan habang nasa daan.
Hindi Lahat ng Pattern ng Listahan ay Pareho Ang lahat ng bahagi ng UI na naka-highlight sa itaas ay may eksaktong isang bagay na karaniwan: sinusuportahan nila ang mga pakikipag-ugnayan ng mga user sa mga listahan. Gayunpaman, medyo naiiba ang ginagawa nila. Tingnan natin ang bawat isa, isa-isa:
Ang dropdown → list ay nakatago hanggang sa ma-trigger ito. Combobox → type para i-filter + pumili ng 1 opsyon. Multiselect → type to filter + pumili ng maraming opsyon. Listbox → lahat ng opsyon sa listahan ay makikita bilang default (+ scroll). Dual listbox → ilipat ang mga item sa pagitan ng 2 listbox.
Sa madaling salita, pinagsasama ng Combobox ang field ng pag-input ng text sa isang dropdown na listahan, para makapag-type ang mga user para mag-filter at pumili ng iisang opsyon. Sa Multiselect, maaaring pumili ang mga user ng maraming opsyon (kadalasang ipinapakita bilang mga tabletas o chips). Ipinapakita ng mga listbox ang lahat ng mga opsyon sa listahan na nakikita bilang default, madalas na may pag-scroll. Nakatutulong kapag kailangan ng mga user na makita kaagad ang lahat ng available na pagpipilian. Ang dual listbox (tinatawag ding listahan ng paglilipat) ay isang variation ng isang listbox na nagbibigay-daan sa mga user na maglipat ng mga item sa pagitan ng dalawang listbox (kaliwa ↔ kanan), karaniwang para sa maramihang pagpili. Huwag Itago ang Mga Madalas na Ginagamit na Opsyon Gaya ng nabanggit sa itaas, ang pagpili ng tamang bahagi ng UI ay nakasalalay sa 2 salik: kung gaano karaming mga opsyon sa listahan ang available, at kung ang lahat ng opsyong ito ay kailangang makita bilang default. Ang lahat ng mga listahan ay maaaring may mga istraktura ng puno, pugad, at pagpili ng grupo, masyadong.
Mayroong isang prinsipyo na sinusunod ko nang maraming taon para sa anumang bahagi ng UI: huwag itago ang mga madalas na ginagamit na opsyon. Kung ang mga user ay madalas na umaasa sa isang partikular na seleksyon, napakaliit ng halaga sa pagtatago nito mula sa kanila. Maaari naming gawin itong paunang napili, o (kung mayroon lamang 2–3 na madalas na ginagamit na mga opsyon) ipakita ang mga ito bilang mga chip o mga pindutan, at pagkatapos ay ipakita ang natitirang listahan sa pakikipag-ugnayan. Sa pangkalahatan, magandang ideya na palaging magpakita ng mga sikat na opsyon — kahit na maaaring makalat ito sa UI. Paano Pumili ng Alin? Hindi lahat ng listahan ay nangangailangan ng kumplikadong paraan ng pagpili. Para sa mga listahang may mas kaunti sa 5 item, ang mga simpleng radio button o checkbox ay karaniwang pinakamahusay na gumagana. Ngunit kung kailangan ng mga user na pumili mula sa isang malaking listahan ng mga opsyon (hal., 200+ item), nakakatulong ang combobox + multiselect dahil sa mas mabilis na pag-filter (hal., pagpili ng bansa).
Nakakatulong ang mga listbox kapag kailangan ng mga tao na mag-access ng maraming opsyon nang sabay-sabay, lalo na kung kailangan din nilang pumili ng maraming opsyon mula sa listahang iyon. Maaaring makatulong ang mga ito para sa madalas na ginagamit na mga filter.
Ang dual listbox ay madalas na hindi pinapansin at binabalewala. Ngunit maaari itong maging kapaki-pakinabang para sa mga kumplikadong gawain, hal. maramihang pagpili, o pagtatalaga ng mga tungkulin, gawain, responsibilidad. Ito ang tanging bahagi ng UI na nagbibigay-daan sa mga user na suriin ang kanilang buong listahan ng pagpili nang magkatabi sa listahan ng pinagmulan bago gumawa (tinatawag ding "Listahan ng paglilipat"). Sa katunayan, ang dual listbox ay kadalasang mas mabilis, mas tumpak, at mas naa-access kaysa drag-and-drop. Mga Pagsasaalang-alang sa Usability Ang isang mahalagang tala na dapat tandaan ay ang lahat ng uri ng listahan ay kailangang suportahan ang pag-navigate sa keyboard (hal., ↑/↓ mga arrow key) para sa accessibility. Ang ilang mga tao ay halos palaging umaasa sa keyboard upang pumili ng mga opsyon kapag nagsimula silang mag-type.
Higit pa diyan:
Para sa mga listahang may 7+ na opsyon, isaalang-alang ang pagdaragdag ng mga functionality na “Piliin Lahat” at “I-clear ang Lahat” upang i-streamline ang pakikipag-ugnayan ng user. Para sa mahahabang listahan na may combobox, ilantad ang lahat ng opsyon sa mga user sa pag-click/tap, dahil kung hindi ay maaaring hindi na sila makita, Pinakamahalaga, huwag ipakita ang mga hindi interactive na elemento bilang mga button upang maiwasan ang pagkalito — at huwag ipakita ang mga interactive na elemento bilang mga static na label.
Pagwawakas: Hindi Lahat Ay Isang Dropdown Mahalaga ang mga pangalan. Ang patayong listahan ng mga opsyon ay karaniwang inilalarawan bilang isang "dropdown" — ngunit kadalasan ay medyo generic ito para maging makabuluhan. Ang "Dropdown" ay nagpapahiwatig na ang listahan ay nakatago bilang default. Ang "Multiselect" ay nagpapahiwatig ng multi-selection (checkbox) sa loob ng isang listahan. Ang "Combobox" ay nagpapahiwatig ng text input. At ang "Listbox" ay isang listahan lamang ng mga mapipiling item, na makikita sa lahat ng oras. Ang layunin ay hindi maging pare-pareho sa mga kahulugan sa itaas para sa kapakanan nito. Ngunit sa halip na ihanay ang mga intensyon — magsalita ng parehong wika kapag nagpapasya, nagdidisenyo, gumagawa, at pagkatapos ay ginagamit ang mga bahagi ng UI na ito. Dapat itong gumana para salahat — mga designer, inhinyero, at end user — hangga't ang mga static na label ay hindi mukhang mga interactive na button, at ang mga radio button ay hindi kumikilos na parang mga checkbox. Kilalanin ang "Mga Pattern ng Disenyo Para sa Mga Interface ng AI" Kilalanin ang Mga Pattern ng Disenyo Para sa Mga Interface ng AI, ang bagong kurso sa video ni Vitaly na may mga praktikal na halimbawa mula sa totoong buhay na mga produkto — na may live na pagsasanay sa UX na magaganap sa lalong madaling panahon. Tumalon sa isang libreng preview. Kilalanin ang Mga Pattern ng Disenyo Para sa Mga Interface ng AI, ang kursong video ni Vitaly sa disenyo ng interface at UX.
Pagsasanay sa Video + UXVideo lamangVideo + Pagsasanay sa UX$ 450.00 $ 799.00
Kumuha ng Video + UX Training30 video lessons (10h) + Live UX Training.100 araw na money-back-guarantee.Video lang$ 275.00$ 395.00
Kunin ang video course30 video lessons (10h). Ini-update taun-taon. Available din bilang isang UX Bundle na may 3 video course.
Mga Kapaki-pakinabang na Mapagkukunan
Autocomplete: Mga Alituntunin ng UX, ni Vitaly Friedman Combobox, ng eBay 👍 Combobox, ni Elastic Combobox, ni Elisa Combobox, ni MongoDB 👍 Combobox, sa pamamagitan ng Visa 👍 Combobox, ni Watson (Docplanner) Combobox, ng Wikimedia Combobox, ni Zendesk Multiselect (MongoDB Combobox Design Docs), ni MongoDB 👍 Multiselect Lookup, ng Wikimedia Multi-select Combo Box, ni Vaadin Multiselect, sa pamamagitan ng Visa Paglipat (halimbawa ng Listbox), ng Ant Design Listbox, ni Hopper Kahon ng Listahan, ni Vaadin Listbox, sa pamamagitan ng Visa Dual List Selector, ni Red Hat (PatternFly) Dual Listbox, ng Salesforce (Lightning Design System) Listahan ng Paglipat, ni Mantine Dual Listbox, ng Dashlite Badge vs. Pills vs. Chips vs. Tags, ni Vitaly Friedman Listboxes vs. Dropdown Lists, ni Anna Kaley (NN/g)
