freedakgmail
7.2 KiB
7.2 KiB
CapCut · Confidence Before Investment
CapCut「创作—导出」链路重设计 — 高保真可交互原型 主题：让创作者在投入时间之前就心里有数（Confidence Before Investment）
一个纯前端、零依赖、可离线运行的移动端原型，演示对 CapCut 创作流程的重新设计。
一、快速开始
- 用 Chrome / Safari 直接双击打开
index.html即可，无需任何构建或安装。 - 推荐用浏览器的「设备模拟」或直接在桌面观看 —— 原型以 iPhone 竖屏画框呈现。
- 从首页「带货」意图开始，跟着下方操作指引走一遍完整闭环。
也可用本地服务器查看：在该目录运行
python3 -m http.server，浏览器访问http://localhost:8000。
二、为什么选 CapCut，又为什么是这个点
选择 CapCut
在 TikTok / CapCut / Instagram 中，CapCut 的核心痛点集中在一条可见、可重设计的创作工作流里；而 TikTok / Instagram 的主要问题（推荐排序、审核、政策）依赖系统级机制，难以在原型中可信地重现。CapCut 在「可设计性、外部可验证性、可原型化」上都最契合作业对"可行性 + 交互链路 + 高保真 UI"的要求。
核心问题：创作—导出链路中的「不确定性」
- 付费墙不透明：做到一半才发现某功能/模板是 Pro，被「中途拦截」。
- AI 工具分散：面对一堆 AI 工具不知用哪个、会不会扣 credit。
- 导出有惊吓：临到导出才发现有水印 / 清晰度被锁 / credit 用光。
关键洞察：把「商业化信任」这一本身不可原型化的问题，转化为可原型化的 UX 表达 —— 用透明、善意的设计修复信任，而不是去改定价政策。
三、解决方案：四个动作，一条闭环
| # | 动作 | 解决的痛点 |
|---|---|---|
| 1 | 意图优先的起点 —— 进入即问「想做什么」，分流到对应模板工具 | 空白时间线无从下手 |
| 2 | 一个聪明的 AI 入口（魔法按钮） —— 一句话需求 → 编排有序 AI 步骤 | AI 工具分散、不会用 |
| 3 | 全程免费/Pro 透明化 —— 投入前就标明，并给免费替代 | 付费墙不透明 |
| 4 | 导出预检（Pre-flight） —— 导出前清单 + 一键换免费方案 | 导出有惊吓 |
四个动作由一条主线串联：「30 秒带货/口播视频」 → 意图选择 → AI 编排 → 透明计费 → 导出预检 → 完成。
四、操作指引（建议体验路径）
1. 意图选择（首页）
| 操作 | 效果 |
|---|---|
| 点「带货」卡片 | 加载后进入带货主线工作区（推荐，走完整闭环） |
| 点其它意图 | 进入工作区（演示主线统一以带货闭环呈现） |
| 点底部「直接进入空白时间线」 | 跳过意图选择（Toast 提示） |
2. 工作区
| 操作 | 效果 |
|---|---|
| 点「用一句话生成视频」魔法按钮 | 打开 AI 编排面板 |
| 点带 Pro / N credits 标签的模板或工具 | 弹出底部抽屉：说明价值 + 提供免费替代（不打断流程） |
| 点带「免费」标签的项 | 直接应用（Toast 提示） |
| 上下滚动 | 查看推荐模板、工具、导出入口 |
| 点「预览并导出」 | 进入导出预检 |
3. AI 编排面板（魔法按钮）
| 操作 | 效果 |
|---|---|
| 输入需求（或点推荐词）后「生成编排」 | 拆解为有序 AI 步骤并逐步执行（带进度） |
| 留空直接生成 | 被拦截并提示（输入校验） |
| 每个完成步骤的「编辑」 | 手动改写结果，标记变为「已由创作者编辑」 |
| 每个完成步骤的「撤销」 | 弹确认对话框，撤销后恢复到 AI 生成前 |
| 「完成编排，去校对成本」 | 关闭面板，成片结果卡出现在工作区 |
每个步骤都标注计费标签与**「由 AI 完成」标记** —— 体现 AI-first, Manual-second：AI 是起点，不是终点。
4. 导出预检（核心亮点）
| 操作 | 效果 |
|---|---|
| 发起导出 | 先看清单：清晰度 / 水印 / 用到的 Pro 项 / 预计 credit / 预计时长 |
| credit 不足时 | 顶部红色警示，「确认导出」按钮被禁用 |
| 点某 Pro 项「换免费」 | 清单实时更新（清晰度/水印/credit/时长），credit 回落后导出自动启用 |
| 「确认导出」 | 进入完成态，结果与清单逐项一致 |
| 「返回继续编辑」 | 关闭清单、保留全部编辑 |
5. 完成态 / 对比 / 指标（底部导航）
| 页面 | 内容 |
|---|---|
| 完成态 | 汇总清晰度/水印/花费/时长 + 「再做一个」「看 Before/After」 |
| 对比 | Before/After 量化对比：步数 14→6、决策点 9→3、被拦截 4→0；可切换查看两条路径的流程节点 |
| 指标 | 三类成功指标（用户效率 / 用户信心 / 产品健康），含基线值、目标值与「达成」状态 |
五、设计思路
设计原则
- Guide, don't take over —— 引导而非替代
- Make trade-offs visible —— 让权衡可见（计费色彩语义：免费=绿 / Pro=金 / credits=琥珀）
- Respect creator control —— AI 产出皆可编辑、可撤销
- Reduce cognitive load —— 在高摩擦时刻（选择前、导出前）减负
- AI-first, Manual-second —— AI 起步，人工兜底
把「信任」做成体验
最尖锐的痛点是商业化对用户信任的伤害，但定价政策无法用原型表达。于是我们把它转译成三个可交互的 UX 承诺：
- 投入前透明 —— 计费标签前置，杜绝「中途被墙」。
- 善意的替代 —— 凡 Pro/计费项都给免费方案，大方告知而非诱导付费。
- 导出前无惊吓 —— 预检清单 + 一键降本，结果与承诺一致。
交互/视觉
- CapCut 风格深色界面 + 电蓝→青品牌渐变；大圆角、毛玻璃抽屉、spring 弹性动效、AI 生成微光与逐步进度。
- iPhone 竖屏画框（灵动岛 + 状态栏）；底部导航 / 底部抽屉 / Toast / 模态对话框；触控目标 ≥44×44。
- 渐进式展示：进入工作区先以「一句话生成」为主角（不再有空视频死区），AI 生成后才出现紧凑成片卡。
六、技术说明
- 纯 HTML/CSS/JS，单文件
index.html，无构建工具、无框架、无 CDN，离线可用。 - 数据驱动：意图、模板、AI 步骤、计费、credit、指标等模拟数据集中在唯一全局
APP_DATA，界面从中读取渲染。 - 图标：全部内联 SVG。媒体：本地占位色块，无外部网络请求。
- 健壮性：数据缺失时降级占位，不中断其余渲染。
所有数据、价格、credit、指标均为演示用模拟值，不代表 CapCut 真实定价或性能。
七、配套文档
| 文档 | 内容 |
|---|---|
../0-req-CEC.md |
需求与目标（含 EARS 验收标准） |
../1-prd-CEC.md |
产品需求文档（画像/场景/优先级/流程/指标） |
../2-task-CEC.md |
开发任务文档（任务分解 + 进度 + 修复记录） |
index.html |
高保真可交互原型 |