出自UXGuide.net

列表框

List Boxes

目录 1 它用在这里合适吗？ 1.1 单选列表（Single-selection List） 1.2 标准多选列表（Standard Multiple-selection List）及带复选框的列表（Check Box List） 1.3 预览列表（Preview List） 1.4 列表构造器（List Builder）和添加/删除列表（Add/Remove List） 2 使用模式 3 设计规范 3.1 呈现 3.2 交互 3.3 多选列表 3.4 默认值 4 推荐尺寸与间距 5 标签 5.1 控件标签 5.2 选项文本 5.3 说明及附加文本 6 文档编写

列表框（List Box）用于在一组始终可见的值列表中进行选择。单选列表框（Single-selection List Box）用于从一组相关互斥的值中选择一项。而多选列表框（Multiple-selection List Box）则用于同时在一组值中选择零项或多项。

典型的单选列表框

注：与布局和列表视图（List View）相关的设计规范请参考各自相应的章节。

它用在这里合适吗？

考虑下列问题以进行判断：

• 列表中所表示的是否是数据，而非程序选项？或者说，无论有多少个可选项，列表框都能够适用。相比而言，选项按钮或复选框只适用于少量程序选项。
• 用户是否需要更改视图、分组、按列排序或是改变列的宽度与顺序？如果是，则应改用列表视图（List View）。
• 该控件是否需要作为拖放源或目标？如果需要，则应改用列表视图。
• 是否需要使用剪粘板复制或粘贴列表项？如果需要，则应改用列表视图。

单选列表（Single-selection List）

• 该控件是否用于从一组相关互斥的值中选择一项？如果不是，则改用其他控件。要选择多项，应改用标准的多选列表（Multiple-selection List）、复选框列表、列表构造器（List Builder）或添加/删除列表（Add/Remove List）。
• 是否存在适合大多数用户和情况下的推荐默认值？看到已选择的设置是否远比看到其他选项来得更加重要？如果是，如果你不建议用户更改设置，希望隐藏其他选项的话，可考虑使用下拉列表（Drop-down List）。

在这个示例中，最高的色彩质量对于大多数用户来说是最好的选择，因此使用下拉列表是淡化其他选择的好办法。

• 该列表需要经常操作吗？如果是，则应使用单选列表（Single-selection List）以简化操作。

在这个示例中，用户会经常改变 Display items 列表中的选择项以设置前景和背景颜色。如果在此处使用下拉列表则会非常累赘。

• 该设置看起来像是一种相对值吗？用户需要在改变设置的同时得到即时的效果反馈吗？如果是，考虑改用滑块。
• 列表项之间有非常明确的层次关系吗？如果是，应改用树形视图（Tree View）控件。
• 屏幕空间很宝贵吗？如果是，应改用下拉列表，因为其占用的屏幕空间是固定的，与列表项的数量无关。

标准多选列表（Standard Multiple-selection List）及带复选框的列表（Check Box List）

• 多项选择对于该任务来说是必备的或者很常用吗？如果是，应使用带复选框的列表来明确多项选择，尤其当目标用户不是专业人士时。很多用户意识不到标准多选列表是支持多选的。如果复选框导致在多项选择上花费了太多不必要的注意力，或者是引起屏幕杂乱的话，则应使用标准多选列表。
• 多选的稳定性很重要吗？如果是，应使用带复选框的列表、列表构造器或添加/删除列表，因为每次单击只会改变一个项目。如果用的是标准多选列表，很可能一不小心就清除了整个选择。
• 该控件是否用于从一组数据中选择零项或多项？如果不是，则应改用其他控件。如果只须选择一项，则应改用单选列表。

预览列表（Preview List）

• 带图像的选项是不是比只有文字的更易于选择？如果是，应使用预览列表。

列表构造器（List Builder）和添加/删除列表（Add/Remove List）

• 该控件是否用于从一组数据中选择零项或多项？如果不是，则应使用其他控件。如果只须选择一项，则应改用单选列表。
• 需要考虑已选项的顺序吗？如果需要，应使用列表构造器与添加/删除列表模式，它们支持排序，而其他多选模式则不然。
• 用户确实需要看到所有已选项的汇总吗？如果是，应使用列表构造器或添加/删除列表模式，它们只显示已选项，而其他多选模式则不然。
• 可能的选项是不受限制的吗？如果是，则应使用添加/删除列表，以使用户能够选择目前在列表中没有列出的值。
• 向列表中添加值需要特别的对话框来选择对象吗？如果是，则应使用添加/删除列表，并当用户单击添加按钮时显示对话框。
• 屏幕空间很宝贵吗？如果是，则应改用添加/删除列表，因为它无须一直显示所有选项，占用的屏幕空间较少。

对于列表框，列表项的数量不是影响是否选用该控件的因素，因为多到上千项，少到一项（对于单选列表）或零项（对于多选列表）都能适用。由于列表框能够用于数据，列表项的数量可能无法预知。

注：有时，看起来像是列表框的控件其实是通过列表视图或其他控件来实现的。这种情况下，应当基于其使用来遵守设计规范，而不是实现。

使用模式

列表框具有以下使用模式：

单选列表 用户一次可选择一项。	在这个示例中，用户只能选择一项。
标准多选列表 用户可选择任意项，包括不选。	标准多选列表与单选列表的外观完全相同，因此没有任何可视线索表明列表框支持多选。因为用户得探索这种功能，这种列表模式对于多选功能不太重要或很少使用的任务是最好的选择。 有两种不同的多选模式：多重选择和扩展选择模式。扩展选择模式尤其常用，可以通过拖放鼠标或分别用“Shift+单击”及“Ctrl+单击”来选择连续或不相连的一组值。而在多重选择模式中，通过单击某个条目来切换其选中状态，而无须 Shift 或 Ctrl 键。由于这种非正常的行为，不推荐使用多重选择模式，你应当改用带复选框的列表（Check Box List）。 在这个示例中，用户可以在多重选择模式下选择任何数量的项。
带复选框的列表 与标准多选列表框相同的是，带复选框的列表使得用户能够选择任何数量的项，包括不选。	与标准多选列表框不同的是，复选框能够清晰地表明可以进行多选。当多选功能不太重要或很少使用时应当使用此模式。 在这个示例中，用户通常需要选择多项，因此这里使用了带复选框的列表。 由于明确了多项选择功能，你可以假设带复选框的列表比标准多选列表更合适。在实践中，很少有任务需要多选或者是用得很多，在这种情况下使用带复选框的列表会使注意力多过地放在选择上。因此，标准多选列表要常用得多。
预览列表 可以单选或多选，但除了文本之外，还显示选项效果的预览。	在这个示例中，每个选项的预览清晰显示了其实际效果，比仅使用文本更加有效。
列表构造器 用户能够通过每次增加一项的方式创建一列选项，有时也可以设置列表的顺序。	列表构造器由两个单选列表组成：左侧的列表包含一组固定的选项，而右侧则是正在构造的列表。两个列表之间有两个命令按钮： 添加按钮，将当前选中的选项移到正在构造的列表中，插入至选中项之前。（双击选项也可达到同样的效果。） 删除按钮，将选中项从已构造的列表中移回选项列表。（双击已构造列表中的项也可达到同样的效果。）已构造的列表可能还有上移和下移命令以调整列表项的顺序。 在这个示例中，通过列表构造器，用户可以从一组可用的命令中进行选择并调整其顺序以创建工具栏。
添加/删除列表 用户可以一次添加一个或多个项来创建选项列表，有时也可以设置列表的顺序（如同列表构造器）。	与列表构造器不同，单击添加按钮将显示一个对话框，用于选择项目并添加至列表中。使用单独的对话框为选择项目提供了巨大的灵活性——你可以使用特殊的对象选取器，甚至是通用对话框。与列表构造器相比，这种变体更为紧凑，但添加项目时稍有些复杂。 在这个示例中，用户可添加或删除菜单中的工具，并调整其顺序。 虽然列表构造器和添加/删除列表模式比其他多选列表模式要复杂得多，但它们也有两个特别的优点： 用户在列表的构造过程中和构造结束之后都能够控制列表的顺序。 用户可以对已选项的总结进行复查，当选择的数量很多时非常有用。 它们的缺点在于需要很多屏幕空间，在从头开始建造长列表时有些困难。因此，它们最适合于构建短列表或是修改已有的列表。

设计规范

呈现

• 以逻辑顺序排列列表项，比如将高度相关的选项放在一起，或将最常用的选项放在前面，或者以字母顺序排列。名称以字母顺序排列，数值则以数字大小排序，日期则以时间顺序排列。12 个或 12 个以上的列表项就应该以字母顺序排列以使其更易于查找。

正确：

在这个示例中，列表框中的各项是以其空间关系排序的。

错误：

在这个示例中，列表项数量太多，因此应当以字母顺序排列。

正确：

在这个示例中，列表项更易于查找，因为它们是以字母顺序排列的。但是，“All Windows products”项位于列表的顶端，不参与字母排序。

• 将表示“全部”或“无”的选项放在列表的开头，而无需考虑它与其他项目的顺序关系。
• 将元选项（meta-options）置于括号内。

在这个示例中，“(none)”是一个元选项，因为它并不是用于选择的有效值——它只是表示该选项本身未被使用。

• 不要使用空白列表项——应当用元选项来代替。用户不知道如何解释空白项，而元选项的含义则非常明确。

错误：

在这个示例中，空白项的含义不明确。

正确：

在这个示例中，改用了元选项“(none)”。

交互

• 考虑提供双击操作。双击操作应当与选择一项并执行其默认命令的效果相同。
• 双击操作应当是冗余的。应当始终有一个命令按钮或快捷菜单命令具有相同的效果。
• 如果用户无法对选中项进行任何操作，则不要允许选择。

正确：

该列表框用于显示更改的只读列表，没有进行选择的必要。

• 当禁用列表框时，应当同时禁用所有相关联的标签和命令按钮。
• 不要将列表框中选中项的更改用于：
  • 执行命令。
  • 显示其他窗口，比如用于收集更多输入的对话框。
  • 动态显示与选中控件相关的其他控件（屏幕阅读器无法检测到这类事件）。例外：你可以动态更改用于描述选中项的静态文本。

可以接受：

在这个示例中，更改选中项会改变描述信息。

• 避免水平滚动。具有多列的列表会需要水平滚动，这通常比垂直滚动要更难使用。当各项是以字母顺序排列且屏幕空间足以容纳较宽的控件时，可以使用需要水平滚动的多列列表。

可以接受：

在这个示例中，使用了需要水平滚动的多列列表，因为条目数量很多，且有大量屏幕空间可以用于较宽的控件。

多选列表

• 考虑在列表下方显示选中项的数量，尤其当用户往往会选择多项时。该信息不仅仅提供了有用的反馈，而且还明确指出该列表框支持多重选择。

在这个示例中，选中项的数量显示在列表的下方。

• 你可以提供其他可能更加有意义的统计单位，比如选中项的资源需求。

在这个示例中，安装这些组件所需的磁盘空间比选中项的数量更加有意义。

• 如果有可能存在大量列表项，且经常需要选中或清除所有项的话，应当添加“全部选择”和“全部清除”命令按钮。
• 对于标准多选列表来说，不要使用多重选择模式，因为这种选择模式不再推荐使用。关于等价操作，应当改用带复选框的列表。

默认值

• 将最可靠（防止数据丢失或系统访问）且最安全的选项作为默认值。如果可靠性或安全性不是需要考虑的因素，则选择最常用或最方便的选项。

例外：当多个对象的同一属性具有不同的值时，如果该控件以混合状态方式呈现该属性，则不要选中任何项。

推荐尺寸与间距

用于列表框的推荐尺寸与间距

• 应当为最长的有效数据选择合适的列表框宽度。标准列表框无法横向滚动，因此用户只能看到控件中可见的部分。
• 应当额外空出 30% 的长度（对于较短的文本来说，最多 200%）用于需要被本地化的任何文本（但不包括数字）。
• 调整列表框的高度以能够显示整数个列表项。避免纵向截断列表项。
• 调整列表框的高度以消除不必要的垂直滚动。列表框应当显示 3 至 20 个项。如果把列表框稍稍加长可以消除垂直滚动条的话，可以考虑调整列表框的高度。可能包含大量条目的列表应当至少显示五项，使其同时能够显示更多条目以使滚动更加容易，也可以使得滚动条更易于定位。
• 如果增大列表框对用户来说有好处的话，应当使列表框及其父窗口可以缩放。这么做使用户能够根据需要调整列表的尺寸。但是，可缩放的列表框应当是至少出现三次的。

标签

控件标签

• 应当为所有列表框添加标签。标签文本应当为单词或短语，而不是句子。标签应当以冒号结尾。

例外：省略那些完全只是重复对话框主标题说明的标签。这种情况下，主标题说明带有冒号（除非是问句）和访问键。

可以接受：

在这个示例中，列表框的标签只是在重复主标题说明。

更好：

在这个示例中，去掉了多余的标签，因此主标题说明带有冒号及访问键。

• 如果列表框是附属于选项按钮或复选框的，且由以冒号结尾的标签引导的话，不要为列表框控件再使用额外的标签。

在这个示例中，列表框附属于一个选项按钮，并共用其标签。

• 分配唯一的访问键。相关设计规范，参见键盘。
• 使用句子大写样式。
• 将标签放置于控件的左侧或上方，并将其与控件的左边对齐。
  • 如果标签位于左侧，则将标签文本与控件中第一行文本垂直对齐。

正确：

在这些示例中，上方的标签与列表框左边界对齐，左侧的标签则与列表框的文本对齐。

错误：

在这些错误的示例中，上方的标签与列表框的文本对齐，而左侧的标签则与列表框的顶端对齐。

• 对于多选列表框，应当使用明确指示可以多选的标签。带复选框的列表的标签则可以无须那么明显。

正确：

在这个示例中，标签明确指出可以进行多选。

错误：

在这个示例中，标签没有提供关于多选的明显信息。

很好：

在这个示例中，复选框明确指出可以进行多选，因此标签无须那么明显。

• 你可以在标签之后的括号中指定单位（如“秒”或“连接”）。

选项文本

• 为每个选项分配唯一的名称。
• 使用句子大写样式，除非条目内容为专有名词。
• 标签文本应当为单词或短语，而不是句子，不要使用句末标点。
• 应当使用并列的措辞并尽量保持所有选项的长度相近。

说明及附加文本

• 如果你需要为列表框添加说明文本，应当将其放置在标签的上方。应使用完整的包含句末标点的句子。
• 使用句子大写样式。
• 那些有用但并非必须的附加信息应当保持简短。这类信息要么放在标签与冒号之间的括号内，要么不带括号放在控件的下方。

在这个示例中，附加信息置于列表的下方。

文档编写

当提及列表框时：

• 原样引用标签文本，包括其大小写及“list（列表）”字样，但无须包含访问键下划线和冒号。不要将列表框称为“list box（列表框）”或“field（字段/域）”。
• 对于列表项，应原样引用项目文本，包括其大小写。
• 在编程和其他技术文档中，将列表框称为“list boxes（列表框）”。其他地方，称为“list（列表）”。
• 用“select（选择）”一词描述用户的交互行为。
• 应尽可能为标签及列表项文本应用粗体样式。对于英文来说，仅当需要避免歧义时才在其两侧添加引号；对于中文来说，则应总是使用引号。

示例：In the Go to what list, select Bookmark.（在“前往何处”列表中，选择“书签”。）