4px间距与斐波那契间距的比较

当我跟新设计师合作时，我有一个固定的流程。会上Google搜“8px 网格 Medium.com”，找到 Elliot Dahl 的全面指南并分享给他们。指南的链接。

这份指南非常棒，非常推荐。直到今年为止，我还将4的倍数（但不是8！）当作我的设计圣经。新元素吗？左内边距是不是16，顶部内边距是12？每次……都是这样。

一个带有标签的组件，标签指向填充值。左右间距为16，上下间距为12。

尽管这种方法有助于提高设计的可预测性，并且快速设置组件成为肌肉记忆，但我还是忍不住觉得我们已经把自己带入了一个不幸的世界，这里的一切看起来都差不多。

对含有偶数填充的药丸成分组合与含有奇数填充的药丸成分组合进行比较。

或许我们可以试试看用奇数来划分间距，而不是偶数，这样可以搞点新鲜，保持我们头脑清醒。

我已经准备好了，要去网格监狱也没问题。

我对4px计算网格系统不太满意，因为它们无论是垂直还是水平方向都可能会显得有点松。虽然这在产品设计中已经成为一种事实标准，但我发现自己在组件中的一些像素上过于关注，感觉有点多出来的感觉。

使用传统间距方式，或者特殊的间距方式，并在其上覆盖了填充值，进行相同的药丸成分比较。

让我们来看一个对比。在上面图片的左边，我们有按照传统间隔排列的组件，它们采用的是4px间隔系统。在右边，我们将间隔调整为奇数值。我个人觉得这样更好。你觉得呢？

在这里，我手动调整了一两个像素，以微调间距，使其感觉更紧密。这一点在第二颗和第四颗胶囊中尤为明显，对比之下，你会发现奇数位置的胶囊间距感觉更加一致。

这可能是因为字体的固有大小会破坏间距，从而引起人们的质疑。

咱们看看！

使用4px系统或奇数系统对比6种字体：Oxygen Mono，Noto Serif，Roboto，Poppins，Palatino，Koulen 字体。

有意思！感觉差别不大。不论是等宽还是衬线字体，处理间距时，最终效果依然紧凑。

重要的是要注意，行高会对整体效果产生影响。对于单行字，设置为100%行高是没问题的，但对于大段的文字，我们可能需要做些尝试。

重要

这些药丸里的字体和图标都被设置成了相同的大小！也许正是这种内部一致、外部不同的搭配能给我们带来和谐。

Notion邮件首页，带有标出像素完美的表单标注。

请注意：此资产的先前版本中 Notion 按钮的填充值不正确。它列出了垂直方向为 7px 和水平方向为 15px，但当前网站使用的是垂直方向为 6px 和水平方向为 14px。感谢 Mahan 和 lucas 指出。

当我浏览他们新推出的邮件登录页面时，我发现了Notion处理这件事的方式。

他们巧妙地混合使用偶数和奇数取得了很好的效果。他们将按钮的宽度和高度设置为奇数以获得更好的手感，但又采用经典的边框半径计算方法，从而实现了内外元素的半径进行了精细调整。

4像素网格系统与斐波那契序列的对比。

如果我要尝试将这个想法变为一个系统，我可能会想要至少尝试让疯狂有序化。在这种情况下，我们可以依靠像斐波那契数列这样的模式来处理繁重的工作。

4像素网格

在4px系统中，我们这样设置——基本单位是4，然后乘以1（或者乘以1.5，如果我们想要玩点花样）来得到我们的系统。

不过，这个斐波那契系统是通过把前两个数值加起来来工作的。

斐波那契数列间距系统。

就像我们之前发现的那样，这确实……挺奇怪的，但这里还是有我喜欢的地方。

用滑块来对比4px网格系统和斐波那契网格。

当我们比较一个组件上的系统时，区别不大，但这不正是我们来这里的目的吗？🤣

有些行业内的聪明人开发了一些我推荐你们看看的工具，比如：

1. 乌托邦.fyi — 一个乌托邦的网站
2. 符号.app — 一个关于符号的文档页面
3. 比例.app — 一个关于比例的应用

小小更新
Filip 发现我的按钮网格显示的值不对，它们被错误地调整了大小！我已经替换了这张图片，现在按钮之间的间距正确地反映了它们的实际值。

如果这段内容看起来熟悉，它最初发布在 https://read.cv 上，但在他们关闭之前。另外，你还可以在 Twitter 上找到两个独立的发帖 threads .