分组框是围绕在一组相关控件外、带标签的矩形框。 分组框是一种可视化控件关系的方式; 除了可能为一组控件提供存取键之外，它不提供任何具体功能。
一个典型的分组框
何时使用该控件？
虽然分组框是一种增强元素关联的强有力视觉手段，但过度使用它们会增加视觉混乱，并大大减少可用空间。 它们在视觉上很重，只有在没有更好的解决方案的情况下才应该有节制地使用。
Windows 的设计趋势是通过消除不必要的线条使外观更简单、更干净。
要决定是否需要一个分组框，请考虑以下问题:
-
组中是否包含多于一个的控件？如果不是，只使用一个单独的文字标签就可以了。有一种比较少见的例外情况，为了和同一界面上其他带有分组框的元素保持外观一致，一个单独的控件也可以带有分组框。
错误示例：只带有一个控件的分组框
-
这些控件有关联性吗？ 展示这种关联性是否增加了表意的清晰度？ 如果没有，则在分组框外单独显示控件。
-
界面上所有的控件都在组内吗？ 如果是，请在较高层展示界面(如父对话框或页面)上说明背景信息。
错误示例：除了提交按钮外，对话框中的所有控件都被放置在分组框中了
-
仅使用恰当的元素布局，可以有效地表达清楚控件逻辑关系吗？ 如果是这样的话，使用布局代替分组框。 您可以将相关控件相邻放置，并在不相关的控件之间增加额外的间距。 您还可以使用标题和缩进来显示层次关系。
该例中，使用布局就可以清晰表达控件之间的关系了
-
使用分隔线，能有效表达控件元素间的关系吗？如果可以，就使用分隔线替代分组框。分隔线是一条水平线，可以将其下方的控件归为统一。 分隔线的外观更简单、更干净。 与分组框不同，分隔线的最佳使用效果应该是横跨贯穿整个承载界面。
该例为带标签的分隔线
该例为不带标签的分隔线
-
没有文字，你能有效地表示控件之间的关系吗？ 如果可以的话，考虑使用图形元素，如背景色或聚合器（aggregators）？。
设计原则
-
不要嵌套分组框。在一个组合框中，利用布局来展示控件关系。
错误示例：该例中，不必要的分组框嵌套造成了视觉混乱
正确示例：该例中，利用布局手段达到了表明和上例中相同控件逻辑关系的目的
-
不要在分组框标签中放置控件
（特例：如果分组框中的所有控件都被该复选框启用或禁用，则可以将复选框用作分组框标签。）
在此示例中，分组框标签中的下拉列表放置不正确。在这里应该使用tabs标签代替。
-
不要禁用分组框。 若要表示一组控件当前不应用，请禁用分组框中的所有控件，但不禁用分组框本身。 这种方法更容易访问，并且所有 UI 框架都可以很好地支持。
标签文字
-
所有分组框都应该配有标签文字。
-
不要为标签分配存取键。 这样做是不必要的，并使其他存取键更难分配。 可以将存取键分配给组框中的控件。
（特例: 如果一个界面有太多控件，那么可能没有足够的存取键可分配使用。 这种情况下，可以通过将存取键分配给分组框而不是分组框中的控件来减少存取键的数量。） -
使用句式大小写规则。
-
用名词或名词短语、而不是句子形式写标签，不要使用结尾标点符号，包括冒号。
-
对同一界面内的分组框标签使用相同句式结构。
-
保持分组框标签简洁。 不要使用说明文字作为标签。 但是，您可以在分组框中包含说明文本。
-
不要在组内控件标签中重复分组框标签文字。 例如，如果分组框标签为“对齐” ，则将选项按钮文字设置为“左”、“右”等，而不是“左对齐”或“右对齐”。
-
不要在用户界面文本中引用组框？。
说明
-
仅在程序员和其他技术文档中引用分组框的名称。 对于分组框group box，使用两个小写字母。
-
除非对话框包含多个具有相同名称的选项，否则没有必要在进程中包含分组框的名称。 在这种情况下，将“下方”字样与分组框名一起使用。
-
如果可能，使用粗体文本格式化标签。 否则，只有在需要时才将标签加上引号，以防混淆。
示例: 在效果下方，选择隐藏选项。
网友评论