UI设计中元素之间的间距可称之为一切。

设计中抛开颜色与排版排版因素，光有合理的元素间距，就可以完成一半。为什么？

合理的间距可以使界面具有更好的易读性，使用户快速进行内容消费；可以为用户提供更一致的用户体验；可以降低设计和开发沟通成本；可以使元素模块具有可扩展性；在视觉层面上赋予元素更清晰的表达意义。

如果你是一个设计师，掌握这项技能会是你的设计稿看起来更简洁、舒适。

建立间距体系

平时我们使用Sketch来进行用户界面设计并输出。如果有明白8pt网格设计原则，将使我们与前端对接协作时更加轻松。随着产品的不断迭代更新和用户界面的增长，如果没有某种间距系统，开发维护500个用户界面绝对不是一件好玩的事情。闲话少说，接下来聊聊怎么做？

首先请设置网格基数。我平时使用8px / 16px / 24px / 32px / 40px / 48px / 56px等间距设计原则来分隔元素（如果需要更紧密布局时，也会使用4px）。

我现在认为在8岁的时候 - 起初你可能只是用一个计算器来检查，但很快就会变得很自然。其他设计师很高兴使用5/10/15/20等 - 无论适用于您，这里的重点是您正在为间距一致性打下基础。

确保以可视方式向系统开发者和利益相关者传达系统的工作方式。

抛开颜色与板式效果，我们从上边例图中可以快速看到内容元素可视层级关系。即使'Nutrition'与'Froyo'字体大小相同，它仍然会占据更大的优势。您可以更进一步，将尺寸命名为（xxs，xs，s，m，l，xl，xxl）并将它们添加到您的设计系统中，这样就有了一个真实的来源，是整个团队的一个参考点。

那么这在Sketch中如何工作？

其实这真的不那么难，在设计中使用一致间距系统进行应用程序设计，很快你就会发现你的设计能力再不断提升 。

目前我开展了一个网络项目。为了在使用8pt UI网格的同时保持垂直节奏，我使用了8pt基线网格（4pt基线也很好）。下面例图是我在Sketch中布局设置：

所以让我们来看看更多细节：

那么这有什么用呢？

从这样一个元素的模板（Section，H2，Paragraph [1]，Icon，H3，Paragraph [s]，USP panel）中，我们可以快速构建规范/规则，以便在整个产品中扩展和保持一致性。

开发人员看不懂设计师的输出标注规则。如果创建视觉设计规范弥补了这一差距。

图标

我曾经使用图标字体，并很快发现使用不便，并有一些限制。有了像样的浏览器支持，我现在使用SVG并将它们设置为：

确保您将图标设置为不同尺寸，并自然使用8的倍数。这些64x64适合用户界面网格。无论如何，大多数图标都是根据这些尺寸设计的（16x16,24x24,32x32等）。

如果您需要更改图标并在100个不同的地方使用它，则只需更改这一个尺寸的图标即可。对于图标字体来说，这意味着需要重新设置并确保开发人员始终拥有最新的版本。出于某种原因，这在Sketch中也很麻烦。

文本元素和行高

关于行高，确保文本元素落入网格可能会非常棘手。作为一个宽泛的规则，我倾向于使用这个Golden Line高度插件或者更多的基本治疗倍数1.5来得到这样的结果：

16点/ 24

21pt / 32

24pt / 36

32pt / 48

等等

线高度实际上应该根据元素的宽度进行调整，因此在使用不同尺寸的设备时要考虑到这一点。Sketch不处理这个问题（据我所知），所以这是需要记录在设计规范中的东西。

实践

制定一套这样的规则并不总是那么容易。也许你现在是如此的专注，很难看清全局，或者你正在做一个没有系统的现有UI。

似乎没有时间这个东西是对的？

但我强烈建议你：

让产品所有者参与讨论（谈论可扩展性，效率，更快速的原型制作......我发现它很容易销售）。

现在投入大量时间来节省大量浪费时间和挫折感。

与开发人员交谈，告诉他们你的计划以及如何为他们提供帮助 - 就如何最好地提供他们实际使用的东西获得他们的意见

对于现有产品，请退后一步，根据当前资产制定设计规则。

对于新产品，使用网格/文本元素/间距创建基本的入门模板（基于品牌指南），并在创建组件时添加规则，这将改变您对设计的看法。

确保你与整个团队分享，并帮助他们理解这些好处。

作者：Chris Godby

文章链接：https://blog.prototypr.io/the-8pt-grid-consistent-spacing-in-ui-design-with-sketch-577e4f0fd520