# Design Metaphor Narrative

> 隐喻统摄的叙事型长页专项方法论。当一个页面要承载"一段经历 / 一串时间节点 / 一份履历 / 一个产品故事"，且希望观者"走进去"而不是"扫一眼"时触发。覆盖：单一隐喻统摄信息架构（隐喻映射覆盖率判据）、门禁序章（可跳过/一次性/可回退/失败放行）、数据字段的实物替身、叠放式缩略预览、极窄色板+单点语义强调色、三字体系统、长页 reveal 错峰编排、固定底栏渐进模糊、长文 gutter 章节标签、收尾落在"人"上、重型效果前置能力检测。触发词：「作品集」「简历页」「个人主页」「时间轴」「叙事长页」「滚动叙事」「隐喻统摄」「门禁序章」「开场仪式感」。

- Skill: `yang20040317-svg/design-metaphor-narrative` (Agent Skill)
- Install (CLI): `npx skillmds@latest add yang20040317-svg/design-metaphor-narrative`
- Raw SKILL.md: https://api.skillmd.com/api/skills/yang20040317-svg/design-metaphor-narrative/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: yang20040317-svg (https://skillmd.com/u/yang20040317-svg)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/yang20040317-svg/design-metaphor-narrative

---


# design-metaphor-narrative ｜ 隐喻统摄的叙事型长页

> 本技能是 design-workflow 主技能抽离出的**专项方法论**，专治"经历类信息排成了干巴巴的列表 / 长页没有进入感 / 看完记不住"。
> 来源署名与授权边界见 `../references/来源署名/MikeBarton-mikes-cv.md`（个人作品集成品案例 · 无公开授权）。
> **合规口径**：硬红线只卡**具体执行物**（美术资产 / 字体文件 / 文案 / 代码）；**通用母题与通用技法不设限**（旅行·航程类隐喻、叠牌缩略、等宽坐标、窄栏、渐进模糊底栏等均可自由使用）；另设「整体近似度自检」——多项元素叠加后与其作品观感高度接近时，换掉至少 2 个元素的执行拉开距离。

## 一、单一隐喻统摄（隐喻即信息架构）

- **核心**：整站/整页用**一个**隐喻承载全部信息层级。隐喻不是贴皮装饰，它必须能**映射数据结构**。
- **判据三问**（缺一即换隐喻）：
  1. **映射覆盖率**：每个数据字段是否都有隐喻中的对应物？覆盖率 <80% → 隐喻不够用。
  2. **解释顺序**：隐喻是否天然解释了信息的先后/层级/因果？（时间天然是"一段段航程"，层级天然是"一层层剖面"）
  3. **去隐喻测试**：抽掉隐喻后，信息结构是否还照常成立？若成立 → 隐喻只是装饰，删掉重找。
- **做法**：画一张两列映射表——左列「数据字段」，右列「隐喻中的实物」，逐一配对。配不上的字段：要么换隐喻，要么给该字段补一个同语义场的对应物。
- **反例警示**：只在标题、图标、文案上出现隐喻词汇，正文主体仍是普通列表/卡片网格 → 这是**假隐喻**，比不用更糟（承诺了体验却没兑现）。

## 二、门禁序章（把"浏览"变成"进入"）

- **核心**：首屏不放内容，放一个**入口仪式**——观者完成一个动作后，内容才展开。
- **三重收益**：
  - **心理投入**：亲手"打开"的东西，观者会赋予更高价值（宜家效应）。
  - **性能遮罩**：重资源（WebGL / 大视频 / 字体）可在门禁交互的几秒内预载，观者感知不到等待。
  - **叙事定调**：门禁本身就是作品的第一句台词。
- **四条铁律**（违反任意一条就别做门禁）：
  - **可跳过**：skip 入口常驻可见，不能藏在角落。
  - **一次性**：localStorage 记住已通过，回访直接进内容，不重复消耗耐心。
  - **可回退**：提供「回到门禁」的入口，让人能重看。
  - **失败放行**：门禁加载/运行失败时**直接放行进内容**，绝不能把人卡在门外。
- **能力检测前置**：重型效果先检测 WebGL 可用性 / `prefers-reduced-motion` / 低内存低核数；任一命中则**整段跳过**门禁，而不是降级成一个半残的动画。

## 三、数据字段的实物替身（抽象 → 有形）

- **核心**：给每个抽象字段找一个"现实里摸得着的东西"。
- **通用化步骤**：
  1. 列出全部数据字段（时间 / 地点 / 机构 / 项目 / 状态 / 数量……）
  2. 为每个字段找一个现实有形物
  3. **检查语义场一致性**——所有替身必须来自**同一个现实场景**，不能混搭（航空 + 厨房 = 精神分裂）
- **语义场一致是硬要求**：宁可某个字段替身牵强，也不能引入第二个场景的物件。
- **典型配对思路**（示意，实际须按自己的隐喻重找）：时间→读数式大字；地点→代码/印记；机构→徽标头像；项目→可翻动的票根/卡片；状态→徽章；结尾→私人照片。

## 四、叠放式缩略预览（Stacked Preview）

- **核心**：多图预览用"一叠错落的牌"替代网格平铺。
- **为什么更好**：省空间 + 暗示"这里面不止一张" + 制造可翻动的触感 + 比网格更有记忆点。
- **参数区间**：
  - 常态：3 张，旋转 −10° / 0° / +7°，横向偏移为卡宽 20~35%，z-index 交错（中间那张最高）
  - hover：位移放大到 1.3~1.5 倍，中间张微 scale 1.03，外侧张旋转加大到 ±15°
  - 缓动：`cubic-bezier(.23,1,.32,1)`，时长 0.3~0.4s
  - 每张加细描边（1~1.5px 亮色）+ 极轻投影，避免叠在一起糊成一片

## 五、极窄色板 + 单点语义化强调色

- **四色就够**：背景（微暖白或近黑）/ 正文灰 / 弱化灰 / **一个**强调色。
- **强调色纪律**：
  - 全站出现 **≤2 处**，且每处都**承担语义**（进行中 / 可交互 / 关键节点）
  - 先定义"这个颜色代表什么状态"，再决定用在哪；**不要**为了"画面丰富"加第二种强调色
  - 其余一律灰阶，靠明度差拉层级
- **自检**：把强调色临时改成灰色，看画面是否还能用——若不能，说明你用颜色承担了结构职责，这是对的；若强调色只是"好看"，删。

## 六、三字体系统（sans / mono / display）

- **分工即语义**：
  - **sans（比例字体）**＝人类叙述，承载正文与故事
  - **mono（等宽字体）**＝机器读数，承载坐标、时间、编号、标签——等宽天然带"票据 / 仪表盘 / 精确"的联想
  - **display（特征字体，如数码管）**＝仅用于数字读数（年份、倒计时），绝不用于正文
- **判据**：同一个信息若换个字体就"不像那个东西了"，说明字体分工生效了。
- ⚠️ 字体**只借分工思路**，具体字体须自选可商用替代（见署名文件红线）。

## 七、长页 reveal 错峰编排

- **进场 reveal 三件套**：`blur(8px)` + `translateY(-12px)` + `scale(.985)` → 清晰归位，0.4s，`cubic-bezier(.23,1,.32,1)`。
- **错峰而非减量**：列表/时间轴每项 delay 递增 60ms（第 n 项 = 60ms × n），上限约 600ms 后不再累加。
  - 与「同屏 ≤3–5 动效预算」的合成：**靠 stagger 错峰满足预算**，不要靠砍掉动效。
- **滚动驱动**：进度型元素（路径点亮 / 节点高亮 / 进度条）随 scrollTop 线性映射，让"读到哪"可视化。
- **微交互错峰**：一组头像/卡片 hover 时 lift 位移 + 微 scale，第 n 个延迟按 `n × 0.45 × 单位时长` 递减，形成波浪感而非齐动。
- **统一缓动**：全站用一个 ease-out 曲线，动效才会"像一个人做的"。

## 八、固定底栏的软过渡（渐进模糊）

- **问题**：固定 footer 用硬边分割，内容滚过去像被切断。
- **做法**：底栏上方叠 5 层递进 `backdrop-filter`（0.6 → 1.5 → 3 → 6 → 12px），每层用 `mask-image: linear-gradient(to top, ...)` 限定各自的作用带（越靠上作用带越窄），最后叠一层 tint 颜色渐变。
- **效果**：内容向上滚入时**逐渐被雾化**，而非撞上一道边界。

## 九、长文左侧 gutter 章节标签

- 正文保持**单栏窄栏**（512~560px），章节标签绝对定位在正文栏**左侧约 −104px**，等宽、大写、弱化色。
- 窄屏（≤860px）时 gutter 标签**回落**为正文上方的普通小标题（改 `position:static`）。
- 作用：长文滚动时，章节名始终在左侧"挂着"，提供位置感，又不占正文宽度。

## 十、叙事收尾落在"人"上

- **反面**：以成就清单 / 项目列表 / 数据收尾——观者记住了信息，没记住人。
- **做法**：结尾给一个**个人化落点**——私人照片、一句自白、一个邀请。让整段职业叙事收在温度上，形成反差。
- **细节**：这类私人图片的 `alt` 写**情绪标签**而非客观描述（"我想念的那个地方" 而非 "一张山区风景照"）——alt 也是叙事的一部分。

## 自检清单

- [ ] 隐喻映射覆盖率 ≥80%？每个字段都有实物替身？
- [ ] 所有替身是否来自**同一个语义场**？
- [ ] 去隐喻测试：抽掉隐喻后结构是否仍成立？（成立 = 假隐喻）
- [ ] 门禁是否满足：可跳过 / 一次性 / 可回退 / 失败放行？
- [ ] 重型效果是否前置了能力检测（WebGL / reduced-motion / 低内存）？
- [ ] 强调色是否 ≤2 处、且每处都承担语义？
- [ ] 三字体分工是否语义化（等宽 = 读数，比例 = 叙述）？
- [ ] reveal 是否错峰 stagger（每项 +60ms）而非齐动？
- [ ] 固定底栏是否软过渡而非硬边？
- [ ] 结尾是否落在"人"上，而非成就列表？
- [ ] **合规**：产出未使用来源站的素材 / 字体文件 / 文案 / 代码？（通用母题与通用技法可用，不设限）
- [ ] **近似度自检**：是否命中「整体近似度」≥3 条？若是，已换掉至少 2 个元素的**具体执行**拉开距离？

## 备注

- 与 `design-frontend` 的关系：本技能管**叙事结构与进入体验**，前端技能管**界面反模板与动效语义**；两者在动效处交汇时，以本技能的"错峰 stagger"为准，以前端技能的"动效须有载荷"为筛。
- 与第 4 层「故事逻辑」的关系：本技能是"起承转合"在**长滚动页**上的具体落地；先有故事逻辑，再选隐喻。
- **母题不设限，执行要分离**：旅行 / 航程 / 登机这类**通用母题**谁都能用（属不受著作权保护的"思想"层）；要避开的是**具体执行物**——别人的美术稿、字体、文案、代码。真正需要警惕的是"多个元素叠加后整体观感逼近某一件具体作品"，此时按「整体近似度自检」换掉至少 2 个元素的执行即可，无需推倒重来。
- **隐喻质量看映射，不看新颖**：不必为了"避开别人"硬选冷门隐喻。判据是覆盖率与去隐喻测试（第一节），只要隐喻能真实映射你的数据结构，哪怕是常见的旅行母题也是好隐喻。