Windows桌面应用程序设计指南（控件篇5-下拉列表&组合框）

使用下拉列表或组合框，用户可以在列表中选择互斥的值。 用户只能选择其中一个选项。使用标准的下拉列表，用户只能在列表中进行选择，但是如果加上组合框，他们也可以输入列表中没有的选项。

一个典型的组合框

下列这几点需要明确：

• 标准列表框是一个包含多个项目列表的框，多个项目是同时常显的。

• 下拉列表是一个选定项目始终可见的列表，其他项目可通过单击下拉按钮展开可见。

• 组合框是标准列表框或下拉列表和可编辑文本框的组合，因此允许用户输入列表中没有的值。
  （1）可编辑式下拉列表是下拉列表和可编辑文本框的组合。
  （2）可编辑式列表框是标准列表框和可编辑文本框的组合。

何时使用该控件？

思考以下问题：

• 控件是否用于从互斥值列表中选择一个选项？ 如果不是，使用其他控件。 若要选择多个选项，请使用标准多选列表、复选框列表、列表生成器或添加 / 删除列表。
  
  

  标准多选列表
  
  
  

  复选框列表
  
  
  

  列表生成器
  
  
  

  添加 / 删除列表

• 选项是命令吗？ 如果是这样，使用一个菜单按钮或分割按钮代替。 下拉列表和组合框适用于对象(名词)或属性(形容词)，但不适用于命令(动词)。

• 列表是否显示数据，而不是程序选项？ 无论哪种方式，下拉列表或组合框都是合适的选择。 相比之下，单选按钮仅适用于选项较少的情况。

下拉列表

• 是否有推荐多数用户在正常情况下选择的默认选项？相对于其他可选项，是否需要特别强调建议选项的可见性？使用下拉列表，即可以通过隐藏其他可选项（在下拉列表下方）降低用户更改默认选项的可能性。 如果没有这种需求，可以考虑单选按钮、单选列表或可编辑列表框，它们更能展现其他可选项的具体内容。
  

  

  示例
  
  在上例中，最高色彩质量选项是对绝大多数用户而言最好的选项，所以使用下拉列表很合适，和自然地降低了其他选项的可见性。

• 你希望这个选择控件引起用户的注意吗？ 如果是这样，可以考虑单选按钮、单选列表或可编辑列表框，它们会占用更多的屏幕空间，从而吸引更多的注意力。 因为下拉列表非常紧凑，所以对于那些你想低调处理的选择控件而言，它们是很好的选择。

• 是否需要节省使用屏幕空间？ 如果是，请使用下拉列表，因为它所占用的屏幕空间大小确定，与选择项的数量无关。

• 窗口上是否有其他下拉列表？ 如果是这样，可以考虑使用下拉列表以保持一致性。

可编辑式下拉列表

除了以上适用于下拉列表的原则，可编辑式下拉列表还需要注意以下几点：

• 可选项是否有限制？如果是这样，使用一个普通的下拉列表来代替。组合框用于不受约束的输入，用户可能需要在其中输入当前没有展现在列表中的值。 因为输入没有限制，所以如果用户输入无效的文本，则必须进行报错处理。

• 最有可能的选项能被提前列举出来吗？ 如果不能，使用文本框代替。

• 下拉列表是否用于列出以前的用户输入？ 除非用户需要查看以前输入的完整列表，否则使用带有自动填入选项建议的文本框就可以了。
  

  

  在这个例子中，用户可能需要查看他们之前的输入项，所以使用可编辑式下拉列表是不错的选择。

在这个例子中，一个带有自动补全建议的文本框就足够了

• 用户在选择有效值时是否需要额外帮助？ 如果是，则使用带有“浏览 ”按钮的文本框。
  

  

  在这个例子中，用户点击“打开...”以选择有效值

• 是否鼓励用户查看其他选择项或变更默认选项？ 如果是，请考虑使用可编辑的列表框（完全展示所有列表项）。使用可编辑的下拉列表，用户只有在下拉打开该列表之后才会注意到其他选项。

• 用户是否需要在包含项目很多的列表中快速定位一个项目？(只适用于Win32环境) 如果是，使用可编辑式下拉列表，因为用户可以通过输入项目的全名来选择项目。 相比之下，Win32中，下拉列表只根据输入的最后一个字符匹配项目(因此在月份列表中输入"Jun"将匹配November，而不是June)。 在这种情况下，即使需要对选项进行限制，也要使用可编辑式下拉列表。

可编辑式列表框

• 可能的选择是否需要加以限制？ 如果是，使用单选列表或普通下拉列表替代。 组合框用于不受约束的输入，其中用户可能需要输入一个当前没有展现在列表中的值。 因为输入是无约束的，所以如果用户输入无效的文本，则必须通过错误消息提醒处理该错误。

• 最有可能的选项能被提前列举出来吗？ 如果不能，使用文本框代替。

• 是否鼓励用户查看其他选择项或变更默认选项？ 如果不是的话，考虑使用可编辑式下拉列表。

• 你希望这个选择控件引起用户的注意吗？ 如果不是，考虑使用可编辑式下拉列表。 因为下拉列表非常紧凑，所以对于那些你不想强调的选项，它们是很好的选择。

• 是否需要节省使用屏幕空间？ 如果是，请使用可编辑式下拉列表，因为它所占用的屏幕空间大小确定，与选择项的数量无关。

对于下拉列表，列表中的选项数量不是选择控件的决定因素，它们可能只有一个，也可能成千上万。 可编辑式下拉列表的项目数量多少都无所谓，因为用户也可以输入一个不在列表中的值。 而且下拉列表可以用于输入数据，所以可能无法事先知道项的数量，也可能无法限定数据的值。 始终为可编辑式列表框预留出至少三个项目的屏幕空间。

应用范例

下拉列表和及其组合框有以下几种应用范例：

下拉列表是一个标准的下拉式列表框，包含一组固定的预设值。当列表收起时，只有选中项目是可见的。用户点击下拉按钮时，展现所有选项。如果要变更选项，用户需要点击展开列表，然后选择另一个选项。

下拉列表默认状态

下拉列表展开状态

预览态下拉列表是一个下拉列表，可以预览选择结果以帮助用户进行选择。

预览态下拉列表可以预览选项应用的效果

可编辑式下拉列表是一个下拉组合框，它允许用户输入一个下拉列表中不存在的值。

编辑模式的可编辑下拉列表

下拉模式的可编辑下拉列表。 当您希望提供文本框的灵活性，但又希望通过提供选项列表来帮助用户时，可以使用此控件。

可编辑式列表框是一个常规组合框，允许用户输入在列表下方、暂时不可见的值。

在这些示例中，始终显示选项可编辑式列表框。 这个控件比可编辑式下拉列表更适合用来鼓励用户查看备选选项或更改。

设计原则

总述

• 不要将下拉列表或组合框用于

1. 展示命令项；
2. 展示其他窗口以收集更多信息，比如对话框等；
3. 动态显示与所选内容相关的其他控件(屏幕阅读器无法检测此类事件)。

展示规则

• 按照逻辑顺序对列表项进行排序展示，例如将高度相关的选项组合在一起，将最常用的选项放在第一位，或者使用字母顺序。 按首字母顺序排列姓名，按增序排列数字，按时间顺序排序日期。 有12个或更多项目的列表应按字母顺序排序，这样项目更容易查找。
  

  

  正确示例：依据项目表达的空间位置顺序排列
  
  
  

  错误示例：项目太多，需要按字母顺序排列
  
  
  

  正确示例：除了有「所有选项」含义的项目，其他项目均按照字母顺序排列

• 将表示“全部”或“无”的选项放置在列表的开头，而与其余项的排序顺序无关。

• 将元选项用括号括起来
  

  

  在这个示例中，“(无)”是一个元选项，因为它不是选项的有效值，而是描述了选项本身没有选中任何值。

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

下拉列表

• 当使用单个下拉列表，来控制和更改一个相关控件的显示内容时，不要设计单独的确认命令按钮，在选定列表项的同时立即对应变更相关控件的显示内容。 只有当相关控件内容需要花费大量时间渲染才能展现时，设置单独的确认命令按钮。但是，列表标题（list headers？）和命令按钮菜单才是用于此功能目的的首选控件。

• 不要有空白的列表项，而是使用元选项。 用户不知道如何理解空白项，而元选项的含义是明确的。
  

  

  正确示例

错误示例。空白项会让用户感到困惑

下拉列表预览

• 如果用图片显示比单独使用文本描述能更形象地进行展示和表达，则可在列表项中使用示意预览图。

  
  
  

  上例中，预览图比单纯的文字更形象地展示了选项的意思

• 不要使用不必要和无意义的icon进行预览展示。
  

  

  错误示例

组合框

• 尽可能限制输入文本的长度。 例如，如果有效输入是介于0和999之间的数字，则使用限制为三个字符长度的组合框。

• 如果有许多可能的选项，列表内容尽量展示用户最可能选择的选项。 用户也可以输入列表中没有的值，所以组合框不必列出所有选项，只需列出可能的选项或具有代表性的示例。
  

  

  上例中并未列出所有有效值，例如用户可以自行输入9.5或者15这样并不在列表中的值

提示符

提示符是放置在可编辑下拉列表中作为其默认值的标签或短指令。 与静态文本不同的是，一旦用户在组合框中键入某些内容或获得输入焦点，提示就会从屏幕上消失。

一个典型的提示符

以下情况，可以使用提示符：

• 屏幕空间狭小，使用标签或指令会浪费空间，如在工具栏上。
• 提示符主要用于以简洁的方式表明列表的目的。 它不能是用户在使用组合框时需要查看的关键信息。

不要仅仅使用提示符来指导用户从列表中选择某些内容或单击按钮。 例如，像“选择一个选项”或“输入一个文件名”然后单击“发送”这样文字的提示符是不必要的。

使用提示符的时候，注意：

• 以斜体灰色字体显示提示文本，以正常黑色展示实际文本。提示文本不能与实际文本混淆。

• 保持提示文字的简洁。你可以用短语代替完整的句子。

• 使用大写句式规则。

• 结尾不要使用标点符号或省略号。

• 提示文本应该是不可编辑的，并且应该在用户单击文本框或选项卡进入文本框时消失。
  （特殊情况: 如果文本框具有默认输入焦点，则会显示提示文字，并且只有在用户开始键入时才会消失。）

• 如果文本框失去输入焦点时仍为空，则还原提示文本显示。

错误示例：该例并不节省空间；一旦可编辑下拉列表被选项填充，用户就很难记得该选项的意图是什么；提示文字应该是可编辑（清除）的，应该和正常文字一样在文本框中显示。

建议尺寸和间距

下拉列表和组合框的建议尺寸

• 根据最长的有效数据选择适当的宽度。 下拉列表不能水平滚动，因此用户只能看到控件中可见的内容。 (注意，组合框可以启用 AutoScroll 功能。)

• 对于要本地化的任何文本(但不包括数字) ，额外增加30%宽度的预留 (对于较短的文本，增加200%)。

• 为了减少不必要的垂直滚动，设置合适的列表高度。 因为下拉列表是根据需要显示的，最多可显示30个项目。可编辑的列表框(没有下拉按钮的列表框)可显示3到12个项目提示。

标签文字

控件标签

• 使用词语或短语来描述标签。不要使用带有句末标点的句子。
  （特例情况：
  1.可编辑的下拉列表，提示位于空间较大的位置。
  2.如果下拉列表或组合框从属于单选按钮或复选框，并由以冒号结尾的标签引入，则不要在控件上再次附加标签。）

• 为每个标签单独设置存取键。设置规则参见键盘一章。

• 使用句子的大小写规则。

• 将标签定位在控件的左侧或上方，并将标签与控件的左边缘对齐。 如果标签位于左侧，则将标签文本与控件文本垂直对齐。

  
  
  

  正确示例
  
  
  

  错误示例

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

• 不要将下拉列表或组合框(或其单位标签)设计成标签句子中的一部分，这种设计不能很好地进行本地化处理（其他语言翻译）。

选项文字

• 为每个选项设置唯一的名称。
• 除非一个项目是专有名词，一般使用句子的大小写规则书写选项文字。
• 把标签写成单词或短语，不要写成句子，不要用结尾标点符号。
• 使用相同句式，并尽量保持所有选项文字的长度相同。

提示文字

• 如果需要添加有关下拉列表或组合框的说明文本，请将其添加到标签上方。 使用结束标点符号的完整句子。
• 使用句式大写。

• 其他有用但非必要的信息应该保持简短。 将此信息放在标签和冒号之间的括号中，或者不加括号，放置在控件下方位置。

  
  
  

  该图为放置在控件下方的提示文字

说明

设计下拉列表时：

• 使用表意准确、大小写规范的标签文本，但不要写入存取键、下划线或冒号; 选择使用下拉菜单或列表框以达到更简明清晰的目的，其中的文本也使用该书写规则。

• 对于列表选项，使用确切的选项文本和正确的大小写规则。

• 在编程和其他技术文档中，下拉列表就是下拉展开的列表菜单。 在其他任何地方，都可以使用列表或框，哪个更清楚就用哪个。

• 使用“点击”来描述用户交互动作。

• 在其他语境中，使用粗体文本来表示标签和列表选项内容。 否则，如有必要，将标签和选项放在引号中以避免混淆。
  例如：在 字号 列表中，点击 粗体。

设计组合框时：

• 使用表意准确、大小写规范的标签文本，但不要写入存取键、下划线或冒号; 文本框中的文本也使用该书写规则。

• 对于列表选项，使用确切的选项文本和正确的大小写规则。

• 在编程和其他技术文档中，将组合框称为combo boxes。 在其他地方，使用box来表示组合框。

• 使用“确定”来描述用户交互动作。

• 在其他语境中，使用粗体文本来表示标签和列表选项内容。 否则，如有必要，将标签和选项放在引号中以避免混淆。
  例如：在 字体 框中，输入你想使用的字体名称。