Xo'sh, combobox, multiselect, listbox va ochiladigan ro'yxat o'rtasidagi farq nima? Ushbu UI komponentlarining barchasi o'xshash ko'rinishi mumkin bo'lsa-da, ular turli maqsadlarga xizmat qiladi. Tanlov ko'pincha mavjud variantlar soniga va ularning ko'rinishiga bog'liq. Keling, ular qanday farq qilishini, qanday maqsadga xizmat qilishini va qanday qilib to'g'ri tanlashni ko'rib chiqaylik - bu yo'lda tushunmovchiliklar va noto'g'ri kutishlardan qochish.
Barcha ro'yxat naqshlari bir xil emas Yuqorida ta'kidlab o'tilgan barcha UI komponentlarida aynan bitta umumiy narsa bor: ular foydalanuvchilarning ro'yxatlar bilan o'zaro aloqalarini qo'llab-quvvatlaydi. Biroq, ular buni biroz boshqacha qilishadi. Keling, har birini birma-bir ko'rib chiqaylik:
Ochiladigan → roʻyxat ishga tushmaguncha berkitiladi. Combobox → filtrlash uchun yozing + 1 variantni tanlang. Ko‘p tanlash → filtrlash uchun yozing + ko‘p variantlarni tanlang. Roʻyxat qutisi → sukut boʻyicha koʻrinadigan barcha roʻyxat variantlari (+ aylantirish). Ikki roʻyxat qutisi → elementlarni 2 ta roʻyxat qutisi orasiga koʻchirish.
Boshqacha qilib aytganda, Combobox matn kiritish maydonini ochiladigan ro'yxat bilan birlashtiradi, shuning uchun foydalanuvchilar filtrlash va bitta variantni tanlash uchun yozishlari mumkin. Multiselect yordamida foydalanuvchilar ko'p variantlarni tanlashlari mumkin (ko'pincha tabletkalar yoki chiplar sifatida ko'rsatiladi). Ro'yxat qutilari sukut bo'yicha ko'rinadigan barcha ro'yxat variantlarini ko'rsatadi, ko'pincha aylantirish orqali. Foydalanuvchilar barcha mavjud variantlarni darhol ko'rishlari kerak bo'lganda foydali bo'ladi. Dual listbox (shuningdek, transfer roʻyxati deb ataladi) roʻyxat qutisining oʻzgarishi boʻlib, foydalanuvchilarga ikkita roʻyxat qutisi (chap ↔ oʻng) oʻrtasida, odatda, ommaviy tanlash uchun koʻchirish imkonini beradi. Tez-tez ishlatiladigan variantlarni hech qachon yashirmang Yuqorida aytib o'tilganidek, to'g'ri UI komponentini tanlash 2 omilga bog'liq: qancha ro'yxat opsiyalari mavjud va agar bu barcha variantlar sukut bo'yicha ko'rinishi kerak bo'lsa. Barcha ro'yxatlarda daraxt tuzilmalari, joylashtirish va guruh tanlash ham bo'lishi mumkin.
Har qanday UI komponenti uchun men ko'p yillar davomida amal qilgan bitta tamoyil bor: tez-tez ishlatiladigan variantlarni hech qachon yashirmang. Agar foydalanuvchilar ma'lum bir tanlovga tez-tez tayansa, uni ulardan yashirishning ahamiyati juda kam. Biz uni oldindan tanlab olishimiz yoki (agar tez-tez ishlatiladigan 2-3 ta variant mavjud bo'lsa) ularni chiplar yoki tugmalar sifatida ko'rsatishimiz va keyin ro'yxatning qolgan qismini o'zaro aloqada ko'rsatishimiz mumkin. Umuman olganda, har doim ommabop variantlarni ko'rsatish yaxshi fikr - hatto u foydalanuvchi interfeysini buzishi mumkin bo'lsa ham. Qaysi birini qanday tanlash mumkin? Har bir ro'yxatga murakkab tanlov usuli kerak emas. 5 dan kam elementli ro'yxatlar uchun oddiy radio tugmalar yoki belgilash katakchalari odatda eng yaxshi ishlaydi. Ammo agar foydalanuvchilar keng imkoniyatlar roʻyxatidan (masalan, 200+ element) tanlashlari kerak boʻlsa, combobox + multiselect tezroq filtrlash (masalan, mamlakat tanlash) tufayli foydali boʻladi.
Ro'yxat qutilari odamlar bir vaqtning o'zida ko'p variantlarga kirishlari kerak bo'lganda foydali bo'ladi, ayniqsa ular ushbu ro'yxatdan ko'plab variantlarni tanlashlari kerak bo'lsa. Ular tez-tez ishlatiladigan filtrlar uchun foydali bo'lishi mumkin.
Dual listbox ko'pincha e'tibordan chetda qoladi va e'tiborga olinmaydi. Ammo bu murakkab vazifalar uchun juda foydali bo'lishi mumkin, masalan, ommaviy tanlash yoki rollarni, vazifalarni, mas'uliyatlarni belgilash. Bu foydalanuvchilarga o'zlarining to'liq tanlov ro'yxatini bajarishdan oldin manbalar ro'yxati bilan yonma-yon ko'rib chiqishga imkon beruvchi yagona UI komponentidir (shuningdek, "O'tkazish ro'yxati" deb ham ataladi). Darhaqiqat, qo'sh ro'yxat qutisi ko'pincha sudrab tashlashga qaraganda tezroq, aniqroq va foydalanish mumkin. Foydalanishga oid mulohazalar Yodda tutish kerak bo'lgan muhim eslatma shundaki, barcha ro'yxat turlari mavjudlik uchun klaviatura navigatsiyasini qo'llab-quvvatlashi kerak (masalan, ↑/↓ o'q tugmalari). Ba'zi odamlar yozishni boshlaganlarida deyarli har doim klaviaturaga tayanadilar.
Bundan tashqari:
7+ opsiyaga ega roʻyxatlar uchun “Hammasini tanlash” va “Hammasini oʻchirish” funksiyalarini qoʻshishni oʻylab koʻring. Komboboxli uzun roʻyxatlar uchun barcha variantlarni bosish/bosish orqali foydalanuvchilarga oching, aks holda ular hech qachon koʻrinmasligi mumkin, Eng muhimi, chalkashmaslik uchun interaktiv bo'lmagan elementlarni tugmalar sifatida ko'rsatmang va interaktiv elementlarni statik belgilar sifatida ko'rsatmang.
Yakunlash: hamma narsa ochiladigan menyu emas Ismlar muhim. Variantlarning vertikal ro'yxati odatda "ochiladigan" deb ta'riflanadi - lekin ko'pincha bu ma'noli bo'lish uchun biroz umumiy bo'ladi. "Ochiladigan" ro'yxat sukut bo'yicha yashiringanligiga ishora qiladi. "Ko'p tanlov" ro'yxatdagi ko'p tanlovni (tasdiqlash qutisi) nazarda tutadi. "Combobox" matn kiritishni nazarda tutadi. Va "Ro'yxat qutisi" - bu har doim ko'rinadigan tanlangan elementlar ro'yxati. Maqsad, buning uchun yuqoridagi ta'riflarga mos kelmaslikdir. Niyatlarni muvofiqlashtirish uchun - qaror qabul qilishda, loyihalashda, qurishda va keyin ushbu UI komponentlarini ishlatishda bir xil tilda gapiring. Buning uchun ishlashi kerakhar bir kishi - dizaynerlar, muhandislar va oxirgi foydalanuvchilar - statik teglar interaktiv tugmachalarga o'xshamasa va radio tugmachalari tasdiqlash qutilari kabi ishlamasa. “AI interfeyslari uchun dizayn naqshlari” bilan tanishing AI interfeyslari uchun dizayn naqshlari bilan tanishing, Vitaliyning real hayotiy mahsulotlardan amaliy misollar bilan yangi video kursi – tez orada jonli UX treningi bo‘lib o‘tadi. Bepul ko'rishga o'ting. AI interfeyslari uchun dizayn naqshlari bilan tanishing, Vitaliyning interfeys dizayni va UX bo'yicha video kursi.
Video + UX treningiFaqat videoVideo + UX treningi$ 450,00$ 799,00$
Videoni oling + UX treningi 30 ta video dars (10 soat) + Jonli UX treningi. 100 kunlik pulni qaytarib berish kafolati. Faqat video uchun$ 275,00$ 395,00
30 ta video dars (10 soat) video kursini oling. Yillik yangilanadi. Shuningdek, 3 ta video kurslari boʻlgan UX toʻplami sifatida ham mavjud.
Foydali manbalar
Avtoto'ldirish: UX ko'rsatmalari, Vitaliy Fridman tomonidan Combobox, eBay tomonidan 👍 Combobox, Elastik tomonidan Combobox, Elisa tomonidan Combobox, MongoDB tomonidan 👍 Combobox, Visa orqali 👍 Combobox, Watson tomonidan (Docplanner) Combobox, Wikimedia tomonidan Combobox, Zendesk tomonidan Multiselect (MongoDB Combobox Design Docs), MongoDB tomonidan 👍 Koʻp tanlovli qidiruv, Wikimedia Ko'p tanlovli Combo Box, Vaadin tomonidan Multiselect, Visa orqali Transfer (Listbox misoli), Ant Design tomonidan Listbox, Hopper tomonidan Ro'yxat qutisi, Vaadin tomonidan Listbox, Visa tomonidan Red Hat (PatternFly) tomonidan qo'sh ro'yxat tanlagichi Dual Listbox, Salesforce tomonidan (Lightning Design System) Transfer ro'yxati, Mantine tomonidan Dual Listbox, Dashlite tomonidan Badges vs. Pills vs. Chips vs. Tags, Vitaliy Fridman tomonidan Roʻyxat qutilari va ochiladigan roʻyxatlar, muallif Anna Kaley (NN/g)
