设置应用页面的布局

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发,请参阅 最新文档 ]

你可以使用此处所述的布局模式设置你的应用页面上 UI 元素的布局。使边距、页眉、边线宽度以及其他此类元素遵循一致的模式可以保持应用之间的统一性,并可帮助人们轻松了解系统间的交互。

Windows 8 中的用户界面尽力在其应用之间保持一致的剪影。剪影的签名特征是在上边缘、下边缘、左边缘留有较宽的边距。使用宽边距,用户可以了解内容的水平平移方向。

在操作时请参阅有关这些功能的信息,它是应用功能大全系列的一部分: Windows 应用商店应用 UI 全解

使用网格系统

在探讨 Windows 8 剪影之前,应该先了解有关使用 Windows 8 网格系统的一些信息。网格系统是一种设计工具,该工具可帮助实现跨不同应用的视觉统一,同时提供一个用于改变和保持用户兴趣的结构。网络系统内置于开发人员模板中,且我们在设计我们的控件和集合时铭记网格系统。

网格由单元和子单元组成。测量的基本单位就是单元。一个单元等于 20 × 20 像素。每个单元进一步细分为 5 × 5 像素的子单元。每个方形单元有 16 个子单元。以下图像描述了屏幕左上角处的网格。放大该图像即可显示像素、子单元以及单元。

网格系统的插图

页眉

页眉的基线应该为距离顶部 5 个单元或 100 个像素。页眉的左边距为 6 个单元或 120 个像素。Windows 8 页眉为 SegoeUI 样式集 20 细线。有关样式集的详细信息,请参阅文本和版式的指南和清单

注意  在 Windows 8.1 更新中,用户可以将鼠标移动到屏幕的顶部边缘,以显示标题栏。用户还可以将鼠标移动到屏幕的底部边缘,以从桌面显示任务栏。当用户将鼠标从任一边缘移开时,标题栏和任务栏都将隐藏。用户无法通过触摸显示标题栏或任务栏。显示标题栏和任务栏时,它们可能会挡住你的应用的 UI 或命令元素,因此当你在应用布局中定义元素位置时,请考虑此情况。

 

页眉的插图

内容区域

内容区域的上边距为 7 个单元或 140 个像素。左边距为 6 个单元或 120 个像素。下边距非常灵活。对于水平平移的内容,应该不超过 6.5 个单元(130 个像素),且不少于 2.5 个单元(50 个像素)。 对于垂直平移的内容,上边距和左边距保持不变。由于内容滚出屏幕,因此未指定下边距。

内容区域的插图

水平填充值

内容项之间的水平填充因项而异。对于明边项(如图像和用户磁贴),磁贴和随附文本之间的填充为 2 个子单元或 10 个像素。对于列表,列之间的填充为 2 个单元或 40 个像素。对于明边项,列之间的填充为 2 个子单元或 10 个像素。

水平填充值的插图

垂直填充值

内容项之间的垂直填充也因项的类型而异。 对于磁贴和文本列表,行内项之间的垂直填充为 1 个单元或 20 个像素。对于明边对象,行内项之间的填充为 2 个子单元或 10 个像素。

垂直填充值的插图

组之间的水平填充

组之间的填充为 4 个单元或 80 个像素。此填充足够大,在用户平移时足以轻松辨别组。

组之间水平填充值的插图

相关主题

布局和缩放的 UX 指南

文本和版式的指南和清单