布局与节奏
AI 生成的页面最典型的病不是丑，是均匀。每一屏同样的留白、同样居中的内容、同样宽的三张卡。均匀 = 没有层级 = 没有重点 = 廉价。
节奏就是层级。 留白和尺寸的疏密差异，是唯一不需要颜色就能建立主次的手段。
一、间距尺度
只用一套基数，全部取值来自同一个数列：
css:root { --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 176px; --s-12: 240px; }
规则：任何 padding / margin / gap 都必须取自这套值。 出现 margin-top: 37px 就是没有系统。
分配逻辑（核心）：
| 关系 | 间距 | 说明 |
|---|---|---|
| 相关内容（标题 + 副标题） | --s-2 ~ --s-3 | 越近越相关 |
| 同组元素（卡片内的行） | --s-4 ~ --s-5 | |
| 组之间 | --s-7 ~ --s-8 | 明显大于组内 |
| 区块之间（section） | --s-9 ~ --s-11 | 必须远大于组之间 |
| 首屏 / 转折屏 | --s-11 ~ --s-12 |
关键比率：区块间距 ÷ 组内间距 ≥ 3。 达不到 3 倍，视觉上就分不出结构，所有内容糊成一片。
二、垂直节奏：制造疏密
反面教材：全页 8 个 section，每个都是 padding: 96px 0。
正确做法：按信息重要性分配，形成呼吸曲线。
| 区块类型 | 上下留白 |
|---|---|
| 首屏 | 顶部小、底部大（--s-9 / --s-10） |
| 密集信息（表格、对比、规格） | --s-7 ~ --s-8（收） |
| 常规叙述 | --s-9 |
| 关键转折（价格页前、大主张） | --s-11 ~ --s-12（放） |
| 深色对比屏 | --s-11（放，让对比更重） |
| 页脚 | 顶 --s-10、底 --s-7 |
一条实用规则：在最重要的那个 section 前后各多加一档留白。留白是「这里重要」的声明。
三、容器与断点
css:root { --container: 1240px; /* 主容器 */ --container-narrow: 760px; /* 长文 / FAQ */ --gutter: clamp(20px, 4vw, 40px); /* 左右内缩 */ } .container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
- 内容永远不顶到容器边缘，必须有 gutter。内容贴边是廉价感的来源。
- 全出血（full-bleed）区块用于背景色/图片，内部内容仍用容器约束。
- 断点用内容决定，不用设备决定：常见在
480 / 768 / 1024 / 1280。 - 布局优先用内在响应式（
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))），少写媒体查询。
四、版式形式库
同一页面至少用 4 种不同的区块形式。反复用「眉标 + 标题 + 副标题 + 三卡」是 AI 味的核心症状。
| 形式 | 用途 | Grid 骨架 |
|---|---|---|
| 左右分栏 | 产品展示、功能详解 | 1.1fr 1fr，视觉可左可右但方向不要反复镜像 |
| Bento 网格 | 功能总览、特性集合 | 不等跨 grid，混合内容类型 |
| 编辑式长栏 | 叙述、故事、案例 | 单栏 --container-narrow + 大首字/引文 |
| 全宽对比 | 改前改后、方案对比 | 两栏等分，中间发丝分隔 |
| 数据条 | 硬指标 | 3–4 个数字横排，尺寸不等 |
| 步骤流水 | 流程、上手引导 | 横向或纵向，带连接线 |
| 代码/终端块 | 开发者产品 | 深色表面 + 等宽字体 + 可复制 |
| 全屏引言 | 客户原话 | 超大字号居中，短 |
| 规格表 | 参数、版本差异 | 表格，tabular-nums |
| 深色转折屏 | 打破节奏 | 全出血深色，前后各加一档留白 |
自检：把页面缩略图排成一列看。如果每屏都长得一样，重做版式。
五、Bento 网格（重点）
Bento 是当下最容易做、也最容易做坏的形式。做坏的方式只有一个：留空洞。
5.1 骨架
css.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; /* 小 gap，让格子显得是一整块 */ grid-auto-rows: minmax(120px, auto); } .bento > *:nth-child(1) { grid-column: span 7; grid-row: span 2; } /* 主格 */ .bento > *:nth-child(2) { grid-column: span 5; } .bento > *:nth-child(3) { grid-column: span 5; } .bento > *:nth-child(4) { grid-column: span 4; } .bento > *:nth-child(5) { grid-column: span 4; } .bento > *:nth-child(6) { grid-column: span 4; }
5.2 铁律
- 每一格必须被填满。 内容撑不满就改 span，不要留空。
- 不要求面积相等，但求每行加满 12。 每一行的 span 之和必须 = 12。
- 每格内容类型要不同。 一个数字、一张图、一段代码、一句引用、一个小图表。六格都是「图标 + 标题 + 两行文字」等于没做 bento。
- 每格字号不一定要一样。 主格的字号可以明显更大。
- 移动端降为单列，且顺序按重要性重排（不要直接沿用桌面顺序）。
- gap 要小（8–16px），bento 的美感来自「紧密拼接的一整块」，gap 大了就散成普通卡片网格。
5.3 Bento 自检
- 每一行的 span 加起来是 12 吗？
- 有没有任何一格是空的或内容明显撑不满的？
- 六格里有几种不同的内容类型？≥ 3 种。
- 移动端顺序是否重排过？
六、视觉重力
「重点」不是加粗放大，是让一处明显区别于周围。
四种建立重力的手段，按效果排序：
- 尺度 —— 字号差 2 倍以上才有重力（1.2 倍没人看得出）
- 留白 —— 周围空得越多，越重
- 对比 —— 深色底 / 高对比度
- 位置 —— 左对齐的大标题、首屏左上角
反面：全靠颜色和阴影。到处都亮 = 没有重点。
层级自检（眯眼看）
把页面截图缩到 20% 大小，或者眯起眼看：
- 能一眼看出从哪读到哪吗？
- 第一眼落在哪里？落点是你想让访客看的地方吗？
- 如果每一块灰度都差不多，就没有层级。
七、叠压与层级（有条件允许）
叠压（负边距、旋转、元素互相压边）是制造深度和编辑感的有效手段，但它有硬边界：
| 场景 | 允许吗 |
|---|---|
| 装饰性元素叠压（色块压边、图片压出容器） | ✅ 桌面端可以 |
| 卡片轻微旋转叠放（-2° ~ 3°） | ✅ 桌面端可以，最多 3 张 |
| 文字压文字 | ❌ 任何情况都不允许 |
| 文字压在复杂图片上 | ❌ 除非加了足够遮罩保证对比度 ≥ 4.5:1 |
| 任何叠压出现在 768px 以下 | ❌ 必须收起为正常流 |
768px 以下必须取消所有叠压。 原因不是审美，是事故：叠压元素在触屏上会造成点击区重叠、误触，以及内容互相遮挡。
css@media (max-width: 767px) { .overlap { margin: 0 !important; transform: none !important; position: static !important; } }
叠压不是必选项。 一页最多用一次，用在最需要深度感的那一屏。
八、常见错误速查
| 症状 | 病因 | 修法 |
|---|---|---|
| 每屏都一样 | 垂直节奏恒定 | 按重要性分配留白，制造疏密 |
| 页面很空 | 留白多但没有重力 | 加大关键元素尺度，不是加内容 |
| 页面很乱 | 缺少「区块间距 ÷ 组内间距 ≥ 3」 | 拉开区块间距，收拢组内间距 |
| 没有重点 | 所有元素等权重 | 只让一处极端突出，其余全部降级 |
| 三张等宽卡片 | 版式形式单一 | 换 bento / 分栏 / 表格 / 数据条 |
| bento 有空洞 | span 之和不是 12 | 重算 span |
| 卡片套卡片套卡片 | 层级表达手段单一 | 第三层改背景色阶差或分隔线 |
| 内容贴边 | 没有 gutter | 加 padding-inline: clamp(20px, 4vw, 40px) |
