02､组件间距

常见的的设计标注文件中，组件间距大致可以分为两种：

1. 页边距

2. 内容块之间的间距；

一、页边距

指内容到屏幕边缘的距离，也叫安全距离。

同时，在36氪的界面中还可发现一个小细节：右侧图标并没有贴着安全区域。这是因为在图标尺寸较小的情况下，为了保证其易点击性，会在其四周填入空白像素，使可点击热区面积大于图标的视觉尺寸。（如下图）

在设计的过程中，我们应该使用常用的页边距，如32px、30px、24px、20px。

同时需保持所有界面中页边距的一致性，减少和开发人员的沟通成本。

二、内容块间距

主要分为两种：块外间距和块内间距。

通常情况下，会根据格式塔中的“相近原则”，使块内间距小于块外间距，保证内容块的亲密性以及块与块之间的分隔感。（如下图）

我们先着重来说说块外间距。

在开发过程中，开发人员往往需要使用模块开发，这时就需要用到块外间距。在标注块外间距的时候，需要设计师和开发人员保持思维的统一，这样才能保证页面的还原度。

如何使用块外间距进行页面搭建呢？一般来说，常见的有四种方法：

1. 给定间距，自上而下进行适配。这种方式容易导致下面布局拥挤，不常用。

2. 给定间距，从上下向中间方向适配。一般可以基本做到适配各个尺寸，但容易出现布局不协调的现象。

以上两种方法不是很好用，基本已淘汰。

3. 确定各元素中心点位于画板的比例位置，按比例确定位置。这个方法可以完美适配出优美的布局。（如下图）

4. 把画板分割成几块，所有元素在各个区域居中。

这是最符合开发思维的适配方案，也是还原效果比较好的适配方案。

具体的做法是固定上下区域，中间间隔区域自适应。单独划分的区域可以直接给定高度数值，或者给定比例。（如下图）