人们从左到右、从上到下的顺序阅读（在西方文化中）。

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

figure of red arrow in zigzag reading pattern 字形阅读模式中红色箭头的图

此图为沉浸式阅读建模。

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

figure of red arrow in diagonal reading pattern 对角阅读模式中红色箭头的图

此关系图模型扫描。

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

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

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

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

显示扫描文本 figure of text with arrows showing scanning text 箭头的文本图

用户在扫描时倾向于跳过大量文本和导航窗格。

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

所有内容都相等，用户将按以下顺序读取这些数字：1、2、4 和 3。

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

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

• 中心内的交互式控件
• 在其他地方找到的交互式控件
• 显示警告图标的文本
• 正文中的其他静态文本
• 将启动任务的 UI 元素置于左上角或左上角。
• 将完成任务的 UI 元素置于右下角。
• 尽可能将关键文本放在交互式控件而不是静态文本上。
• 避免将重要信息放在左下角或长滚动控件或页面底部。
• 不要显示大文本块。 消除不必要的文本。 使用 反棱锥图 呈现样式。
• 如果你做点什么来吸引用户的注意，请确保需要注意。

尽可能处理此模型，而不是与之抗争;但有时需要强调或取消强调特定的 UI 元素。

若要强调主要 UI 元素，请执行以下作：

• 将主要 UI 元素置于 扫描路径 中。

• 放置任何 UI 以在左上角或左上角启动任务。

• 将提交按钮置于右下角。

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

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

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

• 将文本用户置于交互式控件或带有图标或 横幅 上读取。

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

• 用慷慨的空间包围元素。

• 不需要任何交互（如指向或悬停），以查看要强调的元素。

  screen shot of windows activation options windows 激活选项的屏幕截图

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

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

• 将辅助 UI 元素置于扫描路径之外。

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

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

• 使用普通文本或灰色文本。

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

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

• 请考虑使用 渐进式披露 来隐藏辅助 UI 元素。

  screen shot of large and small interface elements 大界面元素和小型界面元素的屏幕截图

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

  有效使用屏幕空间

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

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

  虽然关键 UI 必须适应最低支持 有效分辨率 ，但不要假定使用屏幕空间实际上意味着窗口应尽可能小，不应如此。 有效的布局尊重开放空间，并且不会试图将一切内容塞进尽可能小的空间中。 新式显示器具有重要的屏幕空间，在可以时有效使用此空间是有意义的。 因此，使用过多的屏幕空间而不是太少。 这样做会使你的窗口感觉更轻，更易接近。

  你知道布局在：

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

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

控制大小调整

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

拟合法指出，目标越小，用鼠标获取目标所需的时间就越长。 此外，对于使用 Windows 平板电脑和触摸技术的计算机，“鼠标”实际上可能是笔或用户的手指，因此在确定小控件的大小时，应考虑备用输入设备。 16x16 相对像素的控件大小对于任何输入设备来说都是一个很好的最小大小。 相比之下，标准 15x9 相对像素旋转控件按钮太小，无法由笔有效使用。

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

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

你知道布局在具有以下情况下具有良好的间距：

• 总的来说，UI 表面感觉舒适，感觉不拥挤。
• 空间显示为统一和平衡。
• 相关元素紧密相连，不相关的元素相对相距较远。
• 控件之间没有一起的死空间，例如工具栏按钮。

可调整大小的窗口

可调整大小的窗口也是有效使用屏幕空间的一个因素。 某些窗口由固定内容组成，不能受益于可调整大小，但具有可调整大小的内容的窗口应可调整大小。 当然，用户调整窗口大小的原因是采用其他屏幕空间的高级，因此内容应相应地扩展，方法是为需要它的 UI 元素提供更多空间。 具有动态内容、文档、图像、列表和树的 Windows 受益于可调整大小的窗口。

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

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

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

带有长文本 screen shot of wide message box with long text 的宽消息框的屏幕截图

在此示例中，长文本长度使得难以阅读。

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

具有高、侵入性功能区 screen shot of window with tall, intrusive ribbon 的窗口的屏幕截图

没有功能区 screen shot of window with no ribbon 的窗口的屏幕截图

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

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

screen shot of centered media player buttons 居中媒体播放器按钮的屏幕截图

在此示例中，当窗口对于标准格式而言太小时，Windows Media Player 会更改其格式。

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

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

若要使 UI 元素成为焦点，可以通过以下方法将其可视化强调：

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

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

若要解决此问题，窗口的上中心部分有突出说明，用于将用户定向到正确的位置。

包含有用文本 screen shot of search dialog box with helpful text 的搜索对话框的屏幕截图

在此示例中，窗口上中心部分的一个突出说明将用户定向到搜索框。

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

没有文本 screen shot of search dialog box with no text 的搜索对话框的屏幕截图

此示例没有明显的焦点。 用户不知道在何处查找。

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

突出显示的所有按钮 screen shot of highlighted all button 的屏幕截图

如果没有作为焦点的突出指令，突出显示的“所有”按钮是一个无意的焦点。

当用户通过图面的清晰路径顺利自然地引导时，布局会流动，并按适合其使用的顺序查找 UI 元素。 用户确定焦点后，需要确定如何完成任务。 UI 元素的位置传达其关系，应反映执行任务的步骤。 通常，这意味着任务的步骤应该自然地以从左到右、从上到下的顺序（在西方文化中）流动。

你知道布局在以下情况下具有良好的流：

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

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

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

可以按以下方式显示分组（在增加严重性）：

• 布局。 可以彼此对相关控件进行分组，并在不相关的控件之间放置额外的间距。

  显示四组任务 figure of four icons showing four groups of tasks 的四个图标的图

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

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

  控制面板左侧的

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

  为了避免视觉混乱，最轻量级分组对工作做得最好。 有关详细信息，请参阅 组框 、 选项卡 、 分隔符和背景 。

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

• 轻松进行水平扫描。 用户可以水平读取并查找彼此相邻的相关项，而无需任何尴尬的间隙。
• 轻松进行垂直扫描。 用户可以扫描相关项的列，并立即找到要查找的内容，只需最小的水平眼部移动即可。
• 最少的视觉复杂性。 如果用户具有不必要的垂直对齐网格线，则认为布局在视觉上很复杂。

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

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

对于左对齐或右对齐不合适或出现不平衡的情况，最好保留居中对齐方式。

screen shot of centered media player controls 居中媒体播放器控件的屏幕截图

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

不要将窗口内容居中以填充空间。

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

此样式是水平读取以将标签与其控件关联的最简单，但很难垂直扫描标签，并且当标签列表的缩进标签和控件长度大相径庭时效果不佳。

具有缩进标签和控件的

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

最好在以下情况下使用：

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

  但是，在采用上述任一样式之前，请考虑以下两个因素：

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

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

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

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

  此平衡向导页面布局显示比右侧更大的左边距以提高平衡。

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

  对于可调整大小的图面，不要将内容居中，而只是为了实现平衡。 相反，维护固定的左上原点，定义最大外围区域，并平衡使用的空间中的内容。

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

  网格线数会影响视觉复杂性的感知。 网格线较少的布局比具有更多网格线的布局更简单。

  视觉复杂：

  screen shot of cluttered dialog box 杂乱对话框的屏幕截图

  直观简单：

  screen shot of organized dialog box 组织对话框的屏幕截图

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

  你知道布局在：

  • 具有类似内容或函数的 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 元素。

        考虑更改演示文稿以使内容大小更小。

        screen shot of media player controls 媒体播放器控件的屏幕截图

        在此示例中，当窗口对于标准格式而言太小时，Windows Media Player 会更改其格式。

      • 使所有交互式控件至少相对 16x16 像素。 这样做适用于所有输入设备，包括 Windows 平板电脑和触摸技术。

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

      • 调整控件的大小，以消除不必要的滚动。 如果这样做会消除滚动条，则使控件略大。 应该有几个垂直滚动条，没有不必要的水平滚动条。

        在此示例中，下拉列表的大小设置为消除滚动条。

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

        包含列表和按钮的对话框

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

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

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

        进度控件和部分文本 screen shot of progress control and partial text 的屏幕截图

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

      • 如果控件未触摸，则它们之间至少有 3 个 DLL（5 个相对像素）。 否则，用户可以单击控件之间的非活动空间。 由于单击非活动空间没有结果或视觉反馈，因此用户通常不确定出了什么问题。
      • 排列图面中的 UI 元素，以自然地在从左到右、从上到下的顺序（在西方文化中）流动。 UI 元素的位置传达其关系，应反映执行任务的步骤。
      • 将启动任务的 UI 元素置于左上角或左上角。 为用户提供用户应首先查看的最大视觉强调的 UI 元素。
      放置在右下角完成任务的 UI 元素。 将相关的 UI 元素放在一起，并分隔不相关的元素。 在主流中放置所需步骤。 将可选步骤置于主流之外， 可能通过使用合适的背景或渐进式披露来取消强调。 在扫描路径中不常使用的元素 之前放置常用元素。
      • 选择用户首先需要查看的单个 UI 元素作为焦点。 焦点应该是用户需要快速查找和理解的重要内容。
      将焦点置于左上角或左上角。 给予焦点最大的视觉强调， 如突出显示文本、默认选择或初始输入焦点。
      • 通常，使用左对齐方式。
      • 对数值数据（尤其是数值数据的列）使用正确的对齐方式。
      • 对提交按钮以及与右窗口边缘对齐的控件使用右对齐方式。
      • 当左对齐或右对齐不合适或显示不平衡时，请使用居中对齐方式。
      • 将控件与文本垂直对齐时，对齐文本基线以提供流畅的水平阅读流。
      • 有关标签对齐，请参阅设计概念中的 标签对齐 部分。

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

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

        在这里，文本框放置在复选框标签之后。

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

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

        建议的大小和间距

        控制大小调整

        下表列出了常见 UI 元素的建议大小（宽度 x 高度或高度）（对于 9 pt.Segoe UI，为 96 dpi）。 基于英语中最长项的宽度为本地化添加 30% 用于本地化（对于较短文本最多为 200%）的任何文本（但未添加数字）。

        对话框单位