列表框

备注

本设计指南针对 Windows 7 创建,尚未针对较新版本的 Windows。 大部分指南仍原则适用,但演示和示例并不反映 我们当前的设计指南

使用列表框,用户可以从列表中呈现的一组始终可见的值中选择。 使用单选列表框,用户可以从互斥值列表中选择一项。 使用多选列表框,用户可以从值列表中选择零个或多个项。

单选列表框的屏幕截图

典型的单选列表框。

备注

与布局和列表视图相关的指南在单独的文章中提供。

这是正确的控件吗?

在决定之前,请考虑以下问题:

  • 列表是否显示数据,而不是程序选项? 无论哪种方式,无论项数如何,列表框都是合适的选择。 相比之下, 单选按钮复选框 仅适用于少量程序选项。
  • 用户是否需要更改视图、组、按列排序或更改列宽和顺序? 如果是这样,请改为 使用列表 视图。
  • 控件需要是拖动源还是拖放目标? 如果是这样,请改为使用列表视图。
  • 列表项是否需要复制到剪贴板或粘贴到剪贴板? 如果是这样,请改为使用列表视图。

单选列表

  • 控件是否用于从互斥值列表中选择一个选项? 如果不是,请使用其他控件。 若要选择多个选项,请改为使用标准的多选列表、复选框列表、列表生成器或添加/删除列表。
  • 在大多数情况下,是否建议大多数用户使用默认选项? 看到所选选项是否比查看替代项更重要? 如果是这样 ,如果不想 通过隐藏替代项来鼓励用户进行更改,请考虑使用下拉列表。

将最高质量的屏幕截图作为默认按钮

此示例中,最高颜色质量是大多数用户的最佳选择,因此下拉列表是向下显示替代项的不错选择。

  • 列表是否需要持续交互? 如果是这样,请使用单选列表来简化交互。

纯文本等选项列表的屏幕截图

此示例中,用户不断更改"显示项"列表中的选定项,以设置前景色和背景色。 在这种情况下,使用下拉列表会非常繁琐。

  • 该设置是否看起来是相对数量?用户是否受益于有关设置 更改效果的即时反馈? 如果是这样,请考虑改为 使用滑块
  • 列表项之间是否有明显的分层关系? 如果是这样,请改为 使用树视图 控件。
  • 屏幕空间是否处于高级? 如果是这样,请改为使用下拉列表,因为使用的屏幕空间是固定的,并且与列表项的数量无关。

标准多选列表和复选框列表

  • 多个选择是任务必需的还是常用的? 如果是这样,请使用复选框列表使多个选择更加明显,尤其是在目标用户不高级时。 许多用户不会意识到标准多选列表支持多个选择。 如果复选框会过多地关注多个选择或导致过多的屏幕混乱,请使用标准多选列表。
  • 多个选择的稳定性是否很重要? 如果是这样,请使用复选框列表、列表生成器或添加/删除列表,因为单击一次只更改单个项。 使用标准的多选列表,即使意外地清除所有选择也很容易。
  • 控件是否用于从值列表中选择零个或多个项? 如果不是,请使用其他控件。 对于选择一项,请改为使用单选列表。

预览列表

  • 选项是否比单独选择文本更容易选择图像? 如果是这样,请使用预览列表。

列出生成器和添加/删除列表

  • 控件是否用于从值列表中选择零个或多个项? 如果不是,请使用其他控件。 对于选择一项,请改为使用单选列表。
  • 所选项的顺序是否很重要? 如果是这样,列表生成器和添加/删除列表模式支持顺序,而其他多选模式则不支持。
  • 用户是否必须查看所有选定项的摘要? 如果是这样,列表生成器和添加/删除列表模式仅显示所选项,而其他多选模式则不显示。
  • 可能的选项是否不受约束? 如果是这样,请使用添加/删除列表,以便用户可以选择当前不在列表中的值。
  • 向列表添加值是否需要专用对话框来选择对象? 如果是这样,请使用添加/删除列表,当用户单击"添加"时显示对话框。
  • 屏幕空间是否处于高级? 如果是这样,请改为使用添加/删除列表,因为它不会始终显示一组选项,因此占用较少的屏幕空间。

对于列表框,列表中的项数不是选择控件的一个因素,因为它们从数千个项一直缩放到一个项(对于单选列表 (多选列表没有一个) 。 由于列表框可用于数据,因此项数可能事先未知。

注意: 有时,类似于列表框的控件是使用列表视图实现的,反之亦然。 在这种情况下,请根据使用情况(而不是实现)应用准则。

使用模式

列表框具有多种使用模式:

Label
单选列表 允许用户一次选择一项。
Screen shot of list box with one item selected
此示例中,用户只能选择一个显示项。
标准多选列表 允许用户选择任意数目的项,包括无项。
标准多选列表的外观与单选列表完全相同,因此没有视觉线索指出列表框支持多个选择。 由于用户必须发现此功能,因此此列表模式最适用于多个选择不是必需的且很少使用的任务。
有两种不同的多选模式:多选模式和扩展模式扩展选择模式 目前更为常见,可通过拖动 或 Shift+click 和 Ctrl+click 来分别选择连续值和非相邻值的组来扩展选择。 在 多选模式下,单击任何项都会切换其选择状态,而不考虑 Shift 和 Ctrl 键。 鉴于此异常行为,多选模式已弃用,应改为使用复选框列表。
Screen shot of list box with several items selected
此示例中,用户可以使用多选模式选择任意数目的项。
复选框列表 与标准多选列表框一样,复选框列表允许用户选择任意数目的项,包括无项。
与标准多选列表不同,复选框清楚地指示可能有多个选择。 对于需要多次选择或经常使用的任务,请使用此列表模式。
Screen shot of Toolbars check-box list
此示例中,用户通常选择多个项,以便使用复选框列表。
鉴于多个选择的这一明确指示,你可能会假设复选框列表比标准的多选列表更可取。 在实践中,很少的任务需要多次选择或大量使用;在这种情况下,使用复选框列表会过多地关注选择。 因此, 标准多选列表更为常见。
预览列表 可以是单选或多选,但它们显示所选效果的预览,而不只是文本。
Screen shot of Window Color options preview
此示例中,每个选项的预览都清楚地显示了选择的效果,这比单独使用文本更有效。
列表生成器 允许用户通过一次添加一个项并选择性地设置列表顺序来创建选项列表。
列表生成器由两个单选列表组成:左侧的列表是一组固定的选项,右侧列表是正在生成的列表。 列表之间有两个命令按钮:
  • 个" 添加"按钮,用于将当前所选选项移动到正在生成的列表,并插入到选定项之前。 (双击选项项具有相同的效果。)
  • "删除"按钮,该按钮从生成列表中删除选定项,并返回到选项列表。 (双击生成列表中的项具有相同的效果。) 生成列表可以选择具有"上移"和"下移"命令来对列表项排序。
Screen shot of Toolbar buttons list builder
本示例使用列表生成器通过从一组可用选项中选择项并设置其顺序来创建工具栏。
添加/删除列表 允许用户通过一次添加一个或多个项,并选择性地设置列表顺序(如列表生成器 (创建) 。
与列表生成器不同,单击" 添加 "会显示一个对话框,用于选择要添加到列表中的项。 使用单独的对话框可以极大地灵活地选择项,可以使用专用对象选取器甚至通用对话。 与列表生成器相比,此变体更紧凑,但添加项需要稍多一些工作量。
Screen shot of Menu contents list
此示例中,用户可以在菜单中添加或删除工具,以及设置顺序。
虽然列表生成器和添加/删除列表模式明显比其他多选列表更重,但它们提供两个独特优势:
  • 用户可以在生成列表时和之后控制列表顺序。
  • 用户可以查看所选项的摘要,如果选项数量很大,这一点可能会显著受益。
其缺点是它们需要更多的屏幕空间,并且从头开始创建大型项列表时可能难以使用。 因此,它们最适合用于创建短列表或修改已存在的列表。

指南

呈现

  • 按逻辑顺序对列表项进行排序 ,例如将相关选项组合在一起、首先放置最常用的项,或者使用字母顺序。 按字母顺序对名称进行排序,按数字顺序对数字进行排序,并按时间顺序对日期进行排序。 应按字母顺序对包含 12 个或多个项的列表进行排序,以便更轻松地查找项。

正确: 左对齐、居中 (右对齐的屏幕截图)

此示例中,列表框项按其空间关系进行排序。

不正确: 已组织列表的屏幕截图

此示例中有很多列表项,应按字母顺序进行排序。

正确: 按字母顺序列表的屏幕截图

此示例中,列表项更易于查找,因为它们按字母顺序排序。 但是,项"Windows产品"位于列表的开头,而不考虑其排序顺序。

  • 将表示"全部"或"无"的选项放在列表的开头,而不考虑其余项的排序顺序。
  • 将元选项括在括号中。

下拉列表的屏幕截图,其中未选择任何内容

此示例中," (无) "是元选项,因为它不是该选项的有效值,而是指示选项本身未使用。

  • 不要将空白列表项改为使用元选项。 用户不知道如何解释空白项,而元选项的含义是明确的。

不正确: 下拉列表的屏幕截图,其中选择了空白

此示例中,空白项的含义不明确。

正确: 下拉列表的屏幕截图,其中未选择任何内容

本示例改为使用" (无) "元选项。

交互

  • 请考虑提供双击行为。 双击应具有与选择项并执行其默认命令相同的效果。
  • 使双击行为冗余。 应始终存在具有相同效果的命令按钮或上下文菜单命令。
  • 如果用户无法对所选项执行任何设置,则不允许选择。

正确: 已完成的向导更改列表的屏幕截图

此列表框显示更改的只读列表;无需进行选择。

  • 禁用列表框时,还禁用任何关联的标签和命令按钮。
  • 请勿在列表框中使用所选项更改来:
    • 执行命令。
    • 显示其他窗口,例如用于收集更多输入的对话框。
    • 动态显示与所选控件相关的其他控件 (屏幕阅读器无法检测到此类) 。 异常: 可以动态更改用于描述所选项的静态文本。

可接受: 所选列表项详细信息的屏幕截图

本示例更改所选项会更改说明。

  • 避免水平滚动。 多列列表依赖于水平滚动,这通常比垂直滚动更难使用。 当有许多按字母顺序排序的项和足够的屏幕空间用于宽控件时,可以使用需要水平滚动的多列列表。

可接受: Windows 资源管理器中文件夹列表的屏幕截图

本示例使用多个需要水平滚动的列,因为宽控件有许多项和足够的可用屏幕空间。

多选列表

  • 请考虑在列表下方显示 选定项的数量,尤其是在用户可能选择多个项时。 此信息不仅提供有用的反馈,还明确表明列表框支持多个选择。

列表框的屏幕截图,其中选择了四个项

此示例中,所选项的数量显示在列表下方。

  • 可以提供可能更有意义的其他选择指标,例如选择所需的资源。

Windows 功能的复选框列表的屏幕截图

此示例中,安装组件所需的磁盘空间比选择的项目数更有意义。

  • 如果可能有许多列表项,并且可能选择或清除所有列表项,请添加"全选"和"清除所有命令"按钮。
  • 对于标准多选列表,请勿使用多选模式,因为此选择模式已弃用。 对于等效行为,请改为使用复选框列表。

默认值

  • 默认情况下, (最安全的选项) 或系统访问权限丢失。 如果安全和安全性不是因素,请选择最可能或最方便的选项。

异常: 如果 控件表示混合状态的属性,则不要选择任何项,当为多个对象显示属性时,将发生此情况,这些对象没有相同的设置。

列表框大小调整和间距的屏幕截图

列表框的建议大小调整和间距。

  • 选择适用于最长有效数据的列表框宽度。 标准列表框不能水平滚动,因此用户只能看到控件中可见的内容。
  • 对于要本地化的任何文本 (短文本) 包括 30% (而不是数字) 200%。
  • 选择显示项的整数的列表框高度。 避免垂直截断项。
  • 选择可消除不必要的垂直滚动的列表框高度。 列表框应显示 3 到 20 个项,无需滚动。 如果这样做会消除垂直滚动条,请考虑将列表框稍长一些。 具有可能很多项的列表应显示至少五个项,以便通过一次显示更多项和使滚动条更易于定位来简化滚动。
  • 如果用户受益于使列表框变大,请调整列表框及其父窗口的大小。 这样,用户可根据需要调整列表框大小。 但是,可调整大小的列表框应显示不超过三个项。

标签

控件标签

  • 所有列表框都需要标签。 将标签编写为单词或短语,而不是句子;在标签末尾使用冒号。

异常: 如果标签只是对话框的主指令 的重述,则省略 标签。 在这种情况下,主指令采用冒号 (,除非它是访问密钥) 的问题。

可接受: 具有冗余标签的列表的屏幕截图

此示例中的列表框标签只是重新陈述了主指令。

更好: 没有冗余标签的 列表的屏幕截图

此示例删除了冗余标签,因此主指令采用冒号和访问键。

  • 如果列表框从属于单选按钮或复选框,并且该控件的标签以冒号结尾引入,请不要在列表框控件上添加其他标签。

使用相同标签的按钮和列表的屏幕截图

在此示例中,列表框从属于单选按钮并共享其标签。

  • 指定唯一的 访问密钥。 有关指南,请参阅 键盘
  • 使用 句子样式的大写
  • 将标签置于控件左侧或上方,并将标签与控件的左边缘对齐。
    • 如果标签位于左侧,则将标签文本与控件中的第一行文本垂直对齐。

更正: 屏幕截图列表中具有左对齐标签的屏幕截图,  列表的屏幕截图与文本对齐标签到左侧

在这些示例中,标签顶部与列表框的左边缘对齐,左侧的标签与列表框中的文本对齐。

错误: 屏幕快照列表,  在左侧带有顶部对齐标签的列表的屏幕截图上方显示文本对齐标签

在这些错误的示例中,标签与列表框中的文本对齐,左侧的标签与列表框的顶部对齐。

  • 对于多选列表框,请使用可以清楚地表明多个选择的标签。 复选框列表标签可以不太明确。

更正: 带有 "选择一个或多个标签" 的列表的屏幕截图

在此示例中,标签清楚地表明可能存在多个选择。

错误: 带有加载项标签的列表框的屏幕截图

在此示例中,标签不提供有关多个选择的明显信息。

最佳: 带有加载项标签的复选框列表的屏幕截图

在此示例中,此复选框清楚地指示可能有多个选择,因此标签不必是显式的。

  • 可以在标签后的括号中指定单位 (秒数、连接数等) 。

选项文本

  • 为每个选项指定唯一名称。
  • 使用 句子样式的大写,除非项是正确名词。
  • 将标签编写为单词或短语,而不是句子,不使用结束标点。
  • 使用并行句式,并尝试保持所有选项的长度完全相同。

说明文本和补充文本

  • 如果需要添加有关列表框的说明文本,请将其添加到标签上方。 使用带有结束标点的完整句子。
  • 使用 句子样式的大写
  • 对于有用但不必要的其他信息,应保持简短。 将此文本置于标签和冒号之间的括号中,或将其置于控件下方。

复选框列表和说明性文本的屏幕截图

在此示例中,补充文本位于列表下方。

文档

引用列表框时:

  • 使用确切的标签文本(包括其大小写),但不要包含访问键下划线或冒号。 包含单词列表。 不要将列表框引用为列表框或字段。
  • 对于列表项,请使用精确的项文本,包括其大小写。
  • 在编程和其他技术文档中,请将列表框作为列表框。 在其他任何位置,使用 list。
  • 若要描述用户交互,请使用 select。
  • 如果可能,请使用粗体文本设置标签和列表项的格式。 否则,请仅在需要时才将标签和项放在引号中以防止混淆。

示例:在 " 前往目标 " 列表中,选择 " 书签"。