谁说间距只能是双数？突破4px规则这不就来了

每当与新设计师合作时，我都会遵循一套固定的流程。首先，我会打开谷歌，搜索 “8px 网格 Medium.com”，找到埃利奥特-达尔的综合指南，并将其发送给他们。这本指南内容详尽，极力推荐。

在此之前，我一直把 4 的倍数（而不是 8！）作为设计的基本单位。例如，创建新元素时，左边的填充设为 16px，上边的填充设为 12px，这已成为我的肌肉记忆。

以药丸组件为例，传统方法通常使用左右填充值 16px，上下填充值 12px。这种设计方法虽然能提高一致性，让组件更易于管理，但也导致界面过于整齐划一，缺乏层次感。

对比使用偶数填充和奇数填充的药丸组件，会发现奇数填充带来了一种更紧凑、更自然的视觉体验。相比之下，传统的4px 计算网格系统在纵向和横向的布局上有时会显得松散。

为了验证这一点，我们可以对比两种方法的填充值。左图采用 4px 规则，右图则调整为奇数填充。个人感觉后者更合理，整体视觉上更协调。你觉得呢？

在实际设计过程中，我会手动调整 1-2px，以优化填充，使界面更加紧凑。尤其是在药丸组件的设计上，对比第二个和第四个示例，奇数填充的版本更显协调。

字体对间距的影响

有人可能会担心，不规则的间距会影响字体的排列。让我们来看看不同字体的对比：

有趣的是，无论是单色字体还是衬线字体，奇数间距的效果都相当紧凑，整体视觉差异不大。

不过，需要注意 行高 对间距的影响。例如，单行文本使用 100% 行高 效果良好，但大面积文本可能需要进一步调整。

在所有测试的药丸组件中，字体大小和图标均保持一致，这说明 偶数内边距+奇数外边距 可能是一种可行的和谐设计方法。

最近，我研究了 Notion 的新邮件登录页面，发现他们采用了 偶数+奇数混合 的方法，对按钮填充进行了微调。例如：

他们通过边框半径的微调，使按钮在视觉上更均衡，这种处理方式值得借鉴。

如果要让这种方法更具系统性，可以引入 斐波那契数列 进行优化。

在 4px 网格系统中，间距通常按照 4 的倍数 递增，比如 4、8、16、24 等。

而斐波那契系统则是通过相邻两个数相加来确定间距，比如 1、2、3、5、8、13。

当我们在组件上对比 4px 网格 和 斐波那契系统 时，虽然两者差异不大，但斐波那契系统能带来更加自然的层次感。

最终，选择 4px 网格 还是 奇数间距 或 斐波那契系统，取决于具体的设计需求。但尝试新的方法，总能带来一些有趣的发现。

你会考虑在自己的设计中尝试奇数间距吗？欢迎交流你的看法！

文章图片来源于：https://medium.com

作者：Luis Ouriach

翻译：马克笔设计留学