Yog li dab tsi yog qhov txawv ntawm combobox, multiselect, listbox, thiab dropdown? Txawm hais tias tag nrho cov khoom siv UI no yuav zoo sib xws, lawv ua haujlwm sib txawv. Qhov kev xaiv feem ntau yog los ntawm tus naj npawb ntawm cov kev xaiv muaj thiab lawv qhov pom tau. Cia peb saib seb lawv txawv li cas, lawv lub hom phiaj ua haujlwm li cas, thiab xaiv qhov zoo li cas - zam kev nkag siab yuam kev thiab kev cia siab tsis raug raws txoj kev.
Tsis yog txhua daim ntawv teev cov qauv zoo ib yam Tag nrho cov UI cov ntsiab lus tau hais los saum toj no muaj ib yam zoo sib xws: lawv txhawb cov neeg siv kev cuam tshuam nrog cov npe. Txawm li cas los xij, lawv ua qhov txawv me ntsis. Cia peb saib ntawm txhua tus, ib qho los ntawm ib qho:
Dropdown → npe tau muab zais kom txog thaum nws tshwm sim. Combobox → hom lim + xaiv 1 kev xaiv. Multiselect → hom lim + xaiv ntau txoj kev xaiv. Listbox → tag nrho cov npe xaiv pom los ntawm lub neej ntawd (+ scroll). Dual listbox → txav khoom ntawm 2 lub lis piam.
Hauv lwm lo lus, Combobox muab cov ntawv sau sau nrog cov npe poob qis, yog li cov neeg siv tuaj yeem ntaus lim thiab xaiv ib qho kev xaiv. Nrog Multiselect, cov neeg siv tuaj yeem xaiv ntau yam kev xaiv (feem ntau pom zoo li ntsiav tshuaj lossis chips). Listboxes tso saib tag nrho cov npe xaiv pom los ntawm lub neej ntawd, feem ntau nrog scrolling. Nws pab tau thaum cov neeg siv xav pom txhua qhov kev xaiv tam sim ntawd. Dual listbox (tseem hu ua cov npe hloov chaw) yog qhov hloov pauv ntawm lub thawv ntawv uas tso cai rau cov neeg siv txav cov khoom ntawm ob lub lis piam (sab laug ↔ txoj cai), feem ntau yog xaiv ntau. Tsis txhob zais cov kev xaiv uas nquag siv Raws li tau hais los saum toj no, kev xaiv ntawm UI tivthaiv yog nyob ntawm 2 yam: muaj pes tsawg daim ntawv xaiv muaj, thiab yog tias tag nrho cov kev xaiv no yuav tsum pom los ntawm lub neej ntawd. Tag nrho cov npe tuaj yeem muaj cov qauv ntoo, zes, thiab xaiv pab pawg, ib yam nkaus.
Muaj ib lub hauv paus ntsiab lus uas kuv tau ua raws li ntau xyoo rau ib qho UI tivthaiv: tsis txhob zais cov kev xaiv uas nquag siv. Yog tias cov neeg siv cia siab rau ib qho kev xaiv ntau zaus, nws muaj nqis tsawg heev hauv kev zais nws ntawm lawv. Peb tuaj yeem ua rau nws xaiv ua ntej, lossis (yog tias tsuas muaj 2-3 qhov kev xaiv nquag siv) qhia lawv li chips lossis khawm, thiab tom qab ntawd qhia tag nrho cov npe ntawm kev sib cuam tshuam. Feem ntau, nws yog ib lub tswv yim zoo rau ib txwm tso saib cov kev xaiv nrov - txawm tias nws yuav cuam tshuam UI. Yuav xaiv qhov twg? Tsis yog txhua daim ntawv teev npe xav tau txoj kev xaiv nyuaj. Rau cov npe uas muaj tsawg dua 5 yam khoom, cov khawm xov tooj cua yooj yim lossis checkboxes feem ntau ua haujlwm zoo tshaj. Tab sis yog tias cov neeg siv yuav tsum xaiv los ntawm cov npe loj ntawm cov kev xaiv (piv txwv li, 200+ cov khoom), combobox + multiselect yuav pab tau vim qhov kev lim dej sai dua (piv txwv li, xaiv lub teb chaws).
Listboxes muaj txiaj ntsig zoo thaum tib neeg yuav tsum nkag mus rau ntau txoj kev xaiv ib zaug, tshwj xeeb tshaj yog tias lawv yuav tsum xaiv ntau txoj hauv kev los ntawm cov npe ntawd thiab. Lawv tuaj yeem pab tau rau cov lim dej uas nquag siv.
Dual listbox feem ntau tsis saib xyuas thiab tsis quav ntsej. Tab sis nws tuaj yeem pab tau zoo rau cov haujlwm nyuaj, xws li kev xaiv ntau, lossis muab lub luag haujlwm, haujlwm, lub luag haujlwm. Nws yog tib qho UI tivthaiv uas tso cai rau cov neeg siv los tshuaj xyuas lawv cov npe xaiv tag nrho ib sab nrog cov npe hauv qab ua ntej cog lus (tseem hu ua "Hloov daim ntawv teev npe"). Qhov tseeb, dual listbox feem ntau sai dua, muaj tseeb dua, thiab siv tau ntau dua li rub-thiab-nco. Kev txiav txim siab siv Ib qho tseem ceeb uas yuav tsum nco ntsoov yog tias txhua hom npe yuav tsum tau txhawb nqa keyboard navigation (piv txwv li, ↑/↓ arrow keys) rau kev nkag tau yooj yim. Qee tus neeg yuav luag ib txwm tso siab rau cov keyboard xaiv cov kev xaiv thaum lawv pib ntaus ntawv.
Tsis tas li ntawd:
Rau cov npe nrog 7+ kev xaiv, xav txog kev ntxiv "Xaiv Tag Nrho" thiab "Tshwj Xeeb Txhua" kev ua haujlwm txhawm rau txhim kho cov neeg siv kev sib cuam tshuam. Rau cov npe ntev nrog lub combobox, nthuav tawm tag nrho cov kev xaiv rau cov neeg siv ntawm nias / kais, txwv tsis pub lawv yuav tsis pom, Qhov tseem ceeb tshaj plaws, tsis txhob tso cov ntsiab lus tsis sib tham ua cov nyees khawm kom tsis txhob muaj kev ntxhov siab - thiab tsis txhob tso cov ntsiab lus sib tham ua cov ntawv zoo li qub.
Wrapping Up: Tsis yog txhua yam yog qhov poob Cov npe tseem ceeb. Ib daim ntawv teev npe ntawm cov kev xaiv feem ntau tau piav qhia tias yog "kev poob qis" - tab sis feem ntau nws yog qhov tseem ceeb me ntsis kom muaj txiaj ntsig. "Dropdown" qhia tias cov npe tau muab zais los ntawm lub neej ntawd. "Multiselect" txhais tau hais tias ntau qhov kev xaiv (checkbox) hauv ib daim ntawv teev npe. "Combobox" txhais cov ntawv sau. Thiab "Listbox" tsuas yog cov npe ntawm cov khoom xaiv tau, pom txhua lub sijhawm. Lub hom phiaj tsis yog ua raws li cov lus txhais saum toj no rau qhov nws. Tab sis ua kom haum rau kev xav - hais tib hom lus thaum txiav txim siab, tsim qauv, tsim, thiab tom qab ntawd siv cov khoom siv UI no. Nws yuav tsum ua haujlwm rautxhua leej txhua tus - tus tsim qauv, engineers, thiab cov neeg siv kawg - tsuav yog cov ntawv zoo li qub tsis zoo li cov nyees khawm sib tham, thiab cov xov tooj cua khawm tsis ua zoo li lub thawv ntawv. Ntsib "Cov Qauv Tsim Rau AI Interfaces" Ntsib Cov Qauv Tsim Rau AI Interfaces, Vitaly cov chav kawm video tshiab nrog cov qauv siv tau los ntawm cov khoom siv hauv lub neej - nrog rau kev kawm UX tshwm sim sai sai. Dhia mus saib ua ntej pub dawb. Ntsib Cov Qauv Tsim Rau AI Interfaces, Vitaly's video chav kawm ntawm kev tsim interface & UX.
Video + UX TrainingVideo onlyVideo + UX Training $ 450.00 $ 799.00
Tau Video + UX Training30 video tshooj (10h) + Live UX Training.100 hnub tau nyiaj-rov qab-guarantee.Video tsuas yog $ 275.00$ 395.00
Tau txais cov chav kawm video 30 video tshooj (10h). Hloov kho txhua xyoo.Kuj muaj raws li UX Bundle nrog 3 chav kawm video.
Cov peev txheej muaj txiaj ntsig
Autocomplete: UX Guidelines, los ntawm Vitaly Friedman Combobox, los ntawm eBay 👍 Combobox, los ntawm Elastic Combobox, los ntawm Elisa Combobox, los ntawm MongoDB 👍 Combobox, los ntawm Visa 👍 Combobox, los ntawm Watson (Docplanner) Combobox, los ntawm Wikimedia Combobox, los ntawm Zendesk Multiselect (MongoDB Combobox Design Docs), los ntawm MongoDB 👍 Multiselect Lookup, los ntawm Wikimedia Multi-xaiv Combo Box, los ntawm Vaadin Multiselect, los ntawm Visa Hloov pauv (Listbox piv txwv), los ntawm Ant Design Listbox, los ntawm Hopper List Box, los ntawm Vaadin Listbox, los ntawm Visa Dual List Selector, los ntawm Red Hat (PatternFly) Dual Listbox, los ntawm Salesforce (Lightning Design System) Hloov npe, los ntawm Mantine Dual Listbox, los ntawm Dashlite Phaib vs. Pills vs. Chips vs. Tags, by Vitaly Friedman Listboxes vs. Dropdown Lists, los ntawm Anna Kaley (NN/g)
