三、度量和参考线（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的浮动按钮在页面中的对齐关系。
内容左侧有icon或头像时预留外边距：72dp
移动端上水平方向上的外边距：16dp
工具栏：56dp
副标题： 48dp
列表项：72dp
内容左侧有icon或头像时预留外边距：72dp
工具栏：56dp
标题和列表项： 72dp
副标题： 48dp
内容区域间距：8dp
详情页
带56dp大小浮动按钮的卡片详情页。
内容左侧有icon或头像时预留外边距：72dp
在有浮动按钮的页面上，右对齐的icons距离右边缘的距离是32dp
工具栏：56dp
列表项： 72dp
内容区域间距：8dp
抽屉式导航
在抽屉式导航zho中，icons、头像和文本左对齐，其他icons右对齐。
内容左侧有icon或头像时预留外边距：72dp
侧边栏宽：从屏幕右边缘到侧边栏的最右边的距离是：56dp
内容区域间距：8dp
从侧边栏最右边到屏幕右边缘的距离是：56dp
平板端
列表和详情页
列表左对齐，浮动按钮右对齐。
内容左侧有icon或头像时预留外边距：80dp
卡片左右两侧内边距：24dp
卡片内容左内边距：104dp
列表项： 64dp
内容区域间距：8dp
列表项：72dp
列表和详情页
列表、浮动按钮左对齐。
Icons垂直对齐并距离屏幕边缘：52dp
导航列表项距离屏幕左边缘内边距：104dp
内容距屏幕边缘的左外边距：80dp
卡片左右两侧内边距：32dp
卡片导航列表项的左内边距：96dp
工具栏和列表项： 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。
运用增量的参考线一般用于桌面端（用得最多）和平板端，在移动端上很少使用。因为增量数会根据窗口的大小变化而改变。
触发区域大小（Touch target size）
为了确保平衡信息密度和可用性，触发区域大小至少是 48 x 48 dp。在大多数情况下，触发区域之间应该还有8dp或更大的间距。
元素尺寸的宽和高至少是48dp，以此确保在任何屏幕大小下元素的物理尺寸能够达到9mm。触摸屏设备的触发区域大小建议在7-10mm。
Icon：24dp
触发区域尺寸： 48dp
按钮高：36dp
