列表框(或选择)指南

列表框(也称为选择)为用户提供了通常从项目列表选择一个项目(但有时也选择多个项目)的方法。如果没有足够空间显示列表框中的所有项目,可以滚动浏览这些项目。

Windows Phone 应用:列表框

示例

说明标准内联选择控件的屏幕截图

这是正确的控件吗?

当项目十分重要、需要突出显示时,使用列表框。 列表框应该将用户的注意力集中到一项重要选择的全套替代方案上。如果可以,请设置列表框的大小,以使其项目列表不需要平移或滚动。3 到 9 个项目最适合列表框。当列表框的项目可以动态变化时,它将获得较好的效果。

表示不适合使用列表框的因素包括:

  • 项目数量非常少。始终具有两个相同选项的单选列表框可能更适合呈现为单选按钮。当存在 3 个(甚至 4 个)静态项目时,也要考虑单选按钮。
  • 该列表框为单选且始终具有两个相同选项,其中一个可表示为另一个的对立面,例如“打开”和“关闭”。使用单个复选框切换开关
  • 项目数量非常多。网格视图和列表视图更适用于较长列表。对于很长的分组数据列表,首选语义式缩放
  • 这些项目是相邻的数字值。请考虑滑块
  • 选择项目在你的应用流中相对次要,或者在大部分情况中为大多数用户推荐默认选项。改用下拉列表

建议

  • 验证列表框的目的以及当前选定了哪些项目是否明确。
  • 保留用于触摸反馈和选择的项目状态的视觉效果和动画。
  • 将列表框项目的文本内容限制为单行。如果这些项目是视觉对象,你可以自定义大小。如果项目包括多行文本或图像,请改用网格视图或列表视图
  • 如果列表框自动确定大小并且它的项目为动态项目,请考虑如何调整列表框大小,以及它周围的视觉对象将发生什么情况。具有动态项目的固定大小的列表框不会调整大小,但允许滚动。
  • 请使用默认字体,除非你的品牌指南告诉你使用另一种字体。
  • 按逻辑顺序排序列表框的项目,例如将相关的选项组合在一起,优先放置最常用的选项,或者使用字母顺序。按字母顺序排序名称、按数字顺序排序数字,并按时间先后顺序排序日期。
  • 不要使用列表框执行命令或者动态显示或隐藏其他控件。

其他使用指南

外观和交互

列表框始终处于打开状态(与下拉列表相反)。它的项目可以为文本字符串或数字值,或者它们可自定义为任何其他视觉对象。我们鼓励你创新。用户喜欢直接与应用内容交互。因此你可以选择在提供时显示实际内容,可能是图形或产品照片。只需记住,项目始终应该在点击时提供视觉反馈,当它被选中时,应该非常清晰。

默认情况下,列表框控件将以垂直方向显示其项目列表。如果要以水平方向提供项目(尤其在项目为图形或照片的情况下),你可以自定义列表框项目的布局。如果你希望项目位于水平或垂直包围式网格中,也可以进行以上自定义。或者可以直接使用网格视图,它在默认情况下采用该方式布局项目。

在用户与项目交互时,它们通过更改状态并随之更改外观来提供反馈。列表框项目状态的例子包括正常、已按、未选择、已选择和已禁用。

可点击项目以选择它,在多选模式中,点击已选择的项目可以取消选择。在单选模式中,点击另一个项目可将选择转移到该项目。使用手指垂直轻扫将使项目列表带有惯性地上下滚动。列表框具有滚动条,其位置可指示用户在项目列表中的相对位置,其大小可指示视图中的项目所占的比例。滚动条仅在滚动时可见。

相关主题

对于设计人员

下拉列表指南

复选框指南

切换开关指南

网格视图和列表视图指南

语义式缩放指南

滑块指南

单选按钮指南

设置 UI 的布局

对于开发人员 (XAML)

ListBox class

添加组合框和列表框

对于开发人员 (HTML)

select element | select object

添加选择控件