本文提供了一些实用提示和示例,可帮助你设计应用的内容:Windows 间距合理性,使用类型渐变来演示层次结构、列表和网格,以及如何对控件进行分组。
间距和行号槽
使用大小一致的间距和行号槽在语义上会将体验分组到单独的组件中。 这些值映射到我们的圆角逻辑,并共同帮助创建一个协调且易于使用的布局。
按钮之间的间距为8epx
按钮和弹出窗口之间的 8epx
控件和标头之间相隔 8 像素。
控件和标头之间的 8epx
控件和标签之间的 12epx
内容区域之间的 12epx
表面和边缘文本之间的 16epx
文本 + 层次结构
字型渐变(链接)旨在提供一系列大小,这些大小有助于在应用中传达层次结构。
使用标题、副标题和正文,间距为 12epx。
区分受限 UI 空间中的标题时,请对标题使用粗正文,而无需在文本块之间增加任何间距。
对于需要文本但又非常受限的空间(如命令按钮),请使用字幕大小。
列表和网格
可以创建各种列表和网格样式。 下面是 Windows 中使用的各种组合。
对于多行列表,请使用字型渐变中的正文和字幕,并使用 32epx 图标。
使用“Body Strong”作为节标题。
对网格项使用图标或人员图片元素时,请使用居中对齐的标题文本。
如果列表包含带文本的大型图形元素,请对主文本使用正文样式,并左对齐图像。
使用控件
在常见配置中,控件如何相互关联的一些示例。
演示如何将扩展器控件(链接)与列表样式和常见控件配合使用的示例。 控件应右对齐,并与展开器按钮之间有 16epx 的间距。
本示例显示展开器内放置时的控件对齐方式。 将控件缩进 48epx。