列表框

注意

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

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

单选列表框的屏幕截图

典型的单选列表框。

注意

布局列表视图相关的指南将在单独的文章中介绍。

这是正确的控件吗?

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

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

单选列表

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

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

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

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

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

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

  • 设置是否看起来像一个相对量?设置更改后的即时反馈是否会让用户受益? 如果是这样,请考虑改用滑块
  • 列表项之间是否存在重要的分层关系? 如果是,请改用树视图控件。
  • 屏幕空间是否很宝贵? 如果是这样,请改用下拉列表,因为使用的屏幕空间是固定的,与列表项的数量无关。

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

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

预览列表

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

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

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

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

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

使用模式

列表框有几种使用模式:

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

准则

呈现

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

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

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

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

在此示例中,有许多列表项应按字母顺序排序。

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

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

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

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

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

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

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

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

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

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

交互

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

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

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

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

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

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

  • 避免水平滚动 多列列表依赖于水平滚动,这通常比垂直滚动更难使用。 如果按字母顺序排序的项目较多,且屏幕空间足够大,可以使用需要水平滚动的多栏列表。

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

在此示例中,使用了需要水平滚动的多个列,因为其中有很多项目,并且有足够的屏幕空间用于宽控件。

多选列表

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

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

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

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

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

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

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

默认值

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

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

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

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

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

标签

控件标签

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

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

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

在此示例中,列表框标签只是重申了主指令。

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

在此示例中,冗余标签被删除,因此主指令使用冒号和访问键。

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

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

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

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

正确:带有上方左对齐标签的列表屏幕截图带有向左对齐文本标签的列表屏幕截图

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

不正确:带有上方文本对齐标签的列表屏幕截图顶部对齐标签位于左侧的列表屏幕截图

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

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

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

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

不正确:带有加载项标签的列表框的屏幕截图

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

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

在此示例中,复选框清楚地表明可进行多个选择,因此标签不必明确。

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

选项文本

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

说明文本和补充文本

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

复选框列表和描述性文本的屏幕截图

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

文档

引用列表框时:

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

示例:在转到什么列表中,选择书签