И така, каква е разликата между комбинирано поле, множествен избор, списъчно поле и падащо меню? Въпреки че всички тези компоненти на потребителския интерфейс може да изглеждат подобни, те служат за различни цели. Изборът често се свежда до броя на наличните опции и тяхната видимост. Нека да видим как се различават, каква цел служат и как да изберем правилния – избягвайки недоразумения и грешни очаквания по пътя.
Не всички модели на списъци са еднакви Всички компоненти на потребителския интерфейс, подчертани по-горе, имат точно едно общо нещо: те поддържат взаимодействията на потребителите със списъци. Те обаче го правят малко по-различно. Нека да разгледаме всеки един по един:
Падащото меню → списъкът е скрит, докато не бъде задействан. Комбобокс → въведете за филтриране + изберете 1 опция. Множествен избор → въведете за филтриране + изберете много опции. Списъчно поле → всички опции на списъка са видими по подразбиране (+ превъртане). Двойно списъчно поле → преместване на елементи между 2 списъчни полета.
С други думи, Combobox комбинира поле за въвеждане на текст с падащ списък, така че потребителите да могат да въвеждат, за да филтрират и избират една опция. С Multiselect потребителите могат да избират много опции (често показвани като хапчета или чипове). Списъците показват всички опции на списъка, видими по подразбиране, често с превъртане. Полезно е, когато потребителите трябва да видят незабавно всички налични възможности за избор. Двойно списъчно поле (наричано още списък за прехвърляне) е вариант на списъчно поле, което позволява на потребителите да местят елементи между две списъчни полета (ляво ↔ дясно), обикновено за групов избор. Никога не скривайте често използваните опции Както бе споменато по-горе, изборът на правилния UI компонент зависи от 2 фактора: колко опции за списък са налични и дали всички тези опции трябва да бъдат видими по подразбиране. Всички списъци също могат да имат дървовидни структури, гнездене и групов избор.
Има един принцип, който следвам от години за всеки UI компонент: никога не скривайте често използваните опции. Ако потребителите често разчитат на конкретен избор, няма голяма полза да го скриете от тях. Можем или да го направим предварително избран, или (ако има само 2-3 често използвани опции) да ги покажем като чипове или бутони и след това да покажем останалата част от списъка при взаимодействие. Като цяло, добра идея е винаги да показвате популярни опции – дори ако това може да затрупа потребителския интерфейс. Как да изберем кое? Не всеки списък се нуждае от сложен метод за избор. За списъци с по-малко от 5 елемента обикновените радио бутони или квадратчета за отметка обикновено работят най-добре. Но ако потребителите трябва да избират от голям списък с опции (напр. 200+ артикула), комбинираното поле + множествен избор са полезни поради по-бързото филтриране (напр. избор на държава).
Списъците са полезни, когато хората трябва да имат достъп до много опции наведнъж, особено ако трябва да изберат много опции и от този списък. Те могат да бъдат полезни за често използвани филтри.
Двойното списъчно поле често се пренебрегва и игнорира. Но може да бъде много полезно за сложни задачи, напр. групов избор или възлагане на роли, задачи, отговорности. Това е единственият компонент на потребителския интерфейс, който позволява на потребителите да прегледат пълния си списък за избор един до друг със списъка източник, преди да се ангажират (наричан още „Списък за прехвърляне“). Всъщност двойното списъчно поле често е по-бързо, по-точно и по-достъпно от плъзгане и пускане. Съображения за използваемост Една важна бележка, която трябва да имате предвид, е, че всички типове списъци трябва да поддържат навигация от клавиатурата (напр. клавиши със стрелки ↑/↓) за достъпност. Някои хора почти винаги ще разчитат на клавиатурата, за да избират опции, след като започнат да пишат.
Освен това:
За списъци със 7+ опции помислете за добавяне на функционалности „Избор на всички“ и „Изчистване на всички“, за да рационализирате взаимодействието на потребителите. За дълги списъци с разгъващ се списък, изложете всички опции на потребителите при щракване/докосване, тъй като в противен случай може никога да не бъдат видени, Най-важното, не показвайте неинтерактивни елементи като бутони, за да избегнете объркване — и не показвайте интерактивни елементи като статични етикети.
Заключение: Не всичко е падащо меню Имената имат значение. Вертикалният списък с опции обикновено се описва като „падащо меню“ – но често е твърде общ, за да има смисъл. „Падащо меню“ подсказва, че списъкът е скрит по подразбиране. „Множествен избор“ предполага множествен избор (квадратче за отметка) в рамките на списък. „Combobox“ предполага въвеждане на текст. А „Listbox“ е просто списък с избираеми елементи, видими по всяко време. Целта не е да бъдете в съответствие с дефинициите по-горе заради самата нея. Но по-скоро за съгласуване на намеренията – говорете на един и същи език, когато решавате, проектирате, изграждате и след това използвате тези UI компоненти. Трябва да работи завсички – дизайнери, инженери и крайни потребители – стига статичните етикети да не изглеждат като интерактивни бутони и радио бутоните да не действат като квадратчета за отметка. Запознайте се с „Design Patterns For AI Interfaces“ Запознайте се с Design Patterns For AI Interfaces, новия видео курс на Vitaly с практически примери от реални продукти — скоро ще се проведе UX обучение на живо. Преминете към безплатен преглед. Запознайте се с дизайнерски модели за интерфейси с изкуствен интелект, видео курс на Виталий за дизайн на интерфейс и UX.
Видео + UX обучение Само видео Видео + UX обучение $ 450,00 $ 799,00
Вземете видео + UX обучение30 видео урока (10 часа) + UX обучение на живо. 100 дни гаранция за връщане на парите. Само видео $ 275,00 $ 395,00
Вземете видео курса 30 видео урока (10 часа). Актуализира се ежегодно. Предлага се и като UX пакет с 3 видео курса.
Полезни ресурси
Автоматично довършване: Насоки за UX, от Виталий Фридман Combobox, от eBay 👍 Combobox, от Elastic Combobox, от Elisa Combobox, от MongoDB 👍 Combobox, от Visa 👍 Combobox, от Watson (Docplanner) Combobox, от Wikimedia Combobox, от Zendesk Multiselect (MongoDB Combobox Design Docs), от MongoDB 👍 Търсене с множество избори, от Wikimedia Комбинирана кутия с множество избори, от Vaadin Multiselect, от Visa Трансфер (пример за Listbox), от Ant Design Listbox, от Hopper List Box, от Vaadin Listbox, от Visa Селектор с двоен списък, от Red Hat (PatternFly) Dual Listbox, от Salesforce (Lightning Design System) Трансферен списък, от Mantine Dual Listbox, от Dashlite Значки срещу хапчета срещу чипове срещу етикети, от Виталий Фридман Списъчни кутии срещу падащи списъци, от Anna Kaley (NN/g)
