很多设计稿看起来“差一点”，原因不是颜色或图片，而是间距和对齐不稳定。人眼对对齐线非常敏感，当你在不同模块里分别用 13、15、17 这样的随手间距时，页面会出现一种说不清的别扭。网格的作用就是把这些随手值收敛到一套规则里，让页面在不同模块之间保持同一种秩序。
网格不是为了限制创意，而是为了把注意力从“对齐没对齐”这种低价值问题解放出来，让你把时间花在信息结构和交互路径上。
最容易落地的是 8px 体系：所有内外边距、组件高度、圆角、阴影偏移尽量使用 8 的倍数。你会得到两种好处：一是视觉节奏变得一致，二是开发实现更简单，因为取值更少、复用更高。
如果你的产品信息密度更高，可以用 4px 作为更小的单位，但仍建议把常用间距固定在少量档位，例如 8、12、16、24、32。档位越少，系统越稳。
移动端常见 4 列或 8 列，桌面端常见 12 列。列数的差异本质上是“内容区怎么被切分”。比列数更重要的是左右安全边距和内容区宽度：如果边距不稳定，列再多也只会把不稳定放大。
建议先定三个值：页面左右边距、列间距、最大内容宽度。然后再决定是否需要不同断点。这样你的页面在适配时不会出现“某个断点突然变得挤”或“突然空一大片”的问题。
当所有模块共享同一套列线时，用户可以用更少的眼动成本完成扫描。比如列表页里，标题、价格、标签各自成列；详情页里，标题、摘要、按钮共享同一条左边界。你会发现页面自然变得干净，因为信息不再彼此抢位置。
对齐不是为了漂亮，是为了降低理解成本。越复杂的页面，越需要网格来保持“起点一致”。
网格不是不能被打破，而是打破必须有理由。常见的合理打破包括：强调一个主视觉、为关键行动预留更大的触达区域、或在长内容里加入可视化分隔。关键是：即使某个模块跨列或溢出，也要在其他维度上保持规则，例如间距仍然是 8px 体系，对齐线仍然能被追踪。
你可以把网格理解成一条“基准线”。偏离基准线是设计手法，但回到基准线是秩序感的来源。
当你觉得页面“差一点”，通常不是某个元素不好看，而是规则不稳定。你可以拿一个真实页面做拆解：先把所有组件的左右边距标出来，看看是否出现 12、14、15 这种随手值；再把每个模块的上下间距标出来，看看是否出现 18、19、21 这种不成体系的节奏；最后把对齐线画出来，看看标题、正文、按钮的起始位置是否一致。只要这三步做完，网格与对齐的大部分问题会暴露出来。
接着把这些“随手值”收敛到一套离散集合里，例如 4/8/12/16/24/32。不要追求值越多越精细，值越少越容易统一。统一之后再做一次微调：如果信息密度太高，优先增加段落间距；如果信息分组不清，优先增加组与组之间的间距，而不是乱加装饰线。
真正有效的设计系统不是一份文档，而是一套在设计稿里能直接复用的组件。把你确定的间距规则写进组件：卡片的 padding 固定为 16，标题到正文固定为 8，正文到按钮固定为 16。这样你每画一张新页面，规则就会自动被复用，团队也不会在交付时“凭感觉还原”。
在与开发对齐时，建议把关键规则转换成 token 的形式：Spacing-8/16/24，Radius-8，Shadow-1/2。开发只要按 token 取值，就能在不同端保持一致。最终用户看到的不是“某一页好看”，而是“整个产品都稳定”。
当你觉得页面“差一点”，通常不是某个元素不好看，而是规则不稳定。你可以拿一个真实页面做拆解：先把所有组件的左右边距标出来，看看是否出现 12、14、15 这种随手值；再把每个模块的上下间距标出来，看看是否出现 18、19、21 这种不成体系的节奏；最后把对齐线画出来，看看标题、正文、按钮的起始位置是否一致。只要这三步做完，网格与对齐的大部分问题会暴露出来。
接着把这些“随手值”收敛到一套离散集合里，例如 4/8/12/16/24/32。不要追求值越多越精细，值越少越容易统一。统一之后再做一次微调：如果信息密度太高，优先增加段落间距；如果信息分组不清，优先增加组与组之间的间距，而不是乱加装饰线。
真正有效的设计系统不是一份文档，而是一套在设计稿里能直接复用的组件。把你确定的间距规则写进组件：卡片的 padding 固定为 16，标题到正文固定为 8，正文到按钮固定为 16。这样你每画一张新页面，规则就会自动被复用，团队也不会在交付时“凭感觉还原”。
在与开发对齐时，建议把关键规则转换成 token 的形式：Spacing-8/16/24，Radius-8，Shadow-1/2。开发只要按 token 取值，就能在不同端保持一致。最终用户看到的不是“某一页好看”，而是“整个产品都稳定”。
当你觉得页面“差一点”，通常不是某个元素不好看，而是规则不稳定。你可以拿一个真实页面做拆解：先把所有组件的左右边距标出来，看看是否出现 12、14、15 这种随手值；再把每个模块的上下间距标出来，看看是否出现 18、19、21 这种不成体系的节奏；最后把对齐线画出来，看看标题、正文、按钮的起始位置是否一致。只要这三步做完，网格与对齐的大部分问题会暴露出来。
接着把这些“随手值”收敛到一套离散集合里，例如 4/8/12/16/24/32。不要追求值越多越精细，值越少越容易统一。统一之后再做一次微调：如果信息密度太高，优先增加段落间距；如果信息分组不清，优先增加组与组之间的间距，而不是乱加装饰线。
真正有效的设计系统不是一份文档，而是一套在设计稿里能直接复用的组件。把你确定的间距规则写进组件：卡片的 padding 固定为 16，标题到正文固定为 8，正文到按钮固定为 16。这样你每画一张新页面，规则就会自动被复用，团队也不会在交付时“凭感觉还原”。
在与开发对齐时，建议把关键规则转换成 token 的形式：Spacing-8/16/24，Radius-8，Shadow-1/2。开发只要按 token 取值，就能在不同端保持一致。最终用户看到的不是“某一页好看”，而是“整个产品都稳定”。
