三、度量和参考线(Metrics & keylines)

基线网格(Baseline grids)

无论是移动端、平板端还是桌面端上,所有的应用组件都对齐至8dp单位的方形基线网格上。但工具栏中的图则对齐至4dp单位的方形基线网格上。

基线网格的例子
基线网格的例子

基线网格的例子
基线网格的例子

文字于4dp单位的方形基线网格对齐。详细信息请参见 [排material.google.com/style/typog…)

在一个基线网格进行文字排版
在一个基线网格进行文字排版

参考线和间距(Keylines and spacing)

以下模板包含参考线和间距指南。还有在移动端、平板端和桌面端上UI元素的布局效果。
模板:
移动端上的布局模板
2.23MB(.ai)

平板端上的布局模板
1.39MB(.ai)

桌面端上的布局模板
89.40MB(.ai)

移动端
列表
下图演示了头像、列表以及一个56dp的浮动按钮在页面中的对齐关系。

参考线和外边距
参考线和外边距

页面左右边缘预留外边距:16dp
内容左侧有icon或头像时预留外边距:72dp
移动端上水平方向上的外边距:16dp

垂直间距
垂直间距

状态栏:24dp
工具栏:56dp
副标题: 48dp
列表项:72dp

参考线和外边距
参考线和外边距

页面左右边缘预留外边距:16dp
内容左侧有icon或头像时预留外边距:72dp

垂直间距
垂直间距

状态栏:24dp
工具栏:56dp
标题和列表项: 72dp
副标题: 48dp
内容区域间距:8dp

详情页
带56dp大小浮动按钮的卡片详情页。

参考线和外边距
参考线和外边距

页面左右边缘预留外边距:16dp
内容左侧有icon或头像时预留外边距:72dp
在有浮动按钮的页面上,右对齐的icons距离右边缘的距离是32dp

垂直间距
垂直间距

状态栏:24dp
工具栏:56dp
列表项: 72dp
内容区域间距:8dp

抽屉式导航
在抽屉式导航zho中,icons、头像和文本左对齐,其他icons右对齐。

参考线和外边距
参考线和外边距

页面左右边缘预留外边距:16dp
内容左侧有icon或头像时预留外边距:72dp
侧边栏宽:从屏幕右边缘到侧边栏的最右边的距离是:56dp

垂直间距
垂直间距

用户菜单和列表项:48dp
内容区域间距:8dp
从侧边栏最右边到屏幕右边缘的距离是:56dp

平板端
列表和详情页
列表左对齐,浮动按钮右对齐。

参考线和外边距
参考线和外边距

页面左右边缘预留外边距:24dp
内容左侧有icon或头像时预留外边距:80dp
卡片左右两侧内边距:24dp
卡片内容左内边距:104dp

垂直间距
垂直间距

状态栏以及列表上方间距:24dp
列表项: 64dp
内容区域间距:8dp
列表项:72dp

列表和详情页
列表、浮动按钮左对齐。

参考线和外边距
参考线和外边距

页面左右边缘预留外边距:24dp
Icons垂直对齐并距离屏幕边缘:52dp
导航列表项距离屏幕左边缘内边距:104dp
内容距屏幕边缘的左外边距:80dp
卡片左右两侧内边距:32dp
卡片导航列表项的左内边距:96dp

垂直间距
垂直间距

状态栏:24dp
工具栏和列表项: 64dp
内容区域间距:8dp
副标题、列表项以及滑块:48dp
标题:80dp

桌面端
桌面端的参考线以及间距延续了移动端和平板端的设计,但实际会根据窗口大小来进行细调。

全屏桌面
全屏桌面

缩放窗口

水平窗口
水平窗口

垂直窗口
垂直窗口

参考线比率(Ratio keylines)

宽高比可用于UI元素和屏幕尺寸。这是我们直接写为宽:高。
以下是我们建议的宽高比:

  • 16:9
  • 3:2
  • 4:3
  • 1:1
  • 3:4
  • 2:3

举个例子:
1:1比例表示着元素有着相同高和宽。
宽360dp的图像宽高比是2:3时,它的高就是540dp。

以下是有关宽高比的计算方式。宽高比以分数形式表示。例如3:2表示为3/2。
宽=宽高比*高
高=宽/宽高比

不同的宽高比
不同的宽高比

移动端上页面宽高比的例子
移动端上页面宽高比的例子

元素宽高比
元素宽高比

移动端上元素宽高比的例子
移动端上元素宽高比的例子

运用增量来调整尺寸(Sizing by increments)

增量是度量单位。它决定了应用中其它元素的大小和位置。

举个例子,你可以将一个增量定义为某个标准元素的高(如操作栏)。这里我们假设操作栏高56dp,那么一个增量就等于56 x 56dp。以此通过这个我们定义的标准元素的大小来确定其他元素的大小。

再举个例子:在一个增量单位是56dp的情况下,有个元素的宽是8个增量单位大小,那么这个元素的宽就是8*56=448dp。

运用增量的参考线一般用于桌面端(用得最多)和平板端,在移动端上很少使用。因为增量数会根据窗口的大小变化而改变。

案例:卡片的宽是水平方向上8倍增量
案例:卡片的宽是水平方向上8倍增量

案例:展开的应用栏的高度是2倍增量,右侧面板的宽是5倍增量
案例:展开的应用栏的高度是2倍增量,右侧面板的宽是5倍增量

在material design UI中,增量可以不同元素间使用。
在material design UI中,增量可以不同元素间使用。

触发区域大小(Touch target size)

为了确保平衡信息密度和可用性,触发区域大小至少是 48 x 48 dp。在大多数情况下,触发区域之间应该还有8dp或更大的间距。

元素尺寸的宽和高至少是48dp,以此确保在任何屏幕大小下元素的物理尺寸能够达到9mm。触摸屏设备的触发区域大小建议在7-10mm。

头像:40dp
Icon:24dp
触发区域尺寸: 48dp

触发区域高:48dp
按钮高:36dp

触发区域案例
触发区域案例

触发区域和按钮
触发区域和按钮