布局
注意
此设计指南是为 Windows 7 创建的，尚未针对较新版本的 Windows 进行更新。 大部分指导原则上仍然适用，但演示和示例并不反映我们 当前设计指南。
布局是窗口或页面中内容的大小调整、间距和位置。 有效的布局对于帮助用户快速查找内容以及使外观更具吸引力至关重要。 有效的布局可以在用户立即理解的设计和使用户感到困惑和不知所措的设计之间产生差异。
注意： 与 窗口管理 相关的准则在单独的文章中提供。 建议的特定控件大小和间距显示在各自的指南文章中。
设计概念
视觉对象层次结构
当窗口或页面的外观指示其元素的关系和优先级时，窗口或页面具有清晰的视觉层次结构。 如果没有视觉层次结构，用户必须自行找出这些关系和优先级。
视觉层次结构是通过巧妙地组合以下属性来实现的：
- 重点。 布局指示用户首先需要查找的位置。
- 流。 眼睛通过表面的清晰路径流畅自然地流动，按适合其使用的顺序查找用户界面（UI）元素。
- 分组。 逻辑相关的 UI 元素具有清晰的视觉关系。 相关项组合在一起;不相关的项是独立的。
- 强调。 UI 元素根据其相对重要性强调。
- 对准。 UI 元素具有协调放置，因此它们易于扫描并有序显示。
此外，有效的布局具有以下属性：
- 设备独立性。 无论字体字样或字号、每英寸点数（dpi）、显示器或图形适配器，布局都按预期显示。
- 易于扫描。 用户可以一目了然地找到要查找的内容。
- 效率。 大型的 UI 元素需要很大，而小型的元素则非常小。
- 可调整大小。 如果有用，窗口的大小可调整，并且其内容布局无论图面有多大或小，其内容布局都有效。
- 平衡。 内容显示在图面上均匀分布。
- 视觉简单性。 布局并不比需要复杂。 用户不会因为布局的外观而感到不知所措。
- 一致性。 类似的窗口或页面使用类似的布局，因此用户总是感觉面向。
虽然大小、间距和放置是简单的概念，但布局的挑战是实现这些属性的正确混合。
在 Windows 中，布局是使用与设备无关的指标（如对话单元（DLU）和相对像素进行通信的。
用于读取的设计模型
用户选择内容的外观和组织所阅读的内容。 若要创建有效的布局，需要了解用户倾向于阅读的内容以及原因。
可以使用此设计模型进行布局决策，以便阅读：
人们从左到右、从上到下的顺序阅读（在西方文化中）。
有两种阅读模式：沉浸式阅读和扫描。 沉浸式阅读的目标是理解。
图
此图为沉浸式阅读建模。
相比之下，扫描的目标是查找内容。 总体扫描路径如下所示：
图
此关系图模型扫描。
如果页面左边缘有文本运行，则用户首先扫描左边缘。
使用软件时，用户不会沉浸于 UI 本身，而是沉浸于其工作中。 因此，用户通常不会读取扫描它的 UI 文本。 然后，只有当他们相信他们需要时，他们才能全面阅读文本。
用户倾向于跳过页面左侧或右侧的导航窗格。 用户会识别到他们在那里，但仅在他们想要导航时查看导航窗格。
用户倾向于跳过大量未格式化文本，而无需阅读它们。
显示扫描文本图
用户在扫描时倾向于跳过大量文本和导航窗格。
所有内容都相等，用户首先在窗口的左上角进行查看，扫描整个页面，并在右下角结束扫描。 他们倾向于忽略左下角。
所有内容都相等，用户将按以下顺序读取这些数字：1、2、4 和 3。
但在交互式 UI 中，并非所有内容都相等，因此不同的 UI 元素接收不同级别的关注。 用户倾向于先查看交互式控件，尤其是窗口左上角和中心以及突出文本的控件。
屏幕的 
用户专注于主要交互式控件和突出的主要说明，并仅在需要时查看其他内容。
- 用户倾向于阅读交互式控件标签，尤其是与完成手头任务相关的控件标签。 相比之下，只有当用户认为他们需要时，用户才会阅读静态文本。
- 出现不同吸引注意力的项目。 粗体文本和大文本从普通文本中脱颖而出。 具有颜色或彩色背景的 UI 项脱颖而出。带有图标的项目从没有图标的项目中脱颖而出。
- 除非用户有理由滚动，否则不会滚动。 如果折叠上方的内容 不提供滚动的理由，则它们不会。
- 一旦用户决定该做什么，他们就会立即停止扫描并执行此作。
- 由于用户在认为已完成时停止扫描，因此他们倾向于忽略任何看似完成点以外的任何内容。
屏幕截图
用户在认为已完成时停止扫描。
当然，此常规模型将存在例外情况。 眼动跟踪设备表示真实用户的行为相当不稳定。 此模型的目标是帮助你做出良好的决策和权衡，而不是准确地为用户行为建模。 但是，正如你阅读过此列表一样，希望你也能够识别出自己的许多阅读模式。
设计扫描
用户不会阅读，它们会进行扫描，因此你应该设计用于扫描的 UI 图面。 不要假定用户将按从左到右、从上到下的顺序读取文本，而是查看吸引注意力的 UI 元素。
若要设计扫描，请执行：
- 假设用户首先快速扫描整个窗口，然后大致按以下顺序读取 UI 元素：
- 中心内的交互式控件
- 提交按钮
- 在其他地方找到的交互式控件
- 主要说明
- 补充说明
- 显示警告图标的文本
- 窗口标题
- 正文中的其他静态文本
- 脚注
- 将启动任务的 UI 元素置于左上角或左上角。
- 将完成任务的 UI 元素置于右下角。
- 尽可能将关键文本放在交互式控件而不是静态文本上。
- 避免将重要信息放在左下角或长滚动控件或页面底部。
- 不要显示大文本块。 消除不必要的文本。 使用 反棱锥图 呈现样式。
- 如果你做点什么来吸引用户的注意，请确保需要注意。
尽可能处理此模型，而不是与之抗争;但有时需要强调或取消强调特定的 UI 元素。
若要强调主要 UI 元素，请执行以下作：
将主要 UI 元素置于 扫描路径中。
放置任何 UI 以在左上角或左上角启动任务。
将提交按钮置于右下角。
将剩余的主要 UI 置于中心。
使用吸引注意力的控件，例如命令按钮、命令链接和图标。
使用突出文本，包括大文本和粗体文本。
将文本用户置于交互式控件或带有图标或 横幅上读取。
在浅色背景上使用深色文本。
用慷慨的空间包围元素。
不需要任何交互（如指向或悬停），以查看要强调的元素。
屏幕截图
此示例演示了许多强调主要 UI 元素的方法。
若要取消强调辅助 UI 元素，请执行以下作：
将辅助 UI 元素置于扫描路径之外。
放置任何用户通常不需要在窗口左下角或底部看到的内容。
使用不引起注意的控件，例如任务链接而不是命令按钮。
使用普通文本或灰色文本。
在深色背景上使用浅色文本。 深灰色或蓝色背景上的白色文本效果良好。
用最少的空间包围元素。
请考虑使用 渐进式披露 来隐藏辅助 UI 元素。
大界面元素和小型界面元素的屏幕截图
此示例演示了许多取消强调辅助 UI 元素的方法。
有效使用屏幕空间
有效地使用屏幕空间需要平衡几个因素：使用太多的空间和窗口感觉沉重和浪费，甚至很难使用基于 菲特的法律。
不正确：
在此示例中，窗口太大，无法显示其内容。
另一方面，使用空间太少，窗口感觉狭窄、不舒服和恐吓，如果它需要滚动和其他作才能使用，则很难使用。
不正确：
控件过多
在此示例中，窗口对于其内容来说太小。
虽然关键 UI 必须适应最低支持 有效分辨率，但不要假定使用屏幕空间实际上意味着窗口应尽可能小，不应如此。 有效的布局尊重开放空间，并且不会试图将一切内容塞进尽可能小的空间中。 新式显示器具有重要的屏幕空间，在可以时有效使用此空间是有意义的。 因此，使用过多的屏幕空间而不是太少。 这样做会使你的窗口感觉更轻，更易接近。
你知道布局在：
- Windows、窗口窗格和控件不必调整大小才能使用。 如果用户做的第一件事是调整窗口、窗格或控件的大小，则其大小是错误的。
- 数据不会被截断。 列表视图和树视图中的大多数数据没有省略号，其他控件中的数据不会剪裁，除非数据长度异常大。 必须读取才能执行任务的数据不应被截断。
- 窗口和控件的大小适当，以消除不必要的滚动。 水平滚动条很少，没有不必要的垂直滚动条。
- 控件大多使用其标准大小。 例如，尽量减少控件大小的数量，例如，在图面上只使用一两个命令按钮宽度。
- UI 图面是平衡的。 没有大型未使用的屏幕区域。
选择足够大的窗口大小，以很好地满足其目的。 （如果窗口可调整大小，则此目标适用于其默认大小。截断的数据或滚动条和大量可用屏幕空间的组合是无效布局的明显迹象。
控制大小调整
通常，有效使用屏幕空间的第一步是确定各种 UI 元素的正确大小。 请参阅 控件大小调整表 以及特定控件指南文章中建议的大小调整。
拟合法指出，目标越小，用鼠标获取目标所需的时间就越长。 此外，对于使用 Windows 平板电脑和触摸技术的计算机，“鼠标”实际上可能是笔或用户的手指，因此在确定小控件的大小时，应考虑备用输入设备。 16x16 相对像素的控件大小对于任何输入设备来说都是一个很好的最小大小。 相比之下，标准 15x9 相对像素旋转控件按钮太小，无法由笔有效使用。
间距
提供慷慨（但不过度）的空间使布局感觉更舒适，更易于分析。 有效空间不是未使用的空间，它在提高用户扫描能力方面起着重要作用，还增加了设计视觉吸引力。 有关指南，请参阅 间距表。
对于使用 Windows 平板电脑和触摸技术的计算机，“鼠标”实际上可能是笔或用户的手指。 使用笔或手指作为指向设备时，目标更困难，导致用户在目标外部点击。 当交互式控件放置在非常接近但实际上并不触摸时，用户可以单击控件之间的非活动空间。 由于单击非活动空间没有结果或视觉反馈，因此用户通常不确定出了什么问题。 如果小控件太接近间距，用户需要精确点击，以避免点击错误的对象。 若要解决这些问题，交互式控件的目标区域应触摸或至少具有 3 个 DLL（5 个相对像素）的空间。
你知道布局在具有以下情况下具有良好的间距：
- 总的来说，UI 表面感觉舒适，感觉不拥挤。
- 空间显示为统一和平衡。
- 相关元素紧密相连，不相关的元素相对相距较远。
- 控件之间没有一起的死空间，例如工具栏按钮。
可调整大小的窗口
可调整大小的窗口也是有效使用屏幕空间的一个因素。 某些窗口由固定内容组成，不能受益于可调整大小，但具有可调整大小的内容的窗口应可调整大小。 当然，用户调整窗口大小的原因是采用其他屏幕空间的高级，因此内容应相应地扩展，方法是为需要它的 UI 元素提供更多空间。 具有动态内容、文档、图像、列表和树的 Windows 受益于可调整大小的窗口。
在此示例中，调整窗口的大小调整列表视图控件的大小。
也就是说，窗户可以伸展得太宽。 例如，当内容大于 600 相对像素时，许多控制面板页面变得不笨拙。 在这种情况下，最好不要调整超出此最大宽度的内容区域的大小，或更改内容的原点，因为窗口的大小越大。 相反，请保留最大宽度和固定的左上角原点。
随着行长的增加，文本变得难以阅读。 对于文本文档，请考虑最大行长 80 个字符，以使文本易于阅读。 （字符包括字母、标点符号和空格。
不正确：
带有长文本屏幕截图
在此示例中，长文本长度使得难以阅读。
最后，可调整大小的窗口还需要在缩小屏幕空间时有效地使用屏幕空间，方法是缩小可调整大小的内容，并从 UI 元素中删除空间，这些元素可以在没有屏幕的情况下有效工作。 在某些时候，窗口或其 UI 元素变得太小，无法使用，因此应为其分配最小大小，或者应完全删除某些元素。
具有高、侵入性功能区屏幕截图
没有功能区屏幕截图
在此示例中，窗格的大小最小。
某些程序受益于使用完全不同的演示文稿，使内容以较小的大小使用。
居中媒体播放器按钮的屏幕截图
在此示例中，当窗口对于标准格式而言太小时，Windows Media Player 会更改其格式。
重点
当有一个明显的外观位置时，布局具有焦点。 焦点对于向用户显示开始扫描窗口或页面的位置非常重要。 没有明确的焦点，用户的眼睛将无目的地徘徊。 焦点应该是用户需要快速查找和理解的重要内容，并且应具有最大的视觉重点。 左上角是大多数窗口的自然焦点。
应该只有一个焦点。 就像在现实生活中一样，眼睛一次只能专注于一件事，用户不能同时关注多个地方。
若要使 UI 元素成为焦点，可以通过以下方法将其可视化强调：
- 将其放置在表面的左上角或上中心部分。
- 使用重要且易于理解的交互式控件。
- 使用突出文本，例如主指令。
- 为控件提供默认选择和初始输入焦点。
- 将控件置于不同的彩色背景中。
考虑 Windows 搜索。 Windows 搜索的焦点应该是“搜索”框，因为它是任务的起点。 但是，它位于右上角，与标准搜索框位置保持一致。 搜索框具有输入焦点，但鉴于它在扫描路径中的位置，仅该线索就不够了。
若要解决此问题，窗口的上中心部分有突出说明，用于将用户定向到正确的位置。
可接受：
包含有用文本屏幕截图
在此示例中，窗口上中心部分的一个突出说明将用户定向到搜索框。
如果没有说明，窗口就不会有明显的焦点。
不正确：
没有文本屏幕截图
此示例没有明显的焦点。 用户不知道在何处查找。
如果给予 UI 元素视觉强调，请确保需要注意。 在前面的不正确的 Windows 搜索示例中，突出显示的“所有”按钮位于左上角，具有最直观的强调，但它不是预期的焦点。 用户可能会停滞不前地查看此按钮，试图找出该按钮的用途。
不正确：
突出显示的所有按钮屏幕截图
如果没有作为焦点的突出指令，突出显示的“所有”按钮是一个无意的焦点。
流
当用户通过图面的清晰路径顺利自然地引导时，布局会流动，并按适合其使用的顺序查找 UI 元素。 用户确定焦点后，需要确定如何完成任务。 UI 元素的位置传达其关系，应反映执行任务的步骤。 通常，这意味着任务的步骤应该自然地以从左到右、从上到下的顺序（在西方文化中）流动。
你知道布局在以下情况下具有良好的流：
- UI 元素的位置反映了用户执行任务所需的步骤。
- 启动任务的 UI 元素位于左上角或左上角。
- 完成任务的 UI 元素位于右下角。
- 相关的 UI 元素在一起;不相关的元素是独立的。
- 主流中需要执行的步骤。
- 可选步骤不在主流之外，可能通过使用合适的背景或渐进式披露来取消强调。
- 常用元素出现在扫描路径中不经常使用的元素之前。
- 用户始终知道接下来要做什么。 任务流中没有意外的跳跃或中断。
不正确：
在此示例中，用户不知道接下来要做什么。 任务流中有意外的跳跃和中断。
正确：
在此示例中，UI 元素的呈现反映了执行任务的步骤。
分组
当逻辑相关的 UI 元素具有清晰的视觉关系时，布局具有分组。 组很重要，因为用户比单独了解和专注于一组相关项目更容易。 组使布局看起来更简单，更易于分析。
可以按以下方式显示分组（在增加严重性）：
布局。 可以彼此对相关控件进行分组，并在不相关的控件之间放置额外的间距。
显示四组任务图
在此示例中，单独使用布局来显示控件关系。
分隔符。 分隔符是一条水平线或垂直线，它统一了一组控件。 分隔符提供更简单、更简洁的外观。 但是，与分组框不同，它们跨整个图面时效果最佳。
在此示例中，标记的分隔符用于显示控件关系。
聚合器。 聚合器是一个图形，用于在强相关控件之间创建视觉关系。
内控件的屏幕截图在此示例中，边界聚合器用于强调控件之间的关系，并使它们感觉为单个控件而不是 8。
分组框。 分组框是一个标记的矩形框架，它环绕着一组相关控件。
矩形边框中复选框的
在此示例中，分组框环绕并标记一组相关控件。
背景。 可以使用背景来强调或取消强调不同类型的内容。
控制面板左侧的
在此示例中，控制面板任务窗格用于对相关任务和控制面板项进行分组。
无论分组样式如何，都可以使用缩进来显示组中控件的关系。 彼此对等的控件应保持左对齐，依赖控件缩进 12 个 DLL 或 18 个相对像素。
从属控件缩进 12 个 DLUS 或 18 个相对像素，按照设计，它是复选框和单选按钮与其标签之间的距离。
你知道布局在具有以下情况下具有很好的分组：
- 窗口或页面最多包含 7 个组。
- 每个组的用途是显而易见的。
- 每个组中控件的关系是显而易见的，尤其是控件依赖关系。
- 分组简化了内容，而不是使其更加复杂。
对准
对齐是 UI 元素的协调放置。 对齐很重要，因为它使内容更易于扫描并影响用户对视觉复杂性的看法。
确定对齐方式时需要考虑以下几个目标：
- 轻松进行水平扫描。 用户可以水平读取并查找彼此相邻的相关项，而无需任何尴尬的间隙。
- 轻松进行垂直扫描。 用户可以扫描相关项的列，并立即找到要查找的内容，只需最小的水平眼部移动即可。
- 最少的视觉复杂性。 如果用户具有不必要的垂直对齐网格线，则认为布局在视觉上很复杂。
水平对齐
左对齐
由于从左到右的阅读顺序，左对齐适用于大多数内容。 左对齐使列式数据易于垂直扫描。
右对齐
右对齐是数值数据的最好选择，尤其是 列的数字数据。 右对齐也适用于 提交按钮 以及与右窗口边缘对齐的控件。
在此示例中，高级搜索渐进式披露控件与右窗口边缘对齐，因为它与右窗口边缘对齐。
中心对齐
对于左对齐或右对齐不合适或出现不平衡的情况，最好保留居中对齐方式。
屏幕截图
在此示例中，媒体播放器控件居中提供平衡的外观。
不要将窗口内容居中以填充空间。
不正确：
在此示例中，内容在可调整大小的窗口中不正确地居中以填充空间。
垂直对齐
元素顶部
由于从上到下阅读顺序，顶部对齐方式适用于大多数内容。 顶部对齐使 UI 元素易于水平扫描。
文本基线
将控件与文本垂直对齐时，对齐文本基线以提供流畅的水平阅读流。
正确：
按钮和标签文本屏幕截图
不正确：
在正确的示例中，控件及其标签按其文本基线垂直对齐。
你知道布局在：
- 可以轻松地水平和垂直扫描。
- 它具有简单的视觉外观。
标签对齐方式
常规对齐规则适用于控件标签，但它是值得特别注意的常见问题。 标签对齐具有以下目标：
- 轻松进行垂直扫描以查找正确的控件。
- 轻松进行水平扫描，将标签与其控件相关联。
- 轻松进行本地化，处理不同语言长度不同的标签。
- 适用于不同标签长度的混合体。
- 有效利用可用空间，同时避免截断文本。
总体目标是减少查找用户可能查找的内容所需的眼动量，但控件的性质和用户查找的内容取决于上下文。
有四种常见的标签放置和对齐样式，每个样式都有其优势：
- 控件上方左对齐的标签
- 控件左侧的左对齐标签
- 控件左侧左对齐的标签、左侧的控件不规则
- 控件左侧右对齐标签
控件上方的左对齐标签
此样式是最容易本地化的，因为布局不依赖于标签的长度，但它需要最垂直的空间。
此样式采用最垂直的空间，但最容易本地化。 这是标记大多数交互式控件的更好选择。
最好在以下情况下使用：
- 标记的控件是交互式的（而不仅仅是文本）。
- UI 将本地化。 这种风格通常提供翻倍甚至三倍标签长度的空间。
- UI 使用固定布局技术（如 Win32）。
- 有十个或更少的控件。 使用更多控件时，标签很难扫描。
- 有足够的垂直空间来容纳标签。
- 布局必须是自由格式，而不仅仅是列。
控件左侧的左对齐标签
此样式是垂直扫描最容易的，在标签长度差异很大时效果也非常好，但很难将标签与其控件相关联。 如有必要，此样式可以使用多行标签。
这种风格效果很好。 但是，有两列，但从视觉上看，有四列使数据看起来更加复杂。
最好在以下情况下使用：
- 用户可能会垂直扫描以查找特定标签。
- 用户不太可能以从左到右、从上到下的方式读取标签和控件。
- 有足够的水平空间来容纳标签。
- 标签的长度显著不同。
- 有许多控件，例如窗体。
- 有几个列。 以视觉方式显示标签和控件显示为两个单独的列。
控件左侧的左对齐标签、左侧
这种样式使垂直扫描标签和标签和控件变得非常高效，并且非常有空间效率：但很难垂直扫描控件。 控件是右对齐的，以充分利用可用空间。
此样式紧凑且易于阅读，但很难垂直扫描控件。
最好在以下情况下使用：
- UI 使用可变布局技术（如 Windows Presentation Foundation）。
- 用户可能会垂直扫描以查找特定标签。
- 用户可能以从左到右、从上到下的方式读取标签和控件。
- 用户不太可能垂直扫描控件。
- 控件文本的长度各不相同，如果使用了其他样式，可能会截断。
- 控件是只读的，例如只读文本框。 对于其他控件，这种对齐方式看起来是草率的。 但是，在单击时，控件可能会变为可编辑。
- 列中有许多列，但很少有控件。
控件左侧的右对齐标签
此样式是水平读取以将标签与其控件关联的最简单，但很难垂直扫描标签，并且当标签列表的缩进标签和控件长度大相径庭时效果不佳。
具有缩进标签和控件的 
此样式允许轻松垂直扫描控件，但很难垂直扫描标签。
最好在以下情况下使用：
- 用户可能以从左到右、从上到下的方式读取标签和控件。
- 用户不太可能垂直扫描以查找特定标签，原因可能是：
- 控件很少。
- 标签是众所周知的。
- 这些控件大多是自我解释性的，很少为空（可能具有默认值以防止空白控件）。
- 有足够的水平空间来容纳标签。
- 标签的长度不会显著变化。
- 有许多列。 以可视方式显示标签和控件作为单个列显示。
但是，在采用上述任一样式之前，请考虑以下两个因素：
- 首选可在程序中一致使用的样式。
- 控件左侧控件上方的左对齐标签是最常见的样式，因此应优先使用它们。
平衡
当窗口或页面的内容在其表面均匀分布时，窗口或页面具有平衡。 如果表面在物理上具有与视觉上相同的权重，则平衡布局不会向一侧倾斜。
最常见的平衡问题是窗口或页面左侧的内容过多。 可以通过以下方式创建余额：
- 在左侧使用比右侧更大的边距。
- 放置用于在右侧完成任务的 UI 元素。
- 将整个任务中使用的 UI 元素置于中心。
- 延长可调整大小或多行控件。
- 以战略方式使用中心对齐。
文本
此平衡向导页面布局显示比右侧更大的左边距以提高平衡。
如果这些技术无法实现平衡，请考虑减少窗口或页面的宽度以更好地匹配其内容。
对于可调整大小的图面，不要将内容居中，而只是为了实现平衡。 相反，维护固定的左上原点，定义最大外围区域，并平衡使用的空间中的内容。
网 格
网格是一个不可见的基础对齐系统。 网格可以是对称的，但非对称网格也正常工作。 当由单个窗口或页面使用时，网格有助于组织图面中的内容。 重复使用时，网格会在图面上创建一致的布局。
网格线数会影响视觉复杂性的感知。 网格线较少的布局比具有更多网格线的布局更简单。
视觉复杂：
屏幕截图
直观简单：
屏幕截图
不必要的网格线会产生视觉复杂性。
你知道布局在：
- 具有类似内容或函数的 Windows 或页面具有类似的布局。
- 重复的设计元素显示在窗口和页面的类似位置。
- 没有不必要的垂直和水平对齐网格线。
视觉简单性
视觉简单性是，布局并不比需要复杂。
你知道布局在布局时具有视觉上的简单性：
- 消除不必要的窗口部件版式层。
- 最多使用七个易于识别的组呈现内容。
- 使用轻型分组，例如布局和分隔符，而不是分组框。
- 使用轻量级控件，例如辅助命令的链接而不是命令按钮，使用下拉列表而不是用于选项的列表。
- 减少垂直和水平对齐网格线的数量。
- 例如，减少控件大小的数量，例如，在图面上只使用一两个命令按钮宽度。
- 使用渐进式披露来隐藏 UI 元素，直到需要它们。
- 使用足够的空间，使窗口或页面感觉不拥挤。
- 适当调整窗口和控件的大小，以消除不必要的滚动。
- 使用具有少量大小和文本颜色的单个字体。
一般情况下，如果可以消除布局元素而不损害 UI 的有效性，则它可能是。
指引
屏幕分辨率和 dpi
- 支持最低 Windows 有效分辨率 800x600 像素。 对于必须以安全模式工作的关键 UI，支持 640x480 像素的有效分辨率。 请务必为任务栏显示的窗口保留 48 个垂直 相对像素 来考虑任务栏使用的空间。
- 针对有效分辨率为 1024x768 像素优化可调整大小的窗口布局。 以仍然正常运行的方式自动调整这些窗口的大小，以降低屏幕分辨率。
- 请务必以每英寸 96 点（dpi）（分辨率为 800x600 像素）、120 dpi（以 1024x768 像素）和 144 dpi（以 1200x900 像素）模式测试窗口。 检查布局问题，例如剪裁控件、文本和窗口，以及图标和位图的拉伸。
- 对于触摸和移动使用方案的程序，请针对 120 dpi 进行优化。 高 dpi 屏幕目前在触摸和移动电脑上普遍存在。
窗口大小
- 选择适合其内容的默认窗口大小。 如果可以有效地使用空间，请不要害怕使用更大的初始窗口大小。
- 使用平衡的高度到宽度纵横比。 首选 3：5 和 5：3 之间的纵横比，尽管纵横比 1：3 可用于消息对话框（如错误和警告）。
- 请随时使用可调整大小的窗口来避免滚动条和截断的数据。 具有动态内容、文档、图像、列表和树的 Windows 受益于可调整大小的窗口。
- 对于文本文档，请考虑最大行长 80 个字符， 以使文本易于阅读。 （字符包括字母、标点符号和空格。
- 固定大小的窗口：
- 固定大小的窗口必须完全可见且大小适合工作区。
- 可调整大小的窗口：
可调整大小的窗口可以针对更高的分辨率进行优化，但在显示时根据需要缩小到实际屏幕分辨率。
逐渐增大的窗口大小必须逐渐显示更多信息。 确保至少有一个窗口部分或控件具有可调整大小的内容。
调整窗口大小时，使内容的左上角原点保持固定。 不要移动源以在窗口大小更改时平衡内容。
如果内容过宽，则设置最大内容大小。 如果内容变得不笨拙，请不要调整内容区域的大小超出其最大宽度或更改内容的原点，因为窗口的大小变大。 相反，请保留最大宽度和固定的左上角原点。
如果内容不再可用，请设置最小窗口大小。 对于可调整大小的控件，请将最小可调整大小的元素大小设置为其最小的功能大小，例如列表视图中的最小功能列宽度。 应完全删除可选的 UI 元素。
考虑更改演示文稿以使内容大小更小。
屏幕截图
在此示例中，当窗口对于标准格式而言太小时，Windows Media Player 会更改其格式。
控件大小
使所有交互式控件至少相对 16x16 像素。 这样做适用于所有输入设备，包括 Windows 平板电脑和触摸技术。
调整控件的大小，以避免截断的数据。 不要截断必须读取才能执行任务的数据。 调整列表视图列的大小，以避免截断的数据。
调整控件的大小，以消除不必要的滚动。 如果这样做会消除滚动条，则使控件略大。 应该有几个垂直滚动条，没有不必要的水平滚动条。
在此示例中，下拉列表的大小设置为消除滚动条。
减少图面上的控件大小数。 首选使用 标准建议的控件大小，如有必要，请使用一些一致大小的较大或更小的控件。 尝试对列表框和树视图使用单个宽度，对于命令按钮和下拉列表，宽度不超过三个。 但是，文本框和组合框宽度应建议其最长或预期输入的长度。
包含列表和按钮的对话框
在此示例中，一致地使用一个列表框和命令按钮大小。
对于基于文本调整大小的控件，对于要本地化的任何文本，请额外包含 30% （短文本最多为 200%） 。 此准则假定布局是使用英语文本设计的。 另请注意，此准则是指本地化文本，而不是数字。
将静态文本控件、复选框和单选按钮扩展到适合布局的最大宽度。 这样做可以避免截断可变长度文本和本地化。
不正确：
进度控件和部分文本屏幕截图
在此示例中，控件文本被不必要的截断。
控制间距
- 如果控件未触摸，则它们之间至少有 3 个 DLL（5 个相对像素）。 否则，用户可以单击控件之间的非活动空间。 由于单击非活动空间没有结果或视觉反馈，因此用户通常不确定出了什么问题。
放置
- 排列图面中的 UI 元素，以自然地在从左到右、从上到下的顺序（在西方文化中）流动。 UI 元素的位置传达其关系，应反映执行任务的步骤。
- 将启动任务的 UI 元素置于左上角或左上角。 为用户提供用户应首先查看的最大视觉强调的 UI 元素。
- 放置在右下角完成任务的 UI 元素。
- 将相关的 UI 元素放在一起，并分隔不相关的元素。
- 在主流中放置所需步骤。
- 将可选步骤置于主流之外， 可能通过使用合适的背景或渐进式披露来取消强调。
- 在扫描路径中不常使用的元素 之前放置常用元素。
重点
- 选择用户首先需要查看的单个 UI 元素作为焦点。 焦点应该是用户需要快速查找和理解的重要内容。
- 将焦点置于左上角或左上角。
- 给予焦点最大的视觉强调， 如突出显示文本、默认选择或初始输入焦点。
对准
- 通常，使用左对齐方式。
- 对数值数据（尤其是数值数据的列）使用正确的对齐方式。
- 对提交按钮以及与右窗口边缘对齐的控件使用右对齐方式。
- 当左对齐或右对齐不合适或显示不平衡时，请使用居中对齐方式。
- 将控件与文本垂直对齐时，对齐文本基线以提供流畅的水平阅读流。
- 有关标签对齐，请参阅设计概念中的 标签对齐 部分。
可及性
不要使用布局作为传达有关 UI 的重要信息的唯一手段。 有视觉障碍的用户可能无法解释此演示文稿。 例如，确保控件标签与其与其他项的关系进行通信。
不要在控件标签中嵌入从属控件，以创建句子或短语。 此类关联完全基于布局，键盘导航或辅助功能辅助技术无法很好地处理。 此外，此方法不可本地化，因为句子结构因语言而异。
不正确：
在此示例中，文本框错误地放置在复选框标签中。
正确：
屏幕截图
在这里，文本框放置在复选框标签之后。
使分组易于访问。 由窗口窗格、组框、分隔符、文本标签和聚合器定义的组由辅助功能辅助工具自动处理。 但是，仅按放置和背景定义的组不是，并且必须以编程方式为辅助功能定义组。
有关更多指南，请参阅 辅助功能。
建议的大小和间距
控制大小调整
下表列出了常见 UI 元素的建议大小（宽度 x 高度或高度）（对于 9 pt.Segoe UI，为 96 dpi）。 基于英语中最长项的宽度为本地化添加 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（每个附加行） |
windows 资源管理器中嵌套文件夹的  |
树视图 |
最长项的宽度 + 30% x 整数项（最小 5 个项目） |
间距
下表列出了公共 UI 元素之间的推荐间距（对于 9 pt. Segoe UI，为 96 dpi）。
| 元素 | 对话框单位 | 相对像素 | |
|---|---|---|---|
间距的图像 |
对话框边距 |
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 |