Microsoft 交互设计规范

这个示例没有明显的焦点。用户不知道应当从何处开始。

如果你对某个 UI 元素进行了视觉加强，应当确保这种注意力是合适的。在之前那则错误的 Windows 搜索示示例中，高亮的 All 按钮位于左上角且是最为醒目的，然而它却并不是所期望的焦点。用户可能会停在这个按钮处，试图弄清应该怎么做。 错误：

失去了显著的说明作为焦点，高亮的 All 按钮意外地成了焦点。

流程

当用户能够顺着界面上清晰的路径而流畅自然地按合适的顺序找到他们想要的 UI 元素时，该布局即称为具有好的“流程（flow）”。一旦用户认出了焦点，他们就需要确定如何完成任务。UI 元素的位置传达了它们之间的关系，且应当反映出完成任务的步骤。通常来说，这意味着任务的各个步骤应当自然地从左至右、从上至下（在西方文化中）排列。

具有好的流程的布局应满足下列条件：

? ?

UI 元素的位置反映出用户完成该任务需要的步骤。 触发任务的 UI 元素位于左上角或上方中部。

? ? ? ? ? ?

错误：

完成任务的 UI 元素位于右下角。

相关的 UI 元素相互靠近，无关的元素则分离。 必须步骤应在主流程中。

可选步骤应在主流程之外，可以使用合适的背景或渐进展开的方式进行弱化。 经常使用的元素比不常使用的元素出现在扫视路径上的位置更靠前。 用户始终知道下一步要做什么。任务流程中不存在出人意料的跳转或停止。

在这个示例中，用户不知道下一步该做什么。任务流程中存在出人意料的跳转和停止。 正确：

在这个示例中，UI 元素的呈现方式反映了完成任务所需的步骤。

分组

当那些在逻辑上相关的 UI 元素具有清晰地视觉联系时，该布局即可称为具有好的“分组（grouping）”。分组非常重要，因为这使得用户能够更加容易地理解并专注于一组相关而非单独的条目。分组可使布局显得更加简洁、易于理解。

你可以以下列方式进行分组（按分组程度由低到高排列）：

? 布局。你可以将相关的控件相互靠拢，并在无关的控件之间保留较大的间距。

在这个示例中，仅仅使用布局显示控件之间的关系。

? 分隔符。分隔符是用于划分控件分组的水平或垂直线条。分隔符提供了更加简洁的外观。不过，与分组

框不同，它们在横跨整个界面时最为合适。

在这个示例中，带标签的分隔符用于显示控件之间的关系。

? 聚合器。聚合器是在强烈相关的控件间建立视觉联系的图形。

在这个示例中，边界聚合器用于强调控件之间的关系，使其看起来像是单个控件，而不是八个。

? 分组框。分组框是环绕在一组相关控件外的带标签的矩形框。

在这个示例中，分组框用于圈出并标注一组相关的控件。

? 背景。你可以使用背景来强调或弱化不同的内容。