前段时间在设计的过程中，发现自己有个通病，就是在界面中的间距数值使用得多&乱，导致自己在多流程的界面设计中是很痛苦的，因为每一次都要想这里的间距要定多少，效率是很慢的。于是就沉下心来问了导师和学习了相关的文章，瞬间茅塞顿开。相信有很多与我一样遇到间距不知道如何定义的盆友，希望此文能够帮助到你呀。
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.重复使用
当我们在做设计时遇到困扰，或者自己已经发现我们的设计会是一个问题隐患时，我们应该停下来及时去寻找解决方案，及时解决存在的问题，规避不必要的风险。就像这次在设计中发现各模块的间距规则非常乱，我应该及时的去统一间距规则，保证后续所有的模块都是使用相同的间距规则，及时与开发沟通，进行间距的调整。不然等到产品正式上线或者开发的功能模块越多，后续整改起来就比较耗时耗资源了。个人的工作与学习总结，欢迎大家多多指教呀~
网友评论