Значи, која е разликата помеѓу комбобоксот, мултиселекцијата, полето за листа и паѓачкото? Иако сите овие компоненти на UI може да изгледаат слични, тие служат за различни цели. Изборот често се сведува на бројот на достапни опции и нивната видливост. Ајде да видиме како тие се разликуваат, за која цел служат и како да го избереме вистинскиот - избегнувајќи недоразбирања и погрешни очекувања на патот.
Не се сите шаблони на списоци исти Сите компоненти на UI означени погоре имаат точно една заедничка работа: тие ги поддржуваат интеракциите на корисниците со списоците. Сепак, тие го прават тоа малку поинаку. Ајде да го разгледаме секој, еден по еден:
Паѓачкото → списокот е скриен додека не се активира. Комбинирана кутија → напишете за филтрирање + изберете 1 опција. Повеќеизбирање → напишете за филтрирање + изберете многу опции. Список → сите опции на списокот стандардно видливи (+ лизгање). Двојно поле за листа → преместете ги ставките помеѓу 2 полиња со список.
Со други зборови, Combobox комбинира поле за внесување текст со паѓачка листа, така што корисниците можат да пишуваат за да филтрираат и да изберат една опција. Со Multiselect, корисниците можат да изберат многу опции (често се прикажуваат како апчиња или чипс). Списоците ги прикажуваат сите опции на списокот стандардно видливи, често со лизгање. Корисно е кога корисниците треба веднаш да ги видат сите достапни избори. Двојното поле за списоци (исто така наречено список за пренос) е варијација на полето со список што им овозможува на корисниците да преместуваат ставки помеѓу две полиња со списоци (лево ↔ десно), обично за масовно избирање. Никогаш не кријте ги често користените опции Како што споменавме погоре, изборот на вистинската компонента на корисничкиот интерфејс зависи од 2 фактори: колку опции од списокот се достапни и дали сите овие опции треба да бидат стандардно видливи. Сите списоци може да имаат структури на дрво, гнездење и избор на група, исто така.
Постои еден принцип што го следам со години за која било компонента на интерфејс: никогаш не кријте ги често користените опции. Ако корисниците често се потпираат на одредена селекција, има многу мала вредност да се сокрие од нив. Можеме или да го направиме претходно избрано, или (ако има само 2-3 често користени опции) да ги прикажеме како чипови или копчиња, а потоа да го прикажеме остатокот од листата при интеракција. Општо земено, добра идеја е секогаш да се прикажуваат популарни опции - дури и ако тоа може да го натрупува интерфејсот. Како да се избере која? Не секој список има потреба од сложен метод на селекција. За списоци со помалку од 5 ставки, едноставните радио копчиња или полињата за избор обично работат најдобро. Но, ако корисниците треба да избираат од голема листа на опции (на пр., 200+ ставки), комбобоксот + повеќеизборот се корисни поради побрзото филтрирање (на пр., изборот на земја).
Списоците се корисни кога луѓето треба да пристапат до многу опции одеднаш, особено ако треба да изберат и многу опции од таа листа. Тие би можеле да бидат корисни за често користените филтри.
Двојното поле за листа често се занемарува и игнорира. Но, тоа може да биде многу корисно за сложени задачи, на пр., масовен избор или доделување улоги, задачи, одговорности. Тоа е единствената компонента на корисничкиот интерфејс што им овозможува на корисниците да ја прегледаат целата листа на избор рамо до рамо со изворната листа пред да извршат (исто така наречена „Список за пренос“). Всушност, двојното поле за листа е често побрзо, попрецизно и подостапно од влечење и спуштање. Размислувања за употребливост Една важна забелешка што треба да се има на ум е дека сите типови списоци треба да поддржуваат навигација со тастатура (на пр., копчиња со стрелки ↑/↓) за пристапност. Некои луѓе речиси секогаш ќе се потпрат на тастатурата за да изберат опции штом ќе почнат да пишуваат.
Надвор од тоа:
За списоци со 7+ опции, размислете за додавање на функционалностите „Избери ги сите“ и „Избриши ги сите“ за да ја насочите интеракцијата со корисниците. За долги списоци со комбинирана кутија, изложете ги сите опции на корисниците со клик/допрете, бидејќи во спротивно тие никогаш нема да бидат видени, Најважно, не прикажувајте неинтерактивни елементи како копчиња за да избегнете забуна - и не прикажувајте интерактивни елементи како статични етикети.
Завршување: Не е сè паѓачко Имињата се важни. Вертикалната листа на опции обично се опишува како „паѓачка“ - но честопати е премногу генеричка за да биде значајна. „Dropdown“ навестува дека списокот е стандардно скриен. „Мултиселектирај“ подразбира повеќеизбор (поле за избор) во список. „Комбобокс“ подразбира внесување текст. А „Листакутија“ е едноставно список на ставки што може да се изберат, видливи во секое време. Целта не е да се биде во согласност со горенаведените дефиниции заради тоа. Но, наместо да ги усогласите намерите - зборувајте на ист јазик кога одлучувате, дизајнирате, градите и потоа ги користите овие компоненти на корисничкиот интерфејс. Треба да работи засите - дизајнери, инженери и крајни корисници - се додека статичните етикети не изгледаат како интерактивни копчиња, а радио копчињата не делуваат како полиња за избор. Запознајте се со „Дизајн шаблони за интерфејси со вештачка интелигенција“ Запознајте ги моделите за дизајн за интерфејси со вештачка интелигенција, новиот видео курс на Витали со практични примери од производи од реалниот живот - со обука за UX во живо наскоро. Скокни до бесплатен преглед. Запознајте ги моделите за дизајн за интерфејси со вештачка интелигенција, видео курсот на Витали за дизајн на интерфејс и UX.
Видео + UX обука Само видео Видео + UX обука $ 450,00 $ 799,00 $
Добијте видео + UX Training30 видео лекции (10h) + UX обука во живо. 100 дена гаранција за враќање на парите. Само видео 275,00$ 395,00$
Добијте го видео курсот 30 видео лекции (10 часа). Ажурирано годишно. Достапно е и како UX пакет со 3 видео курсеви.
Корисни ресурси
Автоматско комплетирање: Упатства за UX, од Виталиј Фридман Комбобокс, од eBay 👍 Комбобокс, од Еластик Комбобокс, од Елиса Комбобокс, од MongoDB 👍 Combobox, од Visa 👍 Комбобокс, од Вотсон (Докпланер) Комбобокс, од Викимедија Combobox, од Zendesk Multiselect (MongoDB Combobox Design Docs), од MongoDB 👍 Пребарување со повеќе одбирање, од Викимедија Мулти-изберете Combo Box, од Vaadin Multiselect, од Visa Трансфер (пример за поле за листа), од Ant Design Listbox, од Хопер Поле за список, од Ваадин Кутија за листа, од Visa Избирач на двоен список, од Red Hat (PatternFly) Dual Listbox, од Salesforce (Lightning Design System) Список за трансфери, од Мантин Dual Listbox, од Dashlite Значки наспроти апчиња против чипс наспроти ознаки, од Виталиј Фридман Списоци наспроти паѓачки списоци, од Ана Кејли (NN/g)
