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

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

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

每次和新设计师合作时 ，我都会保持一个固定流程  。那契我会打开谷歌搜索「8 px grid Medium.com」，向p系统找到 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 网格系统

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

斐波那契网格系统示意图

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

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

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

作者：陈子木