Busa unsa ang kalainan tali sa combobox, multiselect, listbox, ug dropdown? Samtang ang tanan nga kini nga mga sangkap sa UI mahimo’g parehas nga hitsura, nagsilbi kini nga lainlaing katuyoan. Ang pagpili sa kasagaran moabut ngadto sa gidaghanon sa mga anaa nga mga kapilian ug sa ilang visibility. Atong tan-awon kon sa unsang paagi sila magkalahi, unsa nga katuyoan ang ilang giserbisyohan, ug unsaon pagpili sa husto — paglikay sa dili pagsinabtanay ug sayop nga mga pagdahom.
Dili Tanan nga Mga Sumbanan sa Listahan Parehas Ang tanan nga mga sangkap sa UI nga gipasiugda sa ibabaw adunay eksakto nga usa ka butang nga managsama: gisuportahan nila ang mga interaksyon sa mga tiggamit sa mga lista. Bisan pa, lahi ang ilang gibuhat. Atong tan-awon ang matag usa, sa tinagsa:
Ang dropdown → list gitago hangtod kini ma-trigger. Combobox → type to filter + pilia ang 1 nga kapilian. Multiselect → type to filter + pilia ang daghang kapilian. Listbox → tanan nga mga opsyon sa lista nga makita pinaagi sa default (+ scroll). Doble nga listbox → ibalhin ang mga aytem taliwala sa 2 ka listbox.
Sa laing pagkasulti, ang Combobox naghiusa sa usa ka text input field nga adunay usa ka dropdown list, aron ang mga tiggamit maka-type aron sa pagsala ug pagpili sa usa ka kapilian. Uban sa Multiselect, ang mga tiggamit makapili sa daghang mga kapilian (kasagaran gipakita ingon mga pildoras o chips). Gipakita sa mga listbox ang tanan nga mga kapilian sa lista nga makita sa default, kanunay nga adunay pag-scroll. Makatabang kung kinahanglan nga makita dayon sa mga tiggamit ang tanan nga magamit nga kapilian. Ang dual listbox (gitawag usab nga lista sa pagbalhin) usa ka variation sa usa ka listbox nga nagtugot sa mga tiggamit sa pagbalhin sa mga butang tali sa duha ka listbox (wala ↔ tuo), kasagaran alang sa kadaghanan nga pagpili. Ayaw Pagtago sa Kanunay nga Gigamit nga mga Opsyon Sama sa gihisgutan sa ibabaw, ang pagpili sa husto nga bahin sa UI nagdepende sa 2 nga mga hinungdan: pila ka mga kapilian sa lista ang magamit, ug kung ang tanan nga kini nga mga kapilian kinahanglan nga makita sa default. Ang tanan nga mga lista mahimong adunay mga istruktura sa kahoy, salag, ug pagpili sa grupo, usab.
Adunay usa ka prinsipyo nga akong gisunod sa daghang mga tuig alang sa bisan unsang bahin sa UI: ayaw pagtago sa kanunay nga gigamit nga mga kapilian. Kung ang mga tiggamit kanunay nga nagsalig sa usa ka partikular nga pagpili, adunay gamay nga kantidad sa pagtago niini gikan kanila. Mahimo natong pilion kini nga daan, o (kon adunay 2–3 lang ka kanunay nga gigamit nga mga opsyon) ipakita kini isip mga chips o butones, ug dayon ipakita ang uban nga listahan sa interaksyon. Sa kinatibuk-an, maayo nga ideya nga ipakita kanunay ang mga tanyag nga kapilian - bisan kung kini makaguba sa UI. Unsaon Pagpili Unsa? Dili tanan nga lista nanginahanglan usa ka komplikado nga pamaagi sa pagpili. Alang sa mga lista nga wala’y 5 nga mga butang, ang yano nga mga butones sa radyo o mga checkbox kasagaran labing maayo. Apan kung ang mga tiggamit kinahanglan nga mopili gikan sa usa ka dako nga lista sa mga kapilian (pananglitan, 200+ nga mga butang), ang combobox + multiselect makatabang tungod sa mas paspas nga pagsala (pananglitan, pagpili sa nasud).
Ang mga listbox makatabang kung ang mga tawo kinahanglan nga maka-access sa daghang mga kapilian sa usa ka higayon, labi na kung kinahanglan nila nga mopili usab daghang mga kapilian gikan sa kana nga lista. Mahimong makatabang sila alang sa kanunay nga gigamit nga mga pagsala.
Ang doble nga listbox kanunay nga nataligam-an ug gibalewala. Apan kini makatabang kaayo alang sa komplikado nga mga buluhaton, e.g. dinaghan nga pagpili, o pag-assign sa mga tahas, mga buluhaton, mga responsibilidad. Kini ra ang bahin sa UI nga nagtugot sa mga tiggamit sa pagrepaso sa ilang tibuuk nga lista sa pagpili nga magkatabi sa lista sa gigikanan sa wala pa mobuhat (gitawag usab nga "Listahan sa pagbalhin"). Sa tinuud, ang dual listbox kasagaran mas paspas, mas tukma, ug mas dali nga makuha kaysa drag-and-drop. Mga Konsiderasyon sa Usability Usa ka importanteng pahinumdom nga hinumdoman mao nga ang tanang klase sa listahan kinahanglang mosuporta sa nabigasyon sa keyboard (pananglitan, ↑/↓ arrow keys) para sa accessibility. Ang ubang mga tawo hapit kanunay magsalig sa keyboard aron makapili mga kapilian kung magsugod na sila sa pag-type.
Labaw pa niana:
Para sa mga lista nga adunay 7+ ka kapilian, ikonsiderar ang pagdugang sa "Select All" ug "Clear All" nga mga gamit aron mapadali ang interaksyon sa user. Alang sa taas nga mga lista nga adunay combobox, ibutyag ang tanan nga mga kapilian sa mga tiggamit sa pag-klik / pag-tap, kay kung dili, dili sila makita, Labing hinungdanon, ayaw ipakita ang dili interactive nga mga elemento ingon mga buton aron malikayan ang kalibog - ug ayaw ipakita ang mga interactive nga elemento ingon mga static nga label.
Pagputos: Dili Tanan Usa ka Dropdown Importante ang mga ngalan. Ang usa ka bertikal nga lista sa mga kapilian kasagaran gihulagway nga usa ka "dropdown" - apan kasagaran kini medyo generic aron mahimong makahuluganon. Ang "Dropdown" nagpaila nga ang lista gitago sa default. Ang "Multiselect" nagpasabot sa daghang pagpili (checkbox) sulod sa usa ka lista. Ang "Combobox" nagpasabot sa pag-input sa teksto. Ug ang "Listbox" usa lang ka lista sa mapili nga mga butang, makita sa tanang panahon. Ang tumong dili ang pagpahiuyon sa mga kahulugan sa ibabaw alang niini. Apan sa pag-align sa mga intensyon - pagsulti sa parehas nga sinultian kung magdesisyon, magdesinyo, magtukod, ug dayon gamiton kini nga mga sangkap sa UI. Kini kinahanglan nga molihok alang satanan — mga tigdesinyo, mga inhenyero, ug mga end user — basta ang mga static nga label dili sama sa mga interactive nga buton, ug ang mga radio button dili molihok sama sa mga checkbox. Himamata ang "Mga Sumbanan sa Disenyo Alang sa Mga Interface sa AI" Himamata ang Mga Sumbanan sa Disenyo Para sa Mga Interface sa AI, ang bag-ong kurso sa video ni Vitaly nga adunay praktikal nga mga pananglitan gikan sa mga produkto sa tinuod nga kinabuhi - nga adunay usa ka live nga pagbansay sa UX nga mahitabo sa dili madugay. Ambak sa usa ka libre nga preview. Himamata ang mga Sumbanan sa Disenyo Para sa Mga Interface sa AI, kurso sa video ni Vitaly sa disenyo sa interface ug UX.
Video + Paghanas sa UXVideo lamangVideo + Paghanas sa UX$ 450.00 $ 799.00
Pagkuha og Video + UX Training30 video lessons (10h) + Live UX Training.100 ka adlaw nga money-back-guarantee.Video lang$ 275.00$ 395.00
Kuhaa ang video course30 video lessons (10h). Gi-update matag tuig. Anaa usab ingon usa ka UX Bundle nga adunay 3 nga kurso sa video.
Mapuslanon nga mga Kapanguhaan
Autocomplete: Mga Giya sa UX, ni Vitaly Friedman Combobox, ni eBay 👍 Combobox, ni Elastic Combobox, ni Elisa Combobox, ni MongoDB 👍 Combobox, pinaagi sa Visa 👍 Combobox, ni Watson (Docplanner) Combobox, ni Wikimedia Combobox, ni Zendesk Multiselect (MongoDB Combobox Design Docs), ni MongoDB 👍 Multiselect Lookup, pinaagi sa Wikimedia Multi-pinili nga Combo Box, ni Vaadin Multiselect, pinaagi sa Visa Pagbalhin (Ehemplo sa Listbox), ni Ant Design Listbox, ni Hopper List Box, ni Vaadin Listbox, pinaagi sa Visa Dual List Selector, ni Red Hat (PatternFly) Dual Listbox, ni Salesforce (Lightning Design System) Lista sa Pagbalhin, ni Mantine Dual Listbox, ni Dashlite Mga Badges batok sa Pills vs. Chips vs. Tags, ni Vitaly Friedman Listboxes vs. Dropdown Lists, ni Anna Kaley (NN/g)
