8年资深设计师：间距不会调？掌握这一个点，从此不再迷茫！

之前一直觉得色彩，图形，字体是 UI设计的大构成，任何设计都是从这大元素开始的，有的 UI设计都是由这些构成的，但是却忽略了界面中空间的，就是我们说的间距。今天我想分享几年前从 Google 的 Material Design 及 8 pt grid 中到的于间距相的程，这篇分享有助于我们处好界面间距一致性问题，让设加统一，同时义规范里面的原子设方法，能完融合。

距处不在，界边距，距离上边，左边，右边，顶部等各属性。此作为名设计师，我们需要很好掌握各距规律，过距规律很好组织好内容。

一、为什么要统一间距？

是否大家和其计在作过程中，经常开一个计源文件候，发现各种间距大，各种不一致地方，同一个页面，已经定义好规范，但是每个人使用的间距大不一致。可能你规范已经定义好了，最位是5，按照5的倍数去做计，但是还是会出现各种奇葩的间距，10，12，18等等。或者说有的计是按照5来说的，间距会出现10，15，20，25，30，难解释清楚哪种景下用什间距规则。

不止是设计师，估计研发打开我们标注稿都是崩溃。所以我们需要去统距规则，它优是能很好让设计师合理了解我们距系统规则，时开发在做设计开发时候，不需要都复开发不距，导致个 APP 风格混乱，那么我们如何去做呢？

二、它的价值是什么？

于设计师：效率上，减少决策和思考，我做个需求时候，我不需要考虑到底用多大距，时能保持元素节奏。

对于团队：设师发之间沟通加简单，发人员能很好的按照小单按照增递增去写间距，不必每次都行测。

对于户：他们信任的牌有一致性的美感，在设备上没有模糊的像素偏移等，就和微信一样，说哪里好，但就是最好的。

三、站在巨人肩膀上思考

△ Material Design 在的布局中有讲过，的间距，所有间距规则都是在8的倍数上进行递增，而且并不是毫无头绪的递增，只定义了种增量关系，克制的有序的间距弹性，最的是8，16，24，32，48，56，72。

△ 同在 iPad端，间距规则也是有序的，克制的间距弹性，而不会出现日常计中经常间距随任选的使用，毫无规则乱用。

△ 在 Airbnb 的最新规范中，PC 和无所有设计间距规范原则只定义5种，8，16，24，48，64让规则更加简单，更的统一整个风的一致。

这些原则除了在元素和元素中，实在按钮中，在按钮里面字和上左右的距离，都是有序的，我特别一句话，设计语言只有在有序的遵循和重复使才有。

四、怎么做？

1. 小原子单

这小间距规则可以3的倍数，蘑菇街、豆瓣一样，如果希望产品留白比较多，也可以5的倍数，例如 pinterest、亚马逊，这绝对的，一切根据们产品内丰富程度决。

△ 亚马逊 AliExpress 都按照5倍数间距增

2. 确认间距弹性

大家都买过衣服或者鞋子，般鞋子尺码，会有固定几个（36，37，38，39，40，41，42，43）如你需要鞋子特大，可能需要订制，括衣服也是样（XS,S.M.L.XL）。

在定义距上理，以往做设计规范经验，在上步定义好最小单位完啦，然后设计师按照增量去设计 ok，这样是完成半，如按照4增量（4，8，12，16，20，24，28，32，36，40….）这带来问题是任何距都不可预测，提供选择过于接近了，在什么情况下使用24，什么情况下使用28，我们很难去决策，如何去做。

前在团队做过个调研，我们问了设计师，也看了很多设计文件，括国也有个类似调查，是在用4作为设计原子距做设计时候，设计师使用最多距有哪些？结很有意思，使用16占半，8和32占半，所以定义太多距其实毫意义，会带来设计时候不确定元素。

3. 根据业务场景，定义距

正如前所说，过多距规则，会带来设计师困惑，徒增界复杂性，开发，设计师都是负担，所以我们在定义距时候，定要少，要让我们距原则覆盖到绝大多数场景。可以从 XS，S，M，L，XL 为参考，小，，大为纬度。

△ Airbnb 的间距规则 XS，S，M，L，XL 是最为8，常用8，16，24，48，64，Airbnb 则更加克制，给计选择更少，反而更能保持计次序。

△ quickbooks 的间距规则 XS，S，M，L，XL 是最为4，常用8，16，20，40，60能好足各种业景，包括各种的间距景都是在此基础上去拓展。

△ 那界面中所有的间距地方，全部运用8，16，20，40，60这个则来做计，保证页面统一性。

△ 包括页面中的素高度，比如 banner 高度也是按照间距增量去计高度，那整个页面就更加有系统性和科学性。

△ 这也是在做系统计候经常用的，通过增量来做计。

△ 同理，在国外很优产品中，我们不难现种规律的使用，更的提升设计效率。

总结

统一简化间距规则，通规则，构建一致界面，所有边距，元素空间遵循规则时，对视设计和开人来说，能很决一致和效率问题。

在刚开始计候，可能会觉得没有真正的好，但是当项目越来越复杂候，队规模越来越大，每理各种计和计候，你会发现，当你使用固定的间距，它会比之前随的间距规则有更好的效果。

欢迎关注作者微信公众号：我们设计日记，分享最新设计趋势和设计经验，学设计法。

图片素材作者：Laura Reen