出自UXGuide.net

下拉列表和组合框

Drop-down Lists and Combo Boxes

目录 1 它用在这里合适吗？ 1.1 下拉列表 1.2 可编辑的下拉列表 1.3 可编辑列表框 2 使用模式 3 设计规范 3.1 常规 3.2 呈现 3.3 下拉列表 3.4 预览下拉列表 3.5 组合框 3.6 默认值 4 提示 5 推荐尺寸与间距 6 标签 6.1 控件标签 6.2 选项文本 6.3 说明文本 7 文档编写

下拉列表（Drop-down List）和组合框（Combo Box）用于从一组互斥值列表中进行选择。用户能且仅能选择一个选项。在标准下拉列表中，用户只能选择列表中列出的选项，而在组合框中，用户可以输入列表中不存在的选项。

典型的组合框。

下列术语对于帮助理解此部分内容非常重要：

• “标准列表框”指一个包含多个项目列表、且可同时显示多个项目的方框。
• “下拉列表”指选中项一直可见，而其他项必须在单击下拉按钮后才可见的列表。
• “组合框”是标准列表框或下拉列表与可编辑文本框的捆绑组合，以使用户能够输入列表中不存在的值。
  • “可编辑下拉列表”是下拉列表与可编辑文本框的组合。
  • “可编辑列表框”是标准列表框与可编辑文本框的组合。

注：与布局相关的设计规范请参考各自相应的章节。

它用在这里合适吗？

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

• 该控件是用于从一组互斥值列表中进行选择的吗？如果不是，则改用其他控件。要进行多项选择，应改用标准多选列表、带复选框的列表、列表构造器（list builder）或添加/删除列表框（add/remove list）。
• 这些选项是命令吗？如果是，改用菜单按钮（menu button）或分割按钮（split button）。对于对象（名词）或属性（形容词）应当使用下拉列表和组合框，而不是命令（动词）。
• 列表中显示的数据，而不是程序选项吗？无论何种情况，下拉列表或组合框都是适合的。相反，选项按钮则只适用于少量程序选项。

下拉列表

• 是否有一个在大多数情况下适用于大多数用户的默认推荐选项？看到选中项是否比看到所有的可选项更为重要？如果你不想鼓励用户进行更改的话，考虑使用下拉列表来隐藏其他的选项。如果没有这样的默认推荐选项，则考虑选项按钮、单选列表或可编辑列表框，以更加强调其他可选项。

在这个示例中，最高颜色质量对于大多数用户来说是最好的选择，因此使用下拉列表是一个很好的弱化其他选项的方式。

• 你希望这些选项很醒目吗？如果是，考虑使用选项按钮、单选列表或可编辑的列表框等占据较多屏幕空间从而显得较为醒目的控件。下拉列表较为紧凑，对于那些不希望强调的选项来说非常合适。
• 屏幕空间很紧张吗？如果是，则使用下拉列表，因为其对屏幕空间的占用是固定的，而且与其包含的选项数量无关。
• 窗口中还有其他下拉列表吗？如果有，考虑使用下拉列表以保持一致。

可编辑的下拉列表

除了用于下拉列表的那些原则之外，下面这些也应当遵守：

• 可选项是固定的（constrained）吗？如果是，则改用普通的下拉列表。组合框是用于无约束输入的，用户得以输入一个有效但目前不在列表中的值。由于输入是不受约束的，如果用户输入了无效的文本，你必须显示错误信息来进行错误处理。
• 你能预先列举出那些最有可能的选项吗？如果不能，则改用文本框。
• 该下拉列表是用于列出用户以前的输入的吗？除非用户需要查看之前输入的完整列表，否则改用带有自动完成选项的文本框。

在这个示例中，用户可能需要查看他们先前的输入，因此可编辑下拉列表非常合适。

在这个示例中，带有自动完成功能的文本框非常合适。

• 用户需要协助进行有效值选择吗？如果需要，则改用带有浏览按钮的文本框。

在这个示例中，用户可以单击“收件人”按钮以帮助他们选择有效的值。

• 让用户查看其他可选项很重要吗？或者期望用户进行更改？如果是，考虑改用可编辑的列表框。如果用了可编辑下拉列表，除非拉下列表，否则用户不会意识到其它选项的存在。
• 用户需要在长列表中快速定位某个项吗？（仅用于 Win32）如果需要，应使用组合框，因为用户可以通过输入完整的项目名称来进行选择。相反，Win32 下拉列表只会根据最后输入的字符来进行选择（即输入“Jun”会选中“November”，而不是“June”）。在这种情况下，即使可选项是固定的，也应当使用组合框。

可编辑列表框

• 可选项是固定的吗？ 如果是，则改使用单选列表或普通下拉列表。组合框是用于无约束输入的，用户得以输入一个有效但目前不在列表中的值。由于输入是不受约束的，如果用户输入了无效的文本，你必须显示错误信息来进行错误处理。
• 你能预先列举出那些最有可能的选项吗？如果不能，则改用文本框。
• 让用户查看其他可选项很重要吗？或者期望用户进行更改？如果是，考虑改用可编辑的下拉列表。
• 你希望这些选项很醒目吗？如果不希望，考虑改用可编辑的下拉列表。下拉列表较为紧凑，对于那些不希望强调的选项来说非常合适。
• 屏幕空间很紧张吗？如果是，则使用下拉列表，因为其对屏幕空间的占用是固定的，而且与其包含的选项数量无关。

对于下拉列表来说，列表项的数量不是影响控件选择的因素，少至一个项，多至上万个项，可编辑下拉列表都能够适用，因为用户可以输入列表中不存在的值。由于下拉列表可以用于数据，因此项目的数量可能无法预知或保证。可编辑列表框应至少包含三项以平衡额外的屏幕空间。

使用模式

下拉列表和组合框具有下列使用模式：

下拉列表 带有一组固定的预定义的值的标准下拉列表。	当关闭时，只有选中项是可见的。当用户单击下拉按钮时，所有选项都将可见。要对值进行更改，用户需打开列表并单击另外的值。 在这个示例中，列表处于正常状态。 在这个示例中，列表已被拉下。
预览下拉列表 用于预览选择的结果以帮助用户进行选择的下拉列表。	在这些示例中，下拉列表显示了选中结果的预览。
可编辑下拉列表 用户能够输入下拉列表中不存在的值的下拉组合框。	处于编辑和下拉模式下的可编辑下拉列表示例。 当你既想提供文本框的灵活性，又想提供一个方便的包含可能选项的列表以协助用户时，可以使用此控件。
可编辑列表框 让用户能够输入那些在始终可见的列表中不存在的值的常规组合框。	在这些示例中，可编辑列表框始终显示。 当鼓励用户查阅其他选择或鼓励进行更改非常重要时，此控件相比可编辑下拉列表来说是更好的选择。

设计规范

常规

• 不要将下拉列表或组合框的更改用于：
  • 执行命令。
  • 显示其他窗口，比如用于收集更多输入的对话框。
  • 动态显示与选中控件相关的其他控件（屏幕阅读器无法检测到这类事件）。

呈现

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

正确：

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

错误：

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

正确：

在这个示例中，除了表示所有项的选项外，其他列表项是以字母顺序排列的。

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

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

• 当禁用下拉列表或组合框时，应当同时禁用所有相关联的标签和命令按钮。

下拉列表

• 当单个下拉列表用于改变相关控件的视图时，应当在进行选择之后立即更改视图，而不要再使用一个单独的命令按钮。仅当重绘列表需要花费大量的时间时才使用单独的命令按钮。然而，列表头及菜单按钮是更适合于该用途的控件。
• 不要使用空白列表项——应当用元选项来代替。用户不知道如何解释空白项，而元选项的含义则非常明确。

正确：

错误：

在错误的示例中，空白项的含义不明确。

预览下拉列表

• 当同时显示图像比单独用文字描述更好时，应当在列表项中使用预览。

在这个示例中，预览对选项的解释远好于只用文字。

• 不要在预览中使用不必要的、没有帮助的图标。

错误：

在这个示例中，预览图标是不必要的，因为它们并没有传达任何信息。

组合框

• 如果可能，应当限制输入文本的长度。例如，如果有效输入是从 0 至 999 的数字，那么应当使用限制为三个字符的组合框。
• 如果存在大量可能的选项，则应将列表内容专注于那些最有可能的选项上。因为用户可以输入不在列表中的值，因此组合框无须列出所有的选择，只要那些较为可能的选择或是具有代表性的例子即可。

在这个示例中，很多有效的选择并没有列出，例如 15，或半码的字体，如 9.5。

默认值

• 将最可靠（防止数据丢失或系统访问）且最安全的选项作为默认值。如果可靠性或安全性不是需要考虑的因素，则选择最常用或最方便的选项。
  • 例外：当多个对象的同一属性具有不同的值时，如果该控件以混合状态方式呈现该属性，则显示空白的默认值。

提示

提示是位于下拉列表内部作为其默认值显示的文本标签或简短说明。与静态文本不同，一旦用户在组合框内开始输入或当其获得输入焦点时，提示文本就会消失。

典型的提示

下列情况下可以使用提示：

• 当屏幕空间紧张，使用标签或说明文字不合适时，如在工具栏上。
• 提示文字主要用于以紧凑的方式标识列表框的目的。它绝不应该是用户在使用组合框时需要看到的关键信息。
• 不要将提示仅仅用于引导用户从列表中进行选择或单击按钮。例如，类似“选择一个选项”或“输入文件名然后单击发送”之类的提示都是不必要的。
• 提示文本不得与真实文本相混淆。

当使用提示时：

• 以灰色斜体方式显示提示文本，而以黑色正体方式显示实际输入的文本。
• 保持提示文本的简洁。你可以使用句子片断而不是完整的句子。
• 使用句子大写样式。
• 不要使用句末标点或省略号。
• 提示文本应当不可编辑，且当用户单击或跳转到该文本框内时应立即消失。
  • 例外：如果文本框具有默认的输入焦点，则显示提示文本，并当用户开始输入时消失。
• 当文本框失去输入焦点时，如果其内容仍然为空，则应当恢复提示文本。

错误：

在这个示例中，屏幕空间并不紧张，一旦填完了某个可编辑下拉列表，用户很难再回忆起它是做什么用的，而且该提示文本是可编辑的，并以与真实文本相同的方式显示。

推荐尺寸与间距

用于下拉列表和组合框的推荐尺寸与间距

• 应当为最长的有效数据选择合适的宽度。下拉列表无法横向滚动，因此用户只能看到控件中可见的部分。（然而注意，组合框可以启用自动滚动（AutoScroll）功能。）
• 应当额外空出 30% 的长度（对于较短的文本来说，最多 200%）用于需要被本地化的任何文本（但不包括数字）。
• 调整列表的长度以消除不必要的垂直滚动。因为下拉列表是仅在需要时才显示的，因此其列表应当最多可以显示 30 个项。可编辑列表框（指不具有下拉按钮的）应当显示 3 至 12 个项。

标签

控件标签

• 标签文本应当为单词或短语，而不是句子，并以冒号结尾。

例外：

• • 当空间紧张时使用的带提示文本的可编辑下拉列表。
  • 如果下拉列表或组合框是附属于选项按钮或复选框的，且由以冒号结尾的标签引导的话，不要为该控件再使用额外的标签。
• 为每个标签分配唯一的访问键。相关设计规范，参见键盘。
• 使用句子大写样式。
• 将标签放置于控件的左侧或上方，并将其与控件的左边对齐。如果标签位于左侧，则将标签文本与控件文本垂直对齐。

正确：

在这个示例中，标签正确地与控件文本对齐。

错误：

在这个示例中，标签未能正确地与控件文本对齐。

• 你可以在标签之后的括号中指定单位（如“秒”或“连接”）。
• 不要将下拉列表或组合框的内容（或其单位标签）作为一个句子的一部分，因为这将无法进行本地化。

选项文本

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

说明文本

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

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

文档编写

当提及下拉列表时：

• 原样引用标签文本，包括其大小写，但无须包含访问键下划线和冒号。加上“list（列表）”或“box（框）”字样，使其更为明确。
• 对于列表项，原样引用选项文本，包括其大小写。
• 在编程和其他技术文档中，将下拉列表称为“drop-down lists（下拉列表）”。其他情况下，使用“list（列表）”或“box（框）”字样，使其更为明确。
• 用“click（单击）”一词描述用户的交互行为。
• 应尽可能为标签文本应用粗体样式。对于英文来说，仅当需要避免歧义时才在其两侧添加引号；对于中文来说，则应总是使用引号。

示例：In the Font size list, click Large fonts.（在“字体”列表中，单击“大字体”。）

当提及组合框时：

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

示例：In the Font box, enter the font you want to use.（在“字体”框中，输入你想使用的字体。）