Այսպիսով, ո՞րն է տարբերությունը combobox-ի, multiselect-ի, listbox-ի և dropdown-ի միջև: Թեև այս բոլոր UI բաղադրիչները կարող են նման լինել, դրանք ծառայում են տարբեր նպատակների: Ընտրությունը հաճախ կախված է առկա տարբերակների քանակից և դրանց տեսանելիությունից: Տեսնենք, թե ինչպես են դրանք տարբերվում, ինչ նպատակի են ծառայում և ինչպես ընտրել ճիշտը` ճանապարհին խուսափել թյուրիմացություններից և սխալ սպասումներից:
Ցուցակի ոչ բոլոր նախշերը նույնն են Վերևում ընդգծված բոլոր UI բաղադրիչներն ունեն ուղիղ մեկ ընդհանուր բան. նրանք աջակցում են օգտատերերի փոխազդեցությանը ցուցակների հետ: Այնուամենայնիվ, նրանք դա անում են մի փոքր այլ կերպ: Եկեք նայենք յուրաքանչյուրին, մեկ առ մեկ.
Բացվող → ցանկը թաքնված է, մինչև այն գործարկվի: Combobox → մուտքագրել զտելու համար + ընտրել 1 տարբերակ: Բազմաընտրություն → տպեք զտելու համար + ընտրեք բազմաթիվ տարբերակներ: Ցուցակարկղ → ցուցակի բոլոր ընտրանքները տեսանելի են լռելյայն (+ ոլորել): Կրկնակի ցուցակի տուփ → տեղափոխեք տարրերը 2 ցուցակի արկղերի միջև:
Այլ կերպ ասած, Combobox-ը համատեղում է տեքստի մուտքագրման դաշտը բացվող ցանկի հետ, որպեսզի օգտվողները կարողանան մուտքագրել զտելու համար և ընտրել մեկ տարբերակ: Multiselect-ի միջոցով օգտվողները կարող են ընտրել բազմաթիվ տարբերակներ (հաճախ ցուցադրվում են որպես հաբեր կամ չիպսեր): Ցուցակարկղերը ցուցադրում են բոլոր ցանկի ընտրանքները, որոնք տեսանելի են լռելյայն, հաճախ ոլորելով: Օգտակար է, երբ օգտատերերը պետք է անմիջապես տեսնեն բոլոր հասանելի ընտրությունները: Կրկնակի ցուցակի տուփը (նաև կոչվում է փոխանցման ցուցակ) ցուցակի տուփի տարբերակ է, որը թույլ է տալիս օգտվողներին տեղափոխել տարրերը երկու ցուցակի տուփերի միջև (ձախ ↔ աջ), սովորաբար զանգվածային ընտրության համար: Երբեք մի թաքցրեք հաճախ օգտագործվող ընտրանքները Ինչպես նշվեց վերևում, UI բաղադրիչի ճիշտ ընտրությունը կախված է 2 գործոնից՝ ցուցակի քանի տարբերակ կա, և արդյոք այս բոլոր տարբերակները պետք է տեսանելի լինեն լռելյայնորեն: Բոլոր ցուցակները կարող են ունենալ նաև ծառի կառուցվածք, բնադրում և խմբային ընտրություն:
Կա մեկ սկզբունք, որին ես տարիներ շարունակ հետևում եմ ցանկացած UI բաղադրիչի համար. երբեք մի թաքցրեք հաճախակի օգտագործվող տարբերակները: Եթե օգտատերերը հաճախ են ապավինում որոշակի ընտրությանը, ապա դա նրանցից թաքցնելը շատ քիչ արժեք ունի: Մենք կարող ենք կամ այն նախապես ընտրված դարձնել, կամ (եթե կան միայն 2–3 հաճախ օգտագործվող տարբերակներ) ցույց տալ դրանք որպես չիպեր կամ կոճակներ, այնուհետև ցույց տալ ցուցակի մնացած մասը փոխազդեցության վրա: Ընդհանուր առմամբ, լավ գաղափար է միշտ ցուցադրել հանրաճանաչ տարբերակները, նույնիսկ եթե դա կարող է խառնաշփոթել միջերեսը: Ինչպե՞ս ընտրել ո՞րը: Ոչ ամեն ցանկի կարիք ունի ընտրության բարդ մեթոդ: 5-ից պակաս տարր ունեցող ցուցակների դեպքում պարզ ռադիո կոճակները կամ վանդակները սովորաբար լավագույնս աշխատում են: Բայց եթե օգտատերերը պետք է ընտրեն ընտրանքների մեծ ցանկից (օրինակ՝ 200+ տարր), Combobox + Multiselect-ը օգտակար են ավելի արագ զտման պատճառով (օրինակ՝ երկրի ընտրություն):
Ցուցակարկղերը օգտակար են, երբ մարդիկ պետք է միանգամից մուտք գործեն բազմաթիվ տարբերակներ, հատկապես, եթե նրանք պետք է ընտրեն նաև այդ ցանկից շատ տարբերակներ: Դրանք կարող են օգտակար լինել հաճախ օգտագործվող ֆիլտրերի համար:
Dual listbox-ը հաճախ անտեսվում և անտեսվում է: Բայց դա կարող է շատ օգտակար լինել բարդ առաջադրանքների համար, օրինակ՝ զանգվածային ընտրության կամ դերեր, առաջադրանքներ, պարտականություններ նշանակելու համար: Դա միակ միջերեսային բաղադրիչն է, որը թույլ է տալիս օգտատերերին ստուգել իրենց ամբողջական ընտրության ցուցակը կողք կողքի սկզբնաղբյուր ցուցակի հետ՝ նախքան կատարելը (նաև կոչվում է «Փոխանցման ցուցակ»): Իրականում, երկակի ցուցակի տուփը հաճախ ավելի արագ, ճշգրիտ և ավելի հասանելի է, քան քաշել և թողնել: Օգտագործելիության նկատառումներ Կարևոր նշումներից մեկը, որը պետք է հիշել, այն է, որ ցանկի բոլոր տեսակները պետք է աջակցեն ստեղնաշարի նավարկությանը (օրինակ՝ ↑/↓ սլաքների ստեղները) հասանելիության համար: Որոշ մարդիկ գրեթե միշտ հենվում են ստեղնաշարի վրա՝ ընտրելու տարբերակները, երբ նրանք սկսեն մուտքագրել:
Դրանից դուրս.
7+ ընտրանքներ ունեցող ցուցակների համար կարող եք ավելացնել «Ընտրել բոլորը» և «Մաքրել բոլորը» գործառույթները՝ օգտատերերի փոխազդեցությունը հեշտացնելու համար: Համակցված տուփով երկար ցուցակների համար օգտատերերին ցուցադրեք բոլոր ընտրանքները սեղմումով/հպումով, քանի որ հակառակ դեպքում դրանք երբեք չեն երևա, Ամենակարևորը, մի ցուցադրեք ոչ ինտերակտիվ տարրերը որպես կոճակներ՝ շփոթությունից խուսափելու համար, և մի ցուցադրեք ինտերակտիվ տարրերը որպես ստատիկ պիտակներ:
Ամփոփում. ամեն ինչ չէ, որ բացվող տարբերակ է Անունները կարևոր են. Ընտրանքների ուղղահայաց ցանկը սովորաբար նկարագրվում է որպես «բացվող ցուցակ», բայց հաճախ դա մի փոքր չափազանց ընդհանուր է իմաստալից լինելու համար: «Dropdown»-ը հուշում է, որ ցուցակը լռելյայնորեն թաքնված է: «Բազմակի ընտրություն» ենթադրում է բազմակի ընտրություն (ստուգման տուփ) ցուցակի մեջ: «Combobox»-ը ենթադրում է տեքստի մուտքագրում: Իսկ «Listbox»-ը պարզապես ընտրվող տարրերի ցանկ է, որը տեսանելի է միշտ: Նպատակը հանուն դրա վերը նշված սահմանումների հետ համահունչ լինելը չէ: Ավելի շուտ մտադրությունները համահունչ դարձնելու համար՝ խոսեք նույն լեզվով, երբ որոշում եք կայացնում, նախագծում, կառուցում և այնուհետև օգտագործում այս UI բաղադրիչները: Այն պետք է աշխատիբոլորը` դիզայներները, ինժեներները և վերջնական օգտագործողները, քանի դեռ ստատիկ պիտակները նման չեն ինտերակտիվ կոճակներին, իսկ ռադիոկոճակները չեն գործում վանդակների պես: Հանդիպեք «Դիզայնի նախշեր AI ինտերֆեյսների համար» Meet Design Patterns For AI Interfaces-ը, Վիտալիի նոր տեսադասընթացը՝ իրական կյանքի արտադրանքներից գործնական օրինակներով. շուտով կկայանա ուղիղ UX ուսուցում: Անցնել անվճար նախադիտման: Meet Design Patterns For AI Interfaces, Vitaly-ի տեսադասընթացը ինտերֆեյսի դիզայնի և UX-ի վերաբերյալ:
Տեսանյութ + UX ուսուցումՏեսանյութ միայնՏեսանյութ + UX ուսուցում$ 450,00$ 799,00$
Ստացեք Video + UX Training30 վիդեո դասեր (10 ժամ) + Ուղիղ UX ուսուցում։ 100 օր գումարի վերադարձի երաշխիք։ Միայն տեսանյութը$ 275,00$ 395,00$
Ստացեք վիդեո դասընթաց30 վիդեո դասեր (10ժ): Թարմացվում է ամեն տարի: Նաև հասանելի է որպես UX փաթեթ՝ 3 տեսադասընթացներով:
Օգտակար ռեսուրսներ
Ավտոմատ լրացում. UX ուղեցույցներ, Վիտալի Ֆրիդմանի կողմից Combobox, eBay-ի կողմից 👍 Combobox, Elastic-ից Combobox, Էլիզայի կողմից Combobox, MongoDB-ի կողմից 👍 Combobox, Visa-ի կողմից 👍 Combobox, by Watson (Docplanner) Combobox, Վիքիմեդիայի կողմից Combobox, Zendesk-ի կողմից Multiselect (MongoDB Combobox Design Docs), MongoDB-ի կողմից 👍 Բազմընտրական որոնում, Վիքիմեդիայի կողմից Բազմակի ընտրություն Combo Box, Vaadin-ի կողմից Բազմաընտրություն՝ Visa-ով Փոխանցում (Listbox օրինակ), Ant Design-ի կողմից Listbox, Հոփերի կողմից List Box, Վաադինի կողմից Listbox, ըստ Visa Կրկնակի ցուցակի ընտրիչ, Red Hat-ի կողմից (PatternFly) Dual Listbox, Salesforce-ի կողմից (Lightning Design System) Փոխանցման ցուցակ, Մանտինի կողմից Dual Listbox, Dashlite-ի կողմից Նշաններ ընդդեմ դեղահաբերի ընդդեմ չիպսի ընդդեմ պիտակների, Վիտալի Ֆրիդմանի կողմից Ցուցակարկղերն ընդդեմ բացվող ցուցակների՝ Աննա Քեյլի (NN/g)
