用4px网格设计方法，让你的设计还原高达 95%！

一般，文字的实际占页面中并不紧贴文字可视界，一的额外距的，所以对于标注稿中的文字部分，发往往出的效果与设稿会偏差。那如何精确视觉规范，又能兼顾发实，本文探讨的一问题。文章提供一套设方法，旨加严谨实规范化，精确化，设与发之间保持平衡。

我用 4px 网格设计方法 2 多了，也试让我的团队使用这套方法论。如今，我终于克服了拖延症，决我的第一篇 Medium 文章中探讨这方法，并望用这篇文章获得家的一些反馈。

问题

平时的作中，让我感到抓狂的，文本占几乎总比实际的文本高度高。因此，当使用文本占的高度应用距规范时，总会显得比预的。文字行高越，偏差就越。下面的示例中，设通过运用文本之间的空间创建的，当所间距都 32px 时，所的垂直间距实际会比 32px 很多

译者注：这家使用 sketch 时应该会常遇到。

△ Photo by Max Delsid on Unsplash

解决

由于这样的问题，我使 4px 格方法来规范视觉精。是我的设计过程：

• 在背中设置一个 4px 的网；
• 把有的元素和本都对齐在格上；
• 使用网格测文本之间的留白区域，不直接使用文本占的小。

此外，受到 Medium 上 Nathan Curtis 的《 Space in Design Systems 》章影响，我给团队定义了一组间距值，方快速使。

为了有容都对齐于格上，这种方法基本上将本的可视取整为 4 的倍数，这样可会成 1-2px 的误差，但实仍然会直接本占位来设定间距更为精确。

△ 测量本上方最的一条格线的距离

一例外：组件或者某器中的图标或者文本应该垂直居中，无论他们否对齐于基准网格。因多数时候发可以使用弹性布局（flexbox）将元素直接居中，这比标注静态的间距实用。

每行内元素中的文本 sketch 中都使用下居中对齐，基线此时对齐也关系的。

理由

传统意义，网格设常常用于纸媒印刷，用打造垂直方向的节奏感，设 Web 用户体验的作中，同样也需把控好这样的节奏感。

我来说，使用 4px 网格法是视觉精度和设计效率平衡。在问题部分，我讨论了使用文本占位齐所带来麻烦，用户其实是看不见这个所谓文框。所以使用这「严谨」设计，其实是没有多大意义，会造成视觉上不平衡，并没有用户带来好处。

另一个角度来说，忽略文本占位空间，使用网格来进行测量，则可以获得更高的度。

下面是两种方法的比，我们以看到，当使用相同的间距值（32px，12px，32px，32px）时，使用网测量的设计更准确地反映预期的间距。

译者注：里我想提一句，在际输出标注稿的时，间距不是图中所示，标注自动减去文字占位空间，比 Seattle 与 City in Washington 之间的标注间距能是 8px，样开写出来的 css 代码才能与页面中的际文占位对齐。

有人可能会说，如果是因为从文本占位而产生了多的间距，那，将上图第一张卡片计中的「Seattle」间距从 32px 降低 28px 或者 24px 来顶部和左侧的 Padding 值相同不就行了。但是，这做就成了一件靠觉的事情，除非去计算像素，否则远无法确定。另一方面，4px 网格规范提供了一个更确、更好把控的方法来确定间距大。

就设计效率而言，似乎需要做更的工，但是由网的存在，设计软件（比sketch或Figma）以用自动吸附功能帮助对齐网，因此际处理时其并不烦。下面是我平时使用网局时的工流程：

△ 我的工作流中如何处好本

或者，的时候可以选择不使用网格参考线，只用一素块手动测，但这就需将画面方法至素小。

译者注：我自己平时就常这么，这样测会准确。

△ 图一可选的作流，直接两文本之间的间距，不使用网格参考

已知问题：如何与开发对接

当发拿到这样的设计标注稿时，看到的间距可是看似没有规律的随机间距，这对开发来说，并友好。

上中，我到了一篇章《Space in Design Systems》，章中要讨论了如何使 css 类来表示间距值，这有助于强设计与开发之间的一致性。幸的是，使我的这种方法，几乎可将间距表示为一组 css 类，因为间距值具有随机性。

我们还研究了许多人提出的一种减少随机性问题的门技，使用::before ::after CSS 伪类「裁切」界框（本质对行内元素的间距校）。然，我的发男友则告诉我：

使用::before ::after CSS 伪类并不理，因不同的字体，浏览器，操作系统甚至不同的屏幕分辨率都不一致。针对某一字体好的设置，其他方又可能出问题。从发的角度，这样也遵循很好的码规范，因使用了负距，将无关的多余元素应用到了 DOM 结构中，这可能会导致一些意不到的副作用。因此，真实项目中，这种技不得冒险。

（译者注：貌似这里作者并明确与发的对接，我人认，作垂直方向的间距，文字小不变的况下，让发直接按标注的间距写 CSS ，复杂度也能接受。）

不同语言如何应用

我曾了一项不同区语言的研究，研究我的方法否支持 8 种书写语言（拉丁语，汉语，里尔语，德语，希腊语，韩语，日语泰语）。然后我意识到，无论使用哪种度方法，终发都从标注稿中获得间距写 CSS 中的界框间距重的。不同的字体，即使行高相同，可视高度也会区别。然，如下图中所示，尽一些细微的改变，所语言的内仍然相对集中相同的置。

△ Photo by Joshua Sortino on Unsplash

结语

如果任何不合理的方，或者任何问题，反馈或好的解决方案，请让我知道。我已研究这课题很时间了，所以我很听听的法。

原文：《The 4px baseline grid — the present》  Ethan Wang

欢迎关注译者的公众号：「彩云译设计」