设计规范中，间距到底如何给标准

使用4的倍数在界面高保真设计里，会使产品得到更多的灵活性。

4倍网格

随着技术的兴起，许多平面设计师正在或已经转向UX/UI设计。我学的是艺术方向，所以我对平面设计中的基线网格非常熟悉。当我6年前开始做UI设计时，我并没有遵循任何具体的指导原则。我主要是在看其他应用和网站使用的间隔类型，但很快发现每个人的做法都不一样。我看到了各种各样的数字。边距/图标12px, 13px, 15px, 20px，…在当时看起来并不重要。

几年前，我在Spec.fm上读到了8点网格和两种方法，“软网格”和“硬网格”。作为一个非常注重细节的人，这对我来说是人间天堂。我开始在所有的设计中使用8点网格，如果其他人不遵循这种方法，我会很生气。但很快，我发现它在很多情况下限制了我，尤其是在企业软件或有大量复制、文本字段、超链接、表格和按钮的界面上。我开始将它更改为4点网格，而没有真正研究它。但幸运的是，我发现我并不是唯一一个使用4点网格的人:

什么是8倍网格？

基本原理是，任何数都是8的倍数(8,16,24,32,40,48，…80，…96，…)。它是所有元素之间的间隔。例如，您的输入字段的高度为48 px，而另一个输入字段之间的空格为16px。

8倍网格在注册界面中的使用

为什么是4倍网格要优于8倍呢?

首先，它给你更多的粒度，阅读更多的选项。

你可以选12个，而不是8个或16个。考虑图标的大小、元素之间的间距、文本和图标之间的水平间距等等。

间距保持4的倍数

其次，更好的版式。

我曾经将我的文本对齐到一个基线网格8，总是有多行上的文本太紧或太大的问题。现在我将我的文本对齐到基线网格4，行高为4的倍数。我强烈推荐使用由Fran Pérez制作的线高工具。我会试着用几个例子来说明这一点:

14号字，16px间距效果

14号字，20px字间距效果

14号字，24px字间距效果

我认为20px的行高在这种情况下是完美的。16px的行高太紧了，24px的行高对我来说有点太大了。如果没有四点网格，您将不得不在第一个和最后一个示例中进行选择。下面你会发现我在第二个例子中使用的空格:

使用14号字，20px字间距效果

正如你所看到的，我将边框对齐到网格，而不是文本的基线，因为这是我的文本将在CSS中实现的方式。是的，我知道许多设计师会将文本对齐到基线网格而不是边界框，因为光学边距的原因。

那么，我能打破网格吗？

下面的例子展示了一些不是4的倍数的数字。表格行中行高为20px的14px文本导致文本顶部和底部的间距为10px。我们可以将表格行高度设置为44px，就像第二个例子中一样，但是你也会遇到相同的“问题”，checkmark图标会导致顶部14px，底部14px的间距。在这两个例子中，完全可以打破网格。

14号字的输入框为例

18号字的按钮为例

当类型在一个组件(如按钮或列表项)中居中时，可以放置在4dp网格之外。当放置在网格之外但在组件中居中时，文本仍然可以垂直居中显示。——谷歌material design

总之，约束是正常的，有时也是必要的，但作为设计师，我们难道不希望约束更少吗?4点网格将为你的UI工作提供更多的灵活性。您将会惊讶于使用12px而不是8px或16px作为间距值的次数。