Дакле, која је разлика између комбинованог оквира, вишеструког избора, листе и падајућег менија? Иако све ове компоненте корисничког интерфејса могу изгледати сличне, оне служе различитим сврхама. Избор се често своди на број доступних опција и њихову видљивост. Хајде да видимо по чему се разликују, којој сврси служе и како да изаберемо праву - избегавајући неспоразуме и погрешна очекивања на путу.
Нису сви обрасци листа исти Све горе истакнуте компоненте корисничког интерфејса имају тачно једну заједничку ствар: подржавају интеракције корисника са листама. Међутим, они то раде мало другачије. Хајде да погледамо сваки, један по један:
Падајући мени → листа је скривена док се не покрене. Комбиновани оквир → откуцајте за филтрирање + изаберите 1 опцију. Вишеструки избор → укуцајте за филтрирање + изаберите много опција. Листбок → све опције листе су подразумевано видљиве (+ скроловање). Двоструки оквир за листу → преместите ставке између 2 оквира са листом.
Другим речима, Цомбобок комбинује поље за унос текста са падајућом листом, тако да корисници могу да укуцају да би филтрирали и изабрали једну опцију. Уз Мултиселецт, корисници могу да изаберу многе опције (често се приказују као пилуле или чипс). Оквири са листама приказују све опције листе које су подразумевано видљиве, често са померањем. Корисно је када корисници морају одмах да виде све доступне изборе. Двоструки оквир са листом (који се назива и листа за пренос) је варијација оквира са листом који омогућава корисницима да премештају ставке између два оквира са листом (лево ↔ десно), обично за групни избор. Никада не сакривајте често коришћене опције Као што је горе поменуто, избор праве компоненте корисничког интерфејса зависи од 2 фактора: колико је опција листе доступно и да ли све ове опције морају да буду подразумевано видљиве. Све листе могу такође имати структуре стабла, угнежђење и избор групе.
Постоји један принцип који годинама пратим за било коју компоненту корисничког интерфејса: никада не сакривајте често коришћене опције. Ако се корисници често ослањају на одређени избор, врло мало вреди то сакрити од њих. Могли бисмо или да је унапред селектујемо или (ако постоје само 2–3 често коришћене опције) да их прикажемо као чипове или дугмад, а затим да прикажемо остатак листе у интеракцији. Уопштено говорећи, добра је идеја да увек приказујете популарне опције - чак и ако би то могло затрпати кориснички интерфејс. Како одабрати који? Није за сваку листу потребан сложен метод одабира. За листе са мање од 5 ставки, једноставна радио дугмад или поља за потврду обично најбоље функционишу. Али ако корисници треба да бирају са велике листе опција (нпр. 200+ ставки), комбиновани оквир + вишеструки избор су од помоћи због бржег филтрирања (нпр. избор земље).
Оквири са листама су корисни када људи морају да приступе многим опцијама одједном, посебно ако треба да изаберу много опција са те листе. Они могу бити од помоћи за често коришћене филтере.
Двоструки листбок се често занемарује и игнорише. Али може бити од велике помоћи за сложене задатке, нпр. масовни одабир, или додељивање улога, задатака, одговорности. То је једина компонента корисничког интерфејса која омогућава корисницима да прегледају своју пуну листу избора упоредо са изворном листом пре урезивања (која се назива и „Листа за пренос“). У ствари, двоструки оквир са листом је често бржи, прецизнији и приступачнији од превлачења и испуштања. Разматрања употребљивости Једна важна напомена коју треба имати на уму је да сви типови листа морају да подржавају навигацију на тастатури (нпр. ↑/↓ тастере са стрелицама) ради приступачности. Неки људи ће се скоро увек ослањати на тастатуру да бирају опције када почну да куцају.
Осим тога:
За листе са 7+ опција, размислите о додавању функција „Изабери све“ и „Обриши све“ да бисте поједноставили интеракцију корисника. За дугачке листе са комбинованим оквиром, изложите све опције корисницима на клик/тап, јер у супротном можда никада неће бити виђене, Најважније, немојте приказивати неинтерактивне елементе као дугмад да бисте избегли забуну — и немојте приказивати интерактивне елементе као статичке ознаке.
Закључак: Није све падајући мени Имена су важна. Вертикална листа опција се обично описује као „падајући мени“ – али често је превише генеричка да би имала смисла. „Падајући мени“ наговештава да је листа подразумевано скривена. „Мултиселецт“ подразумева вишеструки избор (потврдни оквир) унутар листе. „Цомбобок“ подразумева унос текста. А „Листбок“ је једноставно листа ставки које се могу изабрати, видљивих у сваком тренутку. Циљ није да буде у складу са горе наведеним дефиницијама ради тога. Али радије да ускладите намере — говорите истим језиком када одлучујете о, дизајнирању, изградњи, а затим коришћењу ових компоненти корисничког интерфејса. Требало би да ради засви — дизајнери, инжењери и крајњи корисници — све док статичке ознаке не изгледају као интерактивна дугмад, а радио дугмад не делују као поља за потврду. Упознајте „Узорци дизајна за АИ интерфејсе“ Упознајте обрасце дизајна за АИ интерфејсе, Виталијев нови видео курс са практичним примерима из производа из стварног живота — са обуком о УКС уживо која ће се ускоро одржати. Пређите на бесплатни преглед. Упознајте обрасце дизајна за АИ интерфејсе, Виталијев видео курс о дизајну интерфејса и корисничком доживљају.
Видео + УКС обука Само видео Видео + УКС обука$ 450,00 $ 799,00
Набавите видео + УКС обуку 30 видео лекција (10 сати) + УКС тренинг уживо. 100 дана гаранције поврата новца. Само видео 275,00 УСД 395,00 УСД
Преузмите видео курс 30 видео лекција (10х). Ажурира се сваке године. Доступан и као УКС пакет са 3 видео курса.
Корисни ресурси
Аутоцомплете: УКС Гуиделинес, Витали Фриедман Цомбобок, еБаи 👍 Цомбобок, Еластиц Цомбобок, Елиса Цомбобок, од МонгоДБ 👍 Цомбобок, од Виса 👍 Комбиновани оквир, Вотсон (планер докумената) Цомбобок, Викимедија Цомбобок, Зендеск Мултиселецт (МонгоДБ Цомбобок Десигн Доцс), од МонгоДБ 👍 Мултиселецт Лоокуп, Викимедија Комбиновани оквир за вишеструки избор, Ваадин Мултиселецт, Виса Трансфер (пример са листбоксом), од Ант Десигн Листбок, од Хоппера Лист Бок, Ваадин Листбок, од Виса Дуал Лист Селецтор, Ред Хат (ПаттернФли) Дуал Листбок, од Салесфорце (Лигхтнинг Десигн Систем) Трансфер Лист, од Мантине Дуал Листбок, од Дасхлите Значке против таблета против чипса против ознака, Витали Фриедман Листбокес у односу на падајуће листе, Анна Калеи (НН/г)
