随着技术的兴起，许多平面设计师正在或已经转向 UX/UI 设计。我学习了艺术指导，所以我对平面设计中的基线网格非常熟悉。大约八年前我开始做 UI 设计时，我没有遵循任何特定的指导方针。我主要是查看其他应用程序和网站以了解他们使用的间距类型，但很快发现每个人的做法都不一样。我看到了各种各样的数字。12px、13px、15px、20px 的边距/内边距……在当时似乎并不重要。业界中似乎也8点网格为作为设计引导标准。

作为一个非常注重细节的人，这就是一件令我兴奋的事情，它有效帮助我在设计中的决策。我开始应用8点网格在我所有的设计中，如果别人没有按照这个方法我会觉得缺乏理论指引。但很快，我发现它在很多情况下限制了我灵活性，特别是在企业软件或具有大量副本、文本字段、超链接、表格和按钮的界面中。我开始将其更改为4 点网格，而没有真正研究它。但幸运的是，我发现我并不是唯一一个使用4点网格的人。在浏览国外设计师的分享中，我惊异的发现很多优秀的国外UI也热衷与4点网格。

首先，什么是 8 点网格？

基本原则是一切都是8的倍数（8, 16, 24, 32, 40, 48,…80,…96,…）。它是所有元素之间的间距。例如，您的输入字段的高度为 48 像素，而其他输入字段之间的间距为 16 像素。

但为什么4分超过8分？

• 它为您提供更多粒度，阅读更多选项。与其在 8 或 16 之间进行选择，您还可以选择 12。想想图标大小、元素之间的间距、文本和图标之间的水平间距……
  

• 更好的排版。我曾经将我的文本与 8 的基线网格对齐，并且总是遇到多行文本太紧或太大的问题。现在，我对齐我的文字4与基线网格线高4的倍数取得更好的效果。

为了这。我将尝试用几个例子来说明这一点：

                                 14px 字体大小和 16px 行高的示例

                               14px 字体大小和 20px 行高的示例

                             14px 字体大小和 24px 行高的示例

在这种情况下，我认为 20px 的行高是完美的。16px 行高的例子太紧了，24px 行高的例子对我来说有点太大了。如果没有 4 点网格，您将不得不在第一个和最后一个示例之间进行选择。您将在下面找到我用于第二个示例的间距：                                 14px 字体大小和 20px 行高的示例

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

我可以打破网格吗？

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

                      具有 14 像素字体大小和 20 像素行高的表格行示例

                                     18px 字体大小和 24px 行高的示例

“当文字位于组件（例如按钮或列表项）内时，可以将其放置在 4dp 网格之外。当放置在网格之外但在组件内居中时，文本仍然可以垂直居中对齐。” —谷歌材料设计。

结论

约束是正常的，有时是需要的，但作为设计师，我们不希望约束更少吗？4 点网格将为您的 UI 工作提供更大的灵活性。你会惊讶地发现有多少次您会使用 12px 而不是 8px 或 16px 作为间距值。

Powered by Froala Editor