# 两屏视觉样稿 v01 · 说明

文件：`two_screen_showcase.html`（790px 画布，移动端详情页，两屏竖向连续，浏览器直接打开即可）

依据文档：`docs/copy_structure_v02.md`（文案）· `docs/design_direction_cloud_v01.md`(视觉方向）· `docs/image_detail_audit_v01.md`（图片审计）

---

## 一、用图

| 屏 | 文件 | 对应素材 | 画面内容与裁切 |
|---|---|---|---|
| 第 1 屏 | `assets/hero_gift.jpg` | 719A0147 | 深青函装礼盒立于茶席之后，一壶二杯居前，竹影暖光。满幅出血，容器高 952px，`object-position 50% 82%`——多裁天花板、保住前景散茶与托盘 |
| 第 2 屏 | `assets/cong_detail.jpg` | 719A0208 | 壶侧倒放的底部特写：方形切角壶身 + 圆形圈足 + 底心方印。容器高 980px，居中裁切，圆底与方印落在画面重心 |

两屏均为单图满幅、不加圆角不加边框，文案全部排在图外的鸡骨白净色区域——「满幅即高级，文字不与画面抢戏」。

## 二、版式语法（本样稿要定下的东西）

每屏统一为三段结构，整页像翻开一册图录：

```
大图满幅出血
── 2px 琮黄题签线（全页贯穿的视觉符号）
鸡骨白题签区：小字行 → 衬线大标题 → 雾灰副题 → 短文案
```

- **第 1 屏题签区**：品牌行「良渚博物院」（衬线、0.5em 字距）+ 英文辅助行，替代 logo——未拿到真实 logo 文件，按规约不伪造图片 logo，用文字品牌行。
- **第 2 屏题签区**：琮黄「贰」字屏序（两侧细短线），承接全页「壹贰叁」分章体系；标题用 v02 第三屏文案「外方内圆，琮之形」。
- **两屏之间**：132px 鸡骨白留白 + 一枚 26px 琮形分章符（细线外方内圆）——全页唯一的图形装饰语言，与壶底方印、第二屏注解互相呼应。

## 三、圆方注解（第 2 屏）

图面右上角的净色墙面处放置一组 CSS 细线注解：116px 方框内切 96px 圆 + 「外方 · 内圆」小字。位置刻意避开左上竹影与中央产品，半透明暖黑 1px 细线，只作形制提示，不做引线、不压产品。

## 四、色彩与字体

| 角色 | 取值 | 用法 |
|---|---|---|
| 鸡骨白 `#F6F2E8` | 全页基底 | 题签区、章节留白 |
| 琮黄 `#B3893B` | 唯一强调色 | 题签线、屏序、分章符、注解之外不再出现 |
| 炭稻黑 `#26221B` | 文字主色 | 标题用全值，正文 85% 透明度 |
| 雾灰 `#8F8878` | 弱化色 | 副标题、英文辅助行 |

字体：标题/副题/题签用思源宋体（Noto Serif SC，本地回退 Songti SC），正文用思源黑体 Light（Noto Sans SC，回退 PingFang SC）。标题 58px / 0.08em 字距，正文 27px / 1.9 行高，每屏只有一个大字层级。

## 五、设计意图小结

- **礼赠感来自克制**：一屏一图一事，零卡片、零图标、零促销元素；信息密度低是有意为之的礼品级密度。
- **第 1 屏 3 秒内只回答一件事**——这是良渚博物院出品的、有出处的礼。
- **第 2 屏是全组素材最有讲述力的一张图**：方身 + 圆底 + 方印同框，正面印证「外方内圆 / 方圆相济」（依图片审计，不写「外圆内方」）。
- 此两屏即全页 11 屏的版式语法母版：确认后其余 9 屏按同一语法批量展开（第 8 屏礼盒与第 11 屏尾屏换璧青深色底）。

## 六、备注

- 联网时加载思源字体（Google Fonts），离线自动回退系统宋体/苹方，版式不破。
- 图片为实拍原图直出，未做调色滤镜。