ui设计|间距不会调？掌握这1个点，让我不再迷茫

编辑导语：在产品设计中，间距设计也是其中的重要规范。合理的间距规范有助于研发团队更好地理解设计方案，并在一定程度上保证APP应用的风格统一。本篇文章里，作者总结了间距规范的设计价值与相应设计原则，一起来看一下。

文章插图
之前一直觉得色彩、图形、字体是UI设计的三大构成，任何设计都是从这三大元素开始的，所有的UI设计都是由这些构成的，但是却忽略了界面中空间的运用，也就是我们常说的间距。
今天我想分享下几年前从Google以及8 pt grid中学到的关于间距相关的教程，这篇分享有助于帮助我们处理好界面间距一致性问题，让设计更加统一。请看今天的分享，Enjoy it。
一、间距无处不在
文章插图

文章插图
间距无处不在，界面中的边距，距离上边、左边、右边、顶部等各种属性。因此作为一名设计师，我们需要很好地掌握各种间距规律，通过间距规律很好地组织好内容。
二、为什么要统一间距？
文章插图
是否大家和其他设计师在合作过程中，经常打开一个设计源文件时候，发现各种间距大小、各种不一致的地方。明明同一个页面，已经定义好规范，但是每个人使用的间距大小不一致！
可能你们规范已经定义好了，最小单位是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让规则更加简单，更好地统一了整个风格的一致性。

文章插图