Zack Layout And Rhythm

---
name: zack-layout-and-rhythm
description: "栅格、留白、节奏与信息密度。包含容器与断点体系、间距尺度、垂直节奏的疏密设计、bento 网格的无空洞排版、区块形式变化、视觉重力与视觉层级。当页面看起来「乱」「空」「散」「每屏都一样」「没有重点」时使用。"
license: MIT
metadata:
  author: Zack
  homepage: https://github.com/yckonnnnn/zack-design-skills
  version: "1.0.0"
---

# 布局与节奏

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 铁律

1. **每一格必须被填满。** 内容撑不满就改 span，不要留空。
2. **不要求面积相等，但求每行加满 12。** 每一行的 span 之和必须 = 12。
3. **每格内容类型要不同。** 一个数字、一张图、一段代码、一句引用、一个小图表。六格都是「图标 + 标题 + 两行文字」等于没做 bento。
4. **每格字号不一定要一样。** 主格的字号可以明显更大。
5. **移动端降为单列**，且顺序按重要性重排（不要直接沿用桌面顺序）。
6. **gap 要小（8–16px）**，bento 的美感来自「紧密拼接的一整块」，gap 大了就散成普通卡片网格。

### 5.3 Bento 自检

- [ ] 每一行的 span 加起来是 12 吗？
- [ ] 有没有任何一格是空的或内容明显撑不满的？
- [ ] 六格里有几种不同的内容类型？**≥ 3 种。**
- [ ] 移动端顺序是否重排过？

---

## 六、视觉重力

「重点」不是加粗放大，是**让一处明显区别于周围**。

四种建立重力的手段，按效果排序：

1. **尺度** —— 字号差 2 倍以上才有重力（1.2 倍没人看得出）
2. **留白** —— 周围空得越多，越重
3. **对比** —— 深色底 / 高对比度
4. **位置** —— 左对齐的大标题、首屏左上角

**反面**：全靠颜色和阴影。到处都亮 = 没有重点。

### 层级自检（眯眼看）

把页面截图缩到 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)` |