当我与新设计师合作时，我有一个固定的惯例。我会去 Google，搜索“8px grid Medium.com”，找到 Elliot Dahl 的综合指南并将其发送给他们。以下是指南。
我几乎把 4 的倍数（不是 8！）视为我的设计。新元素？左边距肯定是 16，顶部是 12 。
虽然这种设计方法有助于提高可预测性，并成为快速设置组件的肌肉记忆，但我不禁认为我们已经陷入了一个不幸的一切看起来都一样的世界。
建议用奇数
也许我们值得考虑使用奇数而不是偶数来作为间距
我对偶数 4px 计算网格系统感到的问题是，它们在垂直或水平方向上都感觉有点松散。虽然这现在是产品设计的事实标准，但我发现自己越来越关注我们组件中感觉像多余几个像素，你怎么看？
让我们来比较一下。上图左侧是传统间距的组件，采用 4px 系统。右侧是我们将间距调整为奇数的组件。个人认为这样更好。您觉得呢？
我在这里所做的是手动上下调整一两个像素，以优化填充，使其感觉更紧密。这在从顶部开始的第二和第四个胶囊中尤为突出，当进行比较时，您可以看到奇数方法感觉填充更加一致。
那么字体呢？
对这个想法的第一个反对意见可能来自于字体因其继承的大小而如何破坏间距的差异。
让我们来看看！
感觉上没什么区别。无论是还是无衬线还是衬线字体，奇数间距的最终结果仍然相同且更紧密。
这里需要注意的是，行高会影响这一切的组合方式。对于设置为 100% 行高的单行文本，此方法效果很好，但对于较大的文本区域，我们需要进行试验
在这些胶囊按钮中，所有字体大小和图标都设置为均等大小！因此，也许内部为偶数、外部为奇数的组合可以为我们带来和谐。
注意：此资产的先前版本在 Notion 按钮上的填充值不正确。它列出的是垂直 7px 和水平 15px，但当前实时站点的垂直填充值为 6px，水平填充值为 14px。感谢Mahan和lucas发现这一点。
最近，我在查看 Notions 的新邮件登录页面时偶然发现了这种处理方法。
他们通过混合偶数和奇数来达到这一目的，效果非常好。他们微调按钮的填充为奇数，以达到良好的手感，然后使用经典的边框半径计算来微调内部和外部元素的半径。
系统化——斐波那契数列简介
如果我尝试将这个想法付诸实践，我可能至少会想尝试建立一种方法来解决这一问题。我们可以依靠斐波那契数列之类的系统来处理繁重的工作。
在 4px 系统中，我们像这样设置间距 - 以 4 为基本单位，然后将其乘以 1（或者如果我们更时髦的话，乘以 x.5）以获得我们的系统：
但斐波那契系统可以通过将两个前值相加来工作。
正如我们之前发现的，这确实……有点奇怪，，但仔细研究这里有我喜欢的东西。
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。
公安局备案号：
专属顾问
