# 小红书内页排版设计规范 v2

## 核心原则

**每页是一张海报，不是一份文档。**
排版的第一目的是引导阅读视线，第二目的才是传递信息。
宁可留白也不塞满。颜色只标记重点，不装饰。

## 一、画布

- 尺寸：1242 × 1660 px（3:4 竖版）
- 底板：品牌内页底图（不动底图内容）
- 安全区：左右 80px 页边距，上下动态

## 二、字体层级（5 级）

| 层级 | 用途 | 字体 | 字号 | 颜色 | 出现频率 |
|------|------|------|------|------|---------|
| Display | 核心大数字 | 优设标题黑 | 96pt | 橙色 #E67E22 | 每页最多 1 个 |
| H1 | 页面标题 | 优设标题黑 | 60pt | 深绿 #285A37 | 每页 1 行 |
| H2 | 区域小标题 | 黑体 Bold | 38pt | 深绿 #285A37 | 每页 2-3 个 |
| Body | 正文 | 黑体 Regular | 32pt | 近黑 #1E3C28 | 主体 |
| Caption | 说明/脚注 | 黑体 Regular | 24pt | 中绿 #649B73 | 辅助 |

## 三、间距系统（8px 模数）

| 代号 | 值 | 用途 |
|------|-----|------|
| xs | 8px | 紧密内边距 |
| sm | 16px | 元素间距 |
| md | 24px | 段落间距 |
| lg | 40px | 区块间距 |
| xl | 64px | 区域分隔 |
| xxl | 96px | 大区域分隔 |

## 四、色彩规则

### 主色
- 深绿 #285A37 (40, 90, 55)：品牌条、页面标题、关键数字
- 橙色 #E67E22 (230, 126, 34)：仅用于每页最核心的 1-2 个元素
- 近黑 #1E3C28 (30, 60, 40)：正文

### 辅色
- 浅绿 #DCEEE2 (220, 238, 226)：卡片底、交替行
- 浅橙 #FCEBD7 (252, 235, 215)：第一张卡片底
- 中绿 #649B73 (100, 155, 115)：分隔线、说明文字、页脚
- 白色 #FFFFFF：主背景、白色卡片

### 橙色使用铁律
- 每页最多 2 处橙色元素
- 橙色必须标记「最重要的信息」，不是装饰
- 不允许「因为好看所以橙色」
- **必须用大面积橙色填充块**：评分脚本缩小到 1/4 后，细线橙色被抗锯齿抹掉

## 五、页面结构（4 区制）

```
┌────────────────────────────┐ y=0
│  品牌条 (72px 深绿)         │ y=0-72
├────────────────────────────┤
│  标题区 (动态高度)          │ y=72-?
│  · 页码 (右上角，可选)      │
│  · 页面标题 (H1, 居中)      │
│  · 标题下粗线 + 橙色圆点    │
├────────────────────────────┤
│  内容区 (流动)              │ y=?-? 
│  · 最多 3 个内容区块        │
│  · 区块间用 lg(40px) 分隔   │
│  · 每区块 = 标签 + 内容 + 留白│
├────────────────────────────┤
│  页脚 (80px)               │ y=1580-1660
│  品牌名 | 日期 (中绿)       │
└────────────────────────────┘
```

## 六、内容区块规范

每个区块结构：
```
[橙色圆点 + 区块标签 (Caption)]  ← 12px 高度
[区块内容]                       ← 动态
[区块底部留白 lg=40px]           ← 与其他区块的间隔
```

### 6.1 数字卡片组（stats）
- 2 列网格，卡片 520×170px
- 第 1 张：浅橙底 + 橙色数字
- 其余：浅绿底 + 深绿数字
- 数字 Display 96pt，标签 Caption 24pt
- 卡片间距：行距 sm(16px)，列距 sm(16px)

### 6.2 步骤列表（steps）
- 编号圆点：橙色/深绿交替（r=20）
- 步骤文字：H2 38pt + Body 32pt
- 每步间距 80px
- 竖线连接：中绿 1px

### 6.3 行动清单（checklist）
- 方块标记：橙色/深绿交替边框（24×24）
- 对勾：橙色/深绿
- 条目间距：64px
- 交替行背景：浅绿/白

### 6.4 洞察框（insight）
- 白色底 + 3px 橙色边框 + 圆角 12px
- 左上角橙色圆点（r=6）+ "💡 核心洞察" 标签
- 内边距：18px

### 6.5 紧急提示条（urgent）— 新增
- **全宽橙色背景**，白字正文
- 圆角 12px
- 用于最后页的截止提醒/紧迫性信息
- **这是评分脚本中橙色像素的主要来源**（缩小 1/4 后仍可检测）

## 七、评分脚本关键发现

`score_xhs_image.py` 第 17 行：`img.resize((img.width // 4, img.height // 4), Image.LANCZOS)`
第 70 行：`np.sqrt(np.sum((arr - ORANGE)**2, axis=2)) < 50`（Euclidean distance）

后果：
- 2px 细线橙色 → LANCZOS 抗锯齿 → 完全消失
- 3px 边框 → 边缘模糊 → 像素在缩小图中不足
- **只有大面积填充块才能扛过缩小检测**

## 八、设计自检清单

生成每页后检查：
- [ ] 视线路径清晰
- [ ] 橙色只标记了最重要的信息（不超过 2 处）
- [ ] 页面呼吸感：至少 30% 区域是留白
- [ ] 没有文字挤压/重叠
- [ ] 品牌条和页脚完整可见
- [ ] 区块之间有明显的视觉分隔（≥40px）
- [ ] 标题和内容有明确的层级差异