Windows 应用的内容设计基础知识

本文提供一些帮助你设计应用内容的实用技巧和示例：Windows 间距基本原理，使用铅字渐变来体现层次结构，列表和网格，以及控件的分组方式。

间距和行号槽

使用大小一致的间距和行号槽在语义上会将体验分组到单独的组件中。这些值映射到圆角逻辑，有助于创建一个内聚且可用的布局。

两个按钮以 8 像素分隔。

按钮之间为 8epx

一个按钮和一个以 8 像素分隔的浮出控件。

按钮和浮出控件之间为 8epx

由 8 像素分隔的控件和标头。

控件和标头之间为 8epx

一个控件和一个以 12 像素分隔的标签

控件和标签之间为 12epx

两个内容区域以 12 像素分隔。

内容区域之间为 12epx

一个图面，包含两侧具有 12 像素装订线的文本。

图面和边缘文本之间为 16epx

字型渐变（链接）旨在提供一系列大小，这些大小有助于在应用中传达层次结构。

当有足够的空间时，使用标题、副标题和正文样式的文本示例。

使用间距为 12epx 的标题、副标题和正文。

在受限空间中使用正文强而不是标题的示例。

区分受限 UI 空间中的标题时，请对标题使用粗正文，而无需在文本块之间增加任何间距。

在受限空间中使用 Caption 样式的示例。

对于需要文本但又非常受限的空间（如命令按钮），请使用字幕大小。

可以创建各种列表和网格样式。下面是在 Windows 中使用的各种组合。

包含多元素列表项的示例列表。

对于多行列表，请使用字型渐变中的正文和字幕，并使用 32epx 图标。

对节标头使用粗正文。

水平列表的示例。

对网格项使用图标或人员图片元素时，请使用居中对齐的字幕文本。

包含大型列表项的示例列表。

如果列表包含带文本的大型图形元素，请对主文本使用正文样式，并左对齐图像。

说明控件在常见配置中如何相互关联的一些示例。

具有子控件的扩展器示例。

显示如何使用扩展器控件（链接）和列表样式及常用控件的示例。控件应该右对齐，在控件和扩展器按钮之间留出 16epx 的空间。

扩展器内的控件如何对齐的示例。

此示例显示放置在扩展器内的控件对齐方式。将控件缩进 48epx。