ດັ່ງນັ້ນຄວາມແຕກຕ່າງລະຫວ່າງ combobox, multiselect, listbox, ແລະ dropdown ແມ່ນຫຍັງ? ໃນຂະນະທີ່ອົງປະກອບ UI ທັງຫມົດເຫຼົ່ານີ້ອາດຈະຄ້າຍຄືກັນ, ພວກມັນໃຫ້ບໍລິການຈຸດປະສົງທີ່ແຕກຕ່າງກັນ. ທາງເລືອກມັກຈະມາເຖິງຈໍານວນທາງເລືອກທີ່ມີຢູ່ແລະການເບິ່ງເຫັນຂອງພວກເຂົາ. ໃຫ້ເຮົາເບິ່ງວ່າເຂົາເຈົ້າແຕກຕ່າງກັນແນວໃດ, ເຂົາເຈົ້າຮັບໃຊ້ຈຸດປະສົງແນວໃດ, ແລະການເລືອກອັນທີ່ຖືກຕ້ອງ — ຫຼີກເວັ້ນການເຂົ້າໃຈຜິດແລະຄວາມຄາດຫວັງທີ່ຜິດໃນທາງ.
ບໍ່ແມ່ນຮູບແບບລາຍຊື່ທັງໝົດແມ່ນຄືກັນ ອົງປະກອບ UI ທັງໝົດທີ່ເນັ້ນໄວ້ຂ້າງເທິງນັ້ນມີສິ່ງໜຶ່ງທີ່ກົງກັນແທ້: ເຂົາເຈົ້າສະໜັບສະໜູນການໂຕ້ຕອບຂອງຜູ້ໃຊ້ກັບລາຍຊື່. ຢ່າງໃດກໍຕາມ, ພວກເຂົາເຈົ້າເຮັດແນວນັ້ນແຕກຕ່າງກັນເລັກນ້ອຍ. ໃຫ້ເຮົາມາເບິ່ງແຕ່ລະອັນ, ອັນໜຶ່ງ:
ເລື່ອນລົງ → ລາຍຊື່ຖືກເຊື່ອງໄວ້ຈົນກ່ວາມັນຈະຖືກກະຕຸ້ນ. Combobox → ປະເພດເພື່ອການກັ່ນຕອງ + ເລືອກ 1 ທາງເລືອກ. Multiselect → type to filter + ເລືອກຫຼາຍທາງເລືອກ. Listbox → ຕົວເລືອກລາຍຊື່ທັງໝົດສາມາດເຫັນໄດ້ໂດຍຄ່າເລີ່ມຕົ້ນ (+ ເລື່ອນ). ກ່ອງລາຍຊື່ຄູ່ → ຍ້າຍລາຍການລະຫວ່າງ 2 ກ່ອງລາຍຊື່.
ໃນຄໍາສັບຕ່າງໆອື່ນໆ, Combobox ລວມເອົາຊ່ອງໃສ່ຂໍ້ຄວາມທີ່ມີບັນຊີລາຍຊື່ແບບເລື່ອນລົງ, ດັ່ງນັ້ນຜູ້ໃຊ້ສາມາດພິມເພື່ອກັ່ນຕອງແລະເລືອກທາງເລືອກດຽວ. ດ້ວຍ Multiselect, ຜູ້ໃຊ້ສາມາດເລືອກຫຼາຍທາງເລືອກ (ມັກຈະສະແດງເປັນຢາເມັດຫຼືຊິບ). ກ່ອງລາຍການສະແດງຕົວເລືອກລາຍຊື່ທັງໝົດທີ່ເຫັນໄດ້ໂດຍຄ່າເລີ່ມຕົ້ນ, ມັກຈະມີການເລື່ອນ. ມັນເປັນປະໂຫຍດເມື່ອຜູ້ໃຊ້ຕ້ອງການເບິ່ງທຸກທາງເລືອກທີ່ມີຢູ່ທັນທີ. ກ່ອງລາຍຊື່ຄູ່ (ຍັງເອີ້ນວ່າລາຍການໂອນຍ້າຍ) ແມ່ນການປ່ຽນແປງຂອງກ່ອງລາຍຊື່ທີ່ອະນຸຍາດໃຫ້ຜູ້ໃຊ້ສາມາດຍ້າຍລາຍການລະຫວ່າງສອງກ່ອງລາຍຊື່ (ຊ້າຍ↔ຂວາ), ໂດຍປົກກະຕິສໍາລັບການເລືອກຫຼາຍ. ບໍ່ເຄີຍເຊື່ອງຕົວເລືອກທີ່ໃຊ້ເລື້ອຍໆ ດັ່ງທີ່ໄດ້ກ່າວມາຂ້າງເທິງ, ທາງເລືອກຂອງອົງປະກອບ UI ທີ່ຖືກຕ້ອງແມ່ນຂຶ້ນກັບ 2 ປັດໃຈ: ຕົວເລືອກບັນຊີລາຍຊື່ມີຈໍານວນເທົ່າໃດ, ແລະຖ້າຕົວເລືອກເຫຼົ່ານີ້ຕ້ອງການໃຫ້ເຫັນໄດ້ໂດຍຄ່າເລີ່ມຕົ້ນ. ບັນຊີລາຍຊື່ທັງຫມົດສາມາດມີໂຄງສ້າງຕົ້ນໄມ້, ຮັງ, ແລະການຄັດເລືອກກຸ່ມ, ເຊັ່ນດຽວກັນ.
ມີຫຼັກການຫນຶ່ງທີ່ຂ້າພະເຈົ້າປະຕິບັດຕາມມາເປັນເວລາຫລາຍປີສໍາລັບອົງປະກອບ UI: ບໍ່ເຄີຍເຊື່ອງຕົວເລືອກທີ່ໃຊ້ເລື້ອຍໆ. ຖ້າຜູ້ໃຊ້ອີງໃສ່ການຄັດເລືອກໂດຍສະເພາະເລື້ອຍໆ, ມີມູນຄ່າຫນ້ອຍຫຼາຍໃນການເຊື່ອງມັນຈາກພວກເຂົາ. ພວກເຮົາສາມາດເຮັດໃຫ້ມັນເລືອກໄວ້ລ່ວງຫນ້າ, ຫຼື (ຖ້າຫາກວ່າມີພຽງແຕ່ 2-3 ທາງເລືອກທີ່ໃຊ້ເລື້ອຍໆ) ສະແດງໃຫ້ເຂົາເຈົ້າເປັນຊິບຫຼືປຸ່ມ, ແລະຫຼັງຈາກນັ້ນສະແດງໃຫ້ເຫັນສ່ວນທີ່ເຫຼືອຂອງລາຍການກ່ຽວກັບການໂຕ້ຕອບ. ໂດຍທົ່ວໄປແລ້ວ, ມັນເປັນຄວາມຄິດທີ່ດີທີ່ຈະສະແດງຕົວເລືອກທີ່ນິຍົມສະເໝີ — ເຖິງແມ່ນວ່າມັນອາດຈະເຮັດໃຫ້ UI ສັບສົນ. ວິທີການເລືອກອັນໃດ? ບໍ່ແມ່ນທຸກໆລາຍການຕ້ອງການວິທີການຄັດເລືອກທີ່ສັບສົນ. ສຳລັບລາຍການທີ່ມີໜ້ອຍກວ່າ 5 ລາຍການ, ປຸ່ມວິທະຍຸທີ່ງ່າຍດາຍ ຫຼືກ່ອງໝາຍຖືກປົກກະຕິຈະໃຊ້ໄດ້ດີທີ່ສຸດ. ແຕ່ຖ້າຜູ້ໃຊ້ຕ້ອງການເລືອກຈາກບັນຊີລາຍຊື່ຂະຫນາດໃຫຍ່ຂອງທາງເລືອກ (ເຊັ່ນ: 200+ ລາຍການ), combobox + multiselect ແມ່ນເປັນປະໂຫຍດເນື່ອງຈາກວ່າການກັ່ນຕອງໄວຂຶ້ນ (ເຊັ່ນ: ການເລືອກປະເທດ).
Listboxes ມີປະໂຫຍດເມື່ອຄົນເຮົາຕ້ອງເຂົ້າເຖິງຫຼາຍທາງເລືອກໃນເວລາດຽວກັນ, ໂດຍສະເພາະຖ້າພວກເຂົາຕ້ອງການເລືອກຫຼາຍທາງເລືອກຈາກລາຍຊື່ນັ້ນເຊັ່ນກັນ. ພວກເຂົາສາມາດເປັນປະໂຫຍດສໍາລັບການກັ່ນຕອງທີ່ໃຊ້ເລື້ອຍໆ.
ກ່ອງລາຍການຄູ່ມັກຈະຖືກມອງຂ້າມ ແລະຖືກລະເລີຍ. ແຕ່ມັນສາມາດເປັນປະໂຫຍດຫຼາຍສໍາລັບວຽກງານທີ່ສັບສົນ, ເຊັ່ນ: ການຄັດເລືອກຈໍານວນຫຼາຍ, ຫຼືການມອບຫມາຍພາລະບົດບາດ, ວຽກງານ, ຄວາມຮັບຜິດຊອບ. ມັນເປັນອົງປະກອບ UI ເທົ່ານັ້ນທີ່ອະນຸຍາດໃຫ້ຜູ້ໃຊ້ສາມາດທົບທວນຄືນບັນຊີລາຍຊື່ເຕັມທີ່ເລືອກຂອງເຂົາເຈົ້າຂ້າງຄຽງກັບບັນຊີລາຍຊື່ແຫຼ່ງກ່ອນທີ່ຈະດໍາເນີນການ (ຍັງເອີ້ນວ່າ "ບັນຊີລາຍຊື່ການໂອນ"). ໃນຄວາມເປັນຈິງ, ກ່ອງລາຍຊື່ຄູ່ມັກຈະໄວ, ຖືກຕ້ອງກວ່າ, ແລະສາມາດເຂົ້າເຖິງໄດ້ຫຼາຍກ່ວາລາກແລະວາງ. ການພິຈາລະນາການນຳໃຊ້ ບັນທຶກທີ່ສໍາຄັນອັນຫນຶ່ງທີ່ຕ້ອງຈື່ແມ່ນວ່າທຸກປະເພດລາຍການຈໍາເປັນຕ້ອງສະຫນັບສະຫນູນການນໍາທາງແປ້ນພິມ (ເຊັ່ນ: ປຸ່ມລູກສອນ ↑/↓) ສໍາລັບການເຂົ້າເຖິງ. ບາງຄົນເກືອບຈະອີງໃສ່ແປ້ນພິມສະເຫມີໄປເພື່ອເລືອກເອົາທາງເລືອກໃນເວລາທີ່ເຂົາເຈົ້າເລີ່ມຕົ້ນການພິມ.
ນອກເຫນືອຈາກນັ້ນ:
ສໍາລັບລາຍຊື່ທີ່ມີ 7+ ທາງເລືອກ, ພິຈາລະນາເພີ່ມຄຸນສົມບັດ “ເລືອກທັງໝົດ” ແລະ “ລຶບລ້າງທັງໝົດ” ເພື່ອປັບປຸງການໂຕ້ຕອບຜູ້ໃຊ້. ສໍາລັບບັນຊີລາຍຊື່ຍາວທີ່ມີ combobox, ເປີດເຜີຍທາງເລືອກທັງຫມົດໃຫ້ກັບຜູ້ໃຊ້ໃນການຄລິກ / ແຕະ, ຖ້າບໍ່ດັ່ງນັ້ນພວກເຂົາອາດຈະບໍ່ເຄີຍເຫັນ, ສໍາຄັນທີ່ສຸດ, ຢ່າສະແດງອົງປະກອບທີ່ບໍ່ມີການໂຕ້ຕອບເປັນປຸ່ມເພື່ອຫຼີກເວັ້ນການສັບສົນ - ແລະບໍ່ສະແດງອົງປະກອບການໂຕ້ຕອບເປັນປ້າຍສະຖິດ.
ຫໍ່ຂຶ້ນ: ບໍ່ແມ່ນທຸກສິ່ງທຸກຢ່າງແມ່ນເລື່ອນລົງ ຊື່ສຳຄັນ. ບັນຊີລາຍຊື່ຂອງທາງເລືອກໃນແນວຕັ້ງມັກຈະຖືກອະທິບາຍວ່າເປັນ "ເລື່ອນລົງ" - ແຕ່ເລື້ອຍໆມັນເປັນເລື່ອງທົ່ວໄປເກີນໄປທີ່ຈະມີຄວາມຫມາຍ. "ເລື່ອນລົງ" ແນະນໍາວ່າບັນຊີລາຍຊື່ຖືກເຊື່ອງໄວ້ໂດຍຄ່າເລີ່ມຕົ້ນ. “Multiselect” ໝາຍເຖິງການເລືອກຫຼາຍອັນ (ກ່ອງໝາຍ) ພາຍໃນລາຍຊື່. "Combobox" ຫມາຍເຖິງການປ້ອນຂໍ້ຄວາມ. ແລະ "Listbox" ແມ່ນພຽງແຕ່ບັນຊີລາຍຊື່ຂອງລາຍການທີ່ເລືອກໄດ້, ເຫັນໄດ້ຕະຫຼອດເວລາ. ເປົ້າຫມາຍແມ່ນບໍ່ສອດຄ່ອງກັບຄໍານິຍາມຂ້າງເທິງເພື່ອຜົນປະໂຫຍດຂອງມັນ. ແຕ່ແທນທີ່ຈະສອດຄ່ອງຄວາມຕັ້ງໃຈ - ເວົ້າພາສາດຽວກັນໃນເວລາທີ່ຕັດສິນໃຈ, ການອອກແບບ, ການກໍ່ສ້າງ, ແລະຫຼັງຈາກນັ້ນນໍາໃຊ້ອົງປະກອບ UI ເຫຼົ່ານີ້. ມັນຄວນຈະເຮັດວຽກສໍາລັບທຸກຄົນ — ຜູ້ອອກແບບ, ວິສະວະກອນ, ແລະຜູ້ໃຊ້ສຸດທ້າຍ — ຕາບໃດທີ່ປ້າຍກຳກັບສະຖິດບໍ່ຄືກັບປຸ່ມໂຕ້ຕອບ, ແລະປຸ່ມວິທະຍຸບໍ່ເຮັດຄືກັບກ່ອງໝາຍ. ພົບກັບ "ຮູບແບບການອອກແບບສໍາລັບການໂຕ້ຕອບ AI" ຕອບສະຫນອງການອອກແບບຮູບແບບສໍາລັບການໂຕ້ຕອບ AI, ຫຼັກສູດວິດີໂອໃຫມ່ຂອງ Vitaly ທີ່ມີຕົວຢ່າງການປະຕິບັດຈາກຜະລິດຕະພັນຊີວິດຈິງ - ກັບການຝຶກອົບຮົມ UX ສົດຈະເກີດຂຶ້ນໃນໄວໆນີ້. ໄປຫາຕົວຢ່າງຟຣີ. ຕອບສະຫນອງຮູບແບບການອອກແບບສໍາລັບການໂຕ້ຕອບ AI, ຫຼັກສູດວິດີໂອຂອງ Vitaly ກ່ຽວກັບການອອກແບບການໂຕ້ຕອບ & UX.
ວິດີໂອ + ການຝຶກອົບຮົມ UX ວິດີໂອເທົ່ານັ້ນVideo + ການຝຶກອົບຮົມ UX $ 450.00 $ 799.00
ຮັບວີດີໂອ + ບົດຮຽນວິດີໂອ UX Training30 (10ຊມ) + ການຝຶກອົບຮົມ UX ສົດ. ຮັບປະກັນຄືນເງິນ 100 ມື້. ວິດີໂອພຽງແຕ່ $ 275.00$ 395.00
ໄດ້ຮັບວິດີໂອ course30 ວິດີໂອບົດຮຽນ (10h). ອັບເດດທຸກປີ.ຍັງມີເປັນ UX Bundle ທີ່ມີ 3 ຫຼັກສູດວິດີໂອ.
ຊັບພະຍາກອນທີ່ເປັນປະໂຫຍດ
Autocomplete: UX Guidelines, ໂດຍ Vitaly Friedman Combobox, ໂດຍ eBay 👍 Combobox, ໂດຍ Elastic Combobox, ໂດຍ Elisa Combobox, ໂດຍ MongoDB 👍 Combobox, ໂດຍ Visa 👍 Combobox, ໂດຍ Watson (Docplanner) Combobox, ໂດຍວິກິພີເດຍ Combobox, ໂດຍ Zendesk Multiselect (MongoDB Combobox Design Docs), ໂດຍ MongoDB 👍 Multiselect Lookup, ໂດຍວິກິພີເດຍ Multi-select Combo Box, ໂດຍ Vaadin Multiselect, ໂດຍ Visa ໂອນ (ຕົວຢ່າງ Listbox), ໂດຍ Ant Design Listbox, ໂດຍ Hopper ກ່ອງລາຍການ, ໂດຍ Vaadin Listbox, ໂດຍ Visa ຕົວເລືອກລາຍຊື່ຄູ່, ໂດຍ Red Hat (PatternFly) Dual Listbox, ໂດຍ Salesforce (ລະບົບການອອກແບບສາຍຟ້າ) ບັນຊີລາຍຊື່ການໂອນ, ໂດຍ Mantine Dual Listbox, ໂດຍ Dashlite Badges vs. Pills vs. Chips vs. Tags, ໂດຍ Vitaly Friedman Listboxes vs. Dropdown Lists, ໂດຍ Anna Kaley (NN/g)
