分组框

注意

此设计指南是为 Windows 7 创建的，尚未更新Windows的较新版本。 大部分指南原则上仍适用，但演示和示例并不反映我们 当前的设计指南。

组框是一个标记的矩形框架，围绕一组相关控件。 组框是直观显示关系的一种方法;除了可能为一组控件提供访问密钥之外，它不提供任何功能。

典型的组框。

注意

与 布局 相关的指南显示在单独的文章中。

 

这是正确的控件吗？

虽然组框是指示关系的有力视觉手段，但过度使用它们会添加视觉混乱，并极大地减少了表面上可用的空间。 它们在视觉上很重，应该谨慎使用-仅当没有更好的解决方案时。

Windows的设计趋势是一种更简单、更简洁的外观，通过消除不必要的线条。

若要确定是否需要分组框，请考虑以下问题：

• 组中是否有多个控件？ 否则，请改用纯文本标签。 一个罕见的例外是使用具有单个控件的组框来保持与同一图面上其他组框的一致性。

错误：

在此示例中，组框只有一个控件。

• 控件是否相关？ 显示关系是否增加了清晰度？ 如果没有，请在组框外单独显示控件。
• 组中的所有控件是否在内？ 如果是，则指示较大图面上的关系，例如父对话框或页面。

错误：

在此示例中，对话框中) 提交按钮之外的所有控件 (位于组框中。

• 是否可以单独使用布局来有效地传达关系？ 如果是，请改用 布局 。 可以将相关控件放在彼此旁边，并在不相关的控件之间放置额外的间距。 还可以使用标题和缩进来显示分层关系。

在此示例中，单独使用布局来显示控件关系。

• 是否可以有效地使用分隔符来传达关系？ 如果是，请改用分隔符。 分隔符是一条水平线，它统一其下方的控件。 分隔符提供更简单、更简洁的外观。 但是，与分组框不同，在跨表面全宽时，它们效果最佳。
  • 开发 人员： 可以使用一个具有一个高度的刻制矩形实现分隔符。

在此示例中，标记分隔符用于显示控件关系。

在此示例中，未标记的分隔符用于显示控件关系。

• 是否可以有效地传达没有文本的关系？ 如果是这样，请考虑使用图形元素，如 背景 或聚合器。

指南

• 不要嵌套组框。 使用布局在组框中显示关系。

错误：

在此示例中，嵌套组框会导致不必要的视觉混乱。

正确：

在此示例中，使用布局显示相同的控件关系。

• 不要将控件放入组框标签中。
  • 例外： 如果复选框中的所有控件都处于启用和禁用状态，则可以将复选框用作组框标签。

错误：

在此示例中，下拉列表错误地放置在组框中。 此示例应改用 选项卡 。

• 请勿禁用组框。 若要指示一组控件当前不适用，请禁用组框中的所有控件，但禁用组框本身。 此方法更易于访问，并且可由所有 UI 框架一致支持。

标签

• 标记所有组框。
• 不要向标签分配访问密钥。 这样做是不必要的，并使其他访问密钥更难分配。 而是将访问密钥分配给组框中的控件。
  • 例外： 如果图面具有许多控件，则可能没有足够的访问密钥可用。 如果是这样，请通过将访问键分配给组框而不是组框中的控件来减少访问键数。
• 使用 句子样式大写。
• 使用名词或名词短语（而不是句子）编写标签，而不使用结束标点符号，包括冒号。
• 对同一图面中的分组框标签使用并行措辞。
• 保持组框标签简洁。 不要使用说明性文本作为标签。 但是，可以在组框中有说明文本。
• 不要在框中的控件标签中重复组框标签。 例如，如果组框标记为“对齐方式”，请标记选项按钮向左、向右等，而不是左对齐或向右对齐。
• 不要在用户界面文本中引用组框。

文档

引用组框时：

• 仅在程序员和其他技术文档中参考组框。 对于组框，请使用两个小写单词。
• 在其他地方，除非对话框包含多个具有相同名称的选项，否则不需要在过程中包含组框的名称。 在这种情况下，请使用组框名称。
• 如果可能，请使用加粗文本设置标签的格式。 否则，仅当需要防止混淆时，才将标签置于引号中。

示例：在 效果下，选择“ 隐藏”。