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 System - layout spacing method

Material Design基础 - spacing methods

https://pengtech.net/material/Spacing_methods.html

作者

鹏叔

发布于

2022-04-30

更新于

2024-07-10

许可协议

评论