列表框

注意

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

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

单选列表框的屏幕截图

典型的单选列表框。

注意

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

这是正确的控件吗?

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

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

单选列表

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

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

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

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

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

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

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

标准多选列表和检查框列表

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

预览列表

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

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

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

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

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

使用模式

列表框有多种使用模式:

Label
单选列表 允许用户一次选择一项。
已选中一项的列表框的屏幕截图
在此示例中,用户只能选择一个显示项。
标准多选列表 允许用户选择任意数量的项,包括无项。
标准多选列表的外观与单选列表完全相同,因此无法直观地发现列表框支持多选。 由于用户必须发现此功能,因此此列表模式最适合用于不必要且很少使用多重选择的任务。
有两种不同的多选模式: 选模式和 扩展模式扩展选择模式 是迄今为止更常见的模式,其中可以通过拖动或按住 Shift+单击和 Ctrl+单击分别选择连续和非相邻值组来扩展选择范围。 在 多选模式下,无论 Shift 和 Ctrl 键如何,单击任何项都会切换其选择状态。 鉴于此异常行为,多选模式已弃用,应改用检查框列表。
选择了多个项的列表框的屏幕截图
在此示例中,用户可以使用多选模式选择任意数量的项。
复选框列表与标准多选列表框一样,检查框列表允许用户选择任意数量的项,包括无项。
与标准多选列表不同,检查框清楚地指示可以进行多重选择。 对于多重选择至关重要或常用的任务,请使用此列表模式。
工具栏检查框列表的屏幕截图
在此示例中,用户通常选择多个项,以便使用检查框列表。
鉴于多重选择的明确指示,你可能假设检查框列表优于标准多选列表。 在实践中,很少有任务需要多重选择或大量使用;在这种情况下,使用检查框列表会过多地关注选择。 因此, 标准的多选列表更为常见。
预览列表 可以是单选或多选,但它们显示所选内容效果的预览,而不仅仅是文本。
窗口颜色选项预览的屏幕截图
在此示例中,每个选项的预览都清楚地显示选项的效果,这比单独使用文本更有效。
列出生成器 允许用户通过一次添加一个项并选择性地设置列表顺序来创建选项列表。
列表生成器由两个单选列表组成:左侧的列表是一组固定的选项,右侧的列表是正在生成的列表。 列表之间有两个命令按钮:
  • 一个 “添加 ”按钮,用于将当前所选选项移动到正在生成的列表,并插入到所选项之前。 (双击选项项具有相同的效果。)
  • 一个 “删除 ”按钮,用于从生成列表中删除所选项并将其返回到选项列表。 (双击生成列表中的项具有相同的效果。) 生成的列表可以选择使用 上移下移 命令对列表项进行排序。
工具栏按钮列表生成器的屏幕截图
在此示例中,列表生成器用于通过从一组可用选项中选择项并设置其顺序来创建工具栏。
添加/删除列表 允许用户通过一次添加一个或多个项,并根据需要设置列表顺序 ((如列表生成器) )来创建选项列表。
与列表生成器不同,单击“ 添加 ”会显示一个对话框,用于选择要添加到列表的项。 使用单独的对话框可以显著灵活地选择可使用专用对象选取器甚至通用对话的项。 与列表生成器相比,此变体更紧凑,但添加项需要稍微多一些精力。
菜单内容列表的屏幕截图
在此示例中,用户可以在菜单中添加或删除工具以及设置顺序。
虽然列表生成器和添加/删除列表模式比其他多选列表要重得多,但它们具有两个独特的优势:
  • 用户可在生成列表时和之后控制列表顺序。
  • 用户可以查看所选项的摘要,如果选项数很大,这可能会带来很大好处。
它们的缺点是,它们需要更多的屏幕空间,并且从头开始创建大型项目列表时可能难以使用。 因此,它们最适合用于创建短列表或修改已存在的列表。

准则

呈现

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

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

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

错误:无组织列表的屏幕截图

在此示例中,列表项太多,应按字母顺序对其进行排序。

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

在此示例中,列表项更易于查找,因为它们按字母顺序排序。 但是,项“所有 Windows 产品”位于列表的开头,无论其排序顺序如何。

  • 将表示“全部”或“无”的选项置于列表的开头,而不考虑剩余项的排序顺序。
  • 将元选项括在括号中。

未选择任何下拉列表的屏幕截图

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

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

错误:选中了空白的下拉列表的屏幕截图

在此示例中,空白项的含义尚不清楚。

正确:未选择任何下拉列表的屏幕截图

在此示例中,将改用“ (无) ”元选项。

交互

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

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

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

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

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

在此示例中,更改所选项会更改说明。

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

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

在此示例中,使用了多个需要水平滚动的列,因为有许多项和大量的可用屏幕空间用于宽控件。

多选列表

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

已选中四个项目的列表框的屏幕截图

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

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

windows 功能检查框列表的屏幕截图

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

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

默认值

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

例外: 如果控件表示处于 混合状态的属性,则不要选择任何项,这在为多个不具有相同设置的对象显示属性时发生。

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

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

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

标签

控件标签

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

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

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

在此示例中,列表框标签仅重述main指令。

Better:不带冗余标签的 列表的屏幕截图

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

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

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

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

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

正确:带有左对齐标签的列表屏幕截图,其中文本标签从左对齐

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

错误:带有文本对齐标签的列表的屏幕截图,列表的屏幕截图位于列表的屏幕截图中,左侧是顶部对齐的标签

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

  • 对于多选列表框,请使用一个标签,该标签清楚地指示多个选择是可能的。 复选框列表标签可能不太明确。

正确:选择一个或多个标签的列表的屏幕截图

在此示例中,标签清楚地指示可以进行多重选择。

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

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

最佳:带加载项标签的检查框列表的屏幕截图

在此示例中,检查框清楚地指示可以选择多个选项,因此标签不必是显式的。

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

选项文本

  • 为每个选项分配唯一名称。
  • 除非项是适当的名词,否则请使用 句子样式大写
  • 将标签编写为单词或短语,而不是句子,并且不使用结尾标点符号。
  • 使用并行措辞,并尝试使所有选项的长度保持大致相同。

说明文本和补充文本

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

检查框列表和描述性文本的屏幕截图

在此示例中,补充文本放置在列表下方。

文档

引用列表框时:

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

示例:在 “转到内容 ”列表中,选择“ 书签”。