Сонымен, Combobox, multiselect, listbox және ашылмалы тізімнің айырмашылығы неде? Барлық осы UI құрамдастары ұқсас болып көрінуі мүмкін, бірақ олар әртүрлі мақсаттарға қызмет етеді. Таңдау көбінесе қол жетімді опциялардың санына және олардың көрінуіне байланысты. Келіңіздер, олардың қалай ерекшеленетінін, қандай мақсатқа қызмет ететінін және дұрыс жолды қалай таңдауға болатынын көрейік - жолда түсініспеушілік пен қате күтулерден аулақ болыңыз.
Барлық тізім үлгілері бірдей емес Жоғарыда көрсетілген барлық UI құрамдастарында дәл бір ортақ нәрсе бар: олар пайдаланушылардың тізімдермен әрекеттесуін қолдайды. Дегенмен, олар мұны сәл басқаша жасайды. Әрқайсысын бір-бірден қарастырайық:
Ашылмалы тізім → тізім іске қосылғанша жасырылады. Combobox → сүзу үшін теріңіз + 1 опцияны таңдаңыз. Көп таңдау → сүзу үшін теріңіз + көптеген опцияларды таңдаңыз. Listbox → әдепкі бойынша көрінетін барлық тізім опциялары (+ айналдыру). Қос тізім жәшігі → элементтерді 2 тізім жәшіктері арасында жылжыту.
Басқаша айтқанда, Combobox мәтінді енгізу өрісін ашылмалы тізіммен біріктіреді, осылайша пайдаланушылар бір опцияны сүзу және таңдау үшін тере алады. Multiselect көмегімен пайдаланушылар көптеген опцияларды таңдай алады (көбінесе таблетка немесе чиптер түрінде көрсетіледі). Тізім жәшіктері әдепкі бойынша көрінетін барлық тізім опцияларын көрсетеді, көбінесе айналдыру арқылы. Пайдаланушылар барлық қолжетімді таңдауларды дереу көруі қажет болғанда пайдалы. Қос тізім жәшігі (тасымалдау тізімі деп те аталады) пайдаланушыларға элементтерді екі тізім жәшіктері (сол жақта ↔ оң жақта) арасында жылжытуға мүмкіндік беретін тізім жәшігінің нұсқасы болып табылады, әдетте жаппай таңдау үшін. Жиі қолданылатын опцияларды ешқашан жасырмаңыз Жоғарыда айтылғандай, дұрыс UI компонентін таңдау 2 факторға байланысты: қанша тізім опциялары қол жетімді және осы опциялардың барлығы әдепкі бойынша көрінуі керек пе. Барлық тізімдерде ағаш құрылымдары, ұя салу және топ таңдауы болуы мүмкін.
Кез келген UI компоненті үшін мен жылдар бойы ұстанатын бір принцип бар: жиі қолданылатын опцияларды ешқашан жасырмаңыз. Пайдаланушылар белгілі бір таңдауға жиі сенетін болса, оны олардан жасырудың маңызы өте аз. Біз оны алдын ала таңдай аламыз немесе (егер 2–3 жиі қолданылатын опция болса) оларды чиптер немесе түймелер ретінде көрсете аламыз, содан кейін өзара әрекеттесу бойынша тізімнің қалған бөлігін көрсете аламыз. Тұтастай алғанда, пайдаланушы интерфейсін бұзуы мүмкін болса да, әрқашан танымал опцияларды көрсету жақсы идея. Қайсысын қалай таңдауға болады? Әрбір тізімге күрделі таңдау әдісі қажет емес. 5 элементтен аз тізімдер үшін қарапайым радио түймелер немесе құсбелгілер әдетте жақсы жұмыс істейді. Бірақ пайдаланушыларға опциялардың үлкен тізімінен (мысалы, 200+ элемент) таңдау қажет болса, сүзгілеу жылдамырақ болғандықтан (мысалы, елді таңдау) combobox + multiselect пайдалы болады.
Тізім жәшіктері адамдарға бірден көптеген опцияларға қол жеткізу қажет болғанда пайдалы, әсіресе олар сол тізімнен көптеген опцияларды таңдау қажет болса. Олар жиі қолданылатын сүзгілер үшін пайдалы болуы мүмкін.
Қос тізім жәшігі жиі еленбейді және еленбейді. Бірақ бұл күрделі тапсырмалар үшін өте пайдалы болуы мүмкін, мысалы, жаппай таңдау немесе рөлдерді, тапсырмаларды, жауапкершіліктерді тағайындау. Бұл пайдаланушыларға орындамас бұрын толық таңдау тізімін бастапқы тізіммен қатар қарап шығуға мүмкіндік беретін жалғыз UI құрамдас бөлігі («Тасымалдау тізімі» деп те аталады). Шын мәнінде, қос тізім жәшігі сүйреп апаруға қарағанда жиі жылдамырақ, дәлірек және қол жетімді. Қолдану мүмкіндігін қарастыру Есте сақтау керек бір маңызды ескерту: қол жетімділік үшін барлық тізім түрлері пернетақта шарлауын (мысалы, ↑/↓ көрсеткі пернелері) қолдауы керек. Кейбір адамдар теруді бастағаннан кейін опцияларды таңдау үшін әрқашан дерлік пернетақтаға сенеді.
Одан тыс:
7+ опциялары бар тізімдер үшін пайдаланушы әрекетін жеңілдету үшін «Барлығын таңдау» және «Барлығын өшіру» функцияларын қосуды қарастырыңыз. Құрама жолағы бар ұзын тізімдер үшін барлық опцияларды пайдаланушыларға басу/түрту арқылы көрсетіңіз, әйтпесе олар ешқашан көрінбеуі мүмкін, Ең бастысы, шатастырмау үшін интерактивті емес элементтерді түймелер ретінде көрсетпеңіз және интерактивті элементтерді статикалық белгілер ретінде көрсетпеңіз.
Қорытындылау: бәрі ашылмалы тізім емес Есімдер маңызды. Опциялардың тік тізімі әдетте «ашылмалы тізім» ретінде сипатталады, бірақ көбінесе ол мағыналы болу үшін тым жалпы болады. «Ашылмалы тізім» тізімнің әдепкі бойынша жасырылғанына нұсқайды. «Көп таңдау» тізімдегі көп таңдауды (құсбелгі) білдіреді. «Combobox» мәтін енгізуді білдіреді. Ал «Тізім жәшігі» - бұл әрқашан көрінетін таңдалатын элементтердің тізімі. Мақсат жоғарыдағы анықтамаларға сәйкес болу емес. Бірақ ниеттерді теңестіру үшін — осы UI құрамдастарын таңдау, жобалау, құрастыру, содан кейін пайдалану кезінде бір тілде сөйлеңіз. Ол үшін жұмыс істеу керекбарлығы - дизайнерлер, инженерлер және соңғы пайдаланушылар - егер статикалық белгілер интерактивті түймелерге ұқсамаса және радио түймелер құсбелгілер сияқты әрекет етпесе. «AI интерфейстеріне арналған дизайн үлгілерімен» танысыңыз AI интерфейстеріне арналған дизайн үлгілерімен танысыңыз, Виталийдің нақты өмірден алынған өнімдердің практикалық мысалдары бар жаңа бейне курсы — жақын арада тікелей UX тренингі болады. Тегін алдын ала қарауға өтіңіз. AI интерфейстеріне арналған дизайн үлгілерімен танысыңыз, Виталийдің интерфейс дизайны және UX бойынша бейне курсы.
Бейне + UX тренингіТек бейне Бейне + UX тренингі$ 450,00 $ 799,00
Бейнені алыңыз + UX тренингі 30 бейне сабақтары (10 сағ) + Live UX тренингі. 100 күндік ақшаны қайтару кепілдігі. Тек бейне $ 275,00$ 395,00
30 бейне сабақ (10сағ) бейне курсын алыңыз. Жыл сайын жаңартылады. Сондай-ақ 3 бейне курсы бар UX жинағы ретінде қолжетімді.
Пайдалы ресурстар
Автотолтыру: 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, Visa арқылы Қос тізімді таңдау құралы, Red Hat (PatternFly) Dual Listbox, Salesforce (Lightning Design System) Тасымалдау тізімі, Mantine Dual Listbox, Dashlite бойынша Бейдждер таблеткаларға қарсы чиптерге қарсы тегтерге қарсы, Виталий Фридман Тізім жәшіктері және ашылмалы тізімдер, жазған Анна Кали (NN/g)
