许多UI控件允许用户选择选项;它们包括复选框单选按钮toggle switches步行者那listboxes, and下降。在本文中,我将定义列表框和下拉列表,讨论何时使用每个元素,以及任何要么足以的情况。

listboxes.

在最简单的形式中,列表框包含三个主要部分:acontainer box, 一种列表, 一种nd a标签。用户可以单击“容器”框中包含的项目,从列表中选择一个或多个。列表框可能会滚动,具体取决于它包含的项目和可查看区域。有时,ListBox中包含复选框,以清楚地意味着多个功能可用。更复杂的列表框允许用户调整容器框的大小,重新排序项目列表,并通过将项目从一个列表框移动到另一个列表框来进行选择。

There are 4 variations of listboxes that can be classified according to selection type. Each of these listboxes can be scrollable or not.

  • 单选列表框:使用此类列表框,用户只能从互斥选项列表中选择一个项目。
  • MultiSelect ListBox:Users can select or deselect one or more items by holding down theShift命令, 要么Control单击项目时键。

  • Multiselect listbox with checkboxes:此类型的列表框包括复选框,以使多个选择更加明显。

  • Multipelect,Dual ListBoxes:This type of listbox consists of two listboxes. The listbox on the left holds available options and the listbox on the right represents selected items. TheAdd按钮将项目从可用列表移动到所选列表和去掉按钮将选定的选项移回可用列表,以取消选择它。用户还可以将选项上下移动以重新排序列表中的元素。

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

下拉列表

在最简单的形式中,下拉列表包含四个主要部分:acontainer box, 一种向下朝下的箭头按钮, 一种列表, 一种nd a标签。Users can click on the down-arrow to display a list of mutually-exclusive items from which they can select only one. Like listboxes, dropdowns may scroll depending on how many items they contain when expanded. With dropdown lists, the selected option or default value remains visible in the container box, while the other list items appear only after clicking on the down-arrow. Selecting an item or clicking outside of the dropdown list will close it.

从关闭的下降到静态,向滚动的进化。
Dropdown lists display a single default or selected value enclosed in a container box. On click of the down-arrow button, a list of options appears from which users can select only one. A dropdown list can remain static or scroll depending on how many items it contains.
从关闭的下降到静态,向滚动的进化。
Dropdown lists display a single default or selected value enclosed in a container box. On click of the down-arrow button, a list of options appears from which users can select only one. A dropdown list can remain static or scroll depending on how many items it contains.
无论是静态还是可滚动的下拉列表。
下拉列表不支持多元化功能;用户只能从静态或可滚动列表中选择一个选项。

在使用中列表框和下拉列表

ListBoxes和Dropdown列表使表单紧凑 - 特别是当许多选项可用时,并将这些选项呈现为独立式单选按钮或复选框的列表将占用不必要的屏幕空间。还可以使用listbox或下拉列表减少错误通过将选项约束到列表中的选项,并确保用户以正确的格式输入数据。

单选按钮列表,列表箱和下拉列表之间占用的空间的比较。
Lists of standalone radio buttons for single selection are appropriate when there is a small number of options available. With many options, use either a listbox or a dropdown list, depending on the screen space available and on how much you want to encourage users to make changes. Both elements hold more items and take up less screen space than listing many items vertically on the page.
单选按钮,列表框和下拉列表的堆叠高度比较。
Lists of standalone radio buttons for single selection are appropriate when there is a small number of options available. With many options, use either a listbox or a dropdown list, depending on the screen space available and on how much you want to encourage users to make changes. Both elements hold more items and take up less screen space than listing many items vertically on the page.
Height comparison of a list of checkboxes vs. a listbox
独立复选框列表适合在有少量可用的选项时用于多元化。当可用许多选项时,使用ListBox,因为它们持有更多项目并占用的空间更少,而不是在页面上垂直列出许多复选框。

ListBoxes和下拉列表用于本机应用程序和网站中的选择。它们不旨在执行命令或触发模态窗口,对话框或动态控件的显示。在电子商务网站上,列出框通常用于容纳汇位的过滤器,该过滤器将逐个类别页面左侧级联,而下拉列表可以容纳用户可以对产品进行排序的值。

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

For scrollable listboxes and dropdown lists, it’s important to consider their size as it relates to the转向法。转向法预测用户通过称为隧道的有界区域移动光标或手指的时间需要多长时间。转向时间取决于隧道的长度和宽度,在那里,更宽的隧道更快,更容易导航到更长,更窄的隧道。由此,限制了可滚动列表箱和下拉列表中包含的项目数,并确保它们被设计成与尽可能宽,尽可能短,这将有助于用户速度和速度浏览和导航。当下拉列表增长太长而窄时,用户更有可能意外地将其光标移动到有界区域之外,这将关闭下拉目并强制它们再次启动选择过程。

ListBox优势和缺点

虽然相对较少使用,但是列出框架携带优势,超出支持单个选择,多元化,并且在不接受过度屏幕空间的情况下进行许多选项。listboxes的其他优点包括:

  • 互动成本ListBoxes不要求用户单击任何内容以在进行选择之前显示内部的选项(但是如果有太多项目,则可能要求用户滚动列表)。

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

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

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

以下是ListBoxes的一些缺点:

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

  • 不熟悉:用户可能不知道如何立即与ListBox进行交互 - 具体而言,如果未包含在Multielelect ListBox中,则可能不知道如何选择倍数。伸出了Control命令, 要么Shift选择和取消选择多个项目的键不是一般网络用户经常做的。这就是为什么在MultiSelect ListBox中包含复选框是重要的,除非他们将不必要的注意力集中在多元化功能上或添加不必要的屏幕杂乱。

  • Users may not be able to see all of the selected options at once:如果在可见区域中可见的可用性有更多的项目,则用户可能会失去同时查看所有所选项目的能力。为避免此缺点,将列表框以上的选定项目显示为令牌,或突出显示非可屏蔽列表中的所选项目。

Dropdown-List Advantages and Disadvantages

Dropdown lists are used more frequently than listboxes; they take up less screen space but can hold just as many items as listboxes. Other advantages of dropdown lists include:

  • The ability to give users an optimal option,默认选择。

  • 拒绝替代选项和更改:Because dropdown lists hide the other available options, they work well to downplay alternatives and underemphasize the ability to make changes. (This is advantageous in cases where the default will satisfy most users and where the alternative options may be dangerous or confusing to nonexpert users.)

  • Familiarity:下拉列表对于大多数用户来说是熟悉的选择机制,因为它们在Web和本机应用中都广泛使用。

下拉列表的缺点是它们需要点击以显示内部的选项。下拉列表的其他缺点包括:

  • 他们受到过度影响当它们包含太多选项时,滚动可能会卷起。

  • 他们减慢了用户当他们用来捕捉容易已知值。For example, when entering a birthdate or credit-card expiration date, typing in a form field is usually faster and easier than interacting with dropdown lists.

  • 慎重:由于它们如此紧凑,因此用户可能会意外地忽略表单,网页和应用程序中的下拉列表。

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

选择列表框和下拉列表之间

与使用独立复选框或单选按钮相比,最好在有5个或更多项目可以选择时使用ListBox或下拉列表。Additional factors such as the amount of screen space available, whether the user can select one or many items, and if there’s a need to downplay or encourage changes all need to be considered when deciding between a listbox, a dropdown list, or another selection control. Use the criteria in the table below to help you decide which element to use or when either will suffice.

Criteria to Consider Use a Dropdown List 使用listbox. 要么是可接受的 When to Use Another Control
选项列表由对象(名词)或属性(形容词)组成。

使用按钮触发命令(动词)。
There’s a small number of options (5 or fewer) from which users can choose.

X

X

X

为小组使用单选按钮进行多种相互排斥的物品或复选框。
有5-15个选项。

Use a dropdown if screen space is limited. Use a listbox if it is not.

X

有超过15个选择。

X

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

X

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

如果屏幕空间有限,最佳默认值以及降低替代方案并进行更改,请使用下拉列表。使用单选列表框如果屏幕空间可用,则会更加关注选项,并鼓励更改。 对于小型选项,请使用单选按钮。
用户可以从选项列表中选择一个或多个。

X

使用带有复选框的MultiSelect ListBox以意味着多个选择。

X

对于小组选项,请使用独立复选框。
Seeing the selected item is more important than viewing the other available options.

X

X

X

查看任务完成的所有项目,选择的所有项目概述。

X

X

X

There’s not a clear or optimal default option.

X

X

X

排名选项的顺序是选择中的重要因素。

X

Use a multiselect, dual listbox to accommodate both selection and reordering.

X

X

Criteria to Consider What to Do
The list of options is comprised of objects (nouns) or attributes (adjectives) In this case, it's acceptable to use either a listbox or a dropdown list. Use a button to trigger commands (verbs).
There’s a small number of options (5 or fewer) from which users can choose. Do not use a listbox or a dropdown list; use radio buttons for small sets of mutually exclusive items or checkboxes for multiselect items.
有5-15个选项。 It's acceptable to use either a listbox or a dropdown list. Favor a dropdown list if screen space is limited. Use a listbox if it is not.
有超过15个选择。 使用ListBox并使最初可见的全部或大多数选项。如果强制用户滚动过度滚动,请不要使用列表框。如果屏幕空间有限,并且用户可能知道确切值,请让它们在表单字段中键入它。
用户可以从互斥选项列表中选择一个值。 It's acceptable to use either a listbox or a dropdown list. Use a dropdown if there’s limited screen space, an optimal default value, and to downplay alternatives and making changes. Use a single-select listbox if screen space is available, to draw more attention to the options, and to encourage changes. For small sets of options, use radio buttons.
用户可以从选项列表中选择一个或多个。 不要使用下拉列表。使用带有复选框的MultiSelect ListBox以意味着多个选择。对于小组选项,请使用独立复选框。
Seeing the selected item is more important than viewing the other available options. 使用下拉列表。
查看任务完成的所有项目,选择的所有项目概述。 使用listbox。
There’s not a clear or optimal default option. 使用listbox。
排名选项的顺序是选择中的重要因素。 Use a multiselect, dual listbox to accommodate both selection and reordering.

结论

When including a listbox or dropdown list in your design, always display the options in a logical order. That may mean将相关项目分组在一起,首先放置最常用的项目,或按字母顺序组织选项。始终按顺序排列数字和日期。有关在表单,网站和应用程序中选择正确的选择机制,请探讨我们在UX会议上的全日制课程,Web和桌面的应用设计网页UX设计