Material Design-Layout-Metrics and Keylines

目录

• 基本的栅格线
• 排版和间距
• 排版比例
• 排版增量
• 触摸目标大小

基本的栅格线

所有的组件对齐到8dp见方的基本栅格中，类型对齐到4dp的基本栅格中。工具栏中的ICON对齐到4dp见方的基本栅格中。这些适用于手机、平板电脑和台式机。

查看组件的详细信息。（注:详细信息均指附件，在下载中）

查看排版的详细信息。

排版和间距

移动端

移动端的布局模板包括各种各样的屏幕和各种信息的排版和空间布局元素。下面是一个包含屏幕例子的下载。

2.4 MB (.ai)

背景

此屏幕显示了图标，头像和两条线怎么样对齐排列在左边，和一个如何56dp的悬浮按钮怎样和文字对其在右侧

垂直排版和水平边距

垂直关键线距左侧和右侧边缘各16dp。与内容相关的icon或者文字对齐在距左侧边缘72dp.16dp的水平带图标或化身相关的内容从对齐左侧边缘72的DP。元素水平相距为16 dp.

垂直间距

1. 24dp

2. 56dp

3. 48dp

4. 72dp

背景

此屏幕显示了图标，头像，一个2行列表和标题，怎样和一个40dp悬浮操作左侧对齐的。图标排列在右边。

垂直排版和水平边距

垂直关键线，从icon到左边距离16dp.与icon或者标题相关的内容，距离左侧72dp.水平间距为16dp。

垂直间距

1. 24dp

2. 56dp

3. 72dp

4. 48dp

5. 8dp

背景

该屏幕显示图标如何对齐左侧，以及图标如何与右测一个56dp的悬浮操作对齐。

垂直排版和水平边距

垂直关键线为图标距左侧边缘16dp。与icon或者标题相关的内容对齐且距离左侧72dp。一个额外的关键线距离圆形浮动操作32个dp。这使得浮动操作图标下面的操作对齐。

水平间距为16dp。

垂直间距

1. 24dp

2. 56dp

3. 8dp

4. 72dp

背景

此屏幕显示了图标、头像如何和文本对齐左侧，以及右侧浮动按钮怎样和图标、文字对齐。

垂直排版和水平边距

垂直关键线为图标距左侧边缘16dp。与icon或者标题相关的内容对齐且距离左侧72dp。

侧边导航栏的宽度等于屏幕看度减去操作栏，在这种情况下，右侧距离屏幕56dp. 水平间距为16dp。

垂直间距

1. 24dp

2. 56dp

3. 48dp

4. 8dp

背景

此屏幕显示了图标、头像如何和文本对齐左侧，以及右侧浮动按钮怎样和图标、文字对齐。

背景

此屏幕显示了图标、头像如何和文本对齐左侧，以及右侧浮动按钮怎样和图标、文字对齐。

垂直排版和水平边距

垂直关键线为图标距左侧边缘16dp。与icon或者标题相关的内容对齐且距离左侧72dp。侧边导航栏的宽度等于屏幕看度减去操作栏，在这种情况下，右侧距离屏幕56dp. 水平间距为16dp。

垂直间距

1. 48dp

2. 8dp

3. 56dp

平板电脑

平板电脑布局模板包括14个不同的屏幕下的显示排版和间距，和他们如何跨不同的屏幕和元素。下面是两个包含14的屏幕的可下载示例。

3.19 MB (.ai)

1. 24dp

2. 64dp

3. 8dp

4. 72dp

1. 24dp

2. 64dp

3. 8dp

4. 48dp

5. 80dp

台式电脑

桌面布局模板包括4个不同的屏幕，各有4个不同的窗口大小，显示元素在空间中如何排版。下面是可下载的屏幕例子。根据窗口大小，拼版和间隔块将继承来自平板电脑和移动网格规则。

h

100 MB (.ai)

排版比例

排版比例

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

Screen width

增量排版

Incremental Keylines

增量关键线的界定了增量，就像操作栏的高度一样，并在确定应用中其他元素大小和位置时使用增量的整数倍。

这些适用于大部分台式机，部分的平板电脑，但很少适用于手机。根据窗口的大小，这个增量数也不同。

触摸目标大小

最小触摸目标大小为48dp。在布局时，请记住图标（24 dp）头像（40 dp）。触摸目标不应该重叠。