向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 网格系统
斐波那契网格系统可以通过将两个前值相加来获得 。
斐波那契网格系统示意图
虽然结果明显呈现之前的奇数网格特征 ，但其中蕴含的美学规律令人着迷 。
对比两种系统的组件的视觉效果
两种系统的组件差异虽小 ，但这正是我们追求的精妙之处 ，设计不就是从理所当然固化的系统当中 ，逐步向着更加有趣且实用的方向发展的吗 ？
作者：陈子木
编者按 ：在 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 网格系统
斐波那契网格系统可以通过将两个前值相加来获得 。
斐波那契网格系统示意图
虽然结果明显呈现之前的奇数网格特征 ，但其中蕴含的美学规律令人着迷 。
对比两种系统的组件的视觉效果
两种系统的组件差异虽小 ，但这正是我们追求的精妙之处 ，设计不就是从理所当然固化的系统当中 ，逐步向着更加有趣且实用的方向发展的吗 ？
作者：陈子木
