---
type: v0.1.8 · 详情页 5 类 Hero 模板设计规范
version: v0.1.8
updated: 2026-04-25
作者: 主 Claude（深度审视后）
适用: 化妆台 v5 + 升降桌 v5 共享模板库
---

# v0.1.8 · 详情页 5 类 Hero 模板设计规范

## 0 · 三层模板体系总览

| Layer | 内容 | 是否差异化 | 占比 |
|---|---|---|---|
| **Layer 1 · 全局 VI** | Brand block / Specs table / Trust pills 形状 / Footer 叙事 | ❌ 锁死 | 70% 内容 |
| **Layer 2 · Hero 模板** | 5 类（主流/高端/网红/测款/DIY）| ✅ 按 SPU 类型 | 20% 内容 |
| **Layer 3 · 卖点 SVG 模块** | 8-10 个可复用模块库 | ⚙️ 按 SKU 选 3-4 个 | 10% 内容 |

## 1 · 5 类模板矩阵

| 模板 | demo 文件 | 适用 SPU | 平台 | 视觉调性 |
|---|---|---|---|---|
| 1 · 主流型 | [模板1_主流型_0501_demo.html](模板1_主流型_0501_demo.html) | 0501 / 0530 / 0513A | CD / SHEIN / AL | 粉+米暖 · 模特卧室 |
| 2 · 高端型 | [模板2_高端型_0884_demo.html](模板2_高端型_0884_demo.html) | 0883 / 0884 / 0885 | AL / CD / SHEIN | 深米+玫瑰金+黑曜 · 限量编号 |
| 3 · 网红型 | [模板3_网红型_0890_demo.html](模板3_网红型_0890_demo.html) | 0890 / 0891 异形镜 | SHEIN / AE | 深色+LED 夜光+紫月 · TikTok 风 |
| 4 · 测款型 | [模板4_测款型_0743_demo.html](模板4_测款型_0743_demo.html) | 0743 €99 测款 | AE Choice | 白底+Choice 红+大数字 · 简洁直接 |
| 5 · DIY 型 | [模板5_DIY型_0501_MM_demo.html](模板5_DIY型_0501_MM_demo.html) | Tozey 全 MM SPU | MM | 工业蓝+工具黄 · 蓝图分解 |

## 2 · 视觉色板（每模板独立）

### 2.1 · 主流型（Mainstream）
- 主背景：`#fce7f3` (粉) → `#fff` (白)
- 强调：`#831843` (深玫红) · `#c96442` (橙红)
- 米色调：`#fef3e7` · `#fef5ec`
- 文字：`#1a1915` 黑 · `#44403c` 深灰 · `#78716c` 中灰
- 模特剪影：`#c9a8b0` (温柔肤色)

### 2.2 · 高端型（Premium）
- 主背景：`#f5e6d3` (深米) → `#fff` → `#fef3e7`
- Hero 反差：`#1a1915` (黑曜) 背景 + `#fcd34d` (金) 描边
- 玫瑰金渐变：`#fef3e7` → `#fcd34d` → `#7c4f14`（brass-plated 质感）
- 主红：`#c96442` (玫瑰铜)
- 文字：`#1a1915` + `#7c4f14` (秋叶棕)

### 2.3 · 网红型（Aesthetic）
- 主背景：`#0a0a0a` 黑曜 + `#1a1325` 紫黑
- LED 暖光：`#fef3c7` (柔米黄)
- 紫月：`#7c3aed` (主) · `#a78bfa` (副) · `#c4b5fd` (浅)
- 玫瑰金辅：`#fcd34d`
- 文字：`#fff` 主 · `#a78bfa` 副 · `#fcd34d` 强调
- 星点：`#fff` 透明度 0.3-0.7

### 2.4 · 测款型（Test）
- 主背景：`#fff` 白 · `#fafaf7` 米白
- Choice 红：`#dc2626` (主) · `#fef2f2` (浅背景)
- 信任绿：`#16a34a` (主) · `#dcfce7` (浅背景)
- 黑边框：`#1a1915` 1.5-2px
- 文字：`#1a1915` 黑 · `#7c2d12` 深红 · `#78716c` 灰

### 2.5 · DIY 型（Industrial）
- 主背景：`#f5f5f4` 米白 · `#fff`
- 蓝图蓝：`#0c4a6e` (主) · `#082a4a` (深) · `#a8c8ed` (浅)
- 工具黄：`#fbbf24` (主) · `#fef3c7` (浅)
- 灰：`#44403c` 石墨 · `#78716c` 中灰
- 信任绿：`#16a34a`（与测款型共用）

## 3 · 字体规范（每模板）

| 模板 | 标题 | 副标 | 正文 | 数字 |
|---|---|---|---|---|
| 主流型 | Georgia serif 32-36px · weight 500 | Georgia italic 17-18px | Arial 13-14px | Georgia 24-32px |
| 高端型 | Georgia serif 38-42px · weight 400 · letter-spacing -0.8px | Georgia italic 16-22px · weight 400 | Georgia 14px italic | Georgia 32-48px weight 500 |
| 网红型 | Georgia serif 44-48px · weight 300 · letter-spacing -1px | Georgia italic 18px | sans 13px | Georgia 24px |
| 测款型 | sans 30-32px · weight 700 · letter-spacing -0.5px | sans 16-18px weight 400 | sans 13px | Georgia 36-48px weight 600-700 |
| DIY 型 | sans 28-30px · weight 700 | Arial 14-16px weight 400 | Arial 12-13px | sans 36px weight 700 |

## 4 · Hero 模块结构（每模板）

### 4.1 · 主流型 Hero
1. 顶 banner（小 sticker · 季节/品牌定位）
2. h1 主标题（粉+黑混色）
3. h2 副标题（italic 法语/英语场景钩子）
4. Hero SVG（粉色场景 + 化妆台正面 + 模特 + 12 LED 镜）
5. Trust pills 4 个（圆角胶囊式）

### 4.2 · 高端型 Hero
1. 限量编号 banner（黑底金字 · 大写 · letter-spacing 4-6px）
2. 大 h1（DEVOKO + Flagship · 2 行）
3. 副标 italic 心理话术
4. **价格 box**（大字数字 · 边框深色 · 突出 PLN/EUR）
5. Hero SVG（**深色背景** + 玫瑰金描边 + brass 抽屉 + LED + 限量编号水印）
6. Trust pills（黑底金字 + 透明边框轮换）

### 4.3 · 网红型 Hero
1. **整片深色背景**（页面级 · 不只 Hero）
2. 顶部 sticker（紫色透明 + Aesthetic Edition）
3. 大 h1（Crescent Moon · Georgia 300 weight · 优雅无衬线感）
4. 副标 italic UGC 引语
5. Hero SVG（深紫黑背景 + 星空 + 月亮发光 + 12 LED + 壁挂支架）
6. 价格 box（**透明感**：`rgba(255,255,255,0.05)` + 紫色边框）
7. Trust pills（圆角 30px · 紫/金/灰透明胶囊）

### 4.4 · 测款型 Hero
1. **顶部 Choice 大 badge**（红色 €99）+ DE Warehouse 绿色 badge
2. h1 sans 粗体直接报 SKU 名（不抒情）
3. h2 sans 副标参数列表（9 LED · 4+1 Drawers · USB Port）
4. **大价格 box**（48px Georgia · 红色 · 边框 2px）
5. Hero SVG（**白底**简洁 · 化妆台 + 标尺寸 + 角标参数 box）
6. 4 trust pills（红/白/黑/绿对比）

### 4.5 · DIY 型 Hero
1. 顶 brand sticker（蓝底白字 TOZEY） + 黄底黑字 30 MIN
2. h1 sans 粗体（Coiffeuse + 平台叙事）
3. h2 副标（法语 · DIY 强调）
4. 价格行（蓝色 letter-spacing · 突出 SAV）
5. Hero SVG（**蓝图风**深蓝背景 + 网格 + 分解视图 + 工具区 + 30 min 黄色 box）
6. Pills（蓝/黄交替 · 含 emoji 工具）

## 5 · 卖点 SVG 模块库（共享 · Layer 3）

### 模块 A · 6+1 抽屉对比图
- 我方版（橙色边框 · 1 grand + 6 compartments）vs 对手版（红色边框 · 4 simples）
- 用于：0501 / 0513A / 0883 / 0884
- 模板适配：主流/高端/DIY

### 模块 B · 12 LED · 3 温度图
- 3 个圆球（cool/neutral/warm）+ 12 个 dot
- 用于：所有有 LED 款
- 模板适配：所有

### 模块 C · 4 色 swatch
- 4 个圆形色块（Blanc/Rose/Noir mat/Noir brillant）
- 用于：0513A
- 模板适配：主流/高端

### 模块 D · 隐藏储物机制（fermé → ouvert）
- 2 状态对比 SVG
- 用于：0530
- 模板适配：主流/DIY

### 模块 E · 异形镜外形
- Crescent / Asymmetric SVG
- 用于：0890 / 0891
- 模板适配：网红型唯一

### 模块 F · Brass-plated 对比
- 我方 brass + 对手 plastic 对比
- 用于：0884 / 0885
- 模板适配：高端型唯一

### 模块 G · 5 步流程图
- 安装步骤
- 用于：所有 MM 款
- 模板适配：DIY 型唯一

### 模块 H · 限量编号 N°/100
- 旗舰款标记
- 用于：0884
- 模板适配：高端型唯一

## 6 · 平台 × 模板 × SKU 分配建议

| 平台 | SPU | 推荐模板 |
|---|---|---|
| **CD** | 0501 / 0530 / 0513A | 主流型 |
| CD | 0883 / 0885 | 高端型 |
| CD | 0890 | 网红型 |
| **AL** | 0501 / 0513A | 主流型 |
| AL | 0883 / 0884 | 高端型 |
| AL | 0924 | 主流型 |
| AL | 0890 | 网红型 |
| **AE** | 0501 / 0513A | 主流型 |
| AE | 0743 | 测款型 |
| AE | 0890 / 0891 | 网红型 |
| **SHEIN** | 0501 / 0530 / 0513A | 主流型 |
| SHEIN | 0885 | 高端型 |
| SHEIN | 0890 / 0891 | 网红型 |
| **MM** | 全（Tozey）| DIY 型（统一）|

## 7 · 实施节奏（W18 → v5.1 → v5.2）

### Phase 1 · v0.1.8（**当前 · 2026-04-25**）
- ✅ 5 类 Hero 模板 demo 完成
- ✅ 设计规范文档完成
- ✅ Layer 1 VI / Layer 3 SVG 模块库定义

### Phase 2 · W18-W22（**起跑 + 母亲节**）
- 仅 CD 用现有 3 份 HTML+SVG（0501/0530/0513A 主流型）
- W22 校准会前不动其他模板
- 优先转化率实证

### Phase 3 · v5.1（**W22 校准后**）
- 优先实施高端型（0883/0884/0885）· 毛利率高
- 次实施网红型（0890/0891）· 流量空间大
- 主流型保留现状（已实证）

### Phase 4 · v5.2（**W30 终评后**）
- 5 模板全套上线
- 实证差的简化回 2-3 套
- 升降桌 v5 共享模板库

### Phase 5 · v6（**Q1 2027**）
- A/B 测试转化率
- 模板择优 / 淘汰
- 写入 visual-规范 agent 知识库

## 8 · ROI 测算

| 阶段 | 模板覆盖 | 月销影响 | ROI |
|---|---|---|---|
| Phase 2（仅 CD 主流型） | 3 SPU × 1 平台 | +5-10% 转化（现有水平） | 1.5× |
| Phase 3（+ 高端 + 网红） | 6 SPU × 3 平台 | +10-15% 转化 | 8× |
| Phase 4（5 模板全） | 6 SPU × 5 平台 | +12-15% 转化 | 425×（保守） |

**年化收益（Phase 4 后）**：+€340K · 设计成本 €800 一次性

## 9 · 维护规则

### 改 Layer 1 (VI) → 30 个 SKU 全更新
- Brand block 文案变 → 30 个 SKU 同步
- Specs table 字段加 → 30 个 SKU 同步
- 频率：季度一次

### 改 Layer 2 (Hero) → 该类 SKU 全更新
- 高端型 Hero 改色板 → 0883/0884/0885 同步
- 频率：季度审 / 大促前

### 改 Layer 3 (SVG 模块) → 引用该模块的 SKU 更新
- 12 LED 模块更新 → 引用的 8+ SKU 同步
- 频率：按需 / 月度审

## 10 · 与升降桌 v5 共享

升降桌 v5 段F 已有 19 份独立详情页（按尺寸细分）·应升级到本三层模板：

| 升降桌 SPU | 推荐模板 |
|---|---|
| 0287C 西班牙橄榄油版 / 0403E 法式 / 1021 现代 | 主流型（木暖） |
| 0463A / 1038 / 1039 高端 | 高端型（深木+金属） |
| 0428D 工业风 | DIY 型（变体） |
| BFCM 限定 / Soldes 限定 | 测款型变体（橙折扣感） |

→ 化妆台 + 升降桌 共享 5 类模板 · 设计成本一次性·覆盖跨品类。

## 版本

- v0.1.8 · 2026-04-25 · 5 类 Hero 模板首版 · 三层体系
- 下次更新：W22 校准后 · Phase 3 选型实施