标尺与参考线

基线网格

所有组件对齐到 8dp 方形基线网格。表单对齐到 4dp 基线网格。图标在工具栏调整到一个 4dp 的基线网格。这适用于手机，平板电脑和台式机。

查看组件的详细信息

参见排版的详细信息

参考线和间距

手机

移动布局模板要适合各种各样的屏幕，关于信息如何处理屏幕边缘的间距横跨屏幕边缘和排版页面元素。附件中有些例子可以参考。

这张截图显示了如何图标，头像，和一个2行列表之间排列方式，左边 56dp 浮动和 右边的文字对齐。

垂直参考线在屏幕的左侧和右侧边缘各留16dp 。带图标或头像相关的内容居左留 72dp的间距，16 dp 手机横向边距。

垂直间距

1. 24dp

2. 56dp

3. 48dp

4. 72dp

这张截图显示了如何图标，头像，一个2行列表，副标题的排列方式，和一个40dp 浮动行动对齐左侧,图标排列在右边。

垂直参考线在图标的左边和右边各留 16dp。带图标或头像相关的内容向左对齐 72dp。 

16dp 手机横向边距。

垂直间距

1. 24dp

2. 56dp

3. 72dp

4. 48dp

5. 8dp

这张截图显示了图标左对齐，和一个 56dp 浮动行动对齐在右侧。

垂直参考线在图标的左边和右边各留 16dp。带图标或头像相关的内容向左对齐 72dp。添加了另一条的32dp 参考线，留给圆形 56 dp 浮动动作，这样使得下面的元素对齐。

16dp 手机横向边距。

垂直间距

1. 24dp

2. 56dp

3. 8dp

4. 72dp

这张截图显示了如何图标，头像，和文本对齐在左侧，以及如何在右侧浮动图标和文字对齐的动作。

垂直参考线在图标的左边和右边各留 16dp。带图标或头像相关的内容向左对齐 72dp。 

16dp 手机横向边距。

垂直间距

1. 24dp

2. 56dp

3. 48dp

4. 8dp

这张截图显示一个侧面导航菜单，和左边图标，头像，和文本对齐和右侧的注释图标。

垂直参考线在侧导航图标的左边和右边各留 16dp。带图标或头像相关内容对齐 72dp 从侧面导航的左边缘。侧面导航的宽度等于屏幕的宽度减去操作栏，或在这种情况下，从屏幕右边缘56dp 的高度。

16dp 手机横向边距。

垂直间距

1. 48dp

2. 8dp

3. 56dp

平板

平板电脑布局模板包括14个不同的屏幕，参考线和间距如何跨屏幕边缘和元素的布局。下面是两个包含在下载的14的屏幕的示例。

1. 24dp

2. 64dp

3. 8dp

4. 72dp

1. 24dp

2. 64dp

3. 8dp

4. 48dp

5. 80dp

桌面

桌面布局模板包括4个不同的屏幕各有4个不同的窗口大小，参考线和间距如何在窗口和元素布局。下面是一个截图是在下载可用的例子。根据窗口大小，拼版和间隔块状化继承来自平板电脑和移动网格规则。

参考线比例

适用于手机屏幕的宽度和UI元素的宽度手机，平板电脑和台式机上。

宽度比例

例子

宽度比例

例子

递增参考线

递增关键线定义的增量，如在操作栏的高度，并使用该增量的整数倍，以确定在应用程序中其它元素的大小和位置。 

适用于大部分台式机，常用的平板电脑，部分手机设备。根据窗口大小递增值会有所不同。

触摸目标大小

最小触摸目标大小为48dp。图标间距（24dp）,头像（40dp）.

在布局时，请记住这一点。触摸区域不应该重叠。