Layout

注意

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

布局是窗口或页面内内容的大小、间距和放置。 有效的布局对于帮助用户快速找到他们想要的内容以及使外观具有视觉吸引力至关重要。 有效的布局可以区分用户立即理解的设计和让用户感到困惑和不知所措的设计。

注意： 与 窗口管理 相关的指南在单独的文章中介绍。 建议的特定控件大小调整和间距在各自的指南文章中提供。

设计概念

视觉对象层次结构

当窗口或页面的外观指示其元素的关系和优先级时，其视觉层次结构清晰。 如果没有视觉层次结构，用户必须自行确定这些关系和优先级。

可视化层次结构是通过巧妙地组合以下属性来实现的：

• 重点。 布局指示用户首先需要查看的位置。
• 流。 眼睛通过一条清晰的路径顺利自然地流过表面，根据适合其使用的顺序查找用户界面 (UI) 元素。
• 分组。 逻辑相关的 UI 元素具有明确的视觉关系。 相关项组合在一起;不相关的项是分开的。
• 重点。 UI 元素根据其相对重要性进行强调。
• 对准。 UI 元素具有协调的位置，因此它们易于扫描和有序显示。

此外，有效布局具有以下属性：

• 设备独立性。 无论字体字体或大小、每英寸点数 (dpi) 、显示器或图形适配器，布局都按预期显示。
• 易于扫描。 用户可以一目了然地找到他们要查找的内容。
• 高效性。 较大的 UI 元素需要大，而小型元素的工作效果非常小。
• 可调整大小。 如果有帮助，则窗口可调整大小，并且其内容布局是有效的，无论图面有多大或多小。
• 平衡。 内容在图面上均匀分布。
• 视觉上的简单性。 认为布局并不比所需复杂。 用户不会对布局的外观感到不知所措。
• 一致性。 类似的窗口或页面使用类似的布局，因此用户始终感觉有方向性。

虽然调整大小、间距和放置都是简单的概念，但布局的挑战是实现这些属性的正确组合。

在 Windows 中，布局使用与设备无关的指标（例如对话框单位 (DLLU) 和相对像素）进行通信。

用于阅读的设计模型

用户根据内容的外观和组织选择他们阅读的内容。 若要创建有效的布局，需要了解用户倾向于阅读的内容以及阅读原因。

可以使用此设计模型进行布局决策，以便阅读：

• 人员从左到右、从上到下的顺序阅读 (西方文化) 。

• 有两种阅读模式：沉浸式阅读和扫描。 沉浸式阅读的目标是理解。

  

  此图为沉浸式阅读建模。

  相比之下，扫描的目标是查找内容。 整体扫描路径如下所示：

  

  此关系图为扫描建模。

  

  如果文本沿页面的左边缘运行，用户首先扫描左边缘。

• 使用软件时，用户不会沉浸于 UI 本身，而是沉浸在其工作中。 因此，用户通常不会阅读他们扫描的 UI 文本。 然后，他们只有在认为需要时才全面阅读文本。

• 用户倾向于跳过页面左侧或右侧的导航窗格。 用户识别到他们在那里，但只有在想要导航时才查看导航窗格。

• 用户倾向于跳过大量未格式化文本块，而无需阅读它们。

  

  用户在扫描时往往会跳过大型文本块和导航窗格。

• 在所有内容相同的情况下，用户首先查看窗口的左上角，扫描整个页面，并在右下角结束扫描。 他们倾向于忽略左下角。

  

  在所有条件相等的情况下，用户将按以下顺序读取这些数字：1、2、4 和 3。

• 但在交互式 UI 中，并非所有内容都是相等的，因此不同的 UI 元素会受到不同级别的关注。 用户倾向于先查看交互式控件，尤其是窗口左上角和中间的控件，以及突出显示的文本。

用户专注于main交互式控件和突出的main说明，仅在需要时才查看其他内容。

• 用户倾向于阅读交互式控件标签，尤其是那些看起来与完成手头的任务相关的标签。 相比之下，用户往往仅在认为需要时才阅读静态文本。
• 看起来不同的项会吸引注意力。 粗体文本和大文本在普通文本中脱颖而出。 具有颜色或彩色背景的 UI 项脱颖而出。具有图标的项与没有图标的项不同。
• 用户不会滚动，除非他们有理由滚动。 如果 折叠上方 的内容未提供滚动的原因，则它们不会。
• 用户确定要执行的操作后，会立即停止扫描并执行扫描。
• 由于用户认为已完成扫描后会停止扫描，因此他们倾向于忽略任何超出看似完成点的内容。

用户认为已完成扫描后，会停止扫描。

当然，此常规模型也有例外。 目视跟踪设备表明真实用户的行为相当不稳定。 此模型的目标是帮助你做出正确的决策和权衡，而不是准确地为用户行为建模。 但是，当你阅读此列表时，希望你也认识到了许多自己的阅读模式。

针对扫描进行设计

用户不阅读，他们会扫描，因此你应该设计用于扫描的 UI 图面。 不要假设用户将按从左到右、从上到下的顺序阅读文本，而是假定他们查看吸引其注意力的 UI 元素。

若要设计扫描：：

• 假设用户首先快速扫描整个窗口，然后大致按以下顺序读取 UI 元素：
  • 中心内的交互式控件
  • 提交按钮
  • 在其他地方找到的交互式控件
  • 主指令
  • 补充说明
  • 显示有警告图标的文本
  • 窗口标题
  • main正文中的其他静态文本
  • 脚注
• 将启动任务的 UI 元素置于左上角或中心。
• 将完成任务的 UI 元素放在右下角。
• 尽可能在交互式控件上放置关键文本，而不是静态文本。
• 避免将重要信息放在左下角或长可滚动控件或页面的底部。
• 不要显示大块文本。 消除不必要的文本。 使用 倒棱锥 形呈现样式。
• 如果你做了一些事情来吸引用户的注意力，请确保值得注意。

尽可能使用此模型，而不是对抗它：但有时需要强调或取消强调特定的 UI 元素。

强调主要 UI 元素：

• 将主要 UI 元素放在 扫描路径中。

• 将任何 UI 置于左上角或中心启动任务。

• 将提交按钮放在右下角。

• 将剩余的主 UI 置于中心。

• 使用吸引注意力的控件，例如命令按钮、命令链接和图标。

• 使用突出显示的文本，包括大文本和粗体文本。

• 将用户必须阅读的文本放在交互式控件中、带图标或 横幅上。

• 在浅色背景上使用深色文本。

• 用大空间包围元素。

• 不需要任何交互（例如指针或悬停）来查看你强调的元素。

  

  此示例演示强调主要 UI 元素的许多方法。

若要取消强调辅助 UI 元素，请执行以下操作：

• 将辅助 UI 元素放在扫描路径之外。

• 在窗口的左下角或底部放置用户通常不需要看到的任何内容。

• 使用不吸引注意力的控件，例如任务链接而不是命令按钮。

• 使用普通或灰色文本。

• 在深色背景上使用浅色文本。 深灰色或蓝色背景上的白色文本效果良好。

• 用最少的空间包围元素。

• 请考虑使用 渐进式公开 来隐藏次要 UI 元素。

  

  此示例演示了许多取消强调次要 UI 元素的方法。

有效使用屏幕空间

有效地使用屏幕空间需要你平衡几个因素：使用太多空间和窗口感觉沉重和浪费，甚至难以使用基于 菲斯定律。

不正确：

在此示例中，窗口对于其内容来说太大。

另一方面，使用的空间太少，窗口感觉狭窄、不舒服、令人生畏，如果它需要滚动和其他操作才能使用，则很难使用。

不正确：

在此示例中，窗口对于其内容而言太小。

虽然关键 UI 必须符合最低支持 的有效分辨率，但不要认为有效使用屏幕空间意味着窗口应尽可能小，不应如此。 有效的布局尊重开放空间，不会试图将所有内容挤进尽可能小的空间中。 新式显示器具有巨大的屏幕空间，在可能的情况下有效使用此空间是有意义的。 因此，使用太多屏幕空间而不是太少时会有一些问题。 这样做会使你的窗口感觉更轻、更平易近人。

你知道布局在以下情况下有效地使用屏幕空间：

• 无需调整窗口、窗口窗格和控件的大小就可以使用。 如果用户要做的第一件事是调整窗口、窗格或控件的大小，则其大小不正确。
• 不会截断数据。 列表视图和树视图中的大多数数据没有省略号，并且不会剪裁其他控件中的数据，除非数据长度异常大。 执行任务时必须读取的数据不应被截断。
• 窗口和控件的大小适当，以避免不必要的滚动。 水平滚动条很少，没有不必要的垂直滚动条。
• 控件主要使用其标准大小。 尽量减少控件大小的数量，例如，在一个图面上只使用一个或两个命令按钮宽度。
• UI 图面是平衡的。 没有较大的未使用屏幕区域。

选择大小刚好足以实现其用途的窗口大小。 (如果窗口可调整大小，则此目标适用于其默认大小。) 截断的数据或滚动条和大量可用屏幕空间的组合是布局无效的明显迹象。

控件大小调整

通常，有效使用屏幕空间的第一步是确定各种 UI 元素的正确大小。 请参阅 控件大小调整表 ，以及特定控件指南文章中建议的大小调整。

拟合法则指出，目标越小，用鼠标获取它所需的时间就越长。 此外，对于使用 Windows Tablet and Touch Technology 的计算机，“鼠标”实际上可能是笔或用户的手指，因此，在确定小型控件的大小时，应考虑其他输入设备。 对于任何输入设备，控件大小为 16x16 相对像素是很好的最小大小。 相比之下，标准 15x9 相对像素旋转控制按钮太小，无法由笔有效使用。

间距

提供慷慨的 (但不会过多) 空间，使布局感觉更舒适，更易于分析。 有效空间不是未使用的空间，它在提高用户扫描能力方面发挥着重要作用，还增加了设计的视觉吸引力。 有关指南，请参阅 “间距”表。

对于使用 Windows Tablet and Touch Technology 的计算机，“鼠标”实际上可能是笔或用户的手指。 使用笔或手指作为指针设备时，定位更加困难，导致用户点击目标外部。 当交互式控件放在一起非常接近但实际上没有触摸时，用户可能会单击控件之间的非活动空间。 由于单击非活动空间没有结果或视觉反馈，因此用户通常不确定出了什么问题。 如果小控件的间距太近，用户需要精确点击以避免点击错误的对象。 若要解决这些问题，交互式控件的目标区域应为接触区域，或者至少有 3 个 DLL， (5 个相对像素) 间距。

你知道布局在出现时间距良好：

• 总的来说，UI 表面感觉舒适，不会感到狭窄。
• 空间看起来统一且均衡。
• 相关元素紧密相连，不相关的元素相距相对较远。
• 应该组合在一起的控件之间没有死空间，例如工具栏按钮。

可调整大小的窗口

可调整大小的窗口也是有效使用屏幕空间的一个因素。 某些窗口包含固定内容，无法从可调整大小中受益，但具有可调整大小的内容的窗口应可调整大小。 当然，用户调整窗口大小的原因是利用额外的屏幕空间，因此内容应相应地扩展，为需要它的 UI 元素提供更多空间。 具有动态内容、文档、图像、列表和树的窗口从可调整大小的窗口中获益最大。

在此示例中，调整窗口大小会调整列表视图控件的大小。

也就是说，窗户可以伸得太宽。 例如，当内容宽度超过 600 个相对像素时，许多控制面板页面变得笨拙。 在这种情况下，最好不要将内容区域调整到超过此最大宽度，或者更改内容原点，因为窗口的大小会变大。 请改为保留最大宽度和固定的左上原点。

随着行长度的增加，文本变得难以阅读。 对于文本文档，请考虑最大行长 80 个字符，以使文本易于阅读。 (字符包括字母、标点和空格。)

不正确：

在此示例中，较长的文本长度使阅读变得困难。

最后，可调整大小的窗口还需要在变小时有效地使用屏幕空间，方法是使可调整大小的内容变小，并通过从 UI 元素中删除在没有屏幕的情况下有效工作的空间。 在某些时候，窗口或其 UI 元素变得太小而无法使用，因此应为其分配最小大小，或者应完全删除某些元素。

在此示例中，窗格具有最小大小。

某些程序受益于使用完全不同的演示文稿，使内容在更小的大小下可用。

在此示例中，Windows 媒体播放器当窗口变得太小而无法采用标准格式时更改其格式。

焦点

当有一个明显的位置可以先看时，布局具有焦点。 焦点对于向用户显示开始扫描窗口或页面的位置非常重要。 如果没有明确的焦点，用户的眼睛将漫无目的地徘徊。 焦点应该是用户需要快速查找和理解的重要内容，并且应具有最大的视觉重点。 左上角是大多数窗户的自然焦点。

应只有一个焦点。 就像在现实生活中一样，眼睛一次只能专注于一件事，用户不能同时关注多个地方。

若要使 UI 元素成为焦点，可以通过以下方法对它进行视觉强调：

• 将其放置在图面的左上角或中上部分。
• 使用重要且易于理解的交互式控件。
• 使用突出显示文本，例如main指令。
• 为控件提供默认选择和初始输入焦点。
• 将控件置于不同的彩色背景中。

考虑 Windows 搜索。 Windows 搜索的焦点应该是“搜索”框，因为它是任务的起点。 但是，它位于右上角，以便与标准搜索框放置保持一致。 “搜索”框具有输入焦点，但鉴于它在扫描路径中的位置，仅靠该线索是不够的。

为了解决此问题，窗口的上半部分有一条突出的指令，用于将用户定向到正确的位置。

可以接受：

在此示例中，窗口上半部分的突出指令将用户定向到“搜索”框。

如果没有这些说明，窗口就不会有明显的焦点。

不正确：

此示例没有明显的焦点。 用户不知道该在哪里查找。

如果对 UI 元素进行视觉强调，请确保需要注意。 在上一个不正确的 Windows 搜索示例中，突出显示的“全部”按钮位于左上角，具有最直观的重点，但它不是预期的焦点。 用户可能会停滞不前地查看此按钮，试图找出该如何处理它。

不正确：

如果没有突出的指令作为焦点，突出显示的“全部”按钮是意外的焦点。

流向

当用户通过一条清晰的路径顺利自然地引导到其表面，按适合其使用的顺序查找 UI 元素时，布局将流动。 用户确定焦点后，需要确定如何完成任务。 UI 元素的位置传达了它们的关系，应该镜像执行任务的步骤。 通常，这意味着任务的步骤应该以从左到右、从上到下的顺序自然流动， (西方文化) 。

你知道布局在出现时流良好：

• UI 元素的位置反映了用户执行任务所需的步骤。
• 启动任务的 UI 元素位于左上角或左上角。
• 完成任务的 UI 元素位于右下角。
• 相关的 UI 元素在一起;不相关的元素是分开的。
• 所需的步骤在main流中。
• 可选步骤不在main流之外，可能通过使用合适的背景或渐进式披露来取消强调。
• 常用元素显示在扫描路径中不常用的元素之前。
• 用户始终知道下一步该怎么做。 任务流中没有意外的跳转或中断。

不正确：

在此示例中，用户不知道接下来该怎么做。 任务流中存在意外的跳跃和中断。

正确：

在此示例中，UI 元素的呈现反映了执行任务的步骤。

分组

当逻辑相关的 UI 元素具有清晰的视觉关系时，布局具有分组。 组非常重要，因为用户比单个项更容易理解和关注一组相关项。 组使布局看起来更简单，更易于分析。

可以通过以下方式显示分组， (增加重度) ：

• 布局。 可以将相关控件分组在一起，并在不相关的控件之间添加额外的间距。

  

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

• 分隔符。 分隔符是统一一组控件的水平或垂直线条。 分隔符提供更简单、更简洁的外观。 但是，与分组框不同，当它们跨越整个表面时，它们效果最佳。

  

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

• 聚合器。 聚合器是在强相关控件之间创建视觉关系的图形。

  

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

• 分组框。 组框是一个带有标签的矩形框架，它包围着一组相关控件。

  

  在此示例中，一个组框包围并标记一组相关控件。

• 背景。 可以使用背景来强调或取消强调不同类型的内容。

  

  在此示例中，控制面板任务窗格用于对相关任务和控制面板项进行分组。

  为了避免视觉混乱，最好选择最轻量、能很好地完成工作的分组。 有关详细信息，请参阅 分组框、 选项卡、 分隔符和背景。

无论分组样式如何，都可以使用缩进来显示组中控件的关系。 相互对等的控件应左对齐，相关控件缩进 12 个 DLL 或 18 个相对像素。

依赖控件是缩进的 12 DLUS 或 18 个相对像素，根据设计，这是检查框和单选按钮与其标签之间的距离。

你知道在出现时，布局具有很好的分组：

• 窗口或页面最多包含 7 个组。
• 每个组的目的显而易见。
• 每个组中控件的关系是显而易见的，尤其是控件依赖项。
• 分组可简化内容，而不是使其更加复杂。

对齐方式

对齐是 UI 元素的协调放置。 对齐非常重要，因为它使内容更易于扫描，并影响用户对视觉复杂性的看法。

确定对齐方式时，需要考虑几个目标：

• 轻松进行水平扫描。 用户可以水平阅读并查找相邻的相关项，没有任何尴尬的间隙。
• 简化垂直扫描。 用户可以扫描相关项目的列，并立即找到他们要查找的内容，只需最少的水平眼睛移动。
• 将视觉复杂性降到最低。 如果布局具有不必要的垂直对齐网格线，则用户会认为布局在视觉上很复杂。

水平对齐

左对齐

由于从左到右的阅读顺序，左对齐适用于大多数内容。 左对齐使列式数据易于垂直扫描。

右对齐

右对齐是数值数据的最佳选择，尤其是 数值数据的列。 右对齐也适用于 提交按钮 以及与右窗口边缘对齐的控件。

在此示例中，高级搜索渐进式披露控件是右对齐的，因为它位于右侧窗口边缘。

居中对齐

对于左对齐或右对齐不合适或看起来不平衡的情况，最好保留居中对齐。

在此示例中，媒体播放器控件居中以提供均衡的外观。

不要仅仅为了填充空间而居中显示窗口内容。

不正确：

在此示例中，内容在可调整大小的窗口中不正确地居中以填充空间。

垂直对齐

元素顶部

由于从上到下阅读顺序，顶部对齐方式适用于大多数内容。 顶部对齐使 UI 元素易于水平扫描。

文本基线

将控件与文本垂直对齐时，对齐文本基线以提供平滑的水平阅读流。

正确：

不正确：

在正确的示例中，控件及其标签按其文本基线垂直对齐。

你知道在出现时布局对齐方式良好：

• 水平和垂直扫描都很容易。
• 它具有简单的视觉外观。

标签对齐方式

一般对齐规则适用于控件标签，但这是一个值得特别注意的常见问题。 标签对齐具有以下目标：

• 轻松进行垂直扫描以查找正确的控件。
• 轻松进行水平扫描，将标签与其控件相关联。
• 轻松进行本地化，处理不同语言长度不同的标签。
• 适用于不同标签长度的混合。
• 有效利用可用空间，同时避免截断文本。

总体目标是减少查找用户可能查找的内容所需的眼动量，但控件的性质和用户要查找的内容取决于上下文。

有四种常见的标签放置和对齐样式，每种样式都有其优点：

• 控件上方的左对齐标签
• 控件左侧的左对齐标签
• 控件左侧的左对齐标签，左侧的控件不规则
• 控件左侧的右对齐标签

控件上方的左对齐标签

此样式是最容易本地化的，因为布局不依赖于标签的长度，但它占用的垂直空间最多。

此样式占用的垂直空间最多，但最容易本地化。 对于标记主要是交互式控件而言，这是一个更好的选择。

最好在以下情况下使用：

• 标记的控件是交互式 (而不仅仅是文本) 。
• UI 将被本地化。 这种风格通常为标签的长度提供两倍甚至三倍的空间。
• UI 使用固定布局技术 (，例如 Win32) 。
• 有十个或更少的控件。 使用更多控件时，标签很难扫描。
• 有足够的垂直空间来容纳标签。
• 布局必须是自由形式，而不仅仅是列。

控件左侧的左对齐标签

此样式最容易垂直扫描，当标签长度大不相同时，它也非常有效，但更难将标签与其控件关联。 如有必要，此样式可以使用多行标签。

此样式效果很好。 但是，有两列，但从视觉上看，似乎有四列使数据看起来更复杂。

最好在以下情况下使用：

• 用户可能会垂直扫描以查找特定标签。
• 用户不太可能以从左到右、从上到下的方式读取标签和控件。
• 有足够的水平空间来容纳标签。
• 标签的长度差异很大。
• 有许多控件，例如与窗体。
• 有几个列。 标签和控件在视觉上显示为两个单独的列。

控件左侧的左对齐标签，左侧的控件不规则

这种样式使垂直扫描标签和标签和控件变得容易，并且空间非常高效：但垂直扫描控件更难。 控件是右对齐的，以充分利用可用空间。

此样式紧凑且易于阅读，但很难垂直扫描控件。

最好在以下情况下使用：

• UI 使用可变布局技术 (，例如Windows Presentation Foundation) 。
• 用户可能会垂直扫描以查找特定标签。
• 用户可能以从左到右、从上到下的方式读取标签和控件。
• 用户不太可能垂直扫描控件。
• 控件文本的长度各不相同，如果使用其他样式，可能会截断。
• 控件是只读的，例如只读文本框。 对于其他控件，这种对齐方式看起来草率。 但是，控件可能会在单击时变为可编辑。
• 列中有许多列，但控件很少。

控件左侧的右对齐标签

此样式最容易水平阅读以将标签与其控件关联，但垂直扫描标签很难，并且当带有缩进标签和控件的 labelsList 长度大不相同时，效果不佳。

此样式允许轻松垂直扫描控件，但很难垂直扫描标签。

最适合在以下情况下使用：

• 用户可能会以从左到右、从上到下的方式读取标签和控件。
• 用户不太可能垂直扫描以查找特定标签，原因可能是：
  • 控件很少。
  • 标签是众所周知的。
  • 控件大多是自我解释性的，很少为空白， (可能具有默认值以防止空白控件) 。
• 有足够的水平空间来容纳标签。
• 标签的长度差异不大。
• 有许多列。 标签和控件在视觉上显示为单个列。

但是，在采用上述任何样式之前，请考虑另外两个因素：

• 首选可在程序中一致使用的样式。
• 左侧控件上方的左对齐标签是最常见的样式，因此应优先使用它们。

Balance

当窗口或页面的内容均匀分布在其图面上时，该窗口或页面具有平衡。 如果表面在物理上具有与视觉上相同的权重，则平衡布局不会倾倒到一侧。

最常见的平衡问题是窗口或页面左侧的内容过多。 可通过以下方式创建余额：

• 在左侧使用比右侧更大的边距。
• 将用于完成任务的 UI 元素放在右侧。
• 将整个任务中使用的 UI 元素置于中心。
• 延长可调整大小的控件或多行控件。
• 战略性地使用中心对齐。

这种平衡良好的向导页面布局显示比右边距更大的左边距，以改善平衡。

如果这些技术无法实现平衡，请考虑减小窗口或页面的宽度，以更好地匹配其内容。

对于可调整大小的图面，不要仅仅为了平衡而将内容居中。 相反，保持固定的左上角原点，定义最大外围应用，并平衡所用空间内的内容。

网格

网格是一个不可见的基础对齐系统。 网格可以是对称的，但非对称网格同样工作。 当由单个窗口或页面使用时，网格有助于组织图面中的内容。 重复使用时，网格会跨图面创建一致的布局。

网格线的数量会影响视觉复杂性的感知。 与网格线较多的布局相比，网格线较少的布局看起来更简单。

视觉复杂：

在视觉上很简单：

不必要的网格线会产生视觉复杂性。

你知道布局在出现如下情况时会有效地使用网格：

• 具有类似内容或功能的 Windows 或页面具有类似的布局。
• 重复的设计元素显示在跨窗口和页面的相似位置。
• 没有不必要的垂直和水平对齐网格线。

视觉简单性

视觉简单性是认为布局并不比所需复杂。

你知道布局在视觉上简单，因为它：

• 消除不必要的窗口部件层。
• 使用最多七个易于识别的组来呈现内容。
• 使用轻型分组，例如布局和分隔符，而不是分组框。
• 使用轻量级控件，例如辅助命令使用链接而不是命令按钮，以及下拉列表而不是选项列表。
• 减少垂直和水平对齐网格线的数目。
• 减少控件大小的数量，例如，在图面上仅使用一个或两个命令按钮宽度。
• 使用渐进式公开来隐藏 UI 元素，直到需要它们。
• 使用足够的空间，使窗口或页面不会感到狭窄。
• 适当调整窗口和控件的大小，以消除不必要的滚动。
• 使用具有少量大小和文本颜色的单一字体。

一般情况下，如果可以在不损害 UI 有效性的情况下消除布局元素，则应该消除布局元素。

准则

屏幕分辨率和 dpi

• 支持 800x600 像素的最小 Windows 有效分辨率。 对于必须在安全模式下工作的关键 UI，支持 640x480 像素的有效分辨率。 请务必通过为随任务栏显示的窗口保留 48 个垂直 相对像素 来考虑任务栏使用的空间。
• 优化可调整大小的窗口布局，实现 1024x768 像素的有效分辨率。 以仍然正常运行的方式自动调整这些窗口的大小，以降低屏幕分辨率。
• 请确保以每英寸 96 点 (dpi) (以 800x600 像素) 、120 dpi (、1024x768 像素（) ）和 144 dpi (（1200x900 像素）) 模式测试窗口。 检查布局问题，例如控件、文本和窗口的剪辑以及图标和位图的拉伸。
• 对于具有触摸和移动使用方案的程序，请针对 120 dpi 进行优化。 高 dpi 屏幕目前在触摸和移动电脑上很普遍。

窗口大小

• 选择适合其内容的默认窗口大小。 如果能有效地使用空间，请不要害怕使用更大的初始窗口大小。
• 使用平衡的高度与宽度纵横比。 纵横比介于 3：5 和 5：3 之间是首选，但纵横比为 1：3 可用于消息对话框 (，例如) 错误和警告。
• 尽可能使用可调整大小的窗口，以避免滚动条和截断数据。 具有动态内容、文档、图像、列表和树的窗口从可调整大小的窗口中获益最大。
• 对于文本文档，请考虑最大行长度为 80 个字符 ，以使文本易于阅读。 (字符包括字母、标点符号和空格)
• 固定大小的窗口：
  • 固定大小的窗口必须完全可见，并调整大小以适应工作区。
• 可调整大小的窗口：

  • 可调整大小的窗口可以针对更高的分辨率进行优化，但在显示时根据需要缩小到实际屏幕分辨率。

  • 逐渐增大的窗口大小必须逐渐显示更多信息。 确保至少有一个窗口部分或控件具有可调整大小的内容。

  • 调整窗口大小时，使内容的左上角原点保持固定。 不要在窗口大小更改时移动源以平衡内容。

  • 如果内容拉伸过宽，请设置最大内容大小。 如果内容变得笨拙，请不要调整内容区域的大小超出其最大宽度，或更改内容原点，因为窗口会变大。 请改为保留最大宽度和固定的左上原点。

  • 如果低于该大小的内容不再可用，请设置最小窗口大小。 对于可调整大小的控件，请将最小可调整大小的元素大小设置为其最小功能大小，例如列表视图中的最小功能列宽度。 应完全删除可选 UI 元素。

  • 请考虑更改演示文稿，使内容在较小的大小下可用。

    

    在此示例中，当窗口对于标准格式来说太小时，Windows 媒体播放器更改其格式。

控件大小

• 将所有交互式控件设置为至少相对 16x16 像素。 这样做适用于所有输入设备，包括Windows Tablet and Touch Technology。

• 用于避免截断数据的大小控制。 不要截断必须读取才能执行任务的数据。 调整列表视图列的大小，以避免截断数据。

• 用于消除不必要的滚动的大小控件。 如果这样做会消除滚动条，则使控件稍大一些。 应该有少量的垂直滚动条，并且没有不必要的水平滚动条。

  

  在此示例中，调整下拉列表的大小以消除滚动条。

• 减少图面上的控件大小数。 首选使用 标准建议的控件大小 ，并在必要时使用一些大小一致的更大或更小的控件。 尝试对列表框和树视图使用单个宽度，命令按钮和下拉列表的宽度不超过三个。 但是，文本框和组合框宽度应建议其最长或预期输入的长度。

  

  在此示例中，一致地使用一个列表框和命令按钮大小。

• 对于基于其文本调整大小的控件，对于要本地化的任何文本，请额外包含 30% (最多 200% 的短文本) 。 此准则假定布局是使用英语文本设计的。 另请注意，此准则指的是本地化文本，而不是数字。

• 将静态文本控件、检查框和单选按钮扩展到适合布局的最大宽度。 这样做可避免从可变长度文本和本地化中截断。

  不正确：

  

  在此示例中，不必要地截断了控件文本。

控件间距

• 如果控件不接触，则至少有 3 个 DLL， (5 个相对像素) 间距。 否则，用户可以单击控件之间的非活动空间。 由于单击非活动空间没有结果或视觉反馈，因此用户通常不确定出了什么问题。

定位

• 排列图面中的 UI 元素，以从左到右、从上到下的顺序自然流动， (西方文化) 。 UI 元素的位置传达其关系，应镜像执行任务的步骤。
• 将启动任务的 UI 元素置于左上角或中心。 为用户首先应查看的 UI 元素提供最大的视觉重点。
• 将完成任务的 UI 元素放在右下角。
• 将相关的 UI 元素放在一起，并分隔不相关的元素。
• 在main流中放置所需的步骤。
• 将可选步骤放置在main流之外，可能通过使用合适的背景或渐进式披露来取消强调。
• 将常用元素放在扫描路径中不常用的元素之前 。

焦点

• 选择用户首先需要查看的单个 UI 元素作为焦点。 焦点应该是用户需要快速查找和理解的重要内容。
• 将焦点置于左上角或中心。
• 为焦点提供最大的视觉重点， 例如突出显示的文本、默认选择或初始输入焦点。

对齐方式

• 通常，使用左对齐方式。
• 对数值数据使用正确的对齐方式，尤其是数值数据的列。
• 对提交按钮以及与右窗口边缘对齐的控件使用右对齐方式。
• 当左对齐或右对齐不合适或显示为不均衡时，请使用居中对齐方式。
• 当控件与文本垂直对齐时，对齐文本基线以提供平滑的水平阅读流。
• 有关标签对齐，请参阅设计概念中的 标签对齐 方式部分。

可访问性

• 不要使用布局作为传达有关 UI 的重要信息的唯一方法。 有视觉障碍的用户可能无法解释此演示文稿。 例如，确保控件标签将其关系传达给其他项。

• 不要在控件标签中嵌入从属控件来创建句子或短语。 此类关联完全基于布局，键盘导航或辅助功能辅助技术无法很好地处理。 此外，此技术不可本地化，因为句子结构因语言而异。

  不正确：

  

  在此示例中，文本框错误地放置在检查框标签中。

  正确：

  

  此处，文本框放置在检查框标签之后。

• 使分组易于访问。 由窗口窗格、分组框、分隔符、文本标签和聚合器定义的组由辅助功能辅助功能自动处理。 但是，仅由位置和背景定义的组不是，必须以编程方式定义组才能实现辅助功能。

有关更多指南，请参阅 辅助功能。

建议的大小和间距

控件大小调整

下表列出了建议的大小 (宽度 x 高度，或者如果单个数字) 常见 UI 元素 (为 9 磅，则为高度。96 dpi) 的 Segoe UI。 基于最长英语项的宽度为本地化添加 30%， (最多 200% 的简短文本) 任何文本 (，而不是将本地化的数字) 。

示例	控制	对话框单位	相对像素
	复选框	10	17
	组合框	最长项目宽度 + 30% x 14	最长项目宽度 + 30% x 23
	命令按钮	50 x 14	75 x 23
	命令链接	25 (一行) 或 35 (两行)	41 (一行) 或 58 (两行)
	下拉列表	最长有效数据的宽度 + 30% x 14	最长项目宽度 + 30% x 23
	列表框	最长项的宽度 + 30% x 项的整数数 (3 个项目的最小)
	列表视图	避免截断数据的列宽度 x 整型项数
	进度栏	107 或 237 x 8	160 或 355 x 15
	单选按钮	10	17
	滑块	15	24
	文本 (静态)	8	13
	文本框	最长或预期输入的宽度 + 30% x 14 (一行) + 10（对于每个附加行）	最长有效数据的宽度 + 30% x 23 相对像素 (一行) + 16（每多行）
	树视图	最长项的宽度 + 30% x 项的整数数 (5 个项目的最小)

间距

下表列出了常见 UI 元素之间建议的间距， (为 9 pt。96 dpi) 的 Segoe UI。

	元素	对话框单位	相对像素
	对话框边距	7 在所有方面	11 在四面八方
	在文本标签及其关联的控件之间 (例如，文本框和列表框)	3	5
	相关控件之间	4	7
	在不相关的控件之间	7	11
	分组框中的第一个控件	11 从分组框顶部向下;垂直对齐分组框标题	16 从分组框顶部向下;垂直对齐分组框标题
	在分组框中的控件之间	4	7
	在水平或垂直排列的按钮之间	4	7
	分组框中的最后一个控件	组框底部上方的 7	组框底部上方 11
	从组框的左边缘	6	9
	控件旁边的文本标签	3 从控件顶部向下	从控件顶部向下 5
	文本段落之间	7	11
	交互式控件之间的最小空间	3 或无空格	5 或无空格
	非交互式控件与任何其他控件之间的最小空间	2	3