Se konsa, ki diferans ki genyen ant Combobox, Multiselect, listbox, ak dropdown? Pandan ke tout eleman UI sa yo ka parèt menm jan, yo sèvi diferan rezon. Chwa a souvan vini desann nan kantite opsyon ki disponib ak vizibilite yo. Ann wè ki jan yo diferan, ki objektif yo sèvi, ak ki jan yo chwazi youn nan bon - evite malantandi ak atant move sou wout la.
Se pa tout modèl lis yo menm Tout eleman UI yo make pi wo a gen egzakteman yon bagay an komen: yo sipòte entèraksyon itilizatè yo ak lis. Sepandan, yo fè sa yon ti kras diferan. Ann pran yon gade nan chak, youn pa youn:
Dropdown → lis kache jiskaske li deklanche. Combobox → tape pou filtre + chwazi 1 opsyon. Multiselect → tape pou filtre + chwazi anpil opsyon. Listbox → tout opsyon lis vizib pa default (+ woulo liv). Double listbox → deplase atik ant 2 listboxes.
Nan lòt mo, Combobox konbine yon jaden antre tèks ak yon lis dropdown, pou itilizatè yo ka tape filtre epi chwazi yon sèl opsyon. Avèk Multiselect, itilizatè yo ka chwazi anpil opsyon (souvan parèt kòm grenn oswa chips). Bwat lis yo montre tout opsyon lis vizib pa default, souvan ak defile. Li itil lè itilizatè yo bezwen wè tout chwa ki disponib imedyatman. Lis doub (yo rele tou lis transfè) se yon varyasyon yon listbox ki pèmèt itilizatè yo deplase atik ant de listboxes (gòch ↔ adwat), anjeneral pou seleksyon an gwo. Pa janm kache opsyon yo itilize souvan Kòm mansyone pi wo a, chwa nan bon eleman UI depann de 2 faktè: konbyen opsyon lis ki disponib, epi si tout opsyon sa yo bezwen vizib pa default. Tout lis yo ka gen estrikti pyebwa, nidifikasyon, ak seleksyon gwoup tou.
Gen yon prensip ke mwen te swiv pou ane pou nenpòt eleman UI: pa janm kache opsyon yo itilize souvan. Si itilizatè yo konte sou yon seleksyon patikilye souvan, gen anpil valè nan kache li nan men yo. Nou ta ka swa fè li pre-seleksyon, oswa (si gen sèlman 2-3 opsyon yo itilize souvan) montre yo kòm chips oswa bouton, ak Lè sa a, montre rès la nan lis la sou entèraksyon. An jeneral, li se yon bon lide pou toujou montre opsyon popilè - menm si li ta ka ankonbre UI a. Kijan Pou Chwazi Kiyès? Se pa tout lis ki bezwen yon metòd seleksyon konplèks. Pou lis ki gen mwens pase 5 atik, bouton radyo senp oswa kazye anjeneral travay pi byen. Men, si itilizatè yo bezwen chwazi nan yon lis gwo opsyon (egzanp, 200+ atik), Combobox + Multiselect yo itil paske nan filtraj la pi vit (egzanp, seleksyon peyi).
Bwat lis yo itil lè moun bezwen jwenn aksè nan anpil opsyon an menm tan, sitou si yo bezwen chwazi anpil opsyon nan lis sa a tou. Yo ta ka itil pou filtè yo itilize souvan.
Doub listbox souvan neglije ak inyore. Men, li kapab trè itil pou travay konplèks, pa egzanp, seleksyon an gwo, oswa bay wòl, travay, responsablite. Se sèl eleman UI ki pèmèt itilizatè yo revize lis seleksyon konplè yo kòt a kòt ak lis sous la anvan yo komèt (yo rele tou "lis transfè"). An reyalite, lis doub se souvan pi vit, pi egzak, ak pi aksesib pase trennen-and-depoze. Konsiderasyon itilizasyon Yon nòt enpòtan pou kenbe nan tèt ou se ke tout kalite lis bezwen sipòte navigasyon klavye (egzanp, ↑/↓ kle flèch) pou aksè. Gen kèk moun ki pral prèske toujou konte sou klavye a pou chwazi opsyon yon fwa yo kòmanse tape.
Anplis de sa:
Pou lis ki gen plis pase 7 opsyon, konsidere ajoute fonksyonalite "Chwazi tout" ak "Klere tout" pou rasyonalize entèraksyon itilizatè. Pou lis ki long ak yon bwat liste, ekspoze tout opsyon yo bay itilizatè yo sou klike sou / tape, kòm otreman yo pa janm ka wè, Sa ki pi enpòtan, pa montre eleman ki pa entèaktif kòm bouton pou evite konfizyon - epi pa montre eleman entèaktif kòm etikèt estatik.
Anbalaj: Se pa tout bagay se yon Dropdown Non enpòtan. Yon lis vètikal opsyon anjeneral dekri kòm yon "dropdown" - men souvan li nan yon ti jan twò jenerik yo dwe sans. "Dropdown" sijesyon ke lis la kache pa default. "Multiselect" vle di seleksyon milti (kaz) nan yon lis. "Combobox" vle di antre tèks. Ak "Listbox" se tou senpleman yon lis atik ki ka chwazi, vizib tout tan. Objektif la se pa dwe konsistan avèk definisyon ki anwo yo pou dedomajman pou li. Men, pito fè aliman entansyon - pale menm lang lè w ap deside sou, konsepsyon, bati, ak Lè sa a, sèvi ak eleman sa yo UI. Li ta dwe travay poutout moun - konsèpteur, enjenyè, ak itilizatè final yo - osi lontan ke etikèt estatik pa sanble ak bouton entèaktif, ak bouton radyo pa aji tankou kaz. Rankontre "Modèl konsepsyon pou entèfas AI" Rankontre Design Patterns For AI Interfaces, nouvo kou videyo Vitaly a ak egzanp pratik ki soti nan pwodwi lavi reyèl - ak yon fòmasyon UX ap viv byento. Ale nan yon aperçu gratis. Rankontre Design Patterns For AI Interfaces, kou videyo Vitaly a sou konsepsyon koòdone ak UX.
Videyo + Fòmasyon UX Videyo sèlman Videyo + Fòmasyon UX$ 450.00 $ 799.00
Jwenn Videyo + Fòmasyon UX30 leson videyo (10h) + Fòmasyon UX Live.100 jou garanti ranbousman. Videyo sèlman$ 275.00$ 395.00
Jwenn kou videyo 30 leson videyo (10h). Mizajou chak ane. Disponib tou kòm yon pake UX ak 3 kou videyo.
Resous itil
Autocomplete: Gid UX, pa Vitaly Friedman Combobox, pa eBay 👍 Combobox, pa Elastic Combobox, pa Elisa Combobox, pa MongoDB 👍 Combobox, pa Visa 👍 Combobox, pa Watson (Docplanner) Combobox, pa Wikimedia Combobox, pa Zendesk Multiselect (MongoDB Combobox Design Docs), pa MongoDB 👍 Multiselect Lookup, pa Wikimedia Multi-chwazi Combo Box, pa Vaadin Multiselect, pa Visa Transfè (egzanp Listbox), pa Ant Design Listbox, pa Hopper List Box, pa Vaadin Listbox, pa Visa Seleksyon Lis Doub, pa Red Hat (PatternFly) Doub Listbox, pa Salesforce (Sistèm Design Lightning) Lis Transfè, pa Mantine Doub Listbox, pa Dashlite Badj vs Grenn vs Chips vs Tags, pa Vitaly Friedman Listboxes vs Dropdown Lists, pa Anna Kaley (NN/g)
