# 产品方案网页版框架规范

版本：v1.0 · 2026-10-22  
适用对象：产品方案、客户提案、项目说明、阶段汇报。  
当前状态：框架完成，业务内容待补充。

本规范与随附网页实现对应，作为后续内容填充、页面制作与交付检查的共同依据。参考 AMeng 方案网页的纸感编辑风，代码、占位文案和成果示意图为本框架重新制作。

## 1. 产品目标与边界

网页同时服务三种使用方式：老板快速扫读、提案人逐章讲解、接收方手机阅读。先帮助读者理解核心建议，再解释依据、过程、交付和推进条件。

当前交付是阅读与演示框架，包含导航、图解、动效、成果放大、打印样式。演示工作台为 SVG 示意图，协作对话为预写情景；没有业务后端、真实客户数据或外部系统连接。

内容尚未提供时，明确保留“框架预览”“待填”“待确认”“结构演示”等状态。不得虚构客户、收入、增长百分比、确定工期、报价或成功案例。

## 2. 信息架构

| 序号 | 章节 / 固定锚点 | 需要回答 | 推荐表达 |
|---|---|---|---|
| 01 | 结论先行 / `summary` | 建议做什么，为什么先做？ | 主张、推荐卡、理由、近期方向 |
| 02 | 现状与目标 / `context` | 当前在哪里，希望怎样改变？ | 已知事实、待核实项、双栏对照 |
| 03 | 方案全景 / `architecture` | 各部分如何配合？ | 层级架构、共享底座、输入汇聚 |
| 04 | 关键模块 / `modules` | 输入、执行、确认、输出分别是什么？ | 双轨流程、循环图、结果收束条 |
| 05 | 交付展示 / `deliverables` | 最终拿到什么，如何使用？ | 成果样张、图片灯箱、协作情景 |
| 06 | 推进计划 / `roadmap` | 分几阶段，何时算完成？ | 排期图、里程碑、阶段成果 |
| 07 | 合作安排 / `collaboration` | 谁提供资料，谁执行，谁确认？ | 责任卡、资料清单、合作边界 |
| 08 | 下一步 / `next` | 当前应该采取什么行动？ | 行动清单、对接方式、收尾卡 |

首屏只突出一个主要方向。重要方案详写，次要方向简写；正式项目不必使用所有演示组件。

关键模块建议采用固定写作顺序：**业务价值 → 输入来源 → 执行步骤 → 人工确认 → 交付成果 → 验收方式 → 客户配合 → 时间条件。**

## 3. 内容规则

### 3.1 三种内容状态

- **待填**：资料尚未提供，例如产品名称、目标客户、具体交付物。
- **待确认**：已有初步判断，但尚未双方确认，例如项目范围与周期。
- **结构演示**：只用于说明版式与交互的流程、对话、成果图和排期。

首屏、页脚和演示组件保留可见说明。填完部分文案后，不能直接删除所有示意标记；逐项核验后再转为正式内容。

### 3.2 文案与证据

- 标题给结论，说明解释原因；一张卡片只承载一个主要判断。
- 长段落拆为明确的事实、步骤或成果；不为塞入内容持续缩小字体。
- 建议标题控制在 12–24 个汉字；卡片标题尽量 4–12 字。此为编辑建议，不是技术截断限制。
- 真实指标应有名称、口径、基准、目标、来源和确认状态。
- 业务价值与验收承诺分别表述。尚无依据的效果保留为目标或待验证假设。
- 流程动画不是效率测量，阶段排期不是已承诺工期。

## 4. 视觉基础

| 设计项 | 当前值 | 使用规则 |
|---|---|---|
| 页面底色 | `--paper: #F7F4EE` | 全页背景，形成温暖纸感 |
| 卡片底色 | `--card: #FFFDF9` | 分组内容与成果容器 |
| 主文字 | `--ink: #1D1C19` | 标题、重要正文 |
| 次级文字 | `--ink-2: #45423B` | 解释性文字 |
| 辅助文字 | `--muted: #77736A` | 状态、来源、补充说明 |
| 强调色 | `--accent: #B5442B` | 核心主张、当前章节、主流程 |
| 深色块 | `--dark: #22211D` | 推荐方向、核心处理节点、行动收尾 |
| 细边框 | `--line: #E3DDD0` | 卡片与分隔线 |
| 辅助分类色 | 蓝 `#2D5878`、赭 `#87601A`、绿 `#4C6A2A` | 少量区分类别，不与主色竞争 |
| 正文容器 | 最大 1040px；桌面内边距 40px | 内容居中，保留外部留白 |
| 窄屏内边距 | 20px；380px 以下为 16px | 避免整页缩小 |
| 首屏标题 | 约 31–54px，行高 1.24 | 两行主张，第二行可用强调色 |
| 章节标题 | 约 25–34px | 配编号与简短说明 |
| 基础正文 | 16px，行高 1.7 | 说明常用 14–15px，标签可更小 |
| 圆角 | 12px / 8px | 分别用于卡片和紧凑组件 |
| 章节间距 | 桌面 96px，窄屏 66px | 以留白建立阅读节奏 |
| 缓动 | `cubic-bezier(.16, 1, .3, 1)` | 起步较快，结束柔和 |

颜色与主要样式集中在 `styles.css` 的 `:root`。实际中文字体依赖设备，以苹方、思源黑体等系统候选显示，不依赖远程字体下载。

无交互卡片保持稳定；只有能点击的元素才使用上浮、缩放或指针反馈。

## 5. 组件规范

| 组件 / 对应选择器 | 用途 | 内容与使用约束 |
|---|---|---|
| 首屏方向卡 `.direction-grid` | 突出优先级并进入章节 | 一个主要方向，其他为辅助入口 |
| 现状对照 `.comparison` | 对比当前状态与目标 | 同一维度对照，事实与愿望不混写 |
| 架构层级 `.pyramid` | 表达下层支撑上层 | 当前四层；单纯并列项目不要强塞成金字塔 |
| 资料汇聚 `.flow-panel` | 多输入进入一个处理中心 | 当前三类来源；小屏改为纵向布局 |
| 双轨流程 `.pipeline` | 展示执行方式及确认节点 | 当前六步；强调人工确认，不暗示实测提速 |
| 环形流程 `.cycle` | 表达反馈与下一轮改进 | 当前六节点；只有存在回流才使用环形 |
| 结果条 `.outcome-strip` | 收束成果、配合、验收、时间 | 四项完整回答，未知项保留待填 |
| 成果展示 `.showcase` | 让交付形态可感知 | 真实图片需图注、替代文字和适当脱敏 |
| 对话演示 `[data-chat]` | 展示任务、反馈和人工确认 | 预写情景；播放完保留全文，可重播 |
| 阶段排期 `.gantt` | 表达任务重叠和阶段关系 | 当前三阶段示意；真实工期需用户确认 |
| 里程碑 `.milestones` | 提供排期的扫读与手机摘要 | 每阶段至少有一个可检查成果 |
| 责任卡 `.roles` | 明确双方分工 | 正式版本补负责人及决策权 |

图解必须有标题、解释或等价文字。重要信息不能只藏在动画、颜色和连线中。

## 6. 动效与状态

| 动效 | 实现参数 | 播放规则 |
|---|---|---|
| 内容入场 | 上移 18px，700ms | 首次进入视口执行一次 |
| 卡片错峰 | 上移 10px，500ms，间隔 70ms | 同组内容依次出现 |
| 架构层级 | 上移 14px，600ms，每层错开 150ms | 由底层向上呈现 |
| 可点击卡片 | 上浮最多 3px，250ms | 悬停反馈 |
| 汇聚虚线 | 2s 循环 | 可见且页面处于前台时播放 |
| 流向箭头 | 1.5s 循环 | 表达方向，不表达真实处理速率 |
| 双轨流程 | 10s 一轮 | 目标流程在确认点停顿后继续 |
| 六步循环 | 9.6s 一轮，每节点 1.6s | 节点高亮与环形运动协同 |
| 对话演示 | 首条约 160ms，后续每条约 1.3s | 完成后保留全部消息；重播先取消旧计时 |
| 甘特条 | 1s，条目错开 90ms | 只展开背景，文字不跟随压缩 |
| 成果灯箱 | 约 220ms 淡入 | 可立即关闭，可切换原尺寸 |

**实现必须区分一次性入场和循环演示。**

- `.reveal` 负责一次性入场；正文在 JavaScript 初始化前默认可见。
- `[data-loop]` 负责循环；通过可见性观察切换 `.is-playing`，离屏暂停。
- 切换浏览器标签页后暂停循环和对话计时，返回后按状态继续。
- 页脚提供“暂停动效 / 播放动效”，本标签页记住选择。
- 系统开启减少动态效果时，停止动效并立即呈现全部消息和内容；按钮显示已减少动效。
- 不使用锁屏、强制逐页滚动、闪烁或必须等待的阅读步骤。

## 7. 导航与成果预览

桌面目录位于左侧，默认呈现刻度；悬停或键盘进入后展开文字。阅读位置同步高亮，闲置约 1.8 秒后淡出。小屏或触屏改为左下角目录按钮。

小屏目录支持按钮开关、遮罩关闭、Esc 关闭、章节点击后收起；关闭时隐藏面板内的键盘焦点入口。

成果放大使用原生 `dialog`：打开后聚焦关闭按钮，支持键盘操作、Esc 和背景关闭，关闭后焦点返回原触发元素。“原尺寸”按素材固有尺寸显示，手机也可以切回适应屏幕。

顶部细线表示整体阅读进度。目录和进度辅助定位，不能替代清晰章节标题。

## 8. 响应式、无障碍与打印

### 窄屏

多列组件按内容重排：方向卡可保留双列，复杂章节转为单列，汇聚流程转纵向。环形图保持节点文字可读，不能只缩小整张图。

甘特图允许组件内部横向滑动，但页面本身不得横向溢出。阶段卡提供同等信息摘要，读者无需拖动宽表也能理解推进顺序。

### 无障碍与降级

- 使用语义化章节、标题、导航和原生按钮，提供“跳到正文”。
- 所有操作有可见键盘焦点；图标按钮有可识别名称。
- 装饰 SVG 不进入辅助技术读取，复杂图解提供描述。
- 无 JavaScript 时保留全部正文、图解、成果示意和对话内容；动画和增强交互不作为阅读前提。
- 不能用文字颜色作为唯一的状态标记。

### 打印 / PDF

页面使用 A4 打印样式。打印时隐藏导航、按钮、遮罩和阅读进度，停止动画，显露未阅读章节和全部对话；尽量避免单一卡片跨页。甘特图按纸张重排，保留阶段摘要。

正式内容替换后需要重新检查打印分页。文本和图片增加会改变分页，当前框架的打印通过不等于所有后续文案自动通过。

## 9. 技术与文件组织

```text
product-proposal/
├── index.html                 章节、组件和正文默认值
├── content.js                 常用文案集中入口
├── styles.css                 视觉、响应式、动效与打印
├── app.js                     导航、可见性、对话与灯箱
├── framework-spec.html        本规范的网页阅读版
├── framework-spec.md          本规范的可下载 Markdown 版
└── assets/                    图标与成果示意资源
```

前端没有运行时框架依赖，也不需要安装依赖或运行打包构建。页面使用 HTML、CSS、原生 JavaScript 和 SVG。

`content.js` 使用扁平键名，如 `hero.line1`、`modules.acceptance`。键名与 HTML 中的 `data-field` 一致，渲染仅使用纯文本，不把用户文案作为 HTML 执行。

常用文案集中配置不等于所有结构自动生成。流程节点、责任卡、对话、排期结构与图片来源仍在 `index.html` 中维护。正式定稿应同步 HTML 默认文字，使脚本不可用时也显示最新内容。

## 10. 后续修改流程

1. 先填写《内容填写清单》，确认项目事实、目标、范围和优先级。
2. 修改 `content.js` 中的名称、主张、介绍、成果和合作文案。
3. 依据内容选择组件，删除没有表达需要的图解，复制必要模块。
4. 替换成果素材，同步 `src`、`data-lightbox`、`alt` 和图注。
5. 修改流程节点时同步静态说明、节点位置、确认位置、动画节奏；当前双轨和环形均按六步设计。
6. 修改排期时同步任务条、阶段名称、里程碑和时间说明。
7. 将确认后的文案同步到 HTML 默认值，逐项清理已完成的占位标记。
8. 检查桌面、手机、减少动效、键盘、图片放大和打印。
9. 按项目要求确认展示范围后交付。此框架作为通用模板公开发布于 hupeishan.com，变更访问范围需单独明确。

## 11. 验收标准

- 八个章节锚点唯一，目录能跳转并指示阅读位置。
- 桌面 1440px、手机 390px 与 320px 均无页面级横向溢出。
- 图解静态内容清楚；循环离屏暂停；页面隐藏暂停。
- 对话首轮结束后完整保留，连续点击重播不会叠加播放。
- 灯箱能打开、缩放、Esc 关闭并恢复焦点。
- 减少动效与无 JavaScript 情况下，所有正文可读。
- 打印不遗漏隐藏内容，主要图表不越出页面。
- 所有演示数据与尚未确认的承诺有明确标记。
- 真实业务填入后，成果、配合、时间与验收信息完整。
- 检查过程不留下临时浏览器和临时服务器。

本次检查的实际结果单独记录在 `qa/验收记录.md`，后续每次内容改动根据影响范围复查。