Ошентип, айкалыштыруу кутусу, көп тандоо, тизме кутусу жана ачылуучу тизменин ортосунда кандай айырма бар? Бардык бул UI компоненттери окшош көрүнүшү мүмкүн, бирок алар ар кандай максаттарга кызмат кылат. Тандоо көбүнчө жеткиликтүү варианттардын санына жана алардын көрүнүүсүнө жараша болот. Келгиле, алардын кандайча айырмаланарын, кандай максатта кызмат кыларын жана туурасын кантип тандоо керектигин карап көрөлү — жолдо түшүнбөстүктөрдөн жана туура эмес күтүүлөрдөн качуу.
Бардык тизме үлгүлөрү бирдей эмес Жогоруда белгиленген бардык UI компоненттеринин так бир жалпылыгы бар: алар колдонуучулардын тизмелер менен өз ара аракеттенүүсүн колдойт. Бирок, алар бир аз башкача кылышат. Келгиле, ар бирин бирден карап чыгалы:
Ашылма → тизме иштетилгенге чейин жашырылат. Combobox → чыпкалоо үчүн териңиз + 1 параметрди тандаңыз. Көп тандоо → чыпкалоо үчүн териңиз + көптөгөн опцияларды тандаңыз. Тизме кутусу → демейки боюнча көрүнүп турган бардык тизме параметрлери (+ жылдыруу). Кош тизме кутучасы → элементтерди 2 тизме кутучаларынын ортосунда жылдыруу.
Башка сөз менен айтканда, Combobox текст киргизүү талаасын ачылуучу тизме менен айкалыштырат, андыктан колдонуучулар чыпкалоо үчүн терип, бир параметрди тандай алышат. Multiselect менен колдонуучулар көп варианттарды тандай алышат (көбүнчө таблетка же чиптер катары көрсөтүлөт). Тизме кутучалары демейки боюнча көрүнгөн бардык тизме параметрлерин, көбүнчө сыдыруу менен көрсөтөт. Колдонуучулар бардык жеткиликтүү тандоолорду дароо көрүшү керек болгондо пайдалуу. Dual listbox (ошондой эле өткөрүп берүү тизмеси деп да аталат) бул колдонуучуларга эки тизмектин (сол ↔ оң) ортосунда элементтерди жылдырууга мүмкүндүк берген тизмектин вариациясы, адатта жапырт тандоо үчүн. Көп колдонулган параметрлерди эч качан жашырбаңыз Жогоруда айтылгандай, туура UI компонентин тандоо 2 фактордон көз каранды: канча тизме опциялары бар жана бул опциялардын бардыгы демейки боюнча көрүнөө керек болсо. Бардык тизмелерде дарак структуралары, уя салуу жана топ тандоосу да болушу мүмкүн.
Мен көп жылдардан бери каалаган UI компоненти үчүн карманып келе жаткан бир принцип бар: көп колдонулган опцияларды эч качан жашырба. Эгер колдонуучулар белгилүү бир тандоого көп таянышса, аны алардан жашыруунун мааниси өтө аз. Биз аны алдын ала тандай алабыз, же (эгерде 2–3 гана көп колдонулган вариант болсо) аларды чиптер же баскычтар катары көрсөтүп, андан кийин тизменин калган бөлүгүн өз ара аракеттенүү боюнча көрсөтө алабыз. Жалпысынан алганда, ар дайым популярдуу опцияларды көрсөтүү жакшы идея - ал UIди бузуп коюшу мүмкүн. Кайсынысы кантип тандоо керек? Ар бир тизмеге татаал тандоо ыкмасы керек эмес. 5тен аз нерсеси бар тизмелер үчүн, адатта, жөнөкөй радио баскычтары же белги кутучалары эң жакшы иштейт. Бирок колдонуучуларга тандоолордун чоң тизмесинен (мисалы, 200+ нерсе) тандоо керек болсо, айкалыштыруу кутусу + multiselect тезирээк чыпкалоодон улам (мисалы, өлкөнү тандоо) пайдалуу.
Тизме кутучалары адамдар бир эле учурда көптөгөн параметрлерге кирүү керек болгондо, айрыкча, ошол тизмеден көптөгөн опцияларды тандоо керек болгондо пайдалуу. Алар көп колдонулган чыпкалар үчүн пайдалуу болушу мүмкүн.
Кош тизмек кутусу көбүнчө көз жаздымда калып, этибарга алынбайт. Бирок бул татаал тапшырмалар үчүн абдан пайдалуу болушу мүмкүн, мисалы, жапырт тандоо, же ролдорду, милдеттерди, жоопкерчиликтерди дайындоо. Бул колдонуучуларга толук тандоо тизмесин жасоодон мурун булак тизмеси менен катар карап чыгууга мүмкүндүк берген жалгыз UI компоненти ("Өткөрүлүүчү тизме" деп да аталат). Чынында, эки тизмек кутусу сүйрөп таштоого караганда тезирээк, так жана жеткиликтүү болот. Колдонуу мүмкүнчүлүгүн эске алуу Эске ала турган бир маанилүү эскертүү, тизменин бардык түрлөрү жеткиликтүүлүк үчүн клавиатура багыттоосун (мисалы, ↑/↓ жебе баскычтары) колдоого алышы керек. Кээ бир адамдар терип баштагандан кийин дээрлик ар дайым клавиатурага таянышат.
Андан тышкары:
7+ варианттары бар тизмелер үчүн колдонуучунун өз ара аракеттенүүсүн жөнөкөйлөтүү үчүн "Баарын тандоо" жана "Баарын тазалоо" функцияларын кошуп көрүңүз. Combobox менен узун тизмелер үчүн, чыкылдатуу/таптоо аркылуу колдонуучуларга бардык опцияларды көрсөтүңүз, антпесе алар эч качан көрүнбөй калышы мүмкүн, Эң негизгиси, башаламандыкка жол бербөө үчүн интерактивдүү эмес элементтерди баскычтар катары көрсөтпөңүз — жана интерактивдүү элементтерди статикалык энбелгилер катары көрсөтпөңүз.
Жыйынтык: баары бир ылдый түшүүчү эмес Аттар маанилүү. Опциялардын вертикалдуу тизмеси, адатта, "ылдый түшүүчү" катары сүрөттөлөт, бирок көп учурда бул мааниге ээ болуу үчүн бир аз жалпы болуп саналат. "Ашылма" тизме демейки боюнча жашырылганын көрсөтөт. "Көп тандоо" тизмедеги көп тандоону (белгилөө кутучасын) билдирет. "Combobox" текст киргизүүнү билдирет. Ал эми "Тизме кутусу" бул жөн гана ар дайым көрүнүп турган тандалган нерселердин тизмеси. Максат бул үчүн жогорудагы аныктамалар менен шайкеш келүү эмес. Бирок, тескерисинче, ниеттерди тегиздөө үчүн - UI компоненттерин чечүүдө, долбоорлоодо, курууда жана андан кийин колдонууда бир тилде сүйлөңүз. Ал үчүн иштеши керекар бир адам - дизайнерлер, инженерлер жана акыркы колдонуучулар - статикалык энбелгилер интерактивдүү баскычтарга окшобойт, ал эми радио баскычтар белги кутучалары сыяктуу иштебейт. "AI интерфейстери үчүн дизайн үлгүлөрү" менен таанышыңыз AI Interfaces үчүн Дизайн үлгүлөрү менен таанышыңыз, Виталийдин жаңы видео курсу, реалдуу турмуштан алынган өнүмдөрдүн практикалык мисалдары менен - жакында боло турган UX жандуу тренинги. Акысыз алдын ала кароого өтүңүз. AI интерфейстери үчүн дизайн үлгүлөрү менен таанышыңыз, Виталийдин интерфейс дизайны жана UX боюнча видео курсу.
Видео + UX тренингиВидео ганаВидео + UX тренинги$ 450.00 $ 799.00
Видеону алыңыз + UX тренинги 30 видео сабак (10 саат) + Live UX тренинги. 100 күндүк акчаны кайтаруу кепилдиги. Видеого гана$ 275,00$ 395,00
30 видеосабак (10с) видео курсун алыңыз. Жыл сайын жаңыртылып турат. Ошондой эле 3 видео курсу бар UX Bundle катары жеткиликтүү.
Пайдалуу ресурстар
Автотолтуру: UX көрсөтмөлөрү, Виталий Фридман тарабынан Combobox, eBay тарабынан 👍 Combobox, Elastic тарабынан Combobox, Элиза тарабынан Combobox, MongoDB тарабынан 👍 Combobox, Visa менен 👍 Combobox, Уотсон тарабынан (Docplanner) Combobox, Wikimedia тарабынан Combobox, Zendesk тарабынан Multiselect (MongoDB Combobox Design Docs), MongoDB тарабынан 👍 Көп тандоо издөө, Wikimedia Көп тандоо Combo Box, Ваадин тарабынан Multiselect, Visa аркылуу Transfer (Listbox мисалы), Ant Design тарабынан Listbox, Хоппер тарабынан Тизме кутусу, Ваадин тарабынан Listbox, Visa боюнча Кош тизме тандагыч, Red Hat (PatternFly) тарабынан Dual Listbox, Salesforce тарабынан (Lightning Дизайн системасы) Transfer List, Mantine тарабынан Dual Listbox, Dashlite тарабынан Белгилер таблеткаларга каршы чиптерге каршы тегтер, Виталий Фридман тарабынан Тизме кутучалары менен Ашылма тизмелер, Анна Кали (NN/g)
