列表框 vs 下拉列表，哪个更好？

摘要

列表框和下拉列表是紧凑型的UI控件，允许用户选择选项。

列表框立即显示选项并支持多选，而下拉列表则需要单击以查看选项，并且仅支持单选。

列表框（Listboxes）

通常情况下，列表框包括三个重要组成部分：容器框、选项列表和标签。用户可以单击容器框中的选项，实现从列表中选择一个或多个目标。列表框可能会滚动，具体取决于它包含的选项数和可见区域。有时，列表框包含复选框以明确暗示多选功能可用。更复杂的列表框允许用户通过将选项从一个列表框移动到另一个列表框来调整容器框的大小，重新排序选项列表以及进行选择。

列表框根据选择类型可以分为4种表现形式，各个形式的列表框都可以根据选项的多少和可见区域选择滚动或不滚动。

• 单选列表框：使用这种类型的列表框，用户只能从选项列表中选择一项。
• 多选列表框：用户可以通过在单击选项时按住Shift，Command或Control键来选择或取消选择一个或多个选项。
• 带复选框的多选列表框：这种类型的列表框包括让多选功能更加明显的复选框。
• 多选双列表框：这种类型的列表框由两个列表框组成。左侧的列表框包含可用选项，右侧的列表框表示所选选项。“ 添加”按钮将选项从可用列表移至所选列表，而“ 删除”按钮将所选选项移回可用列表，以取消选择。用户还可以上下移动选项以重新排序列表中的元素。列表框可以保持静态或滚动以显示更多超出其初始高度的选项。它们还支持单项或多项选择。

▲下拉列表不支持多选功能。用户只能从静态或滚动列表中选择一个选项。

列表框和下拉列表在实际中的应用

列表框和下拉列表可以使表单更加紧凑–特别是当存在许多可选项时，将这些选项显示为独立的单选按钮或复选框的列表相比来说会占用较大范围的不必要的屏幕空间。

使用列表框或下拉列表可以将选项限制为列表中的某一个，并确保用户以正确的格式输入数据，以此来减少错误的发生（是防错的一个典型应用）。

▲当可用选项较少时，独立复选框的列表适用于多选。当有许多选项可供选择时，请使用列表框，因为它们可以容纳更多选项，并且比在页面上垂直列出许多复选框要占用更少的空间。

列表框和下拉列表适用于APP或网站中进行选择。它们并非旨在执行命令或触发模式窗口、对话框或动态控件的显示。

在电子商务网站上，列表框通常用于容纳在类别页面左侧层叠的过滤器，而下拉列表则可能包含用户可以对产品进行排序的功能。

总结

当设计过程中需要用到列表框或下拉列表时，请始终以逻辑顺序显示选项。这也就意味着将相关选项分组放在一起，将最常选择的选项放在第一位，或者按字母顺序组织选项。

文章来源：https://www.nngroup.com/articles/listbox-dropdown/

原文作者：Anna Kaley  尼尔森·诺曼集团（Nielsen Norman Group）用户体验专家

本文作者 @Henry-Lee

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！