# 设计说明 · 良渚博物院一壶二杯青瓷功夫茶具礼盒详情页

文件：`work/full_detail_v01/detail.html`
画布：790px 固定宽度，移动端电商长图（淘宝/天猫详情页），全页约 790×9975px。

---

## 一、设计目标与气质

- 定位：偏礼赠型文化器物，**大气、高端、价值感强**，不做促销海报感。
- 灵感来源：良渚文化**玉琮王**——只作文化来源与视觉秩序的依据，不当成产品、不满屏堆文物。
- 关键词：方圆秩序、层叠棱面、温润青瓷、茶席之礼、克制留白。

## 二、玉琮王的视觉转译

| 玉琮特征 | 页面转译 |
|---|---|
| 外方内圆、方中见圆 | 通用「外方内圆」玉琮纹标记（首屏 motif、灵感页图解），方圆对比的版式秩序 |
| 层叠棱面、横向分层 | 金线分层、灵感页「层叠」线刻图解、模块间细金线分隔 |
| 神人兽面纹 | 仅以 logo / 礼盒暗纹的真实素材呈现，页面不二次堆贴纹样 |
| 旧玉温润、非亮金奢华 | 高端感靠留白 + 照片质感 + 字体层级 + 克制金线建立，金线仅作点睛 |

## 三、色彩体系（鸡骨白 / 青瓷绿 / 琮黄浅金 / 炭稻黑）

- `--bone #F1E9DA` 鸡骨白 · 主背景
- `--paper #FAF5EB` 浅瓷白 · 叙事块
- `--celadon #8E9E82` / `--celadon-tint #DCE0D0` 青瓷绿 · 器形模块底
- `--gold #B49154` / `--gold-line #BCA068` 琮黄浅金 / 玉沁金线 · 强调、分隔、外框
- `--ink #2A2820` 炭稻黑 · 正文；`--charcoal #21201A` 深炭 · 灵感页/产品信息页底

**明度节奏**：暖白首屏 → 炭黑灵感页（拉价值感）→ 浅瓷白套装 → 青瓷晕器形 → 鸡骨白细节 → 暖席场景 → 浅瓷白礼盒 → 炭黑产品信息 → 暖白收尾。深浅交替，避免长图疲劳。

## 四、字体（@font-face 真实引入）

- **喜鹊招牌体** `XiqueZhaopai`（`assets/fonts/xique_zhaopai.ttf`）：首屏主标题、各模块大标题、节序「壹贰叁…」、内容物数字。笔意厚重，承担文化气质。
- **喜鹊聚珍体** `XiqueJuzhen`（`assets/fonts/xique_juzhen.ttf`）：副标题、正文、说明文字。宋意清雅，承担可读层级。
- 系统兜底：`Songti SC, serif`。

## 五、模块结构（每个模块为独立 `<section>`，便于按模块切片）

| 序 | section class | 模块 | 主要图片 | 图片处理 |
|---|---|---|---|---|
| 00 | `.sec-topstrip` | 品牌顶条「五千年中国看良渚」 | `brand/liangzhu_top_strip.jpg` | 原比例满宽 |
| 01 | `.sec-hero` | 首屏：logo + 大标题 + 礼盒套装 | 真实 logo + `08` | logo 保原色无底板；08 cover 居中偏下，主体完整 |
| 02 | `.sec-inspire` | 玉琮王灵感（炭底） | `玉琮王灵感图` | `contain` 深底留边，文物不裁切 |
| 03 | `.sec-set` | 一壶二杯套装 | `04` 白底横图 | `contain` 白底，套装完整 |
| 04 | `.sec-form` | 青瓷器形细节 | `06` `03` | 双图 cover，主体居中 |
| 05 | `.sec-detail` | 细处见礼 | `07` `02` | 手持杯 tall + 杯底印 + 文字注 |
| 06 | `.sec-scene` | 茶席使用（暖席底） | `10` 大图 + `01` `11` | 出汤大图 + 夹茶/俯拍双图，object-position 护住主体 |
| 07 | `.sec-gift` | 礼盒包装 | `05` `09` | 开盒 + 内衬，主体居中 |
| 08 | `.sec-specs` | 产品信息 / 内容物（炭底） | 内容物清单 | 仅写已确认信息 |
| 09 | `.sec-closing` | 收尾 | `11` + logo | 俯拍收尾，不重复首屏 |

11 张产品图全部使用，玉琮王灵感图与真实 logo 均出现于正式画面。

## 六、关键约束执行

- **首屏完整**：logo、主标题「以琮入器／茶席成礼」、礼盒套装均落在首屏内（约前 1450px）。
- **真实素材**：全部使用真实产品图与真实 logo，无臆造产品；logo 保原色、无底板/描边/改色。
- **不裁断主体**：白底套装与玉琮王用 `contain`；场景图用 cover 并以 `object-position` 护住壶/杯；文字不压复杂产品图（标题/正文均在图外的留白区）。
- **文案合规**：仅用确认稿文案；未写容量/尺寸/材质工艺/产地；正式画面无「待补/TODO/SKU/卖点1·2·3/质检/制作要求」等过程文字。内容物只写「一壶二杯、礼盒、青瓷功夫茶具礼盒」等已确认信息。
- **收尾不重复首屏**：尾屏为「产品信息/内容物 + 俯拍收尾」，与首屏（礼盒陈列）区分。

## 七、图片工作副本

原图 3–13MB（4480×5952 等），已用 `sips` 生成长边 1580px、q82 的工作副本于 `assets/images/opt/`（共 ~2.3MB），仅为网页渲染与截图稳定，**不改变真实产品内容**。原图保留不动。

## 八、导出/切片建议

- 全页长图：`npx playwright screenshot --full-page --viewport-size=790,1400 file://.../detail.html out.png`
- 按模块切片：各模块 `<section>` 带语义 class，可用 Playwright `locator('.sec-xxx').screenshot()` 单独导出。