Enti nsonsonoe bɛn na ɛwɔ combobox, multiselect, listbox, ne dropdown ntam? Bere a ebia ɛbɛyɛ te sɛ nea UI afã horow yi nyinaa yɛ pɛ no, ɛsono atirimpɔw ahorow. Mpɛn pii no, nea wɔpaw no gyina nneɛma dodow a wobetumi apaw ne sɛnea wotumi hu so. Momma yɛnhwɛ sɛnea ɛsono wɔn, atirimpɔw a wodi ho dwuma, ne sɛnea yɛbɛpaw nea ɛfata — a yɛbɛkwati ntease a ɛnteɛ ne akwanhwɛ a ɛnteɛ wɔ kwan so.
Ɛnyɛ List Patterns Nyinaa Na Ɛyɛ Ade Koro UI afã horow a yɛasi so dua wɔ atifi hɔ no nyinaa wɔ ade biako pɛpɛɛpɛ a ɛyɛ pɛ: ɛboa wɔn a wɔde di dwuma no nkitahodi ne list ahorow. Nanso, ɛsono sɛnea wɔyɛ saa kakra. Momma yɛnhwɛ emu biara, mmiako mmiako:
Dropdown → list no de asie kosi sɛ ɛbɛkanyan. Combobox → type to filter + paw 1 a wobɛpaw. Multiselect → type to filter + paw akwan pii. Listbox → all list options visible by default (+ scroll). Dual listbox → fa nneɛma kɔ listbox 2 ntam.
Ɔkwan foforo so no, Combobox ka nsɛm a wɔde hyɛ mu ne dropdown list bom, enti wɔn a wɔde di dwuma no betumi akyerɛw de ayi na wɔapaw ɔkwan biako. Multiselect no, wɔn a wɔde di dwuma no betumi apaw nneɛma pii (a wɔtaa da no adi sɛ nnuru anaa chips). Listboxes kyerɛ list options nyinaa a wotumi hu default, mpɛn pii no wɔde scrolling. Ɛboa bere a ɛsɛ sɛ wɔn a wɔde di dwuma no hu nneɛma a wobetumi apaw a ɛwɔ hɔ nyinaa ntɛm ara no. Dual listbox (a wɔsan frɛ no transfer list) yɛ nsakraeɛ a ɛwɔ listbox mu a ɛma wɔn a wɔde di dwuma no tumi de nneɛma kɔ listbox mmienu ntam (benkum ↔ nifa), mpɛn pii no wɔde paw nneɛma pii. Mfa Nneɛma a Wotaa De Di Dwuma Nsie Da Sɛnea yɛaka wɔ atifi hɔ no, UI fã a ɛfata a wobɛpaw no gyina nneɛma 2 so: list options dodow a ɛwɔ hɔ, ne sɛ ɛho hia sɛ wohu saa options yi nyinaa default so a. Na lists nyinaa betumi anya nnua nhyehyɛe, berebuw, ne kuw a wɔpaw, nso.
Nnyinasosɛm biako wɔ hɔ a m’adi akyi mfe pii ama UI fã biara: mfa akwan a wɔtaa de di dwuma no nsie da. If users rely on a particular selection frequently, there is very little value in hiding it from them. Yebetumi ama ayɛ nea wɔadi kan apaw, anaasɛ (sɛ akwan a wɔtaa de di dwuma 2–3 pɛ na ɛwɔ hɔ a) akyerɛ sɛ chips anaa buttons, na afei yɛakyerɛ list no nkae wɔ nkitahodi ho. Mpɛn pii no, ɛyɛ adwene pa sɛ wobɛda akwan a agye din adi bere nyinaa — sɛ mpo ebetumi ayɛ basaa wɔ UI no mu a. Ɔkwan Bɛn so na Wobɛpaw Nea Ɛwɔ Hɔ? Ɛnyɛ list biara na ehia ɔkwan a ɛyɛ den a wɔfa so paw nneɛma. Wɔ list ahorow a nneɛma nnu 5 ho no, radio buttons anaa checkboxes a ɛnyɛ den taa yɛ adwuma yiye. Nanso sɛ ɛhia sɛ wɔn a wɔde di dwuma no paw fi nneɛma a wɔpaw mu (e.g., nneɛma 200+) a, combobox + multiselect boa esiane sɛ wɔpaw no ntɛmntɛm (e.g., ɔman a wɔpaw).
Listboxes boa bere a ɛsɛ sɛ nkurɔfo nya nneɛma pii a wobetumi apaw prɛko pɛ, titiriw sɛ ɛsɛ sɛ wɔpaw nneɛma pii fi saa list no mu nso a. Wobetumi aboa ama filter ahorow a wɔtaa de di dwuma no.
Wɔtaa bu ani gu dual listbox so na wobu wɔn ani gu so. Nanso ebetumi aboa paa ama nnwuma a ɛyɛ den, s.e., paw dodow, anaasɛ dwumadi ahorow, nnwuma, asɛyɛde ahorow a wɔde bɛma. Ɛyɛ UI fã baako pɛ a ɛma wɔn a wɔde di dwuma no tumi hwɛ wɔn paw list no nyinaa mu wɔ nkyɛnkyɛn ne source list no ansa na wɔahyɛ bɔ (wɔsan frɛ no “Transfer list”). Nokwarem no, dual listbox taa yɛ ntɛmntɛm, ɛyɛ pɛpɛɛpɛ, na wotumi kɔ hɔ sen drag-and-drop. Nneɛma a Wɔde Di Dwuma Ho Nsusuwii Ade biako a ɛho hia a ɛsɛ sɛ yɛma ɛtra yɛn adwenem ne sɛ ɛsɛ sɛ list ahorow nyinaa boa keyboard navigation (e.g., ↑/↓ arrow keys) na ama woatumi akɔ hɔ. Ɛkame ayɛ sɛ nnipa binom de wɔn ho bɛto keyboard no so bere nyinaa de apaw nneɛma a wobetumi apaw bere a wɔafi ase akyerɛw no.
Nea ɛboro saa so no:
Sɛ wopɛ lists a ɛwɔ 7+ options a, susuw ho sɛ wode “Select All” ne “Clear All” dwumadie bɛka ho na ama user nkitahodi ayɛ mmerɛw. Sɛ wopɛ list atenten a combobox wom a, da options nyinaa adi kyerɛ wɔn a wɔde di dwuma wɔ click/tap so, efisɛ sɛ ɛnte saa a ebia wɔrenhu da, . Nea ɛho hia sen biara no, nkyerɛ nneɛma a ɛnyɛ nkitahodi sɛ bɔtn na woakwati adwene mu naayɛ — na nkyerɛ nneɛma a ɛfa nkitahodi ho sɛ static labels.
Wrapping Up: Ɛnyɛ Biribiara Na Ɛyɛ Dropdown Edin ahorow ho hia. Wɔtaa kyerɛkyerɛ vertical list of options mu sɛ “dropdown” — nanso mpɛn pii no ɛyɛ generic kakra dodo sɛ ɛbɛyɛ nea ntease wom. “Dropdown” kyerɛ sɛ wɔde list no asie default so. “Multiselect” kyerɛ sɛ wobɛpaw nneɛma pii (checkbox) wɔ list bi mu. “Combobox” kyerɛ sɛ wode nsɛm bɛhyɛ mu. Na “Listbox” yɛ nneɛma a wobetumi apaw a wɔahyehyɛ ara kwa, a wotumi hu bere nyinaa. Botae no nyɛ sɛ ɛne nkyerɛase ahorow a ɛwɔ atifi hɔ no bɛyɛ pɛ esiane ɛno nti. Nanso mmom sɛ wobɛma adwene ahyia — ka kasa koro no ara bere a woresi gyinae wɔ, woreyɛ nhyehyɛe, worekyekye, na afei wode saa UI afã horow yi redi dwuma no. Ɛsɛ sɛ ɛyɛ adwuma maobiara — designers, engineers, ne end users — bere tenten a static labels nnyɛ sɛ interactive buttons, na radio buttons nnyɛ adwuma te sɛ checkboxes. Hu “Nsusuwii a Wɔde Yɛ AI Nkitahodi” Meet Design Patterns For AI Interfaces, Vitaly’s video adesua foforo a nhwɛso ahorow a mfaso wɔ so a efi asetra mu nneɛma ankasa mu — a UX ntetee a ɛte ase rekɔ so nnansa yi ara. Huruw kɔ preview a wontua hwee so. Meet Design Patterns For AI Interfaces, Vitaly’s video adesua a ɛfa interface design & UX ho.
Video + UX NteteeVideo nkutooVideo + UX Ntetee$ 450.00 $ 799.00
Nya Video + UX Ntetee30 video adesua (10h) + Live UX Ntetee.100 nna sika-san-guarantee.Video nkutoo$ 275.00$ 395.00
Nya video adesua30 video adesua (10h). Updated afe biara.Wɔsan nso wɔ hɔ sɛ UX Bundle a video adesua 3 wom.
Nneɛma a Mfaso Wɔ So
Autocomplete: UX Akwankyerɛ, a Vitaly Friedman kyerɛwee Combobox, a eBay yɛe 👍 Combobox, a Elastic yɛe no Combobox, a Elisa kyerɛwee Combobox, a MongoDB 👍 yɛe Combobox, a Visa 👍 na ɛyɛe Combobox, a Watson (Ɔbenfo) yɛe Combobox, a Wikimedia yɛe Combobox, a Zendesk yɛe Multiselect (MongoDB Combobox Nsusuwii Nwoma), a MongoDB 👍 yɛe Multiselect Hwehwɛ, a Wikimedia yɛe Combo Box a wɔpaw no pii, a Vaadin yɛe Multiselect, denam Visa so Transfer (Listbox nhwɛso), a Ant Design yɛe Listbox, a Hopper kyerɛwee Adaka a Wɔde Di Dwuma, a Vaadin kyerɛwee Listbox, a Visa na ɛyɛe Dual List Selector, a Red Hat (PatternFly) yɛe . Dual Listbox, a Salesforce (Aprannaa Nsusuwii Nhyehyɛe) yɛe Nneɛma a Wɔde Kɔma Afoforo, a Mantine kyerɛwee Dual Listbox, a Dashlite yɛe Badges ne Pills ne Chips ne Tags, a Vitaly Friedman kyerɛwee Nnaka a Wɔde Di Dwuma ne Nsɛm a Wɔakyerɛw, a Anna Kaley (NN/g) kyerɛwee
