对于我们而言，了解一名 UI 设计师，的方法就是看他是怎么使用间距的。配色、字体、排版、图像通常在品牌设计指南当中，有非常具体的指引，但是间距的使用才更能考验设计师的技能。

我想通过这份备忘录来帮助大家更好地掌控「间距」这种元素，这些实用的设计技巧或者说规则，能够告诉很多学习中的设计师以更符合逻辑的方式，来看待间距。

这份清单当中，将会包含：

1、为什么间距很重要

2、网格的介绍

3、间隔的「友谊逻辑」

4、间距的「3C原则」

5、结语

6、延伸阅读

1、为什么间距很重要

当我完成第一份产品设计工作的时候，我还是一名大三的学生。当时我第一次完成了一次产品的UI设计，并且感到非常自豪。当时，我把它交给一位我所认识的资深设计师过目，这位前辈当时被我们亲切地称为 Pixel-Perfect-Piet。可是，当我的作品在他手里转了一圈，我再看到的时候，大受震撼，完全相同的元素，但是视觉效果、体验、逻辑得到了全方位的提升。而他在这个过程中，通过简单地改进我所设计的 UI 界面当中的间距，让整体的设计更加富有条理，更干净，也更加富有凝聚力。

和绝大多数的 UI 设计师一样，我的职业生涯是从平面设计开始的。我不骗你，刚刚开始的做平面印刷的版式类物料的时候，我的老师教导我使用小方块来测量不同元素之间的距离，借此来保证整体的一致性。

这种方式在数字产品设计当中是一定行不通的，它太粗糙原始了。

在进行 UI 设计的时候，对于元素和元素之间的间距，设计师更倾向于使用更加有意义的数据。那么问题来来了，这些间距具体要怎么控制？具体的元素之间，间隔多少才合适？作为习惯了10进制的人类，使用10pt 来作为间隔的基础单位似乎是一个很自然的选择，但是在很多界面当中，使用 10 pt 太大了，而且要在复杂的布局中经常很难整除。

但是 8 pt 网格就会好很多，采用 0、8、16、32、64这样整倍的间距，不仅灵活，而且易于换算。