Windows 7 个&下拉列表组合框
注意
此设计指南是为 Windows 7 创建的,并且尚未更新Windows的较新版本。 大部分指南原则上仍然适用,但演示和示例并不反映我们 当前的设计指南。
使用下拉列表或组合框,用户可以在互斥值列表中做出选择。 用户可以选择一个选项,而只能选择一个选项。 使用标准下拉列表时,用户只能选择列表中的选项,但使用组合框,他们可以输入不在列表中的选项。
典型的组合框。
阅读本文时,必须了解以下术语:
- 标准列表框是一个包含多个项列表的框,其中多个项可见。
- 下拉列表是一个列表,其中所选项始终可见,其他项通过单击下拉按钮按需可见。
- 组合框是标准列表框或下拉列表和可编辑 文本框的组合,因此允许用户输入不在列表中的值。
- 可编辑下拉列表是下拉列表和可编辑文本框的组合。
- 可编辑列表框是标准列表框和可编辑文本框的组合。
注意
与 布局 相关的指南在单独的文章中介绍。
这是正确的控件吗?
在决定之前,请考虑以下问题:
- 控件是否用于从互斥值列表中选择一个选项? 如果不是,请使用其他控件。 若要选择多个选项,请改用 标准多选列表、复选框列表、列表生成器或添加/删除列表。
- 选项命令是吗? 如果是,请改用 菜单按钮 或拆分按钮。 将下拉列表和组合框用于对象 (名词) 或属性 (形容词) ,但不是命令 (谓词) 。
- 列表是否显示数据,而不是程序选项? 无论哪种方式,下拉列表或组合框都是合适的选择。 相比之下, 单选按钮 仅适用于少量程序选项。
下拉列表
大多数情况下,建议大多数用户使用默认选项吗? 是否看到所选选项比查看替代选项更重要? 如果不想鼓励用户通过隐藏替代项进行更改,请考虑使用下拉列表。 如果没有,请考虑单选按钮、单选列表或可编辑列表框,从而更加强调替代选项。
在此示例中,最高质量的颜色质量是大多数用户的最佳选择,因此下拉列表是淡化替代项的一个不错的选择。
是否要引起人们对该选项的注意? 如果是这样,请考虑单选按钮、单选列表或可编辑列表框,这往往通过获取更多屏幕空间来吸引更多关注。 由于下拉列表很紧凑,因此对于想要低估的选项,它们是很好的选择。
屏幕空间是否为高级? 如果是这样,请使用下拉列表,因为使用的屏幕空间是固定的,并且与选项数无关。
窗口中是否有其他下拉列表? 如果是这样,请考虑使用下拉列表保持一致性。
可编辑下拉列表
除了刚刚为下拉列表提供的原则外,还适用以下各项:
可能的选择是否受到限制? 如果是,请改用普通下拉列表。 组合框用于不受约束的输入,用户可能需要输入当前不在列表中的值。 由于输入不受约束,如果用户输入文本无效,则必须使用错误消息处理错误。
是否可以提前枚举最有可能的选择? 否则,请改用文本框。
是否使用下拉列表列出以前的用户输入? 除非用户需要查看上一个输入的完整列表,否则请改用带有自动完成选项的文本框。
在此示例中,用户可能需要查看其以前的输入,因此可编辑的下拉列表是一个不错的选择。
在此示例中,具有自动完成的文本框是一个不错的选择。
用户是否会在选择有效值方面需要帮助? 如果是,请改用带有 “浏览”按钮 的文本框。
在此示例中,用户可以单击“To”,帮助他们选择有效值。
鼓励用户查看替代选项或邀请更改是否很重要? 如果是这样,请考虑改用可编辑的列表框。 使用可编辑的下拉列表,在删除列表之前,用户不会知道替代项。
用户是否需要快速在大型列表中查找项? (Win32 仅) 如果是,请使用组合框,因为用户可以通过键入其全名来选择项目。 相比之下,Win32 下拉列表仅根据键入 (的最后一个字符选择项,因此在月份列表中键入“Jun”与 11 月匹配,而不是 6 月) 。 在这种情况下,即使可能的选项受到约束,也可以使用组合框。
可编辑列表框
- 可能的选择是否受到限制? 如果是,请改用单选列表或普通下拉列表。 组合框用于不受约束的输入,用户可能需要输入当前不在列表中的值。 由于输入不受约束,如果用户输入文本无效,则必须使用错误消息处理错误。
- 是否可以提前枚举最有可能的选择? 否则,请改用文本框。
- 鼓励用户查看替代选项或邀请更改是否很重要? 如果没有,请考虑改为可编辑的下拉列表。
- 是否要引起人们对该选项的注意? 如果没有,请考虑改为可编辑的下拉列表。 由于下拉列表很紧凑,因此对于想要低估的选项,它们是很好的选择。
- 屏幕空间是否为高级? 如果是这样,请使用可编辑下拉列表,因为使用的屏幕空间是固定的,独立于选项数。
对于下拉列表, 列表中的项数并不是选择控件的一个因素 ,因为它们从数千个项一直缩减到一个。 可编辑的下拉列表从数千个项目缩减到无,因为用户可以输入不在列表中的值。 由于下拉列表可用于数据,因此可能无法提前知道项数,并且可能无法保证。 始终在可编辑列表框中至少包含三个项目,以证明其他屏幕空间的合理性。
使用模式
下拉列表和组合框具有多种使用模式:
用法 | 示例 |
---|---|
下拉列表 是一个标准下拉列表,其中包含一组固定的预先确定值。 |
关闭后,只有所选项可见。 当用户单击下拉列表按钮时,所有选项都可见。 若要更改值,用户可以打开列表并单击另一个值。![]() 在此示例中,列表处于正常状态。 ![]() 在此示例中,列表已下拉。 |
预览下拉列表 ,用于预览所选内容的结果,以帮助用户选择。 |
![]() 在这些示例中,下拉列表预览所选内容的结果。 |
可编辑的下拉列表 是一个下拉列表组合框,它允许用户输入不在下拉列表中的值。 |
![]() ![]() 编辑和删除模式中可编辑下拉列表的示例。 如果要为文本框提供灵活性,但希望通过提供可能选择的便捷列表来帮助用户,请使用此控件。 |
可编辑列表框 是常规组合框,允许用户输入不在始终可见列表中的值。 |
![]() 在这些示例中,始终显示可编辑的列表框。 当鼓励用户查看替代选项或邀请更改时,此控件比可编辑下拉列表更好。 |
指南
常规
- 不要使用下拉列表或组合框的更改来:
- 执行命令。
- 显示其他窗口,例如对话框以收集更多输入。
- 动态显示与所选控件相关的其他控件 (屏幕阅读器 无法检测此类事件) 。
呈现
按逻辑顺序对列表项进行排序,例如将高度相关的选项组合在一起、首先放置最常见的选项或使用字母顺序。 按字母顺序对名称、数字顺序和按时间顺序的日期进行排序。 应按字母顺序对包含 12 个或更多项的列表进行排序,以使项更易于查找。
正确:
在此示例中,列表项按其空间关系进行排序。
错误:
在此示例中,有许多列表项需要按字母顺序排序。
正确:
在此示例中,列表项按字母顺序排序,但表示所有项的选项除外。
在列表开头放置表示“全部”或“无”的选项,而不考虑剩余项的排序顺序。
将元选项括在括号中。
在此示例中,“ (None) ”是元选项,因为它不是所选的有效值,而是描述未使用选项本身。
禁用下拉列表或组合框时,还禁用任何关联的标签和命令按钮。
下拉列表
当单个下拉列表用于更改关联控件的视图时, 请立即在选择时更改视图,而不是要求单独的命令按钮。 仅当列表花费大量时间来呈现时,才使用单独的命令按钮。 但是,列表标题和 菜单按钮 是出于此目的的首选控件。
没有空白列表项,而是使用元选项。 用户不知道如何解释空白项,而元选项的含义是明确的。
正确:
错误:
在不正确的示例中,空白选项的含义尚不清楚。
预览下拉列表
最好在列表项中使用预览,而不是单独使用文本描述图像。
在此示例中,预览版介绍的选项远远优于仅文本。
请勿在预览中使用不必要的无帮助图标。
错误:
在此示例中,预览图标是不必要的,因为它们不会传达任何信息。
组合框
可以限制输入文本的长度。 例如,如果有效输入是介于 0 到 999 之间的数字,请使用限制为三个字符的组合框。
如果存在许多可能的选项,将列表内容集中在最有可能的选项上。 由于用户可以输入不在列表中的值,因此组合框不必列出所有选项,只需列出可能的选项或代表性的示例。
在此示例中,未列出许多有效选项,例如 15 个或 9.5 等半大小的字体。
默认值
- 选择最安全的 (,以防止默认情况下丢失数据或系统访问) 和最安全的选项。 如果安全和安全不是因素,请选择最可能或最方便的选项。
- 例外: 如果控件表示 处于混合状态的属性,则显示空白默认值,当为没有相同设置的多个对象显示属性时,将发生这种情况。
提示
提示是作为其默认值放置在可编辑下拉列表中的标签或简短指令。 与静态文本不同,当用户在组合框中键入内容或获取输入焦点后,提示就会从屏幕消失。
典型的提示。
在以下情况下使用提示:
- 屏幕空间处于这样的高级阶段,使用标签或指令是不需要的,例如在工具栏上。
- 提示主要用于以紧凑方式标识列表的用途。 使用组合框时,用户必须看到的关键信息。
不要仅使用提示来指示用户从列表中选择内容或单击按钮。 例如,选择选项或输入文件名等提示,然后单击“发送”是不必要的。
使用提示时:
- 在普通黑色的斜体灰色和真实文本中绘制提示文本。 提示文本不得与真实文本混淆。
- 保持提示文本简洁。 可以使用片段而不是完整句子。
- 使用 句子样式大写。
- 请勿使用结束标点符号或省略号。
- 提示文本不应可编辑,当用户单击或按 Tab 进入文本框后,应消失。
- 例外: 如果文本框具有默认输入焦点,并且仅在用户开始键入后消失,将显示提示。
- 如果文本框在失去输入焦点时仍为空,则会还原提示文本。
错误:
在此示例中,屏幕空间不处于高级阶段;填写可编辑的下拉列表后,用户很难记住其用途;和提示文本是可编辑的,以与真实文本相同的方式绘制。
建议的大小调整和间距
建议为下拉列表和组合框调整大小和间距。
- 选择适合最长有效数据的宽度。 下拉列表无法水平滚动,因此用户只能看到控件中可见的内容。 但是, (注意,组合框可以启用 AutoScroll 功能。)
- 对于 任何文本 (, (最多包含 200% 的短文本) ,但不包括将本地化) 的数字。
- 选择一个列表长度,消除不必要的垂直滚动。 由于下拉列表按需显示,因此其列表最多应显示 30 个项目。 可编辑列表框 (那些没有下拉按钮) 应显示在 3 到 12 个项目之间。
标签
控件标签
将标签编写为单词或短语,而不是句子,并使用冒号结束标签。 异常:
- 具有位于空间处于高级位置的提示的可编辑下拉列表。
- 如果下拉列表或组合框从属于单选按钮或复选框,并且由其标签以冒号结尾引入,请不要将其他标签放在控件上。
使用 句子样式大写。
将标签置于控件左侧或上方,并将标签与控件的左边缘对齐。 如果标签位于左侧,则垂直对齐标签文本与控件文本。
正确:
在此示例中,标签与控件文本正确对齐。
错误:
在此示例中,标签与控件文本不一致。
可以在标签后 (秒数、连接数等) 指定单位。
请勿将下拉列表或组合框的内容 (或其单位标签) 句子的一部分,因为这不可本地化。
选项文本
- 为每个选项分配唯一名称。
- 使用 句子样式大写,除非项是适当的名词。
- 将标签编写为单词或短语,而不是句子,不使用结束标点符号。
- 使用并行措辞,并尝试为所有选项保留相同长度。
说明性文本
如果需要添加有关下拉列表或组合框的说明性文本,请将其添加到标签上方。 使用带有结束标点符号的完整句子。
使用 句子样式大写。
其他有用但不需要的信息应保持简短。 将此信息放在标签和冒号之间的括号中,或在控件下方没有括号。
本示例显示控件下方放置的其他信息。
文档
引用下拉列表时:
- 使用确切的标签文本,包括其大写,但不包括访问键下划线或冒号;包括列表或框,以更清晰者为准。
- 对于列表选项,请使用确切的选项文本,包括其大写。
- 在编程和其他技术文档中,请参阅下拉列表作为下拉列表。 在其他地方,请使用列表或框,无论哪个位置都更清晰。
- 若要描述用户交互,请使用单击。
- 如果可能,请使用加粗文本设置标签和列表选项的格式。 否则,仅当需要防止混淆时,才将标签和选项放在引号中。
示例:在 “字号 ”列表中,单击“ 大字体”。
引用组合框时:
- 使用确切的标签文本,包括其大写,但不包括访问键下划线或冒号;包括单词框。
- 对于列表选项,请使用确切的选项文本,包括其大写。
- 在编程和其他技术文档中,将组合框称为组合框。 在其他地方,使用框。
- 若要描述用户交互,请使用 Enter。
- 如果可能,请使用加粗文本设置标签和列表选项的格式。 否则,仅当需要防止混淆时,才将标签和选项放在引号中。
示例:在 “字体 ”框中,输入要使用的字体。