Тэгэхээр combobox, multiselect, listbox, dropdown хоёрын ялгаа нь юу вэ? Эдгээр бүх UI бүрэлдэхүүн хэсгүүд нь ижил төстэй мэт харагдах боловч өөр өөр зорилготой. Сонголт нь ихэвчлэн боломжтой сонголтуудын тоо, тэдгээрийн харагдах байдлаас хамаардаг. Тэд хэрхэн ялгаатай, ямар зорилгоор үйлчилдэг, зөвийг нь хэрхэн сонгохыг харцгаая - замдаа үл ойлголцол, буруу хүлээлтээс зайлсхийх.
Жагсаалтын бүх загварууд адилхан биш Дээр дурдсан бүх UI бүрэлдэхүүн хэсэг нь яг нэг нийтлэг зүйлтэй: тэдгээр нь хэрэглэгчдийн жагсаалттай харилцах харилцааг дэмждэг. Гэсэн хэдий ч тэд үүнийг арай өөрөөр хийдэг. Бүгдийг нэг нэгээр нь авч үзье:
Унждаг цэс → жагсаалт идэвхжих хүртэл нуугдана. Combobox → шүүлтүүрийг бичих + 1 сонголтыг сонгоно. Олон сонголт → шүүлтүүрийг бичих + олон сонголтыг сонгоно. Жагсаалтын хайрцаг → анхдагчаар харагдах бүх жагсаалтын сонголтууд (+ гүйлгэх). Хос жагсаалтын хайрцаг → 2 жагсаалтын хооронд зүйлсийг зөөх.
Өөрөөр хэлбэл, Combobox нь текст оруулах талбарыг унадаг жагсаалттай хослуулсан тул хэрэглэгчид шүүж, нэг сонголтыг сонгох боломжтой. Multiselect-ийн тусламжтайгаар хэрэглэгчид олон сонголтыг сонгох боломжтой (ихэвчлэн эм эсвэл чипс хэлбэрээр харуулдаг). Жагсаалтын хайрцгууд нь анхдагчаар харагдах бүх жагсаалтын сонголтыг харуулдаг бөгөөд ихэвчлэн гүйлгэж харуулдаг. Хэрэглэгчид боломжтой бүх сонголтыг нэн даруй харах шаардлагатай үед энэ нь тустай. Хос жагсаалтын хайрцаг (шилжүүлэлтийн жагсаалт гэж нэрлэдэг) нь хэрэглэгчдэд хоёр жагсаалтын хооронд (зүүн ↔ баруун), ихэвчлэн бөөнөөр сонгох боломжийг олгодог жагсаалтын хайрцагны хувилбар юм. Байнга хэрэглэгддэг сонголтуудыг хэзээ ч бүү нуу Дээр дурдсанчлан UI-ийн зөв бүрэлдэхүүнийг сонгох нь 2 хүчин зүйлээс шалтгаална: жагсаалтын хэдэн сонголт байгаа эсэх, эдгээр бүх сонголтууд анхдагч байдлаар харагдах ёстой эсэх. Бүх жагсаалтад модны бүтэц, үүрлэх, бүлгийн сонголт зэрэг байж болно.
UI ямар ч бүрэлдэхүүн хэсэг дээр миний олон жилийн турш баримталж ирсэн нэг зарчим байдаг: байнга ашигладаг сонголтуудыг хэзээ ч бүү нуу. Хэрэв хэрэглэгчид тодорхой сонголтод байнга найддаг бол тэднээс үүнийг нуух нь маш бага ач холбогдолтой юм. Бид үүнийг урьдчилан сонгосон эсвэл (хэрэв байнга ашиглагддаг 2-3 сонголт байгаа бол) тэдгээрийг чип эсвэл товчлуур хэлбэрээр үзүүлж, дараа нь жагсаалтын үлдсэн хэсгийг харилцан үйлчлэлээр харуулах боломжтой. Ерөнхийдөө, UI-г эмх замбараагүй болгож болох ч гэсэн түгээмэл сонголтуудыг үргэлж харуулах нь зүйтэй юм. Хэрхэн алийг нь сонгох вэ? Жагсаалт бүрт нарийн төвөгтэй сонголт хийх шаардлагагүй. 5-аас цөөн зүйлтэй жагсаалтын хувьд энгийн товчлуурууд эсвэл шалгах хайрцагнууд ихэвчлэн хамгийн сайн ажилладаг. Гэхдээ хэрэглэгчид сонголтуудын том жагсаалтаас (жишээ нь, 200+ зүйл) сонгох шаардлагатай бол combobox + multiselect нь илүү хурдан шүүлтүүр (жишээ нь, улс сонгох) учраас тустай.
Жагсаалтын хайрцгууд нь хүмүүс олон сонголтод нэгэн зэрэг хандах шаардлагатай үед, ялангуяа тэдгээр жагсаалтаас олон сонголтыг сонгох шаардлагатай үед тустай. Тэдгээр нь байнга ашиглагддаг шүүлтүүрүүдэд тустай байж болох юм.
Хос жагсаалтын хайрцгийг ихэвчлэн үл тоомсорлодог. Гэхдээ энэ нь бөөнөөр сонгох, үүрэг, даалгавар, хариуцлагыг хуваарилах гэх мэт нарийн төвөгтэй ажлуудад маш их тустай байж болно. Энэ нь хэрэглэгчдэд сонголтоо хийхээсээ өмнө бүрэн жагсаалтаа эх сурвалжийн жагсаалттай зэрэгцүүлэн үзэх боломжийг олгодог цорын ганц UI бүрэлдэхүүн хэсэг юм (мөн "Шилжүүлэх жагсаалт" гэж нэрлэдэг). Үнэн хэрэгтээ хос жагсаалтын хайрцаг нь чирж буулгахаас илүү хурдан, илүү нарийвчлалтай, хүртээмжтэй байдаг. Ашиглахад анхаарах зүйлс Санаж байх ёстой нэг чухал зүйл бол бүх жагсаалтын төрөл нь хүртээмжтэй байхын тулд гарны навигацыг (жишээ нь, ↑/↓ сумтай товчлуурууд) дэмжих шаардлагатай байдаг. Зарим хүмүүс бичиж эхэлмэгц сонголтоо сонгохдоо гар дээр бараг л найддаг.
Үүнээс гадна:
7+ сонголттой жагсаалтын хувьд хэрэглэгчийн харилцан үйлчлэлийг оновчтой болгохын тулд "Бүгдийг сонгох" болон "Бүгдийг арилгах" функцуудыг нэмж оруулаарай. Комбобокс бүхий урт жагсаалтын хувьд хэрэглэгчдэд товших/товшилтоор бүх сонголтыг харуулах, эс тэгвээс тэдгээр нь хэзээ ч харагдахгүй байж магадгүй. Хамгийн чухал нь төөрөгдөлд оруулахгүйн тулд интерактив бус элементүүдийг товчлуур болгон харуулахгүй байх ба интерактив элементүүдийг статик шошго болгон харуулахгүй байх.
Дүгнэлт: Бүх зүйл унждаг зүйл биш Нэр чухал. Сонголтуудын босоо жагсаалтыг ихэвчлэн "унадаг" гэж тодорхойлдог боловч энэ нь утга учиртай байхын тулд хэтэрхий ерөнхий байдаг. "Унадаг" жагсаалт нь анхдагч байдлаар далд байгааг харуулж байна. "Олон сонголт" гэдэг нь жагсаалт доторх олон сонголтыг (шалгах нүд) илэрхийлнэ. "Combobox" нь текст оруулах гэсэн үг юм. "Жагсаалтын хайрцаг" нь зүгээр л сонгох боломжтой зүйлсийн жагсаалт бөгөөд үргэлж харагдах болно. Үүний зорилго нь дээрх тодорхойлолтуудтай нийцэхгүй байх явдал юм. Харин зорилгоо нийцүүлэхийн тулд эдгээр UI бүрэлдэхүүн хэсгүүдийг шийдэх, дизайн хийх, бүтээх, дараа нь ашиглахдаа ижил хэлээр ярьдаг. Энэ нь ажиллах ёстойХүн бүр - дизайнерууд, инженерүүд болон эцсийн хэрэглэгчид - статик шошго нь интерактив товчлуур шиг харагдахгүй, радио товчлуурууд нь шалгах хайрцаг шиг ажиллахгүй бол. "AI интерфэйсийн дизайны загвар"-тай танилцана уу Удахгүй болох шууд UX сургалттай, бодит бүтээгдэхүүнээс практик жишээнүүдийг агуулсан Виталийн шинэ видео курс болох хиймэл оюун ухааны интерфэйсийн дизайны загвартай танилцаарай. Үнэгүй урьдчилан үзэх рүү оч. AI интерфэйсийн дизайны загвартай танилцана уу, Виталийн интерфэйсийн дизайн ба UX видео курс.
Видео + UX сургалтЗөвхөн видео видео + UX сургалт$ 450.00 $ 799.00
Видео авах + UX сургалт30 видео хичээл (10 цаг) + UX шууд сургалт. 100 хоногийн мөнгө буцаан олгох баталгаа. Зөвхөн видео $ 275.00$ 395.00
Видео хичээлийг 30 видео хичээл (10 цаг) аваарай. Жил бүр шинэчлэгддэг. Мөн 3 видео курс бүхий UX багц хэлбэрээр авах боломжтой.
Ашигтай нөөц
Автомат бөглөх: UX удирдамж, Виталий Фридман Combobox, eBay 👍 Combobox, Elastic Combobox, Элизагийн бичсэн Combobox, MongoDB 👍 Combobox, Visa 👍 Combobox, Ватсон (Docplanner) Combobox, Викимедиа Combobox, Zendesk Multiselect (MongoDB Combobox Design Docs), MongoDB 👍 Олон сонголттой хайлт, Викимедиа Олон сонголттой Combo Box, Ваадин Олон сонголт, визээр Шилжүүлэг (Жагсаалтын хайрцагны жишээ), Ant Design Жагсаалтын хайрцаг, Хоппер Жагсаалтын хайрцаг, Ваадин Listbox, Visa Хос жагсаалт сонгогч, Red Hat (PatternFly) Salesforce (Lightning Design System) -ийн хос жагсаалтын хайрцаг Дамжуулах жагсаалт, Mantine Dashlite-ийн хос жагсаалтын хайрцаг Виталий Фридманы бичсэн "Тэмдэг ба эм, чипс, шошго" Жагсаалтын хайрцгууд ба унадаг жагсаалтууд, Анна Кали (NN/g)
