我和新设计师合作的时候，有一个固定的流程。我会去谷歌，搜索“8px grid Medium.com”，然后找到 Elliot Dahl 的综合指南，发给他们。指南如下。
这本指南太棒了，强烈推荐。直到今年，我几乎把 4 的倍数（而不是 8 的倍数！）奉为设计圣经。新元素？左边距肯定是 16，上边距肯定是 12 吧？每次……都……这样。
虽然这种设计方法有助于提高可预测性，并成为快速设置组件的肌肉记忆，但我不禁想到，我们已经进入了一个不幸的一切看起来都一样的世界。
也许我们值得考虑使用奇数而不是偶数来作为间距，以便改变现状并让我们保持理智。
我已准备好进入网格系统监狱。我准备去网格系统监狱。
我对偶数 4px 计算网格系统感到不满的是，它们在垂直或水平方向上都感觉有点松散。虽然这现在是产品设计的事实标准，但我发现自己还是会把注意力集中在组件中那些感觉像多余几个像素的地方。
我们来看一下对比。上图左侧是采用 4px 系统的传统间距组件。右侧是我们将其调整为奇数。个人感觉这样更好。你觉得呢？
我在这里所做的是手动上下调整一两个像素，以优化填充，使其感觉更紧密。这在从上往下数第二个和第四个药丸中尤为明显，比较起来，你会发现奇数填充方式感觉填充效果更加一致。
对此想法的第一个反对意见可能来自于字体因其固有大小而如何破坏间距的差异。
让我们来看看吧！
有意思！感觉上没什么区别。无论是单声道还是衬线字体，奇数间距的最终效果仍然更紧凑。
这里需要注意的是，行高会影响所有内容的呈现效果。对于单行文本，设置为 100% 行高效果很好，但对于较大区域的文本，我们需要进行实验。
重要的
在这些药丸里，所有的字体大小和图标都被设置为均匀大小！所以，或许内部为偶数、外部为奇数的组合能给我们带来和谐。
如果我要尝试把这个想法变成一个系统，我可能至少会想尝试构建一个方法来应对这种疯狂。这时，我们可以依靠像斐波那契数列这样的系统来处理这些繁重的工作。
在 4px 系统中，我们像这样设置间距 - 以 4 为基本单位，然后乘以 1（或者如果我们更时髦的话，乘以 x.5）以获得我们的系统：
但斐波那契系统可以通过将两个前值相加来发挥作用。
就像我们之前发现的那样，这确实……很奇怪，但这里有一些我喜欢的东西。
在示例组件上比较系统时，差异很小，但这不正是我们的目的吗？这是一个反问句