那么组合框、多选、列表框和下拉列表之间有什么区别呢？虽然所有这些 UI 组件可能看起来相似，但它们具有不同的用途。选择通常取决于可用选项的数量及其可见性。 让我们看看它们有何不同，它们的目的是什么，以及如何选择正确的——避免一路上出现误解和错误的期望。
并非所有列表模式都相同 上面突出显示的所有 UI 组件都有一个共同点：它们支持用户与列表的交互。然而，他们的做法略有不同。 让我们逐一看一下：
下拉→列表在被触发之前是隐藏的。 组合框 → 输入要过滤的内容 + 选择 1 个选项。 多选 → 输入筛选 + 选择多个选项。 列表框 → 默认情况下所有列表选项可见（+滚动）。 双列表框 → 在 2 个列表框之间移动项目。
换句话说，Combobox 将文本输入字段与下拉列表结合在一起，以便用户可以键入内容来过滤并选择单个选项。通过多重选择，用户可以选择许多选项（通常显示为药丸或芯片）。 列表框默认显示所有可见的列表选项，通常带有滚动功能。当用户需要立即查看所有可用选项时，这会很有帮助。双列表框（也称为传输列表）是列表框的一种变体，允许用户在两个列表框（左↔右）之间移动项目，通常用于批量选择。 从不隐藏常用选项 如上所述，选择正确的 UI 组件取决于 2 个因素：有多少列表选项可用，以及所有这些选项是否需要默认可见。所有列表也可以具有树结构、嵌套和组选择。
对于任何 UI 组件，我多年来一直遵循一个原则：永远不要隐藏常用选项。如果用户经常依赖某个特定的选择，那么向他们隐藏它就没有什么价值。 我们可以预先选择它，或者（如果只有 2-3 个常用选项）将它们显示为选项卡或按钮，然后在交互时显示列表的其余部分。一般来说，始终显示流行的选项是个好主意 - 即使它可能会使用户界面混乱。 如何选择？ 并非每个列表都需要复杂的选择方法。对于少于 5 个项目的列表，简单的单选按钮或复选框通常效果最好。但是，如果用户需要从大量选项列表（例如，200 多个项目）中进行选择，则组合框 + 多选会很有帮助，因为过滤速度更快（例如，国家/地区选择）。
当人们需要一次访问多个选项时，列表框非常有用，特别是当他们还需要从该列表中选择多个选项时。它们对于经常使用的过滤器可能会有帮助。
双列表框经常被忽视和忽略。但它对于复杂的任务非常有帮助，例如批量选择或分配角色、任务、职责。它是唯一允许用户在提交之前与源列表并排查看完整选择列表（也称为“传输列表”）的 UI 组件。 事实上，双列表框通常比拖放更快、更准确且更易于访问。 可用性考虑因素 需要记住的一个重要注意事项是，所有列表类型都需要支持键盘导航（例如 ↑/↓ 箭头键）以实现可访问性。有些人在开始打字后几乎总是依靠键盘来选择选项。
除此之外：
对于包含 7 个以上选项的列表，请考虑添加“全选”和“全部清除”功能以简化用户交互。 对于带有组合框的冗长列表，请在单击/点击时向用户公开所有选项，否则它们可能永远不会被看到， 最重要的是，不要将非交互元素显示为按钮以避免混淆，并且不要将交互元素显示为静态标签。
总结：并非所有内容都是下拉菜单 名字很重要。垂直选项列表通常被描述为“下拉菜单”——但通常它有点太笼统而没有意义。 “Dropdown”提示列表默认隐藏。 “多重选择”意味着列表中的多重选择（复选框）。 “Combobox”意味着文本输入。 “列表框”只是一个可选择项目的列表，始终可见。 我们的目标并不是为了与上面的定义保持一致。而是为了协调意图——在决定、设计、构建和使用这些 UI 组件时使用相同的语言。 它应该适用于每个人——设计师、工程师和最终用户——只要静态标签看起来不像交互式按钮，单选按钮不像复选框。 认识“AI 界面设计模式” 认识 AI 界面的设计模式，Vitaly 的新视频课程，其中包含现实生活中产品的实际示例 - 现场用户体验培训即将开始。跳转到免费预览。 Meet Design Patterns For AI Interfaces，Vitaly 的关于界面设计和用户体验的视频课程。
视频 + 用户体验培训 仅视频视频 + 用户体验培训$ 450.00 $ 799.00
获取视频 + 用户体验培训30 个视频课程（10 小时）+ 实时用户体验培训。100 天退款保证。仅限视频$ 275.00$ 395.00
获取视频课程 30 节视频课程（10 小时）。每年更新。还可以作为包含 3 个视频课程的 UX 捆绑包提供。
有用的资源
自动完成：用户体验指南，作者：Vitaly Friedman 组合框，来自 eBay 👍 组合框，由 Elastic 提供 组合框，作者：Elisa 组合框，由 MongoDB 制作 👍 组合框，由 Visa 提供 👍 组合框，作者：Watson (Docplanner) 组合框，来自维基媒体 组合框，由 Zendesk 设计 多选（MongoDB Combobox 设计文档），作者：MongoDB 👍 多选查找，维基媒体 多选组合框，作者：Vaadin 多项选择，按 Visa 传输（列表框示例），Ant Design 列表框，作者：Hopper 列表框，作者：Vaadin 列表框，由 Visa 提供 双列表选择器，由 Red Hat (PatternFly) 提供 双列表框，由 Salesforce（Lightning Design System）提供 转会清单，作者：Mantine 双列表框，由 Dashlite 设计 徽章、药丸、芯片、标签，作者：Vitaly Friedman 列表框与下拉列表，作者：Anna Kaley (NN/g)
