内容布局和间距

本文提供了一些实用提示和示例,可帮助你设计应用的内容:Windows 间距合理性,使用类型渐变来演示层次结构、列表和网格,以及如何对控件进行分组。

间距和行号槽

使用大小一致的间距和行号槽在语义上会将体验分组到单独的组件中。 这些值映射到我们的圆角逻辑,并共同帮助创建一个协调且易于使用的布局。

两个按钮以 8 像素分隔。

按钮之间的间距为8epx

一个按钮和一个浮出控件,中间间隔 8 像素。

按钮和弹出窗口之间的 8epx

控件和标头之间相隔 8 像素。

控件和标头之间的 8epx

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

控件和标签之间的 12epx

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

内容区域之间的 12epx

包含两侧带有 12 像素装订线的文本的图面。

表面和边缘文本之间的 16epx

文本 + 层次结构

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

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

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

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

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

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

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

列表和网格

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

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

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

使用“Body Strong”作为节标题。

水平列表的示例。

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

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

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

使用控件

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

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

演示如何将扩展器控件(链接)与列表样式和常见控件配合使用的示例。 控件应右对齐,并与展开器按钮之间有 16epx 的间距。

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

本示例显示展开器内放置时的控件对齐方式。 将控件缩进 48epx。