4px 间距系统与斐波那契间距系统的比较
每当与新设计师合作时，我都会遵循一套固定的流程。首先，我会打开谷歌，搜索 “8px 网格 Medium.com”，找到埃利奥特-达尔的综合指南，并将其发送给他们。这本指南内容详尽，极力推荐。
在此之前，我一直把 4 的倍数（而不是 8！）作为设计的基本单位。例如，创建新元素时，左边的填充设为 16px，上边的填充设为 12px，这已成为我的肌肉记忆。
传统间距 VS. 奇数间距
以药丸组件为例，传统方法通常使用左右填充值 16px，上下填充值 12px。这种设计方法虽然能提高一致性，让组件更易于管理，但也导致界面过于整齐划一，缺乏层次感。
让我们尝试奇数填充
对比使用偶数填充和奇数填充的药丸组件，会发现奇数填充带来了一种更紧凑、更自然的视觉体验。相比之下，传统的4px 计算网格系统在纵向和横向的布局上有时会显得松散。
为了验证这一点，我们可以对比两种方法的填充值。左图采用 4px 规则，右图则调整为奇数填充。个人感觉后者更合理，整体视觉上更协调。你觉得呢？
手动微调像素
在实际设计过程中，我会手动调整 1-2px，以优化填充，使界面更加紧凑。尤其是在药丸组件的设计上，对比第二个和第四个示例，奇数填充的版本更显协调。
字体对间距的影响
有人可能会担心，不规则的间距会影响字体的排列。让我们来看看不同字体的对比：
- Oxygen Mono
- Noto Serif
- Roboto
- Poppins
- Palatino
- Koulen
有趣的是，无论是单色字体还是衬线字体，奇数间距的效果都相当紧凑，整体视觉差异不大。
不过，需要注意 行高 对间距的影响。例如，单行文本使用 100% 行高 效果良好，但大面积文本可能需要进一步调整。
关键要点
在所有测试的药丸组件中，字体大小和图标均保持一致，这说明 偶数内边距+奇数外边距 可能是一种可行的和谐设计方法。
真实案例：Notion 按钮填充值调整
最近，我研究了 Notion 的新邮件登录页面，发现他们采用了 偶数+奇数混合 的方法，对按钮填充进行了微调。例如：
- 之前版本的 Notion 按钮填充值：垂直 7px，水平15px
- 现在的填充值：垂直 6px，水平 14px
他们通过边框半径的微调，使按钮在视觉上更均衡，这种处理方式值得借鉴。
系统化设计：斐波那契间距
如果要让这种方法更具系统性，可以引入 斐波那契数列 进行优化。
4px 网格系统
在 4px 网格系统中，间距通常按照 4 的倍数 递增，比如 4、8、16、24 等。
斐波那契系统
而斐波那契系统则是通过相邻两个数相加来确定间距，比如 1、2、3、5、8、13。
当我们在组件上对比 4px 网格 和 斐波那契系统 时，虽然两者差异不大，但斐波那契系统能带来更加自然的层次感。
结论
最终，选择 4px 网格 还是 奇数间距 或 斐波那契系统，取决于具体的设计需求。但尝试新的方法，总能带来一些有趣的发现。
你会考虑在自己的设计中尝试奇数间距吗？欢迎交流你的看法！
文章图片来源于：https://medium.com
作者：Luis Ouriach
翻译：马克笔设计留学
