8px 可以成为间距尺度的基础，但真正的响应式系统还需要列、边距、Gutter、内容宽度、组件密度和断点共同工作。本文给出一套从内容行为出发建立 Grid 与 Spacing Token 的方法。
很多团队的布局规范只有一句：“我们使用 8px Grid。”然后设计师仍然会在页面里使用 12、20、24、40、48、72 各种数值，开发也不知道什么时候应该跟着页面缩小间距。问题不是 8px 不对，而是把一个基础尺度误当成了完整布局系统。
01 一、先区分三件事：Grid、Spacing 和 Sizing
Grid 决定页面大结构：列数、外边距、Gutter、内容区域如何随宽度变化。Spacing 决定元素之间的关系：标题与正文、卡片内部、区块之间的间隔。Sizing 决定组件或资源本身尺寸，例如按钮高度、图标尺寸、侧栏宽度。三者可以共享基础尺度，但不能混为一张“8 的倍数表”。
02 二、为什么 8px 常见，但不应该机械遵守？
IBM Carbon 的 2x Grid 以 8px mini unit 作为几何基础，并通过倍数建立尺寸与节奏；这类方法的价值是减少随机数值，让视觉关系可预测。但文字本身有字体 metrics，1px 边框、图标光学校正、不同平台控件尺寸也不一定恰好落在 8 的倍数上。真正应该坚持的是“有限尺度 + 明确语义”，而不是为了凑倍数破坏视觉或可用性。
03 三、页面栅格先从内容行为出发
不要先问“iPad 断点是多少”，先问内容在变窄时发生什么：三列卡片什么时候开始拥挤？数据表最小可读宽度是多少？侧边栏什么时候会挤压主任务？标题一行变三行以后还合理吗？断点应该出现在布局无法继续维持信息层级的位置，而不是只照搬设备型号。
Carbon 当前的 2x Grid 仍然提供基于 CSS Grid 的 16 列体系，并允许不同断点定义列跨度。它说明了一个实用原则：列是结构工具，不是要求每个元素都填满固定模板。复杂布局可以共享同一组关键对齐线，同时允许组件根据内容采用固定、流动或混合尺寸。
04 四、建立“页面层”和“组件层”两套间距语义
页面区块之间的 64px 和按钮图标之间的 8px 虽然都叫 spacing，但语义完全不同。建议至少分为两层：组件内部使用紧凑尺度，例如 4/8/12/16/24；页面结构使用更大的 section scale，例如 24/32/48/64/96。具体值可以根据品牌和密度调整，关键是不要让所有间距都来自同一个没有语义的数组。
05 五、Token 命名最好表达用途，而不是只表达数值
如果系统里只有 space-100、space-200，使用者仍然需要背数值。可以保留基础 Token，同时建立语义别名，例如 spacing-control-gap、spacing-card-padding、spacing-section-small。语义 Token 的优势是未来整体调整密度时不需要逐页面替换。DTCG 2025.10 已提供稳定的设计 Token 交换格式，让 Token 能够以结构化方式在工具和代码之间流转，但 Token 的语义体系仍然需要团队自己设计。
06 六、响应式不等于“所有间距按比例缩小”
移动端空间少，但并不意味着所有 padding 都应该从 24px 变 12px。触控目标、文本可读性和信息分组仍然需要足够空间。更合理的是区分：需要保持的组件内部尺寸、可以降低的页面留白、需要重排而不是缩小的结构。比如 Desktop 的 3 列卡片到手机端应该变成单列，而不是把每张卡片压到三分之一宽度。
07 七、密度模式应该是显式能力
后台产品常有“舒适”和“紧凑”两种需求。不要让设计师在页面里偷偷把表格行高、表单间距和按钮尺寸各缩一点。可以定义 density token 或 compact component size，让密度成为系统级选择。这样既能提高数据密集场景效率，也不会破坏交互目标和视觉一致性。
08 八、用关键线而不是“每个盒子都要贴 Grid”
栅格最有价值的是提供稳定的对齐关系。标题、正文、卡片、表格和图表应该共享关键竖线，形成可扫描的视觉节奏。但组件内部不需要为了对齐外部列而扭曲自己的 padding。页面 Grid 和组件内部 Layout 是两个层级。
09 九、断点必须结合真实内容测试
建立规则后，用极端内容测试：最长中文标题、英文长单词、德语、200% Zoom、浏览器侧栏、超宽屏、小窗口、系统字体放大。不要只检查 Figma 的 375 / 1440 两张静态稿。真正的响应式规范应该描述“行为”，例如侧栏在何种条件下折叠、卡片何时换列、表格何时横向滚动，而不是只提供两个像素值。
10 十、一套可落地的建立顺序
- 盘点当前产品最常见的页面结构和组件密度。
- 确定基础 spacing scale，删除几乎没人使用的随机值。
- 定义内容最大宽度、外边距、Gutter 和主要列结构。
- 通过真实内容寻找断点，而不是先套设备列表。
- 建立语义 Spacing Token，并映射到 Figma 与代码。
- 给组件定义固定/流动/混合尺寸行为和密度模式。
- 在典型页面和极端内容下验证，再写进文档。
好的布局系统不会让所有页面看起来一模一样，而是让团队在面对不同页面时使用同一套空间语言。你不需要消灭所有例外，但应该让例外是经过判断的，而不是因为“这个地方看着差不多”。
常见问题
8px Grid 是行业标准吗？
不是强制标准，而是一种常见的尺度方法。4px、8px 或其他基础单位都可以，关键是形成有限、可解释、可复用的空间尺度。
响应式断点应该按照设备尺寸定义吗？
可以参考设备范围，但更推荐由内容和布局失效点决定。设备会变化，内容何时无法维持可读性才是更稳定的依据。
Spacing Token 要不要全部用语义名称？
通常保留基础数值 Token，再通过语义 Token 引用它们更灵活。这样既能复用尺度，又能表达用途。
移动端是不是应该把间距全部缩小？
不是。页面级大留白可以缩小，但触控、可读性和信息分组需要的空间不能机械压缩。很多结构应该重排而不是缩放。
栅格和组件 Auto Layout 是一回事吗？
不是。栅格解决页面级结构与关键线，Auto Layout 或组件布局处理局部内容关系。两者应协同但不互相替代。
相关服务与进一步咨询
链接复制成功
