每日姿势新看点

列表框,vs,下拉列表,哪个更好

  • 日期:2020-06-03 16:33:40
  • 来源:互联网
  • 编辑:小狐
  • 阅读人数:906

许多UI控件允许用户选择选项,它们包括复选框、单选按钮、切换开关、步进器、列表框和下拉列表。 在本文中,对列表框和下拉列表进行了定义,讨论何时使用各个元素,以及各个情况下使用哪一种更加合适。

列表框,vs,下拉列表,哪个更好(图1)

摘要

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

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

列表框(Listboxes)

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

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

单选列表框:使用这种类型的列表框,用户只能从选项列表中选择一项。

多选列表框:用户可以通过在单击选项时按住Shift,Command或Control键来选择或取消选择一个或多个选项。

带复选框的多选列表框:这种类型的列表框包括让多选功能更加明显的复选框。

多选双列表框:这种类型的列表框由两个列表框组成。左侧的列表框包含可用选项,右侧的列表框表示所选选项。“ 添加”按钮将选项从可用列表移至所选列表,而“ 删除”按钮将所选选项移回可用列表,以取消选择。用户还可以上下移动选项以重新排序列表中的元素。

列表框,vs,下拉列表,哪个更好(图2)

列表框,vs,下拉列表,哪个更好(图3)

多选双列表框允许用户通过将选项从一个列表框移动到另一个列表框来进行选择。用户还可以通过在列表中上下移动选项来重新排序选项。

下拉列表(Dropdown Lists)

下拉列表通常包含四个主要部分:容器框,向下箭头按钮,选项列表。用户可以单击向下箭头以显示相互并列的列表选项,他们只能从中选择一项。像列表框一样,下拉菜单也可能会滚动,具体取决于展开时下拉列表中包含的选项数量和默认高度。对于下拉列表,选定的选项或默认值在容器框中保持可见,而其他列表选项仅在单击向下箭头后出现,选择一个选项或在下拉列表的外部单击将下拉列表项收起。

列表框,vs,下拉列表,哪个更好(图4)

下拉列表显示在容器框中的单个默认值或选定值。单击向下箭头时,显示选项列表,用户只能从中选择一个。下拉列表可以支持静态或滚动,具体取决于它包含多少项及选项列表的默认高度。

列表框,vs,下拉列表,哪个更好(图5)

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

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

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

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

列表框,vs,下拉列表,哪个更好(图6)

列表框,vs,下拉列表,哪个更好(图7)

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

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

列表框,vs,下拉列表,哪个更好(图8)

对于可滚动的列表框和下拉列表,重要的是要考虑它们的大小,因为它们还与轨道滑动定律有关。

因此,限制可滚动列表框和下拉列表中包含的项目数量,并确保将其设计为尽可能宽和尽可能短,将有助于用户快速轻松地进行查看和导航。当下拉列表变得过长和狭窄时,用户可能不小心将光标移到有界区域之外,这将关闭下拉列表(误操作)并迫使他们重新开始选择过程。

列表框的优缺点

列表框的优点:

尽管我们很少使用列表框,但列表框的优点不仅局限于支持单选,多选和容纳许多选项而不会占用过多的屏幕空间,其他优点还包括:

交互成本低:列表框不需要用户单击任何内容即可在进行选择之前显示其中的选项(如果有太多项,则可能需要用户滚动列表)

增加的选项可见性:一次查看多个选项的功能可以加快决策速度并提高选择准确性。

概览和重新排序:使用多选双列列表框,用户可以控制选项的显示顺序,并获得所选选项的清晰概览,这在列表框包含多个选项时很有用。列表框的缺点:

陌生:用户可能不知道如何立即与列表框进行交互-特别是,如果多选列表框中未包含复选框,则他们可能不知道如何选择倍数。按住Control,Command或Shift键以选择和取消选择多个项目并不是一般Web用户经常执行的操作。这就是为什么将复选框包含在多选列表框中非常重要的原因,除非它们将注意力集中在多选功能上或增加不必要的屏幕混乱。

下拉列表的使用频率比列表框高。它们占用的屏幕空间更少,但可以容纳与列表框一样多的项目。下拉列表的其他优点包括:

淡化替代选项和更改:由于下拉列表隐藏了其他可用选项,因此它们很好地淡化了替代选项并淡化了对其进行更改的能力。在默认设置可以满足大多数用户的情况下,下拉显示的其他替代选项可能对非专业用户来说是危险的或令人困惑的

熟悉:下拉列表是大多数用户熟悉的选择机制,在Web和APP中应用的都十分广泛。下拉列表的缺点:

下拉列表的一个典型缺点是它们需要单击以显示其他的选项。其他缺点包括:

内容过多:它们包含过多的内容,当它们包含过多的选项时可能会很麻烦。

减缓用户使用速度:例如,当输入生日或信用卡到期日期时,与使用下拉列表进行选择相比,在表单字段中键入内容通常更加方便和快捷。

仔细:由于它们非常紧凑,因此用户可能会忽略表单、网页、或APP中的下拉列表。

易于消除:不小心将光标从框中移开会关闭下拉菜单,人们不得不重新开始选择过程。列表框 vs 下拉列表

列表框,vs,下拉列表,哪个更好(图9)

总结

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

本文相关词条概念解析:

列表框

列表框(ListBox)用于提供一组条目(数据项),用户可以用鼠标选择其中一个或者多个条目,但是不能直接编辑列表框的数据。当列表框不能同时显示所有项目时候,他将自动添加滚动条,使用户可以滚动查阅所有选项。

网友评论

提交评论

网站申明:本站图片仅为设计美化,与文章无关。如认为影响您的权益,请与我们联系。