间距是元素（模块）与模块之间的距离，它划分了界面内容，使得界面布局具有视觉一致性与节奏感，能够让内容模块化，清晰的为用户引导内容区域，帮助用户明确内容之间的关系，提高内容的可读性。
原则
根据排版亲密性原则，页面中距离越近的元素，相互关系越亲密，关联性也越强，也越像一个视觉单元，距离越远的元素，则相互关系越疏远。因此实际应用时，我们通过先判断内容之间的关联性，进而选择合适的间距来体现内容的亲密关系。
尺寸梯度
8 点网格法是最为合适的产品间距制定方法，即以 8 的倍数来定义模块、元素之间的间距以及元素的尺寸。该方法可以保证视觉一致、规律，减少信息混乱程度，能够提高元素的秩序感，规范设计并降低设计对尺寸的决策耗时，从而提高设计与开发效率。
实际落地过程中，在满足 8 的倍数原则下，我们以 8px 的一半即 4px 作为间距的起点以及最小递进单位，通过如下算法来定义间距的梯度，其中 8、16、24 是最为常用的间距值，在这三种规格不适用的情况下，从梯度表里选取其他间距值使用：
类型
| 类型 | 说明 |
|---|---|
| 水平间距 | 相邻元素、组件之间水平方向的间距 |
| 垂直间距 | 模块、元素、组件之间垂直方向的间距 |
| 容器间距 | 内容与容器的内部间距 |
对齐
对齐方式分顶对齐、居中对齐、底对齐以及基线对齐，在满足排版的原则下需根据实际情况灵活选择：
适用范围
- 适用：模块、元素、组件之间的内外部间距
- 不适用：根据规则自动生成间距的特定场景，如栅格排版、居中排版
系统中常见的应用场景：
1、模块（卡片）之间的间距：16px
2、组内元素的间距：8px
3、表单录入的间距规律
- 组与组之间：垂直方向 24px；
- 组内元素之间：垂直方向 12px，水平方向 8px，若存在子组，则子组之间水平方向 24px；
- 表单标题与录入组件之间：水平方向 4px；
- 多文本之间：垂直方向 4px；
- 文本与被解释内容之间：垂直方向 4px；
若有收获，就点个赞吧
0 人点赞
