# 可视化设计说明

> 输出角色：交互设计师 | 版本：v2.0 | 日期：2026-07-21

## 图表清单

| 编号 | 图表名称 | 文件路径 | 技术栈 | 说明 |
|:---:|------|---------|--------|------|
| 1 | 创作流程图 | `../产品规划案例/流程图/11步创作流程.html` | Mermaid.js / HTML | 展示 11 步创作流程 + 7 个确认门 + 双路径 + 可选步骤标注 |
| 2 | 产品框架图 | `../产品规划案例/产品框图/产品框架图.html` | HTML + CSS Grid | 五层架构 + 11 步流程 + 确认门位置 + 贯穿约束链 |
| 3 | 交付确认页 | `../产品规划案例/短视频脚本创作_产品交付.html` | HTML | 整合所有产出的确认页 |

## 设计规范

- 配色主色：#534AB7（紫色），辅助色：#0F6E56（绿色通过）、#993C1D（橙色决策/Gate）、#185FA5（蓝色流程）
- Gate 确认门标识色：#993C1D（橙色）
- 可选步骤标识：🔶 橙色标注
- 双路径标识：🔀 蓝色标注
- 贯穿约束标识：紫色下划线连接
- 字体：PingFang SC / Microsoft YaHei
- 页面最大宽度：1200px
- 响应式：支持桌面端显示

## 流程图关键节点

- 7 个 Gate 确认门用橙色菱形标注
- 步骤③⑧用 🔶 标注可选路径
- 步骤⑩用 🔀 标注双路径（A/B两条分支）
- 贯穿约束线：人设卡片（④→⑪）、场次结构（⑥→⑪）、[U]标记（②→全流程）