Material Design基础 - spacing methods
1. spacing methods
spacing methods使用基线网格、关键线、填充和增量间距来调整比率、容器和触摸目标。
1.1. 基准网格
1.1.1. 8dp网格
所有组件都与移动设备、平板电脑和台式机的8dp方形基线网格对齐。
1.1.2. 4dp网格
组件中的图标、type和某些元素可以与4dp网格对齐。
1.2. 间距方法
间距方法比响应式布局网格更精细。间距方法是一组关于如何在layout和组件中放置元素的规则。
1.2.1. padding
padding是组件和元素之间的空间.
padding指的是UI元素之间的空间。padding是关键线的另一种间距方法，以8dp或4dp为增量进行测量。
padding可以垂直和水平测量，不需要跨越布局的整个高度。
1.2.2. Dimensions
Dimensions描述了构件的宽度和高度。
Dimensions是指构件的宽度和高度。
某些组件（如应用程序栏或列表）仅列出元素的高度。这些元件的高度应与8dp网格对齐。它们的宽度没有指定，因为它响应于视口宽度。
1.2.3. Alignment
Alignment在组件中放置元素。
1.2.4. 关键线
关键线是一种对齐工具，可以在布局网格之外一致地放置元素。它们是垂直线，显示元素不与网格对齐时放置的位置。关键线由每个元素与屏幕边缘的距离决定，并以8dp的增量测量。
关键线可以在布局中的元素之间创建更多或更少的空间。它们可以根据断点范围进行调整。
1.3. Containers and ratios
1.3.1. Containers
容器是用来表示封闭区域的形状。容器可以保存图像、图标或曲面等UI元素。
容器可以是刚性的，并限制其中元素的大小或裁剪。或者，它们可以是灵活的，并且可以扩展以支持它们所持有的内容的大小。
1.3.2. Aspect ratios
纵横比是元素宽度与高度的比例。纵横比写为宽度：高度。
要保持布局的一致性，请在图像、曲面和屏幕大小等元素上使用一致的纵横比。
建议在整个UI中使用以下纵横比：16:9；3:2; 4:3; 1:1; 3:4; 2:3
1.3.3. Flexible ratios
灵活的比例大小由布局网格决定：
容器宽度由屏幕布局决定，并会增大以填充最大可用空间
容器高度由容器中图像的高度决定
使用灵活的比例，让内容形式决定容器的高度。
1.3.4. Responsive cropping
要相应地显示图像，请定义如何在不同的断点范围内裁剪图像。在不同的断点范围内，裁剪可以：
保持一个固定的比率
适应不同的比率
固定图像高度
保持一个比率 - 图像大小可以在分界点范围内保持一个固定比率。
适应不同的比率 - 图像比率也可以通过适应不同的断点范围而改变。
固定图像高度 - 图像大小可以在断点范围内保持固定的高度和流体宽度。
1.3.5. 触碰目标
触摸目标适用于接收触摸和非触摸输入的任何设备。为了平衡信息密度和可用性，触摸目标应至少为48 x 48 dp，目标之间的空间至少为8 dp。
2. Material Design 系列文章
最新更新以及更多Material Design相关文章请访问 鹏叔的技术博客-Material Design
3. 参考文档
Material Design基础 - spacing methods