So, wat is die verskil tussen combobox, multiselect, listbox en dropdown? Alhoewel al hierdie UI-komponente soortgelyk kan lyk, dien hulle verskillende doeleindes. Die keuse kom dikwels neer op die aantal beskikbare opsies en hul sigbaarheid. Kom ons kyk hoe hulle verskil, watter doel hulle dien en hoe om die regte een te kies - vermy misverstande en verkeerde verwagtinge langs die pad.
Nie alle lyspatrone is dieselfde nie Al die UI-komponente wat hierbo uitgelig is, het presies een ding in gemeen: hulle ondersteun gebruikers se interaksies met lyste. Hulle doen dit egter effens anders. Kom ons kyk na elkeen, een vir een:
Aftreklys → lys is versteek totdat dit geaktiveer word. Combobox → tik om te filter + kies 1 opsie. Multiselekteer → tik om te filter + kies baie opsies. Lysboks → alle lysopsies by verstek sigbaar (+ blaai). Dubbele lysboks → skuif items tussen 2 lysbokse.
Met ander woorde, Combobox kombineer 'n teksinvoerveld met 'n aftreklys, sodat gebruikers kan tik om te filter en 'n enkele opsie te kies. Met Multiselect kan gebruikers baie opsies kies (dikwels vertoon as pille of skyfies). Lysblokkies vertoon alle lysopsies wat by verstek sigbaar is, dikwels met blaai. Dit is nuttig wanneer gebruikers onmiddellik alle beskikbare keuses moet sien. Dubbele lysboks (ook genoem oordraglys) is 'n variasie van 'n lysboks wat gebruikers toelaat om items tussen twee lysbokse (links ↔ regs) te skuif, tipies vir grootmaatseleksie. Moet nooit Opsies wat gereeld gebruik word versteek nie Soos hierbo genoem, hang die keuse van die regte UI-komponent af van 2 faktore: hoeveel lysopsies beskikbaar is, en of al hierdie opsies by verstek sigbaar moet wees. Alle lyste kan ook boomstrukture, nes en groepkeuse hê.
Daar is een beginsel wat ek al jare volg vir enige UI-komponent: versteek nooit gereeld gebruikte opsies nie. As gebruikers gereeld op 'n spesifieke keuse staatmaak, is daar baie min waarde om dit vir hulle weg te steek. Ons kan dit óf vooraf gekies maak, óf (as daar net 2–3 gereeld gebruikte opsies is) dit as skyfies of knoppies wys, en dan die res van die lys op interaksie wys. Oor die algemeen is dit 'n goeie idee om altyd gewilde opsies te vertoon - selfs al kan dit die UI deurmekaar maak. Hoe om te kies watter? Nie elke lys het 'n komplekse seleksiemetode nodig nie. Vir lyste met minder as 5 items werk eenvoudige radioknoppies of merkblokkies gewoonlik die beste. Maar as gebruikers uit 'n groot lys opsies moet kies (bv. 200+ items), is combobox + multiselect nuttig vanweë die vinniger filtering (bv. landkeuse).
Listboxes is nuttig wanneer mense toegang tot baie opsies op een slag moet kry, veral as hulle ook baie opsies uit daardie lys moet kies. Hulle kan nuttig wees vir filters wat gereeld gebruik word.
Dubbele lysboks word dikwels oor die hoof gesien en geïgnoreer. Maar dit kan baie nuttig wees vir komplekse take, bv. grootmaat seleksie, of die toekenning van rolle, take, verantwoordelikhede. Dit is die enigste UI-komponent wat gebruikers in staat stel om hul volledige seleksielys langs die bronnelys te hersien voordat hulle pleeg (ook genoem "Oordraglys"). Trouens, dubbele lysboks is dikwels vinniger, meer akkuraat en meer toeganklik as sleep-en-los. Gebruiksoorwegings Een belangrike nota om in gedagte te hou, is dat alle lystipes sleutelbordnavigasie (bv. ↑/↓ pyltjiesleutels) moet ondersteun vir toeganklikheid. Sommige mense sal byna altyd op die sleutelbord staatmaak om opsies te kies sodra hulle begin tik.
Verder as dit:
Vir lyste met 7+ opsies, oorweeg dit om "Kies alles" en "Vee alles uit"-funksies by te voeg om gebruikersinteraksie te stroomlyn. Vir lang lyste met 'n kombinasieboks, stel alle opsies bloot aan gebruikers met klik/tik, anders sal hulle dalk nooit gesien word nie, Die belangrikste is, moenie nie-interaktiewe elemente as knoppies vertoon om verwarring te voorkom nie – en moenie interaktiewe elemente as statiese etikette vertoon nie.
Samevatting: Nie alles is 'n aftreklys nie Name maak saak. 'n Vertikale lys opsies word tipies beskryf as 'n "aftreklys" - maar dikwels is dit 'n bietjie te generies om betekenisvol te wees. "Dropdown" dui daarop dat die lys by verstek versteek is. "Multiselect" impliseer multi-seleksie (merkblokkie) binne 'n lys. "Combobox" impliseer teksinvoer. En "Listbox" is bloot 'n lys van kiesbare items, te alle tye sigbaar. Die doel is nie om ter wille daarvan in ooreenstemming met die definisies hierbo te wees nie. Maar eerder om bedoelings in lyn te bring - praat dieselfde taal wanneer jy besluit oor, ontwerp, bou en dan hierdie UI-komponente gebruik. Dit behoort te werk viralmal - ontwerpers, ingenieurs en eindgebruikers - solank statiese etikette nie soos interaktiewe knoppies lyk nie, en radioknoppies nie soos merkblokkies optree nie. Ontmoet "Ontwerppatrone vir KI-koppelvlakke" Ontmoet Design Patterns For AI Interfaces, Vitaly se nuwe videokursus met praktiese voorbeelde van werklike produkte - met 'n regstreekse UX-opleiding wat binnekort plaasvind. Spring na 'n gratis voorskou. Ontmoet ontwerppatrone vir KI-koppelvlakke, Vitaly se videokursus oor koppelvlakontwerp en UX.
Video + UX-opleiding Slegs videoVideo + UX-opleiding $ 450.00 $ 799.00
Kry Video + UX-opleiding 30 videolesse (10 uur) + Regstreekse UX-opleiding. 100 dae geld-terug-waarborg. Video slegs $ 275.00$ 395.00
Kry die videokursus30 videolesse (10h). Jaarliks opgedateer. Ook beskikbaar as 'n UX-bundel met 3 videokursusse.
Nuttige hulpbronne
Outovoltooi: UX-riglyne, deur Vitaly Friedman Combobox, deur eBay 👍 Combobox, deur Elastic Combobox, deur Elisa Combobox, deur MongoDB 👍 Combobox, deur Visa 👍 Combobox, deur Watson (Docplanner) Combobox, deur Wikimedia Combobox, deur Zendesk Multiselect (MongoDB Combobox Design Docs), deur MongoDB 👍 Multiselect Lookup, deur Wikimedia Multi-kies kombinasieboks, deur Vaadin Multiselect, deur Visa Oordrag (Listbox-voorbeeld), deur Ant Design Listbox, deur Hopper List Box, deur Vaadin Listbox, deur Visa Dubbele lyskieser, deur Red Hat (PatternFly) Dual Listbox, deur Salesforce (Lightning Design System) Oordraglys, deur Mantine Dual Listbox, deur Dashlite Kentekens vs. Pille vs. Chips vs. Tags, deur Vitaly Friedman Listboxes vs. Dropdown Lists, deur Anna Kaley (NN/g)
