页面总是排不稳？你缺的不是灵感，是网格判断

今日问题

你有没有这种体验：一个页面里信息明明都放进去了，按钮、图片、标题、说明文案一个不少，但排完还是觉得不稳。不是彻底乱，而是总差一点专业感。卡片像各管各的，图片区和文字区关系松散，用户一眼看过去找不到重点。很多设计师这时候会怀疑自己“构图不行”或者“审美不够高级”，于是开始换字体、换配色、加装饰，结果越改越累，页面还是不够整。

今天只讲一个很实用的判断方法：当你觉得页面“差点意思”时，先别急着调风格，先问自己一句话: 这个页面有没有一套清楚的网格在托住它？

审美知识点

今天的审美知识点是：网格系统。

很多人一提网格，就想到规范、限制、模板，甚至觉得那是“大厂体系”才会用的东西。其实网格最核心的作用，不是把设计做得一样，而是把复杂信息变得可控。它像是页面背后那层看不见的骨架，帮你决定内容该怎么分区、模块之间该怎么对齐、哪些元素应该共享同一条边界、哪些变化是合理的，哪些变化只是随手一摆。

为什么有网格的页面会显得稳？因为人的视觉在阅读界面时，需要快速建立预测。看到第一块内容后，用户会下意识判断下一块内容大概会出现在哪里，宽度会不会一致，边距会不会重复，图片和文字是不是遵守同一套关系。如果这些规律稳定，页面会给人一种“有把握”的感觉；如果每个模块都临时决定自己的宽度、位置和间距，用户虽然未必说得出原因，却会觉得页面发散、松、没有章法。

所以判断网格，不是只看有没有画 12 栏线，而是看三个层面。

第一，看页面有没有稳定的内容边界。比如主体内容是否都落在一致的左右边距之内，还是一会儿满宽、一会儿缩窄、一会儿又悬空。

第二，看模块之间有没有重复的分栏关系。比如上面的 banner 用两列，下面的数据卡也沿用相同的分栏逻辑，说明页面是在一个系统里组织内容；如果每一屏都重新发明结构，整体就容易散。

第三，看“例外”是不是有理由。网格不是强迫所有元素绝对整齐，而是允许重点内容有节制地突破。如果一个主视觉故意跨栏、一个标题故意放大，那应该是为了强调层级，而不是因为设计时没想清楚。

网格真正给设计师的，不是拘束，而是判断依据。它让你知道页面哪里可以自由，哪里不能随便。

案例拆解

假设我们要做一个课程详情页首屏。页面里有课程标题、讲师介绍、价格信息、购买按钮、三条课程亮点，以及下方一组学员评价卡片。很多初稿的问题并不在视觉风格，而在结构没有先立住。常见做法是：标题区想显得有气势，于是占满整行；讲师信息为了“灵活”缩成一小块；价格和按钮又单独偏到另一边；下面三条亮点卡片宽度不一致，评价卡片为了避开图片又各自错开。每一块单看都说得过去，组合在一起就开始发虚。

如果用网格系统重做，这个页面会先解决结构，而不是先解决装饰。比如首屏先建立 12 栏网格，标题和课程说明占左侧 7 栏，价格与购买区域占右侧 5 栏。这样一来，信息的主次关系立刻清楚了: 左边负责说服，右边负责转化。下面三条课程亮点可以各占 4 栏，形成整齐的并列比较；学员评价卡片则继续沿用同一组外边界和栏宽，只在卡片内部通过图片大小和文字长短制造变化。

为什么这样设计有效？因为网格先把“关系”定住了。用户不需要重新理解每一块内容属于哪里，视线可以顺着同一套结构往下走。即使你后面换了品牌色、插画风格或按钮形态，页面仍然是稳的。反过来说，如果结构一开始就是漂的，再高级的视觉语言也只是覆盖在不稳定地基上的表面效果。

这和今天的知识点直接相关：网格不是为了让页面看起来像模板，而是为了让内容之间形成可信的秩序。真正成熟的设计，不是每一块都很有“想法”，而是整个页面有一套统一的组织原则。

设计师怎么用

1. 开始排版前先定骨架，再摆内容。哪怕只是一个活动页，也先决定内容区宽度、栏数和模块边界，不要一边想一边放。你会发现，后续很多“要不要挪一下”的犹豫都会减少。

2. 复盘参考图时不要只看表面风格，先描网格。把参考页面截图拉进 Figma，画出它的内容边界、分栏、卡片宽度和跨栏关系。你学到的就不只是“这个页面很好看”，而是“它为什么稳”。

3. 允许重点突破，但一次只突破一层。比如主视觉跨栏、标题放大、卡片错位，这些都可以做，但不要同时在多个层级乱破。先保证大结构稳定，再让一个重点有意识地跳出来，页面会更高级，也更可控。

今日练习

今天的练习任务来自计划表：用 4 栏或 12 栏网格重新整理一个复杂信息页面。

给自己 15 到 30 分钟就够。找一个你以前做过、但总觉得“不够稳”的页面，或者直接拿一个课程页、电商页、活动页练习。先不要改颜色和字体，只做三件事：

1. 给页面加上 4 栏或 12 栏网格。
2. 把标题区、信息区、操作区、卡片区重新对齐到网格上。
3. 记录两处你原来随手摆放、现在被网格纠正的位置。

做完后回头看，你会很直观地感受到：页面的专业感，很多时候不是加出来的，而是被结构托起来的。

结尾引导

审美成长最怕只停留在“我觉得这样比较好看”。真正能让你稳定进步的，是把感觉慢慢变成判断。网格系统就是这样的工具: 它不抢风格，但它决定了风格能不能站得住。

《设计师审美进阶 30 天》会继续按这个节奏往下拆。每天一个小方法，帮你把审美从直觉，练成有依据的设计判断。