产品方案网页版框架规范

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

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

1. 产品目标与边界

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

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

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

2. 信息架构

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

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

3. 内容规则

3.1 三种内容状态

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

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

3.2 文案与证据

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

4. 视觉基础

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

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

5. 组件规范

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

6. 动效与状态

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

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

7. 导航与成果预览

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

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

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

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

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

窄屏

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

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

无障碍与降级

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

打印 / PDF

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

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

9. 技术与文件组织

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，后续每次内容改动根据影响范围复查。