向4px网格告别吧，迎接斐波那契网格系统！

编者按：在 UI 设计当中采用网格系统是相当普遍的存在，而 4px 网格则是其中的关键。但是即便如此，我们也在越来越多的优秀设计中，看到打破 4px 网格系统的设计，它真的够用么？今天资深设计师 Luis Ouriach 的这篇文章提出了一个全新的解决方案。以下是正文：

传统4 px 网格系统与斐波那契网格系统的对比图示

每次和新设计师合作时，我都会保持一个固定流程。我会打开谷歌搜索「8 px grid Medium.com」，找到 Elliot Dahl 的完整指南发送给对方。这是指南链接。

虽然这个指南非常优秀（强烈推荐），但直到今年之前，我都把4的倍数（不是8！）视为设计圣经。新增元素？左侧内边距肯定是16 px，顶部是12 px，每次都是这样操作的。

药丸形组件标注着内边距数值，左右16 px ，上下12 px

这种设计方法虽然能带来可预测性，也能快速建立组件的肌肉记忆，但我不禁觉得我们已经陷入了一个困境：所有东西看起来都千篇一律。

尝试用奇数

使用偶数和奇数内边距的药丸形组件对比

或许我们应该考虑使用奇数间距数值来打破常规。我已经准备好被网格系统警察逮捕了。

传统4 px 网格系统的问题在于垂直或水平间距总感觉略显松散。虽然这已成为产品设计的默认标准，但我发现自己总会纠结组件中那些多出来的像素。

扩展对比

分别使用两种内边距设计系统的药丸形组件对比

在上图中，左侧是传统 4 px 系统的组件，右侧是调整后的奇数间距版本。个人认为后者看起来更协调。你的感受如何？

我在这里手动调整了1-2 px 来优化内边距。从顶部往下数第二个和第四个药丸形组件尤为明显，奇数间距方案呈现出更均衡的视觉效果。

那字体怎么办？

这种方案面临的第一个质疑可能来自字体内置尺寸对间距的影响。那么我们用不同的字体来测试一下！

六大字体（Oxygen Mono、Noto Serif、Roboto、Poppins、Palatino、Koulen）在两种系统中的对比效果

有趣的是，视觉感受差异微乎其微。无论是等宽字体还是衬线体，奇数间距都能带来更紧凑的效果。需要注意的是行高会影响最终效果，这种方案在单行文本（100%行高）表现良好，但大段文字仍需测试。

重要提示
所有药丸形组件内的字号和图标尺寸都保持偶数！这说明偶数内部元素与奇数外围间距可以形成和谐搭配。

实际案例

Notion邮件产品着陆页首屏截图，标注着表单元素的像素级调整

在研究Notion新推出的邮件产品页时，我发现他们巧妙混用偶奇数值的思路，并且没有遵循我们之前封为圭臬的 4px 网格。

系统化实践：斐波那契网格系统

4 px 网格与斐波那契数列网格系统对比

若要将这种理念转化为系统，可以借助斐波那契数列建立数学规律：每个数值都是前两项之和。

典型的 4px 网格系统

斐波那契网格系统可以通过将两个前值相加来获得。

斐波那契网格系统示意图

虽然结果明显呈现之前的奇数网格特征，但其中蕴含的美学规律令人着迷。

对比两种系统的组件的视觉效果

两种系统的组件差异虽小，但这正是我们追求的精妙之处，设计不就是从理所当然固化的系统当中，逐步向着更加有趣且实用的方向发展的吗？