Taigi, kuo skiriasi kombinuotasis laukelis, kelių pasirinkimas, sąrašų laukelis ir išskleidžiamasis meniu? Nors visi šie vartotojo sąsajos komponentai gali atrodyti panašūs, jie skirti skirtingiems tikslams. Pasirinkimas dažnai priklauso nuo galimų parinkčių skaičiaus ir jų matomumo. Pažiūrėkime, kuo jie skiriasi, kokiam tikslui tarnauja ir kaip išsirinkti tinkamą – išvengiant nesusipratimų ir klaidingų lūkesčių.
Ne visi sąrašo modeliai yra vienodi Visi aukščiau paryškinti vartotojo sąsajos komponentai turi tiksliai vieną bendrą bruožą: jie palaiko vartotojų sąveiką su sąrašais. Tačiau jie tai daro šiek tiek kitaip. Pažvelkime į kiekvieną po vieną:
Išskleidžiamasis meniu → sąrašas slepiamas, kol suaktyvinamas. Kombinuotasis laukelis → įveskite norėdami filtruoti + pasirinkite 1 parinktį. Keli pasirinkimai → įveskite norėdami filtruoti + pasirinkite daug parinkčių. Sąrašo laukelis → pagal numatytuosius nustatymus matomos visos sąrašo parinktys (+ slinkimas). Dvigubas sąrašų laukelis → perkelti elementus tarp 2 sąrašo laukelių.
Kitaip tariant, „Combobox“ sujungia teksto įvesties lauką su išskleidžiamuoju sąrašu, todėl vartotojai gali įvesti tekstą norėdami filtruoti ir pasirinkti vieną parinktį. Naudodami Multiselect, vartotojai gali pasirinkti daugybę parinkčių (dažnai rodomos kaip tabletės ar lustai). Sąrašų laukeliuose rodomos visos sąrašo parinktys, matomos pagal numatytuosius nustatymus, dažnai su slinkimu. Tai naudinga, kai naudotojams reikia nedelsiant matyti visus galimus pasirinkimus. Dvigubas sąrašų laukelis (taip pat vadinamas perkėlimo sąrašu) yra sąrašo laukelio variantas, leidžiantis vartotojams perkelti elementus tarp dviejų sąrašo laukelių (kairėje ↔ dešinėje), paprastai atliekant masinį pasirinkimą. Niekada neslėpkite dažnai naudojamų parinkčių Kaip minėta aukščiau, tinkamo vartotojo sąsajos komponento pasirinkimas priklauso nuo 2 veiksnių: kiek sąrašo parinkčių yra ir ar visos šios parinktys turi būti matomos pagal numatytuosius nustatymus. Visuose sąrašuose taip pat gali būti medžio struktūros, lizdai ir grupių pasirinkimas.
Yra vienas principas, kurio jau daugelį metų laikiausi bet kuriam vartotojo sąsajos komponentui: niekada neslėpti dažnai naudojamų parinkčių. Jei vartotojai dažnai pasikliauja tam tikru pasirinkimu, labai mažai vertės jį nuo jų slėpti. Galėtume jį iš anksto pasirinkti arba (jei yra tik 2–3 dažnai naudojamos parinktys) parodyti juos kaip lustus arba mygtukus, o tada rodyti likusią sąrašo dalį apie sąveiką. Apskritai, gera idėja visada rodyti populiarias parinktis, net jei tai gali užgriozdinti vartotojo sąsają. Kaip pasirinkti kurį? Ne kiekvienam sąrašui reikia sudėtingo atrankos metodo. Sąrašuose, kuriuose yra mažiau nei 5 elementai, paprastai geriausiai veikia paprasti radijo mygtukai arba žymimieji laukeliai. Bet jei naudotojams reikia pasirinkti iš didelio parinkčių sąrašo (pvz., 200 ir daugiau elementų), kombinuotasis laukelis + kelių pasirinkimas yra naudingi dėl greitesnio filtravimo (pvz., šalies pasirinkimas).
Sąrašų laukeliai yra naudingi, kai žmonėms reikia vienu metu pasiekti daug parinkčių, ypač jei jiems taip pat reikia pasirinkti daug parinkčių iš to sąrašo. Jie gali būti naudingi dažnai naudojamiems filtrams.
Dvigubas sąrašo laukelis dažnai nepastebimas ir ignoruojamas. Tačiau tai gali būti labai naudinga atliekant sudėtingas užduotis, pvz., masinį atranką arba priskiriant vaidmenis, užduotis, pareigas. Tai vienintelis vartotojo sąsajos komponentas, leidžiantis vartotojams prieš įsipareigojimą peržiūrėti visą pasirinkimo sąrašą kartu su šaltinių sąrašu (taip pat vadinamas „perdavimo sąrašu“). Tiesą sakant, dvigubas sąrašų laukelis dažnai yra greitesnis, tikslesnis ir lengviau pasiekiamas nei vilkimas. Naudojimo svarstymai Viena svarbi pastaba, kurią reikia atminti, yra ta, kad visų tipų sąrašai turi palaikyti klaviatūros naršymą (pvz., ↑/↓ rodyklių klavišus), kad būtų pasiekiamas. Kai kurie žmonės, pradėję rašyti, beveik visada pasikliauja klaviatūra, kad pasirinktų parinktis.
Be to:
Sąrašuose su 7 ir daugiau parinkčių apsvarstykite galimybę pridėti funkcijas „Pasirinkti viską“ ir „Išvalyti viską“, kad supaprastintumėte naudotojų sąveiką. Jei norite sudaryti ilgus sąrašus su kombinuotu laukeliu, naudotojams parodykite visas parinktis spustelėjus / bakstelėjus, nes kitu atveju jie gali būti niekada nematomi, Svarbiausia, nerodykite neinteraktyvių elementų kaip mygtukų, kad išvengtumėte painiavos, ir nerodykite interaktyvių elementų kaip statinių etikečių.
Užbaigimas: ne viskas yra išskleidžiamasis sąrašas Vardai svarbūs. Vertikalus parinkčių sąrašas paprastai apibūdinamas kaip „išskleidžiamasis sąrašas“, tačiau dažnai jis yra per daug bendras, kad būtų prasmingas. „Išskleidžiamasis meniu“ nurodo, kad sąrašas pagal numatytuosius nustatymus yra paslėptas. „Multiselect“ reiškia kelis sąrašo pasirinkimą (žymimąjį laukelį). „Combobox“ reiškia teksto įvestį. O „Sąrašo dėžutė“ yra tiesiog pasirenkamų elementų sąrašas, matomas visą laiką. Tikslas nėra atitikti aukščiau pateiktus apibrėžimus. Bet verčiau siekdami suderinti ketinimus – kalbėkite ta pačia kalba priimdami sprendimą, projektuodami, kurdami ir naudodami šiuos vartotojo sąsajos komponentus. Tai turėtų veiktivisi – dizaineriai, inžinieriai ir galutiniai vartotojai – tol, kol statinės etiketės neatrodo kaip interaktyvūs mygtukai, o radijo mygtukai – kaip žymės langeliai. Susipažinkite su „AI sąsajų dizaino modeliais“ Susipažinkite su AI sąsajų dizaino modeliais – naujas Vitalijaus vaizdo įrašų kursas su praktiniais produktų pavyzdžiais – netrukus vyks tiesioginis UX mokymas. Pereikite į nemokamą peržiūrą. Susipažinkite su AI sąsajų dizaino modeliais, Vitalijaus vaizdo įrašu apie sąsajos dizainą ir UX.
Vaizdo įrašas + UX mokymas Tik vaizdo įrašasVaizdo įrašas + UX mokymas 450,00 USD 799,00
Gaukite vaizdo įrašą + UX mokymą 30 vaizdo pamokų (10 val.) + tiesioginį UX mokymą. 100 dienų pinigų grąžinimo garantija. Tik vaizdo įrašas 275,00 395,00 USD
Gaukite vaizdo kursą30 vaizdo pamokų (10 val.). Atnaujinama kasmet. Taip pat galima įsigyti kaip UX paketą su 3 vaizdo įrašų kursais.
Naudingi ištekliai
Automatinis užbaigimas: UX gairės, Vitalijus Friedmanas „Combobox“, iš „eBay“ 👍 Combobox, Elastic „Combobox“, sukūrė Elisa Combobox, MongoDB 👍 „Combobox“, „Visa“ 👍 „Combobox“, Watson („Docplanner“) „Combobox“, „Wikimedia“. „Combobox“, „Zendesk“. Multiselect (MongoDB Combobox Design Docs), sukūrė MongoDB 👍 Multiselect Lookup, Wikimedia Keletas pasirinkimų kombinuotasis langelis, kurį sukūrė Vaadin Multiselect, per Visa Perkėlimas (sąrašo laukelio pavyzdys), pateikė Ant Design Sąrašo dėžutė, Hopper Sąrašo dėžutė, pateikė Vaadin „Visa“ sąrašo dėžutė Dviejų sąrašų parinkiklis, Red Hat („PatternFly“) Dvigubas sąrašų laukelis, „Salesforce“ („Lightning Design System“) „Mantine“ perkėlimo sąrašas Dual Listbox, Dashlite Ženkliukai prieš tabletes prieš žetonus prieš žymes, Vitalijus Friedmanas Sąrašų laukeliai ir išskleidžiamieji sąrašai, pateikė Anna Kaley (NN/g)
