Такім чынам, у чым розніца паміж полем са спісам, множным выбарам, спісам і выпадальным меню? Нягледзячы на тое, што ўсе гэтыя кампаненты карыстацкага інтэрфейсу могуць выглядаць падобнымі, яны служаць розным мэтам. Выбар часта зводзіцца да колькасці даступных варыянтаў і іх бачнасці. Давайце паглядзім, чым яны адрозніваюцца, якой мэты яны служаць і як выбраць правільны, пазбягаючы непаразуменняў і памылковых чаканняў на гэтым шляху.
Не ўсе шаблоны спісаў аднолькавыя Усе вылучаныя вышэй кампаненты карыстальніцкага інтэрфейсу маюць адно агульнае: яны падтрымліваюць узаемадзеянне карыстальнікаў са спісамі. Аднак робяць гэта крыху інакш. Давайце паглядзім на кожны, адзін за адным:
Выпадальны → спіс схаваны, пакуль не будзе запушчаны. Поле са спісам → увядзіце для фільтрацыі + выберыце 1 варыянт. Множны выбар → увядзіце для фільтрацыі + выберыце шмат варыянтаў. Спіс → усе параметры спісу бачныя па змаўчанні (+ пракрутка). Двайны спіс → перамяшчаць элементы паміж 2 спісамі.
Іншымі словамі, Combobox аб'ядноўвае поле ўводу тэксту з выпадальным спісам, каб карыстальнікі маглі ўводзіць для фільтрацыі і выбіраць адзін варыянт. З дапамогай Multiselect карыстальнікі могуць выбраць мноства варыянтаў (часта адлюстроўваюцца ў выглядзе таблетак або чыпсаў). Спісы адлюстроўваюць усе параметры спіса, бачныя па змаўчанні, часта з пракруткай. Гэта карысна, калі карыстальнікам трэба неадкладна ўбачыць усе даступныя варыянты. Двайны спіс (таксама званы спісам перадачы) - гэта варыянт спісу, які дазваляе карыстальнікам перамяшчаць элементы паміж двума спісамі (левы ↔ правы), звычайна для масавага выбару. Ніколі не хавайце часта выкарыстоўваюцца параметры Як згадвалася вышэй, выбар правільнага кампанента карыстальніцкага інтэрфейсу залежыць ад 2 фактараў: колькі варыянтаў спісу даступна і ці ўсе гэтыя параметры павінны быць бачныя па змаўчанні. Усе спісы таксама могуць мець дрэвападобную структуру, укладзенасць і групавы выбар.
Ёсць адзін прынцып, якога я прытрымліваюся на працягу многіх гадоў для любога кампанента карыстацкага інтэрфейсу: ніколі не хавайце часта выкарыстоўваюцца параметры. Калі карыстальнікі часта спадзяюцца на пэўны выбар, хаваць гэта ад іх вельмі мала. Мы маглі б або зрабіць яго папярэдне выбраным, або (калі ёсць толькі 2-3 часта выкарыстоўваюцца варыянты) паказаць іх у выглядзе фішак або кнопак, а потым паказаць астатні спіс пры ўзаемадзеянні. Увогуле, гэта добрая ідэя заўсёды паказваць папулярныя параметры - нават калі гэта можа загрувашчваць карыстацкі інтэрфейс. Як выбраць? Не кожны спіс патрабуе складанага метаду выбару. Для спісаў з менш чым 5 элементамі лепш за ўсё працуюць простыя перамыкачы або сцяжкі. Але калі карыстальнікам трэба выбраць з вялікага спісу варыянтаў (напрыклад, 200+ элементаў), поле са спісам + множны выбар карысныя з-за больш хуткай фільтрацыі (напрыклад, выбар краіны).
Спісы карысныя, калі людзям трэба атрымаць доступ да многіх опцый адначасова, асабліва калі ім таксама трэба выбраць шмат опцый з гэтага спісу. Яны могуць быць карыснымі для фільтраў, якія часта выкарыстоўваюцца.
Двайны спіс часта не заўважаюць і ігнаруюць. Але гэта можа быць вельмі карысным для складаных задач, напрыклад, масавага выбару або размеркавання роляў, задач і абавязкаў. Гэта адзіны кампанент карыстальніцкага інтэрфейсу, які дазваляе карыстальнікам праглядаць свой поўны спіс выбару побач з зыходным спісам перад здзяйсненнем (таксама званы «Спіс перадачы»). Фактычна, двайны спіс часта хутчэй, больш дакладны і больш даступны, чым перацягванне. Меркаванні зручнасці выкарыстання Адна важная заўвага, якую трэба мець на ўвазе, заключаецца ў тым, што ўсе тыпы спісаў павінны падтрымліваць навігацыю з клавіятуры (напрыклад, клавішы са стрэлкамі ↑/↓) для даступнасці. Некаторыя людзі амаль заўсёды будуць спадзявацца на клавіятуру для выбару параметраў, як толькі яны пачнуць друкаваць.
Акрамя гэтага:
Для спісаў з больш чым 7 варыянтамі падумайце аб даданні функцый «Выбраць усё» і «Ачысціць усё», каб спрасціць узаемадзеянне з карыстальнікам. Для доўгіх спісаў з полем са спісам усе параметры паказвайце карыстальнікам пры націсканні/націсканні, бо ў адваротным выпадку іх ніколі не ўбачаць, Самае галоўнае, не паказвайце неінтэрактыўныя элементы ў выглядзе кнопак, каб пазбегнуць блытаніны — і не паказвайце інтэрактыўныя элементы ў выглядзе статычных цэтлікаў.
Падвядзенне вынікаў: не ўсё з'яўляецца выпадальным спісам Імёны маюць значэнне. Вертыкальны спіс опцый звычайна апісваецца як "выпадальны спіс", але часта ён занадта агульны, каб мець значэнне. «Выпадальны» намякае, што спіс схаваны па змаўчанні. «Множны выбар» прадугледжвае шматразовы выбар (сцяжок) у спісе. «Combobox» мае на ўвазе ўвод тэксту. А «Listbox» - гэта проста спіс элементаў, якія можна выбраць, якія бачныя ўвесь час. Мэта складаецца не ў тым, каб адпавядаць прыведзеным вышэй азначэнням дзеля гэтага. Але, хутчэй, каб узгадніць намеры - размаўляйце на адной мове пры прыняцці рашэнняў, распрацоўцы, стварэнні і выкарыстанні гэтых кампанентаў інтэрфейсу. Гэта павінна працаваць дляусе — дызайнеры, інжынеры і канчатковыя карыстальнікі — пакуль статычныя этыкеткі не выглядаюць як інтэрактыўныя кнопкі, а радыёкнопкі не дзейнічаюць як сцяжкі. Пазнаёмцеся з «Шаблоны праектавання для інтэрфейсаў AI» Пазнаёмцеся з шаблонамі дызайну для інтэрфейсаў штучнага інтэлекту, новым відэакурсам Віталя з практычнымі прыкладамі з рэальных прадуктаў — неўзабаве адбудзецца навучанне UX. Перайсці да бясплатнага папярэдняга прагляду. Пазнаёмцеся з шаблонамі дызайну для інтэрфейсаў штучнага інтэлекту, відэакурсам Віталя па дызайне інтэрфейсу і UX.
Відэа + Навучанне UX Толькі відэа Відэа + Навучанне UX $ 450,00 $ 799,00
Атрымайце відэа + Навучанне UX30 відэаўрокаў (10 гадзін) + Навучанне UX у жывым эфіры. Гарантыя вяртання грошай у 100 дзён. Толькі відэа $ 275,00 $ 395,00
Атрымаць відэакурс30 відэаўрокаў (10 гадзін). Абнаўляецца кожны год. Таксама даступны ў выглядзе UX Bundle з 3 відэакурсамі.
Карысныя рэсурсы
Аўтазапаўненне: Інструкцыі па UX, Віталь Фрыдман Combobox, eBay 👍 Combobox ад Elastic Combobox, Эліза Combobox, MongoDB 👍 Combobox, ад Visa 👍 Combobox, Watson (Docplanner) Combobox, Вікімэдыя Combobox ад Zendesk Multiselect (дакументацыя MongoDB Combobox Design), аўтар MongoDB 👍 Multiselect Lookup, Wikimedia Камбінаванае поле з некалькімі выбарамі ад Vaadin Multiselect, ад Visa Перадача (прыклад Listbox), Ant Design Listbox, Хопер List Box, Vaadin Listbox, ад Visa Выбар падвойнага спісу ад Red Hat (PatternFly) Dual Listbox, ад Salesforce (Lightning Design System) Спіс перадачы, Манціна Двайны спіс, ад Dashlite Значкі супраць таблетак супраць чыпсаў супраць бірак, Віталь Фрыдман Спісы супраць выпадаючых спісаў, Ганна Кейлі (NN/g)
