freedakgmail
239 lines
19 KiB
Markdown
239 lines
19 KiB
Markdown
# 0-req-CEC · 需求与目标文档
|
||
|
||
> 项目：**CEC（CapCut Create-Export Confidence）** —— CapCut「创作—导出」链路重设计高保真可交互原型
|
||
> 作业来源：`0.md`（App Optimization：从 TikTok / CapCut / Instagram 中选一，找出设计问题并重设计至少一个关键点，以 AI coding 形式交付）
|
||
|
||
---
|
||
|
||
## 1. 引言
|
||
|
||
### 1.1 作业要求拆解（来自 0.md）
|
||
|
||
| 维度 | 要求 |
|
||
|------|------|
|
||
| 选题 | TikTok / CapCut / Instagram 三选一 |
|
||
| 内容 | 找出产品设计问题 → 说明原因 → 重新设计至少一个关键点 |
|
||
| 标准 | 体现专业能力 + 对产品的理解与创新；解决真实问题；保持完全可行性 |
|
||
| 交付 | 完整分析 + 清晰交互链路 + 高保真 UI，以 AI coding 形式提交 |
|
||
| 时间 | 收到题目后一周内提交 |
|
||
|
||
### 1.2 项目目标
|
||
|
||
交付一个**高保真、可交互的移动端原型**，演示对 **CapCut「创作—导出」链路**的重新设计。一句话主题：
|
||
|
||
> **让创作者在投入时间之前就心里有数（Confidence Before Investment）。**
|
||
|
||
### 1.3 产品选择与理由：CapCut
|
||
|
||
1. **痛点集中在可设计的工作流内**：CapCut 的核心摩擦在「创作—导出」这条可见、可重设计的链路上；而 TikTok / Instagram 的主要问题（推荐排序、审核、政策）依赖系统级机制，难以在原型中可信重现。
|
||
2. **外部可验证性高**：通过公开评论与亲自走查即可审计 CapCut 的问题。
|
||
3. **原型可行性高**：任务流与交互状态清晰，适合纯前端做高保真可交互演示，契合作业对「可行性 + 交互链路 + 高保真 UI」的要求。
|
||
|
||
### 1.4 核心问题（优化点）
|
||
|
||
创作—导出链路中的「**不确定性**」，集中表现为三类：
|
||
|
||
1. **付费墙不透明**：做到一半才发现某功能/模板是 Pro，被「中途拦截」。
|
||
2. **AI 工具分散**：面对一堆 AI 工具不知用哪个、会不会扣 credit。
|
||
3. **导出有惊吓**：临到导出才发现有水印 / 清晰度被锁 / credit 用光。
|
||
|
||
> 设计策略：把「商业化信任」这一本身不可原型化的问题，转化为**可原型化的 UX 表达** —— 用透明、善意的设计修复信任，而非改动定价政策。
|
||
|
||
### 1.5 优化方案概览（四个动作 + 一条主线）
|
||
|
||
| # | 动作 | 解决的痛点 |
|
||
|---|------|-----------|
|
||
| 1 | **意图优先的起点**：进入即问「想做什么」（口播/卡点/Vlog/带货）分流到对应模板工具 | 空白时间线无从下手 |
|
||
| 2 | **聪明的 AI 入口（魔法按钮）**：一句话需求 → 编排有序 AI 步骤，逐步标注计费/AI 标记、可编辑可撤销 | AI 工具分散、不会用 |
|
||
| 3 | **全程免费/Pro 透明化**：投入前就标明并给免费替代，杜绝「中途被墙」 | 付费墙不透明 |
|
||
| 4 | **导出预检（Pre-flight）**：导出前清单（清晰度/水印/Pro 项/credit/时长），一键换免费方案 | 导出有惊吓 |
|
||
|
||
主线：**「30 秒带货/口播视频」** —— 意图选择 → AI 编排 → 透明计费 → 导出预检。
|
||
|
||
---
|
||
|
||
## 2. 术语表
|
||
|
||
- **原型系统 (Prototype_System)**：整个高保真可交互原型应用，承载所有界面与交互。
|
||
- **意图选择器 (Intent_Selector)**：进入创作时呈现「想做什么」选项（口播/卡点/Vlog/带货）并据此分流的模块。
|
||
- **AI编排器 (AI_Orchestrator)**：接收自然语言描述、拆解为多个有序 AI 步骤并逐步执行的「魔法按钮」模块。
|
||
- **AI步骤 (AI_Step)**：AI 编排器生成的单个可执行单元，含名称、计费标签、AI 标记、可编辑结果与撤销能力。
|
||
- **计费标签 (Cost_Label)**：标注功能/模板/AI 步骤计费属性的视觉标签，取值「免费 / Pro / N credits」之一。
|
||
- **计费标注系统 (Cost_Label_System)**：在功能、模板、AI 步骤入口处统一渲染计费标签并提供免费替代方案的模块。
|
||
- **免费替代方案 (Free_Alternative)**：当某项为 Pro 或消耗 credit 时，系统提供的可达到相近效果的零成本选项。
|
||
- **导出预检器 (Export_Preflight)**：导出前汇总清晰度、水印、所用 Pro 项、预计 credit 消耗与时长，并支持一键替换为免费方案的模块。
|
||
- **对比视图 (Comparison_View)**：并列展示「现状路径（Before）」与「新路径（After）」并量化步数、决策点、被拦截次数的模块。
|
||
- **Credit余额 (Credit_Balance)**：原型内模拟的用户可用 credit 数量。
|
||
- **应用数据 (APP_DATA)**：统一的前端数据结构，集中存放意图、模板、AI 步骤、计费、credit、指标等模拟数据。
|
||
- **底部导航 (Bottom_Navigation)**：移动端固定在屏幕底部的主导航组件。
|
||
- **提示条 (Toast)**：短暂出现后自动消失的轻量反馈组件。
|
||
- **底部抽屉 (Bottom_Sheet)**：从屏幕底部上滑出现、承载选项或详情的面板组件。
|
||
|
||
---
|
||
|
||
## 3. 角色定义
|
||
|
||
| 角色 | 说明 | 关注点 |
|
||
|------|------|--------|
|
||
| **创作者 (Creator)** | 使用原型完成视频创作与导出的目标用户 | 低摩擦完成视频、清楚成本、保持控制权 |
|
||
| **评审者 (Reviewer)** | 评估本设计作业的评委/面试官 | 问题定位是否准确、方案是否创新可行、改进是否可量化 |
|
||
| **原型开发者 (Developer)** | 实现该原型的工程角色 | 纯前端可行性、数据驱动、可维护 |
|
||
|
||
---
|
||
|
||
## 4. 功能性需求（EARS）
|
||
|
||
> 验收标准采用 EARS 格式（WHEN / IF / WHILE / WHERE / THE…SHALL）。下文「系统」均指本原型，所有行为均为前端模拟。
|
||
|
||
### R1 意图优先的创作起点
|
||
**用户故事：** 作为创作者，我希望进入创作时先被问「想做什么」并分流到对应模板工具，以便不必面对空白时间线无从下手。
|
||
|
||
1. WHEN 创作者发起新建创作，THE Intent_Selector SHALL 在进入空白时间线之前、于 1 秒内呈现意图选项列表，且列表按固定顺序恰好包含「口播」「卡点」「Vlog」「带货」四项。
|
||
2. WHEN 创作者点选某意图，THE Intent_Selector SHALL 在 1 秒内进入匹配工作区，并在可见区域展示已预载的对应模板与工具集合。
|
||
3. WHILE 模板与工具集合预载中，THE Intent_Selector SHALL 显示加载态并禁止重复触发，直至完成或失败。
|
||
4. IF 预载失败，THEN THE Prototype_System SHALL 停留在意图列表、保留已选中态，并展示「预载失败、可重试」提示。
|
||
5. WHERE 创作者选择「带货」意图，THE Prototype_System SHALL 进入「30 秒带货/口播视频」主线闭环工作区。
|
||
6. WHEN 意图列表呈现时，THE Intent_Selector SHALL 为每项展示一段 ≤60 字、说明将获得的模板与工具的文字。
|
||
7. WHERE 创作者希望跳过意图选择，THE Intent_Selector SHALL 提供「直接进入空白时间线」入口；WHEN 点选该入口，THE Prototype_System SHALL 在 1 秒内进入空白时间线工作区。
|
||
|
||
### R2 一个聪明的 AI 编排入口（魔法按钮）
|
||
**用户故事：** 作为创作者，我希望用一句话描述需求由统一 AI 入口编排步骤，以便不必在分散的 AI 工具里挑选。
|
||
|
||
1. THE AI_Orchestrator SHALL 在创作主界面持续展示单一魔法按钮入口，作为描述需求的唯一起点。
|
||
2. WHEN 创作者点击魔法按钮，THE AI_Orchestrator SHALL 展示支持输入 1–500 字符的自然语言需求输入区。
|
||
3. WHEN 创作者提交 1–500 字符的需求描述，THE AI_Orchestrator SHALL 在 3 秒内拆解为含 1–10 个 AI_Step 的有序列表并自上而下展示。
|
||
4. IF 需求描述为空或超过 500 字符，THEN THE AI_Orchestrator SHALL 阻止拆解、保留输入并提示长度不符。
|
||
5. THE AI_Orchestrator SHALL 为每个 AI_Step 展示名称、Cost_Label 与「此步由 AI 完成」标记。
|
||
6. WHEN 创作者确认执行编排，THE AI_Orchestrator SHALL 按序逐个执行 AI_Step 并展示 0%–100% 进度。
|
||
7. WHEN 某 AI_Step 执行完成，THE AI_Orchestrator SHALL 展示其生成结果并标记为已完成。
|
||
8. IF 某 AI_Step 执行失败，THEN THE AI_Orchestrator SHALL 暂停后续、保留已完成结果，并提示失败及提供重试。
|
||
9. WHILE 某 AI_Step 处于已完成态，THE AI_Orchestrator SHALL 允许创作者手动编辑其结果并保存。
|
||
10. WHILE 某 AI_Step 处于已完成态，THE AI_Orchestrator SHALL 提供撤销操作，撤销后恢复执行前初始状态并解除已完成标记。
|
||
11. WHERE 某 AI_Step 涉及消耗 credit，THE AI_Orchestrator SHALL 在执行前展示其 credit 消耗数量。
|
||
12. IF 某 AI_Step 所需 credit 大于当前 Credit_Balance，THEN THE AI_Orchestrator SHALL 阻止执行并提示余额不足。
|
||
|
||
### R3 全程免费/Pro 透明化
|
||
**用户故事：** 作为创作者，我希望投入时间前就知道每项是免费还是 Pro，以便不被付费墙中途拦截。
|
||
|
||
1. THE Cost_Label_System SHALL 在每个功能、模板与 AI_Step 入口处展示 Cost_Label，取值「免费/Pro/N credits」之一（N 为 1–9999 整数）。
|
||
2. WHEN 创作者浏览模板或工具列表，THE Cost_Label_System SHALL 在选择前即同步展示 Cost_Label，无需额外交互（点击/长按/悬停）即可见。
|
||
3. WHERE 某项为「Pro」或「N credits」，THE Cost_Label_System SHALL 在入口处同时展示至少一个标注「免费」的 Free_Alternative。
|
||
4. WHEN 创作者选择一个 Free_Alternative，THE Cost_Label_System SHALL 替换原 Pro 项并完整保留已完成编辑，不丢失任何修改。
|
||
5. IF 所选 Free_Alternative 与已有编辑不兼容，THEN THE Cost_Label_System SHALL 先用 Bottom_Sheet 说明并请求确认，确认前不替换、不丢内容。
|
||
6. WHEN 创作者点选「Pro」项，THE Cost_Label_System SHALL 通过 Bottom_Sheet 说明其 Pro 价值与至少一个 Free_Alternative，且不中断/重置当前流程与编辑态。
|
||
7. WHEN 创作者关闭 Bottom_Sheet，THE Cost_Label_System SHALL 返回原界面并保持关闭前的全部编辑态。
|
||
|
||
### R4 导出预检（Pre-flight）
|
||
**用户故事：** 作为创作者，我希望导出前看到一份清单并能一键改用免费方案，以便避免导出时才发现问题。
|
||
|
||
1. WHEN 创作者发起导出，THE Export_Preflight SHALL 在生成最终文件之前展示预检清单。
|
||
2. THE Export_Preflight SHALL 在清单中展示输出清晰度（720p/1080p）、水印状态（有/无水印）、所用 Pro 项列表、预计 credit 消耗（0–999 整数）与预计导出时长（1–600 秒整数）。
|
||
3. WHERE 未使用任何 Pro 项，THE Export_Preflight SHALL 展示空状态 Pro 项清单并将水印置为「无水印」。
|
||
4. WHERE 使用了 Pro 项，THE Export_Preflight SHALL 为每个 Pro 项提供「换成免费替代方案」一键操作。
|
||
5. WHEN 创作者对某 Pro 项执行替换，THE Export_Preflight SHALL 同步更新清晰度/水印/Pro 项列表/credit/时长，并将该项移除。
|
||
6. IF 预计 credit 消耗大于 Credit_Balance，THEN THE Export_Preflight SHALL 标示不足并提供可降低消耗的 Free_Alternative。
|
||
7. WHILE 预计 credit 消耗大于 Credit_Balance，THE Export_Preflight SHALL 禁用「确认导出」，直至消耗回落至不超过余额。
|
||
8. WHEN 创作者确认导出，THE Export_Preflight SHALL 以 Toast 反馈成功，并呈现与确认时清单逐项一致的最终结果。
|
||
9. WHEN 创作者取消导出，THE Export_Preflight SHALL 关闭清单、返回工作区并保留全部编辑。
|
||
|
||
### R5 Before/After 路径对比
|
||
**用户故事：** 作为评审者，我希望并列查看现状与新路径的量化对比，以便直观理解重设计价值。
|
||
|
||
1. THE Comparison_View SHALL 在竖屏画框内以上下分区或左右分栏并列展示 Before 与 After 两条完成「30 秒带货/口播视频」主线目标的流程。
|
||
2. THE Comparison_View SHALL 为两条路径分别展示步数、决策点数量、被拦截次数（均为 ≥0 整数，来源 APP_DATA）。
|
||
3. THE Comparison_View SHALL 为三项指标分别同时展示绝对差值（Before−After）与降幅百分比（(Before−After)÷Before×100，四舍五入取整），并标示「改善/增加」方向。
|
||
4. IF 某项 Before 值为 0，THEN THE Comparison_View SHALL 以「不适用」替代降幅，仍展示绝对差值。
|
||
5. WHEN 创作者查看某条路径，THE Comparison_View SHALL 按实际执行顺序完整列出关键节点并展示名称。
|
||
6. WHERE 某节点为决策点或被拦截节点，THE Comparison_View SHALL 附加可区分且彼此不同的视觉标记。
|
||
|
||
### R6 移动端形态约束
|
||
**用户故事：** 作为创作者，我在手机上使用 CapCut，所以原型必须针对竖屏与触屏设计。
|
||
|
||
1. THE Prototype_System SHALL 以 iPhone 竖屏画框（宽 375–430、高 812–932 CSS px）呈现全部界面，且不产生横向滚动。
|
||
2. THE Prototype_System SHALL 提供固定于底部的 Bottom_Navigation。
|
||
3. WHILE 页面内容滚动，THE Prototype_System SHALL 保持 Bottom_Navigation 固定可见。
|
||
4. WHEN 创作者触发承载选项/详情的入口，THE Prototype_System SHALL 以上滑动效呈现 Bottom_Sheet。
|
||
5. WHEN 创作者点击 Bottom_Sheet 外部或下滑，THE Prototype_System SHALL 关闭它并恢复下方界面交互。
|
||
6. WHEN 操作需要轻量反馈，THE Prototype_System SHALL 以 Toast 呈现，2–4 秒后自动消失且不阻断交互。
|
||
7. WHEN 出现需要确认的关键决策，THE Prototype_System SHALL 以模态对话框承载、阻断背景交互，并提供互斥的「确认/取消」。
|
||
8. THE Prototype_System SHALL 为所有可触控元素提供 ≥44×44 CSS px 的可点击区域。
|
||
|
||
### R7 完整闭环主线
|
||
**用户故事：** 作为评审者，我希望原型走通一条完整闭环，而非四个互不相连的浅 demo。
|
||
|
||
1. THE Prototype_System SHALL 以「30 秒带货/口播视频」作为可端到端走通的主线场景。
|
||
2. WHEN 创作者沿主线推进，THE Prototype_System SHALL 按固定顺序「意图选择 → AI 编排 → 透明计费 → 导出预检」串联四环节，且仅在完成当前环节后进入下一环节。
|
||
3. IF 当前环节未完成，THEN THE Prototype_System SHALL 阻止进入下一环节并提示。
|
||
4. WHILE 创作者沿主线推进，THE Prototype_System SHALL 展示进度指示并标记当前与已完成环节。
|
||
5. WHILE 创作者沿主线推进，THE Prototype_System SHALL 将前序环节的编辑与选择带入后续环节，保持可见且可继续编辑。
|
||
6. WHEN 创作者返回上一环节，THE Prototype_System SHALL 恢复此前编辑与选择，且不丢数据。
|
||
7. WHEN 创作者完成主线，THE Prototype_System SHALL 呈现完成态，汇总清晰度与水印状态、展示「已就绪」标示并提供导出/发布入口。
|
||
|
||
### R8 AI 角色与创作者控制权
|
||
**用户故事：** 作为创作者，我希望 AI 是帮我起步的助手而非黑盒，以便所有产出都能看懂、能改、能退回。
|
||
|
||
1. WHERE 某结果由 AI 生成，THE Prototype_System SHALL 在其可视区域持续展示「由 AI 完成」标记，直至被编辑或撤销。
|
||
2. THE Prototype_System SHALL 为每项 AI 结果提供始终可见的编辑入口。
|
||
3. WHEN 创作者保存手动编辑，THE Prototype_System SHALL 更新展示并将标记由「由 AI 完成」改为「已由创作者编辑」。
|
||
4. IF 编辑含无效输入（空/超长），THEN THE Prototype_System SHALL 拒绝并保留原内容、提示原因。
|
||
5. THE Prototype_System SHALL 为每项 AI 结果提供撤销入口，恢复到本次生成前状态。
|
||
6. WHEN 创作者触发撤销，THE Prototype_System SHALL 在执行前展示一次确认提示。
|
||
7. WHEN AI 完成一次编排，THE Prototype_System SHALL 将结果每个元素呈现为可选中继续编辑的状态，且不展示锁定/禁用控件。
|
||
|
||
### R9 成功指标可视化
|
||
**用户故事：** 作为评审者，我希望原型呈现衡量成效的指标，以便判断设计是否达成目标。
|
||
|
||
1. WHEN 指标面板加载，THE Prototype_System SHALL 从 APP_DATA 读取并展示**用户效率**指标（≥任务完成时间、任务完成率），每项含名称/当前值/单位/基线值/目标值五字段。
|
||
2. WHEN 指标面板加载，THE Prototype_System SHALL 从 APP_DATA 读取并展示**用户信心**指标（≥自评信心、犹豫/流失减少程度），每项含上述五字段。
|
||
3. WHEN 指标面板加载，THE Prototype_System SHALL 从 APP_DATA 读取并展示**产品健康**指标（≥功能采用率、重复使用率、转化/留存影响），每项含上述五字段。
|
||
4. WHEN 渲染任一指标，IF 当前值相对基线已达到/超过目标值，THEN THE Prototype_System SHALL 显示与未达成态明显区分的「达成」视觉标识。
|
||
5. WHEN 渲染任一指标，IF 当前值尚未达到目标值，THEN THE Prototype_System SHALL 显示「未达成」视觉标识。
|
||
6. IF 某指标任一必需字段缺失/为空，THEN THE Prototype_System SHALL 在该字段位置展示「数据缺失」占位，并继续渲染其余指标而不中断。
|
||
|
||
---
|
||
|
||
## 5. 非功能性需求
|
||
|
||
| 类别 | 要求 |
|
||
|------|------|
|
||
| **技术栈** | 仅 HTML/CSS/JS（含原生浏览器 API），不引入需编译/打包/转译/装依赖的构建工具或框架运行时。 |
|
||
| **零构建运行** | 在现代桌面浏览器中直接打开入口 HTML 即可运行全部界面与交互。 |
|
||
| **数据驱动** | 全部模拟数据集中于唯一全局 `APP_DATA`，不在渲染逻辑/标记中硬编码重复副本；计费/AI 标记/指标均从 `APP_DATA` 读取渲染。 |
|
||
| **资源自包含** | 图标用内联 SVG、媒体用本地占位图，均不加载外部网络资源（离线可用）。 |
|
||
| **健壮性** | 数据项缺失/为空时跳过渲染或显示占位，不中断页面其余部分。 |
|
||
| **响应性能** | 意图分流、AI 拆解等关键反馈在数秒内（详见 R1/R2 量化时限）给出可见反馈。 |
|
||
| **可用性** | 移动端竖屏、触控目标 ≥44×44 CSS px、关键反馈用 Toast/Bottom_Sheet/对话框。 |
|
||
| **语言** | 界面与文档默认中文。 |
|
||
|
||
---
|
||
|
||
## 6. 关键约束与假设
|
||
|
||
### 6.1 范围
|
||
**纳入（In Scope）**
|
||
- 移动端竖屏单页原型（单一 `index.html` 优先）
|
||
- 一条「30 秒带货/口播视频」完整闭环主线
|
||
- 四个核心动作 + Before/After 对比 + 成功指标页
|
||
|
||
**非目标（Out of Scope）**
|
||
- 真实视频编解码、真实 AI 推理、真实导出文件
|
||
- 真实账号/支付/订阅后端
|
||
- 桌面端、横屏与多平台适配
|
||
- CapCut 全功能编辑器（仅围绕主线所需功能）
|
||
|
||
### 6.2 假设
|
||
- 所有数据、计费、credit、指标均为**演示用模拟值**，不代表 CapCut 真实定价或性能。
|
||
- 评审在桌面浏览器中以 iPhone 尺寸画框查看移动端原型。
|
||
- 占位图与图标可离线渲染，无需联网。
|
||
|
||
---
|
||
|
||
## 7. 交付物与文档链路
|
||
|
||
| 文档 | 用途 | 状态 |
|
||
|------|------|------|
|
||
| `0-req-CEC.md` | 需求与目标（本文档） | 待确认 |
|
||
| `1-prd-CEC.md` | 产品需求文档（PRD） | 待生成 |
|
||
| `2-task-CEC.md` | 开发任务文档 | 待生成 |
|
||
| `index.html` | 高保真可交互原型 | 待开发 |
|