design-metaphor-narrativelisted

# 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. **检查语义场一致性**——所有替身必须来自**同一个现实场景**，不能混搭（航空 + 厨房 = 精神分裂） - **语义场一致是硬要求**：宁可某个字段替身牵强，也不能引入第二个场景的物件。 - **