编者按：在 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 网格系统

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

斐波那契网格系统示意图

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

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

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

作者：陈子木