yang20040317-svg design-metaphor-narrative ｜ 隐喻统摄的叙事型长页
本技能是 design-workflow 主技能抽离出的专项方法论，专治"经历类信息排成了干巴巴的列表 / 长页没有进入感 / 看完记不住"。 来源署名与授权边界见
../references/来源署名/MikeBarton-mikes-cv.md（个人作品集成品案例 · 无公开授权）。 合规口径：硬红线只卡具体执行物（美术资产 / 字体文件 / 文案 / 代码）；通用母题与通用技法不设限（旅行·航程类隐喻、叠牌缩略、等宽坐标、窄栏、渐进模糊底栏等均可自由使用）；另设「整体近似度自检」——多项元素叠加后与其作品观感高度接近时，换掉至少 2 个元素的执行拉开距离。
一、单一隐喻统摄（隐喻即信息架构）
- 核心：整站/整页用一个隐喻承载全部信息层级。隐喻不是贴皮装饰，它必须能映射数据结构。
- 判据三问（缺一即换隐喻）：
- 映射覆盖率：每个数据字段是否都有隐喻中的对应物？覆盖率 <80% → 隐喻不够用。
- 解释顺序：隐喻是否天然解释了信息的先后/层级/因果？（时间天然是"一段段航程"，层级天然是"一层层剖面"）
- 去隐喻测试：抽掉隐喻后，信息结构是否还照常成立？若成立 → 隐喻只是装饰，删掉重找。
- 做法：画一张两列映射表——左列「数据字段」，右列「隐喻中的实物」，逐一配对。配不上的字段：要么换隐喻，要么给该字段补一个同语义场的对应物。
- 反例警示：只在标题、图标、文案上出现隐喻词汇，正文主体仍是普通列表/卡片网格 → 这是假隐喻，比不用更糟（承诺了体验却没兑现）。
二、门禁序章（把"浏览"变成"进入"）
- 核心：首屏不放内容，放一个入口仪式——观者完成一个动作后，内容才展开。
- 三重收益：
- 心理投入：亲手"打开"的东西，观者会赋予更高价值（宜家效应）。
- 性能遮罩：重资源（WebGL / 大视频 / 字体）可在门禁交互的几秒内预载，观者感知不到等待。
- 叙事定调：门禁本身就是作品的第一句台词。
- 四条铁律（违反任意一条就别做门禁）：
- 可跳过：skip 入口常驻可见，不能藏在角落。
- 一次性：localStorage 记住已通过，回访直接进内容，不重复消耗耐心。
- 可回退：提供「回到门禁」的入口，让人能重看。
- 失败放行：门禁加载/运行失败时直接放行进内容，绝不能把人卡在门外。
- 能力检测前置：重型效果先检测 WebGL 可用性 /
prefers-reduced-motion/ 低内存低核数；任一命中则整段跳过门禁，而不是降级成一个半残的动画。
三、数据字段的实物替身（抽象 → 有形）
- 核心：给每个抽象字段找一个"现实里摸得着的东西"。
- 通用化步骤：
- 列出全部数据字段（时间 / 地点 / 机构 / 项目 / 状态 / 数量……）
- 为每个字段找一个现实有形物
- 检查语义场一致性——所有替身必须来自同一个现实场景，不能混搭（航空 + 厨房 = 精神分裂）
- 语义场一致是硬要求：宁可某个字段替身牵强，也不能引入第二个场景的物件。
- 典型配对思路（示意，实际须按自己的隐喻重找）：时间→读数式大字；地点→代码/印记；机构→徽标头像；项目→可翻动的票根/卡片；状态→徽章；结尾→私人照片。
四、叠放式缩略预览（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 个元素的执行即可，无需推倒重来。
- 隐喻质量看映射，不看新颖：不必为了"避开别人"硬选冷门隐喻。判据是覆盖率与去隐喻测试（第一节），只要隐喻能真实映射你的数据结构，哪怕是常见的旅行母题也是好隐喻。