许多UI控件允许用户选择选项;它们包括复选框,单选按钮,切换交换机,步行者,listboxes,和下降。在本文中,我将定义列表框和下拉列表,讨论何时使用每个元素,以及在哪些情况下两者都足够。

listboxes.

在最简单的形式中,列表框包含三个主要部分:a集装箱盒, 一种项目列表和A.标签。用户可以单击容器框中包含的项目,从列表中选择一个或多个项目。一个列表框可以滚动,这取决于它包含多少项和可查看区域。有时,列表框包括复选框,以明确地暗示多选功能可用。更复杂的列表框允许用户调整容器框的大小,对项目列表重新排序,并通过将项目从一个列表框移动到另一个列表框进行选择。

可以根据选择类型分类有4个列表框的变体。这些列表框中的每一个都可以是可滚动的。

  • 单个选择列表框:使用此类列表框,用户只能从互斥选项列表中选择一个项目。
  • MultiSelect ListBox:用户可以通过按住缩小来选择或取消选择一个或多个项目转移,命令,或控制单击项目时键。

  • 带复选框的Multipelect ListBox:这种类型的列表框包括复选框,以使多重选择更加明显。

  • Multipelect,Dual ListBoxes:此类型的列表框由两个listbox组成。左侧的ListBox包含可用选项,右侧的ListBox表示所选项目。该按钮将项目从可用列表移动到所选列表和去掉按钮将选定的选项移回可用列表,以取消选择它。用户还可以将选项上下移动以重新排序列表中的元素。

根据可滚动性和选择类型对列表框进行分类。
listboxes可以保持静态或滚动,以显示比初始高度的更多项目。它们还支持单项或多项选择。
MultiSelect双ListBox示例
一个多选择,双列表框允许用户通过从一个列表框移动项目到另一个列表框来进行选择。用户还可以通过在列表中上下移动选项来重新排序。

下拉列表

在它们最简单的形式中,下拉列表包含四个主要部分集装箱盒, 一种下箭头按钮, 一种项目列表和A.标签。用户可以单击向下箭头以显示它们只能选择一个的互斥项目列表。像ListBoxes一样,下拉机可能会滚动,具体取决于它们在扩展时包含多少项。使用下拉列表,所选选项或默认值在容器框中保持可见,而其他列表项仅在单击向下箭头后才出现。选择项目或单击下拉列表外部将关闭它。

下拉列表从关闭,到静态,再到可滚动。
下拉列表显示在容器框中括起单个默认值或选定值。点击下箭头按钮时,将显示一个选项列表,用户可以从中选择一个。下拉列表可以保持静态或滚动,具体取决于它包含的项目数。
下拉列表从关闭,到静态,再到可滚动。
下拉列表显示在容器框中括起单个默认值或选定值。点击下箭头按钮时,将显示一个选项列表,用户可以从中选择一个。下拉列表可以保持静态或滚动,具体取决于它包含的项目数。
无论是静态还是可滚动的下拉列表。
下拉列表不支持多选功能;用户只能从静态或可滚动列表中选择一个选项。

使用列表框和下拉列表

列表框和下拉列表使表单变得紧凑——尤其是在有很多选项可用的情况下,并且以单选按钮或复选框的列表形式显示这些选项会占用不必要的屏幕空间。使用列表框或下拉列表也可以减少错误通过将选项约束到列表中的选项,并确保用户以正确的格式输入数据。

比较单选按钮列表、列表框和下拉列表所占的空间。
单个选择的独立式单选按钮列表是适当的,当有少量可用的选项时是合适的。有许多选项,使用列表框或下拉列表,具体取决于可用的屏幕空间以及您想要鼓励用户进行更改的屏幕空间。两个元素都持有更多的项目并占用较少的屏幕空间,而不是在页面上垂直列出许多项目。
单选按钮、列表框和下拉列表的堆叠高度比较。
单个选择的独立式单选按钮列表是适当的,当有少量可用的选项时是合适的。有许多选项,使用列表框或下拉列表,具体取决于可用的屏幕空间以及您想要鼓励用户进行更改的屏幕空间。两个元素都持有更多的项目并占用较少的屏幕空间,而不是在页面上垂直列出许多项目。
复选框列表的高度比较与列表框
独立复选框列表适合在有少量可用的选项时用于多元化。当可用许多选项时,使用ListBox,因为它们持有更多项目并占用的空间更少,而不是在页面上垂直列出许多复选框。

列表框和下拉列表用于本地应用程序和网站的选择。它们不用于执行命令或触发显示模态窗口、对话框或动态控件。在电子商务网站上,列表框通常用于存放分类页面左侧层叠的过滤器,而下拉列表可以存放用户排序产品的值。

Sephora如何为其过滤器和下拉列表使用listbox的示例进行排序产品。
Sephora.com使用可滚动的多选列表框(左边)和复选框在其购物页面上放置过滤器。用户可以从每个列表框中选择一个或多个细化来缩小显示的产品集。Sephora还使用了一个下拉列表(右上),其中包含互斥的值,用户可以从中选择,以按特定属性对页面进行排序。

对于可滚动的ListBoxes和下拉列表,重要的是要考虑其尺寸,因为它与之相关转向法。转向定律预测用户移动光标或手指通过一个被称为隧道的有界区域需要多长时间。转向时间取决于隧道的长度和宽度,较短、较宽的隧道比较长、较窄的隧道更快更容易通过。因此,限制可滚动列表框和下拉菜单中包含的项的数量,并确保它们设计得尽可能宽和尽可能短,将有助于用户快速轻松地查看和导航。当下拉列表变得太长或太窄时,用户很可能会意外地将光标移到边界区域之外,这会关闭下拉列表并迫使他们重新开始选择过程。

ListBox优势和缺点

虽然很少使用,但列表框除了支持单一选择、多选择和容纳多个选项而不占用过多的屏幕空间之外,还有其他优点。列表框的其他优点包括:

  • 交互成本:列表框不要求用户在进行选择之前点击任何东西来显示其中的选项(但是如果有太多的项目,它们可能要求用户滚动列表)。

  • 增加项目可见性:能够立即看到多种选项可以加速决策并提高选择准确性。

  • 单一和多柱视图:由于ListBoxs不限于单列,因此如果列表框宽度允许,则可以看到更多选项。但是,在多块列表框中应避免水平滚动。

  • 概述和重新排序:通过多选,双层列表框,用户通过显示项目的顺序保持一些控制,并清楚地概述所选项目,当ListBox包含多种选项时,这是有用的。

下面是列表框的一些缺点:

  • 屏幕空间:即使它们是紧凑的,它们也倾向于占用更多屏幕空间,而不是下拉列表。

  • 不熟悉:用户可能不知道如何立即与列表框交互-特别是,他们可能不知道如何选择多个复选框,如果复选框不包括在multiselect列表框中。按住控制,命令,或转移键选择和取消选择多个项目不是一般的web用户经常做的事情。这就是为什么在多选列表框中包含复选框很重要的原因,除非它们将不必要的注意力集中在多选功能上或者增加了不必要的屏幕混乱。

  • 用户可能无法一次性查看所有所选选项:如果在可视区域之外还有更多可用的项目,用户可能会失去同时查看所有选中项目的能力。为避免此缺点,请在列表框上方以标记形式显示选定项,或在不可滚动列表中突出显示选定项。

下拉列表优势和缺点

下拉列表比列表框更频繁地使用;他们占用了较少的屏幕空间,但可以像ListBox一样多的物品。下拉列表的其他优点包括:

  • 为用户提供最佳选择的能力,默认选中。

  • 淡化其他选择和变化:由于下拉列表隐藏其他可用选项,因此它们适用于淡化替代方案,强调更改的能力。(如果默认值满足大多数用户以及替代选项可能是危险或困惑的情况下,这是有利的。)

  • 熟悉:下拉列表是大多数用户熟悉的选择机制,因为它们在web和本地应用程序中被广泛使用。

下拉列表的一个缺点是需要单击才能显示其中的选项。下拉列表的其他缺点包括:

  • 它们容易塞得太多当它们包含太多选项时,滚动可能会卷起。

  • 它们会降低用户的速度当它们用于捕获现成的已知值时。例如,在输入生日或信用卡到期日期时,在表单字段中输入通常比与下拉列表交互更快更容易。

  • 慎重:由于它们非常紧凑,用户可能会意外地忽略表单、web页面和应用程序中的下拉列表。

  • 容易忽略:意外地偏离了盒子的光标关闭下拉目,人们必须重新开始选择过程。

在列表框和下拉列表之间进行选择

与使用独立的复选框或单选按钮相比,当有5个或更多的项目可供用户选择时,最好使用一个列表框或下拉列表。在决定是使用列表框、下拉列表还是另一个选择控件时,需要考虑其他因素,如可用屏幕空间的大小、用户是否可以选择一个或多个项目,以及是否需要淡化或鼓励更改。使用下表中的条件来帮助您决定使用哪个元素,或者何时使用哪个元素就足够了。

考虑标准 使用下拉列表 使用一个列表框 要么是可以接受的 何时使用另一个控件
选项列表由对象(名词)或属性(形容词)组成。

使用按钮触发命令(动词)。
用户可以选择的少数选项(5或更少)。

X

X

X

对小组互斥项目使用单选按钮,对多选项目使用复选框。
有5-15个选项。

如果屏幕空间有限,请使用下拉列表。如果不是,请使用listbox。

X

有超过15个选择。

X

制作列表框中最初可见的全部或大多数选项。不要使用列表框,如果它迫使用户过度滚动。

X

如果屏幕空间有限,并且用户可能知道确切值,请让它们在表单字段中键入它。
用户只能从一列互斥选项中选择一个值。

如果屏幕空间有限,可以使用下拉菜单,这是一个最佳的默认值,可以忽略其他选项并进行更改。如果屏幕空间可用,使用单选择列表框,以吸引更多的注意力到选项,并鼓励改变。 对于较小的选项集,使用单选按钮。
用户可以从选项列表中选择一个或多个。

X

使用一个带有复选框的多选列表框来暗示多重选择。

X

对于较小的选项集,使用独立的复选框。
看到所选项目比查看其他可用选项更重要。

X

X

X

查看所有项目的概述,无论是否选中,都有助于完成任务。

X

X

X

没有明确或最佳的默认选项。

X

X

X

选项排序的顺序是选择的一个重要因素。

X

使用MULTICECT双层列表框以适应选择和重新排序。

X

X

考虑标准 该怎么办
选项列表由对象(名词)或属性(形容词)组成 在这种情况下,使用ListBox或下拉列表是可以接受的。使用按钮触发命令(动词)。
用户可以选择的少数选项(5或更少)。 不要使用ListBox或下拉列表;为小组使用单选按钮进行多种相互排斥的物品或复选框。
有5-15个选项。 使用ListBox或下拉列表是可以接受的。如果屏幕空间有限,请支持下拉列表。如果不是,请使用listbox。
有超过15个选择。 使用一个列表框,使所有或大部分选项最初可见。不要使用列表框,如果它迫使用户过度滚动。如果屏幕空间有限,并且用户可能知道确切值,请让它们在表单字段中键入它。
用户只能从一列互斥选项中选择一个值。 使用ListBox或下拉列表是可以接受的。如果屏幕空间有限,可以使用下拉菜单,这是一个最佳的默认值,可以忽略其他选项并进行更改。如果屏幕空间可用,使用单选择列表框,以吸引更多的注意力到选项,并鼓励改变。对于较小的选项集,使用单选按钮。
用户可以从选项列表中选择一个或多个。 不要使用下拉列表。使用一个带有复选框的多选列表框来暗示多重选择。对于较小的选项集,使用独立的复选框。
看到所选项目比查看其他可用选项更重要。 使用下拉列表。
查看所有项目的概述,无论是否选中,都有助于完成任务。 使用listbox。
没有明确或最佳的默认选项。 使用listbox。
选项排序的顺序是选择的一个重要因素。 使用MULTICECT双层列表框以适应选择和重新排序。

结论

在设计中包含列表框或下拉列表时,请始终以逻辑顺序显示选项。这可能意味着将相关项目分组在一起,将最常用的选项放在前面,或按字母顺序组织选项。一定要按顺序排列数字和日期。更多关于在表单、网站和应用程序中选择正确的选择机制的信息,请在UX会议上探索我们的全天课程,Web和桌面的应用设计网页UX设计