freedak/TaoTao
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
TaoTao/0-req-CEC.md
T
freedakgmail 0089e9007d Initial commit: TaoTao
2026-06-16 00:38:58 +08:00

19 KiB
Raw Permalink Blame History

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 高保真可交互原型 待开发
Reference in New Issue View Git Blame Copy Permalink