作者：Ethan Wang  I  翻译：毕纪灵

我已经使用4px栅格网格2年多了，并且一直试图让我的团队也使用它。我终于克服了拖延症，决定在我的第一篇媒体文章中讨论它。我正在寻找这个方法的反馈，所以请让我知道你的想法!目前还没有收到反馈。

1. 问题

让我抓狂的是，文本框占据的空间总是比实际文本大。因此，当使用文本框度量大小时，它最终会比您预期的更大。线的高度越大，问题就越大。在下面的示例中，设计是通过测量文本框之间的距离来创建的。当所有间距都设置为32px(在第一张卡片中)时，所有垂直间距实际上都比32px大得多(如第二张卡片中所示)，即使您将它们都设置为32px。

2. 解决方案

因为这个问题，我使用4px栅格来得到更好的视觉精度。以下是操作过程:

①我在背景中设置了一个4px的栅格

②我将所有UI元素和文本对齐到栅格

③我使用栅格来测量文本周围的垂直空间，而不是使用文本的边框。具体地说，我从最接近文本上限高度的栅格线测量文本上方的空间，从文本下方的栅格测量文本下方的空间。

④此外，我还为我们的团队定义了一组间距值，灵感来自于这篇由Nathan Curtis撰写的媒体文章:Space in Design Systems。【文章链接https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62】

为了让所有栅格都位于网格上，这种方法基本上将文本的可视高度(与栅格的上限高度)舍入为4px的倍数(如下面的gif所示)。这会导致1-2px的误差;然而，它仍然比使用边界框来决定间距更精确。

有一个例外: 在一个组件或容器中，我垂直居中图标或文字，而不管他们是否坐在栅格网格。因为大多数时候,开发人员可以使用flexbox居中一个元素,这比使用静态间距值更方便

3. 为什么

一般，栅格网格用于平面设计，以创建垂直的节奏感。在我设计web网络的日常工作经验中，我还没有遇到过如此需要更好的对齐节奏感的用例。

对我来说，使用4px栅格网格是视觉精度(对用户)和设计效率(对我来说)之间的平衡。在问题部分，我探讨了为什么从文本框测量会增加额外的间距。在一天结束时，用户无法看到文本框。所以使用这种方法是没有意义的，尤其是如果它造成了视觉上的不平衡，并没有给用户带来好处。另一方面，忽略边界框，使用栅格进行测量，可以获得更好的视觉精度。下面是这两种方法的比较。我们可以看到，当使用相同的间距值(32px、12px、32px、32px)时，使用栅格网格测量的设计更准确地反映了预期的间距。

有人可能会说，如果从文本框测量产生了太多的空间，那么，例如在第一张卡片中，将第一个间距值从32px降低到28px或24px将使“西雅图”的顶部和左侧填充看起来相同。但这样的话，它变成了一个猜谜游戏；除非你计算像素，否则你永远无法确定。另一方面，4px网格方法提供了一种更精确、更可预测的方法来确定它的32px(考虑到四舍五入带来的1-2px误差)。

就设计效率而言，这似乎需要更多的工作，但是由于网格的存在，设计工具(Sketch或Figma)可以帮助对齐元素并向栅格添加对齐线，因此对齐和间距变得较容易。下面是我使用栅格对齐文本的工作流。

或者，您可以选择不使用网格并手动测量帽高(如下面的gif所示)，但这需要始终缩放像素网格。另外，容纳文本的容器大小可能不是4px的倍数。

4. 已知问题-设计-开发切换

当开发人员使用红线工具(InVision/Zeplin/Figma)查看设计时，使用栅格方法得到的布局似乎是随机间距值。下面的设计是使用栅格方法创建的。这些数字显示了你可以从红线工具中看到的间距:

上文中，我简要提到了《 Space in Design Systems》这篇文章。它讨论了如何使用CSS表示间距值，这有助于增强设计人员和开发人员之间的一致性。不幸的是，使用栅格网格方法，几乎不可能将间距值用一组CSS表示，因为组合类型不同时该值具有随机性。

我们还研究了许多人提出的一种减少随机性问题的技术，即使用::before和::after CSS伪元素来“裁剪”边界框(本质上是对行框应用校正间距)。然而，我的代码忍者男友Chris Caruso告诉我:

使用::before和::after CSS伪元素并不理想，因为它在不同的字体、浏览器、操作系统甚至屏幕分辨率上都不一致。针对单一组合可能会导致其他组合出现间距问题。从开发人员的角度来看，该技术没有遵循良好的编码规范，因为它使用负边距，并将无关元素应用于DOM——这两者都可能导致意想不到的负面影响。因此，在实际应用中，这种技术不值得冒险。

5. 定位?

我曾经做过一项本地化研究，研究了我们产品支持的8种编写脚本(拉丁语、汉语、西里尔语、德文、希腊语、韩语、日语和泰语)。然后我意识到，无论您使用哪种度量方法，最终，开发人员从工具中获取并放入CSS中的间距值才是最重要的。根据使用的非英语字体，即使行高相同，该类型的可视高度也可能比拉丁字母大或小。他们的背景基线也会发生变化。因此，无论您使用何种测量方法，本地化总是会稍微改变间距。然而，正如下面的示例所示，尽管有这些细微的不同，所有语言的文本仍然相对集中在空白区域。

 (我对非拉丁文字的写作还不是很了解，但我想了解更多。如以上任何意见不正确或有待改善，请通知我。我只懂英语和汉语。大声告诉我的同事，是他们帮我把这句话翻译成其他语言的!)

6. 问题

如果有任何不合理的地方，或者您有任何问题、反馈或更好的解决方案，请让我知道!我已经研究这个课题很长时间了，所以我很想听听你的想法!如果你想聊天，请直接通过电子邮件(ethanw@microsoft.com)联系我!

原文作者：Ethan Wang

原文链接：https://uxdesign.cc/the-4px-baseline-grid-89485012dea6

原文标题：《The 4px baseline grid — the present》

发布日期：November 11, 2018