前段时间在设计的过程中，发现自己有个通病，就是在界面中的间距数值使用得多&乱，导致自己在多流程的界面设计中是很痛苦的，因为每一次都要想这里的间距要定多少，效率是很慢的。于是就沉下心来问了导师和学习了相关的文章，瞬间茅塞顿开。相信有很多与我一样遇到间距不知道如何定义的盆友，希望此文能够帮助到你呀。

01 .

间距的定义

间距是指彼此间相隔的距离。例如不同卡片间的距离、图标到文字的距离等。在UI设计中，间距包括纵向间距与横向间距。有意义的间距是能够区分信息层级关系，让用户更好的获取信息内容的。

我们知道间距的种类是非常多的，上边距下边距、内边距外边距，然后一个页面又有非常多的元素，如果我们每一种间距都不同那么就真的会累死自己，也会让开发非常的崩溃。所以关于间距规则的定义我们应遵循以下原则：

1.统一的

2.重复使用的

对于同一种间距类型我们应该使用统一的间距数值，并且不同数值之间应该遵循倍数关系，另外间距规则的重复使用才能让间距规则变得有意义。

02 .

间距规则的价值

定间距规则是一件很有价值的事情，无论是对用户还是设计师，甚至整个团队。

对设计师

明确的间距规则能够减少设计师的思考与决策，提升设计效率。在界面设计时，我们只需按照定义好的间距规则直接去使用，不用纠结这里的间距到底使用多少，提高设计效率。

对用户

统一的间距规则能够帮助用户区分不同的信息层级，引导用户快速获取有效的信息，能够给用户带来良好的用户体验。

对团队

大家都遵循相同的间距规则，可以确保不同设计师产出的界面是间距是统一的，也能减少开发师的工作量，提高整个团队的效率。

03 .

间距规则如何制定

制定间距规则的方法可以分为以下3步：

1.定义最小原子单位

最小原子单位应该在我们定义栅格系统时就已经定义过了。最小原子单位可以根据自身产品的定位和内容组织形式来定。最小原子单位越大，我们产品的留白间距就越大，最小原子单位越小，我们的界面信息越密集。

比如Airbnb界面留白是比较多的，它最小原子单位为8，那么它的间距大小都应该是8的倍数。像淘宝这种需要呈现更多内容的，它的最小原子单位为5。定义好了最小原子单位，那后面我们的间距规则都应该是最小原子单位的倍数。

2.明确间距尺寸

我们知道一个界面的间距种类是非常多的，如果我们没有固定的几个间距数值或者可选择的间距数值非常多，设计师也是很难做决策的，所以我们需要明确我们的间距数量，后续设计师从确定的这几个间距中做选择就行了，选择越少，做决策的效率越高。我们可以理解为把间距做成不同的尺寸，在使用过程中选取适合该间距的尺寸即可。

在现实生活中我们买衣服买鞋子也是只有几个固定的尺寸：XS、S、M、L、XL。我们的间距规则也一样，需要我们定义好这几个固定的尺寸，固定的尺寸可以根据实际情况进行灵活的调整，比如可以再添加一个XXS或者XXL都是可行。但我们需要保证我们这几个固定尺寸：

1.是最小原子单位的倍数

2.间距大小是有意义的

间距大小有意义是指两个尺寸是有明显差异的，我们在界面中使用该间距是有意义的。比如你的XS为4，S为6这种定义就是毫无意义的，因为4与6的差异不大，没有起到信息层级划分的作用。

比如在Airbnb的设计规范中，它们的间距规则为：

XS：8

S：16

M：24

L：48

XL：64

虽然都是以8位增量，但是Airbnb舍弃了32、40、56这三个数值，定义出了一套有意义的间距规则。

3.重复使用

定义好我们的间距规则后，我们就应该在我们的设计中去遵循这套间距规则，去重复的使用，这样我们的间距规则才是有意义的。

定好了规则就应该遵守。比如卡片之间的间距我使用的最小尺寸8，那后面所以的卡片间距我都应该使用8，就不要出现卡片间距有8，有12这种情况。

总结

在UI设计中我们应该去制定和遵循间距规则，有意义的间距规则能够提高界面的统一性，提升设计效率。关于间距规则的制定方法总结起来分为这三步：

1.明确最小原子单位

2.明确间距尺寸

3.重复使用

当我们在做设计时遇到困扰，或者自己已经发现我们的设计会是一个问题隐患时，我们应该停下来及时去寻找解决方案，及时解决存在的问题，规避不必要的风险。就像这次在设计中发现各模块的间距规则非常乱，我应该及时的去统一间距规则，保证后续所有的模块都是使用相同的间距规则，及时与开发沟通，进行间距的调整。不然等到产品正式上线或者开发的功能模块越多，后续整改起来就比较耗时耗资源了。个人的工作与学习总结，欢迎大家多多指教呀~