间距计算器

为什么你的 UI 看起来很乱？可能是间距系统出了问题

在 UI 设计中，间距（Spacing）就像音乐中的节拍。如果没有统一的节奏，再精美的图标和字体也会显得杂乱无章。间距计算器通过数学比例，帮助设计师建立一套严谨、可预测的间距系统，从而提升界面的“呼吸感”和一致性。

1. 解决设计中的随意性问题

很多新手设计师在设置间距时往往凭感觉：这里 13px，那里 17px。这种随意的数值会导致界面在视觉上缺乏关联性，且在多页面协作时让前端工程师感到困惑。

解决方案： 采用网格系统（如 8pt 网格）。通过本工具设置基准为 8px，你会得到一组 8, 16, 24, 32... 的阶梯数值。所有的间距都遵循相同的模数，界面自然会呈现出一种秩序美。

2. 利用数学比例创造动感

除了线性的网格系统，你还可以尝试基于几何比例（如黄金比例 1.618）的增长方式。这种比例常用于创建具有节奏感的排版系统，让小间距更精致，大间距更开阔。

应用场景： 小比例（如 1.2 或 1.25）适合紧凑的后台管理界面；大比例（如 1.5 或 1.618）则更适合充满设计感的展示型页面或 Hero 区域。

3. 响应式设计的福音：rem 单位

在前端实现中，使用 rem 单位代替 px 是最佳实践。本工具会自动计算出基于 16px 根字号的 rem 数值。

通过在 CSS 中定义变量（如 --space-md: 1.5rem; ），当你在移动端需要整体缩放间距时，只需调整根元素的 font-size，整个页面的间距系统就会成比例缩放，极大地降低了维护成本。

4. 建立间距规范的 4 个建议

• 限制选择： 不要提供过多的间距选项，通常 7-9 个数值就足以覆盖所有场景。
• 语义化命名： 在代码中使用 xs, sm, md, lg 等命名，而不是 space-8px，这样在调整设计规范时无需修改业务逻辑代码。
• 内外有别： 通常容器的内边距（Padding）应该比元素间的间距（Margin）稍微大一点，以产生包围感。
• 垂直律动： 确保垂直方向上的间距能够引导用户的阅读流，标题上方的间距通常应大于下方的间距。