关于间距—转自公众号（我们的设计日记）

作者: 脱掉帽子的秃头 | 来源:发表于2018-08-02 13:50 被阅读0次

之前一直觉得色彩，图形，字体是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，我们很难去决策，如何去做。