Articles on Smashing Magazine — For Web Designers And Developers
·
下拉框 vs. 多选框 vs. 列表框：如何选择合适的组件
💡
原文英文，约1100词，阅读约需4分钟。
📝
内容提要
选择合适的UI组件（下拉框、多选框、列表框、双列表框）应考虑选项数量和可见性。下拉框适用于单选，多选框支持多选，列表框展示所有选项，双列表框便于在两个列表间移动项目。常用选项应始终可见，以提升用户体验。
🎯
关键要点
-
选择合适的UI组件（下拉框、多选框、列表框、双列表框）应考虑选项数量和可见性。
-
下拉框适用于单选，多选框支持多选，列表框展示所有选项，双列表框便于在两个列表间移动项目。
-
常用选项应始终可见，以提升用户体验。
-
对于少于5个选项的列表，简单的单选按钮或复选框通常效果最佳。
-
对于200个以上的选项，使用下拉框和多选框可以加快筛选速度。
-
双列表框适用于复杂任务，如批量选择或分配角色、任务和责任。
-
所有列表类型都需要支持键盘导航，以提高可访问性。
-
对于7个以上的选项，考虑添加“全选”和“清除所有”功能以简化用户交互。
-
确保静态标签不看起来像交互按钮，交互元素不应显示为静态标签。
❓
延伸问答
下拉框和多选框有什么区别？
下拉框适用于单选，而多选框支持多选，允许用户选择多个选项。
在什么情况下应该使用列表框？
列表框适用于需要同时查看所有选项的情况，特别是当用户需要从中选择多个选项时。
如何选择合适的UI组件？
选择UI组件时应考虑选项数量和可见性，少于5个选项时可用单选按钮或复选框，200个以上选项时可用下拉框或多选框。
双列表框的主要用途是什么？
双列表框适用于复杂任务，如批量选择或分配角色、任务和责任，允许用户在两个列表间移动项目。
为什么常用选项应该始终可见？
常用选项应始终可见，以提升用户体验，避免用户频繁寻找常用选项。
对于7个以上的选项，应该添加什么功能？
对于7个以上的选项，建议添加“全选”和“清除所有”功能，以简化用户交互。
➡️
