4.4 布局-间距规范

间距规范

间距规范通过使用基线、关键线、内间距和增量距离来影响比例、容器和触控对象。

内容

基线

内间距

容器和纵横比

触控和点击对象

基线

8dp网格

所有组件在移动、平板和桌面端上都与8dp的方形基线网格对齐。

应用栏和浮动操作按钮与8dp的网格对齐。

4dp网格

图标、文字以及组件内的元素可以与4dp网格对齐。

底部导航栏的元素与4dp网格对齐。

4dp基线网格

文字与4dp基线网格对齐。

当需要与组件（例如按键和列表项）对齐时，文字可放置在4dp网格之外。

文字与列表项垂直居中对齐，尽管字体没有对齐在4dp网格之上。

间距

关键线

关键线可以使栅格布局之外的元素位置保持一致。它们是垂直的线，表示在不与栅格对齐设计中的元素位置。关键线由元素与屏幕边缘的距离来确定，增量为8dp。

关键线应该结合响应式栅格来使用，使设计中的元素保持位置统一。

1. 栅格布局

2. 关键线

关键线可以在布局元素间创造更多或更少的距离。它们在每个断点区域内都可调节。

内间距

内间距是指UI元素间的距离。它是一种可选的关键线间距方式，使用8dp或4dp增量。

内间距应结合响应式栅格使用，使设计中的元素保持位置统一。

1. 栅格布局

2. 内间距

内间距可以通过水平和垂直方向测量。不同于关键线，内间距不需要横跨布局的整个高度。

垂直距离

垂直距离指的是标准元素的高度，例如应用栏或者列表项。这些元素的高度应该与8dp的网格对齐。

1. 状态栏：24dp

2. 应用栏：56dp

3. 列表项：88dp

增量

增量是在应用程序中用来衡量元素尺寸和位置的度量衡。

增量的高宽相等，可以是任意数值，但推荐使用标准元素（如应用栏）高度。

这个增量由应用栏的高度来定义。如果应用栏的高度为64dp，则增量为 64 x 64 dp。

可以通过乘以增量尺寸来制作组件，例如8倍增量宽的卡片：

8 增量 x 56dp = 512dp

则卡片宽度为512dp。

容器和纵横比

容器

容器用来表示一个封闭区域的形状。容器可包含不同的UI元素，例如图片、图标和表面。

1. 图片容器

2. 图标容器

3. 表面容器

容器可以是硬性限制尺寸或剪裁内部元素。或者，它们也可以通过灵活地伸缩来支持所包含的内容。

1. 硬性的图片容器剪裁原始图片尺寸。

2. 灵活的图片容器拉伸所包含的原始图片尺寸。

纵横比

纵横比是指元素的高度和宽度之比。

为保持布局的一致性，请在元素（例如图片、表面和屏幕尺寸）上使用一致的纵横比。

推荐在UI上使用以下纵横比：

16:9，3:2，4:3，1:1，3:4和2:3

灵活比

灵活尺寸比由栅格布局决定：

• 容器宽度由屏幕布局决定，可以通过增长来填充最大的可用距离。

• 容器高度由其内部的图片高度决定。

使用灵活比可以允许内容来决定容器高度。

容器宽度由栅格布局内的列宽决定。

响应式剪裁

为响应式地显示图片，可对不同断点区域的图片剪裁方式进行定义。不同断点区域的图片可以：

• 保持一个固定比例

• 适应不同比例

• 固定图片高度

保持一个比例

图片的尺寸变化可以在不同断点范围内保持一个固定比例。

图片在断点间保持了3：2的比例。

适应不同比例

图片根据不同的断点来改变尺寸。

图片比例在断点变化时从1：1变成了3：2。

固定图片高度

图片可保持固定高度，在不同断点范围内扩展宽度。

图片在不同的断点间保持弹性宽度和固定高度。

触控和点击对象

触控对象规格

触控对象应用在可接收触控和非触控输入的任意设备上。为平衡信息密度和可用性，触控对象的尺寸最小为 48 x 48 dp，间距至少为8dp。

触控对象的最小值 48 x 48 dp。

点击对象规格

在非触控UI上，点击对象最小为 24 x 24 dp，间隔最小为8dp。

点击对象最小为 24 x 24 dp。

*原文作者为谷歌设计团队，本文为个人翻译作品，仅供学习参考