645 lines
16 KiB
Markdown
645 lines
16 KiB
Markdown
# Airshelf 页面流程定稿记录
|
|
|
|
> 本文件用于记录和用户逐页确认后的产品页面流程。
|
|
> PRD 只作为功能边界参考，页面布局与交互以本文件后续定稿为准。
|
|
|
|
维护日期：2026-05-28
|
|
|
|
---
|
|
|
|
## 0. 总体原则
|
|
|
|
- 创作视频是产品主线任务。
|
|
- 当前版本单条生成视频的时长上限是 15s。
|
|
- AI 图片创作是附加能力，用于辅助商品图、人物、场景等素材生产，不抢视频主线。
|
|
- 页面跳转尽量少，能在当前页面完成的操作尽量不跳转。
|
|
- 操作尽量简单，第一次使用 AI 产品的用户也应该能理解。
|
|
- 5 个 Stage 是步骤引导，不是强制锁定流程。
|
|
- 用户可以在脚本、基础资产、故事板、视频、拼接导出之间自由跳转。
|
|
- 如果某个 Stage 缺少前置内容，页面给提示和快捷补全入口，不做硬锁死。
|
|
- 暂不做复制项目、归档、审核、待审核、待我确认等复杂项目管理概念。
|
|
|
|
---
|
|
|
|
## 1. 视频项目页 `/projects`
|
|
|
|
### 页面定位
|
|
|
|
视频项目页是视频生产任务列表，帮助用户看清每个视频项目做到哪一步，以及下一步能点什么。
|
|
|
|
### 不做内容
|
|
|
|
- 不做复制项目。
|
|
- 不做归档。
|
|
- 不做审核 / 待审核 / 待我确认。
|
|
- 不做草稿分类。
|
|
- 不做复杂批量操作。
|
|
- AI 图片创作不作为顶部主按钮。
|
|
|
|
### 状态分类
|
|
|
|
只保留：
|
|
|
|
- 全部
|
|
- 进行中
|
|
- 生成中
|
|
- 已完成
|
|
- 失败
|
|
|
|
### 页面结构
|
|
|
|
1. Page Head
|
|
- 标题：视频项目
|
|
- 主按钮：新建视频项目
|
|
|
|
2. 状态概览 / Tab
|
|
- 全部
|
|
- 进行中
|
|
- 生成中
|
|
- 已完成
|
|
- 失败
|
|
|
|
3. 工具栏
|
|
- 搜索项目 / 商品名
|
|
- 商品筛选
|
|
- 状态筛选
|
|
- 最近更新排序
|
|
- 可选：列表 / 卡片视图切换
|
|
|
|
4. 项目列表
|
|
- 默认列表行，不默认大卡片。
|
|
- 每行展示：
|
|
- 9:16 缩略图
|
|
- 项目名
|
|
- 关联商品
|
|
- 当前阶段
|
|
- 5 段进度：脚本 / 资产 / 故事板 / 视频 / 导出
|
|
- 更新时间
|
|
- 状态
|
|
- 主操作：继续 / 查看进度 / 查看成片 / 重试
|
|
|
|
5. 空状态
|
|
- 没有商品：引导新建商品。
|
|
- 有商品但没有项目：引导新建视频项目。
|
|
|
|
---
|
|
|
|
## 2. 新建视频项目页 `/projects/new`
|
|
|
|
### 页面定位
|
|
|
|
新建项目页只负责创建项目壳子，并绑定商品。
|
|
脚本怎么生成、脚本风格、任务设定等全部放到 Stage 1 脚本页。
|
|
|
|
### 交互原则
|
|
|
|
- 一个页面内完成，不做多步跳转。
|
|
- 只问用户：为哪个商品创建视频。
|
|
- 创建后直接进入项目流水线的 Stage 1 脚本页。
|
|
|
|
### 字段
|
|
|
|
必选：
|
|
|
|
- 商品
|
|
|
|
可选：
|
|
|
|
- 项目名称
|
|
- 默认自动生成，例如：商品名 + 短视频 + 日期。
|
|
|
|
不展示：
|
|
|
|
- 创作方式
|
|
- 脚本风格
|
|
- 任务设定
|
|
- 商品卖点选择
|
|
- 预估消耗
|
|
|
|
### 卖点选择归属
|
|
|
|
商品卖点不放在新建项目页。
|
|
商品卖点选择放到 Stage 1 脚本页，作为“本条视频重点”配置项，从商品库自动带出。
|
|
|
|
---
|
|
|
|
## 3. Stage 1 脚本页
|
|
|
|
### 页面定位
|
|
|
|
脚本页是 AI 脚本工作台。
|
|
用户通过 AI 输入和启动卡片完成脚本来源选择、卖点选择、风格设定、任务设定，并在中间区域查看完整读秒流分镜脚本。
|
|
|
|
### 核心原则
|
|
|
|
- 脚本是用户最关注的内容，必须放在中间最大区域。
|
|
- 脚本不按 15s 大段展示。
|
|
- 脚本按完整读秒流分镜展示，适合短视频细看。
|
|
- AI 聊天不是主内容，而是脚本修改和生成记录。
|
|
- AI 输入框放页面底部固定，作为当前 Stage 的全局指令入口。
|
|
|
|
### 页面布局
|
|
|
|
顶部：
|
|
|
|
- 项目面包屑
|
|
- 商品名 / 项目名
|
|
- 5 Stage 自由切换导航：脚本 / 基础资产 / 故事板 / 视频 / 拼接导出
|
|
|
|
主体：
|
|
|
|
- 左侧窄栏：商品信息 / 卖点 / 人物 / 场景等辅助信息
|
|
- 中间主栏：读秒流分镜脚本
|
|
- 右侧窄栏：AI 对话记录 / 操作历史
|
|
|
|
底部固定栏：
|
|
|
|
- AI 输入框
|
|
- 页面操作按钮，例如重新生成全部、进入下一步
|
|
|
|
### 空状态引导
|
|
|
|
脚本来源不做 Tab。
|
|
脚本未生成时，中间主区域展示启动卡片：
|
|
|
|
- AI 帮我写
|
|
根据商品信息自动生成完整读秒流分镜。
|
|
|
|
- 我有脚本
|
|
粘贴已有口播稿，AI 帮你整理成分镜结构。
|
|
|
|
- 一句话生成
|
|
输入一句视频方向，AI 生成完整分镜。
|
|
|
|
- 复刻爆款
|
|
暂未开放或后续版本处理。
|
|
|
|
用户选择后进入对应模式。生成脚本后，中间区域切换为完整读秒流分镜。
|
|
|
|
### 读秒流分镜结构
|
|
|
|
每个分镜以卡片 / 行卡展示：
|
|
|
|
- 镜头编号
|
|
- 时间段，例如 0-5s、5-10s
|
|
- 画面描述
|
|
- 对白 / 旁白
|
|
- 可选：镜头类型、场景、人物
|
|
|
|
用户可以：
|
|
|
|
- 直接编辑某个分镜文字。
|
|
- 用底部 AI 输入框修改某个分镜。
|
|
- 重新生成全部。
|
|
- 调整整体时长、口吻、卖点重点等。
|
|
|
|
### 商品卖点
|
|
|
|
- 从商品库自动带出。
|
|
- 在脚本页展示为“本条视频重点”。
|
|
- 默认选中前 2-3 个，或默认使用全部卖点。
|
|
- 用户可点选 / 取消。
|
|
- 用户也可以直接在 AI 输入框里说重点突出哪些卖点。
|
|
|
|
---
|
|
|
|
## 4. Stage 2 基础资产页
|
|
|
|
### 页面定位
|
|
|
|
基础资产页用于为当前视频准备视觉资产。
|
|
它不是资产库，也不是完整 AI 图片创作页。
|
|
|
|
### 总体原则
|
|
|
|
- 默认 AI 自动生成，用户只在效果不好时调整。
|
|
- 脚本确定后，AI 自动识别需要的商品、人物、场景，并生成图片提示词。
|
|
- 页面优先让用户看默认生成效果。
|
|
- 不满意时再修改提示词、上传参考图、从资产库选择或重新生成。
|
|
- 商品是最重要的，优先展示商品资产。
|
|
|
|
### 页面布局
|
|
|
|
- 左侧：资产清单
|
|
- 中间：当前资产工作台 / 生成结果
|
|
- 右侧：AI 操作记录 / 生成记录
|
|
- 底部：AI 输入框
|
|
|
|
### 资产顺序
|
|
|
|
1. 商品资产
|
|
2. 人物
|
|
3. 场景
|
|
|
|
### 商品资产
|
|
|
|
商品三视图是一张 16:9 图，包含正面、侧面、背面。
|
|
它不是三张图，也不拆分成三个槽位。
|
|
|
|
不提供：
|
|
|
|
- 上传三视图
|
|
- 使用现有商品图
|
|
|
|
原因：
|
|
|
|
- 用户一般不会有适合生成视频的白底三视图。
|
|
- 如果不生成三视图，系统本来就只能默认使用商品图继续，不需要多给一个“使用现有商品图”的操作。
|
|
|
|
推荐交互：
|
|
|
|
- 展示当前商品图。
|
|
- 展示商品三视图状态：未生成 / 生成中 / 已生成。
|
|
- 说明：生成 16:9 商品三视图可以提升商品角度稳定性。
|
|
- 主操作：生成商品三视图。
|
|
- 不生成三视图也可以继续，只做弱提示。
|
|
|
|
生成规则：
|
|
|
|
- 商品三视图属于结构转换型。
|
|
- 默认一次生成 1 张。
|
|
- 不满意可重新生成或用 AI 输入框调整提示词。
|
|
- 商品三视图支持保留历史版本，用户可以在历史版本中选择满意的一版采用。
|
|
|
|
### 人物资产
|
|
|
|
命名为“人物”，不叫“模特”。
|
|
人物指脚本中需要出现的角色，用户要确定这个角色的形象。
|
|
|
|
默认流程：
|
|
|
|
1. AI 根据脚本自动识别人物。
|
|
2. AI 为每个人物自动生成图片提示词。
|
|
3. 默认生成 4 张人物立绘候选。
|
|
4. 用户选择 1 张满意的立绘。
|
|
5. AI 基于选中的立绘生成 1 张 16:9 人物三视图。
|
|
6. 用户采用此人物资产。
|
|
|
|
不满意时，用户可以：
|
|
|
|
- 修改描述。
|
|
- 上传自己的模特 / 参考图。
|
|
- 从人物库选择。
|
|
- 重新生成立绘。
|
|
- 从历史立绘里再选一张生成三视图。
|
|
- 重新生成人物三视图。
|
|
- 从人物三视图历史版本中选择满意的一版采用。
|
|
|
|
人物调整不放抽屉。
|
|
点击人物后，中间区域直接切换为人物工作台。
|
|
|
|
人物工作台需要一步到位承载：
|
|
|
|
- 人物库选择
|
|
- 上传参考图
|
|
- 描述生成
|
|
- 直接使用自己的模特
|
|
- AI 生成多张立绘
|
|
- 从立绘生成三视图
|
|
- 从历史立绘再选再生成三视图
|
|
|
|
### 场景资产
|
|
|
|
默认流程：
|
|
|
|
1. AI 根据脚本识别场景。
|
|
2. AI 自动生成场景图提示词。
|
|
3. 默认一次生成 4 张候选。
|
|
4. 用户选择 1 张。
|
|
|
|
不满意时，用户可以：
|
|
|
|
- 修改描述。
|
|
- 重新生成。
|
|
- 上传替换。
|
|
|
|
### 候选生成规则
|
|
|
|
创意选择型：一次生成 4 张。
|
|
|
|
- 人物立绘
|
|
- 场景图
|
|
|
|
结构转换型：一次生成 1 张。
|
|
|
|
- 商品三视图
|
|
- 人物三视图
|
|
|
|
三视图版本规则：
|
|
|
|
- 商品三视图和人物三视图都可以重跑。
|
|
- 每次重跑产生一个历史版本。
|
|
- 用户可以在历史版本中回选满意的一版。
|
|
- 采用某一版后，该版本成为当前项目使用版本。
|
|
|
|
### 资产复用
|
|
|
|
人物默认是项目内资产，不自动进入团队人物库，避免资产库变乱。
|
|
|
|
采用人物时可以勾选：
|
|
|
|
- 保存到人物库
|
|
|
|
保存后：
|
|
|
|
- 进入团队共享人物库。
|
|
- 后续项目可复用。
|
|
- 记录来源：项目内生成 / AI 生成 / 上传参考图等。
|
|
|
|
---
|
|
|
|
## 5. Stage 3 故事板页（已确认原则，待细化）
|
|
|
|
### 页面定位
|
|
|
|
故事板页是可选的预览步骤，不是视频生成的必经步骤。
|
|
|
|
### 已确认原则
|
|
|
|
- 故事板不是一定要生成。
|
|
- 用户可以跳过故事板，直接进入视频生成。
|
|
- 故事板的价值是提前预览视频大致画面和内容。
|
|
- 故事板有时会固定最终视频画面，反而可能让视频生成效果不如不使用故事板。
|
|
- 因此故事板不能作为强制前置条件。
|
|
- Stage 3 应该提供“生成故事板预览”和“跳过，直接生成视频”两条路径。
|
|
- 如果用户跳过故事板，Stage 4 直接基于脚本和基础资产生成视频。
|
|
- 故事板提示词直接在原提示词基础上修改。
|
|
- 暂不做独立 AI 辅助输入框或 AI 聊天式提示词修改。
|
|
- 故事板绑定资产需要展示，但只做轻量引用说明。
|
|
- 绑定资产默认不展示缩略图。
|
|
- 绑定资产用文字标签 / 资产引用标签展示。
|
|
- Hover / Popover 时展示资产详情。
|
|
- Stage 3 不直接编辑资产，修改资产需要回到 Stage 2。
|
|
- 如果绑定资产在 Stage 2 被替换，Stage 3 显示“绑定资产已更新，建议重新生成故事板”。
|
|
|
|
### 绑定资产展示
|
|
|
|
绑定资产展示的是引用关系，而不是图片预览。
|
|
|
|
示例：
|
|
|
|
- 商品：补水面膜
|
|
- 人物：女主、同事
|
|
- 场景：卫生间、书桌
|
|
|
|
或以标签形式展示：
|
|
|
|
- 商品 · 补水面膜
|
|
- 人物 · 女主
|
|
- 人物 · 同事
|
|
- 场景 · 卫生间
|
|
|
|
Hover 详情示例：
|
|
|
|
- 商品 · 补水面膜
|
|
- 商品图数量
|
|
- 商品三视图状态
|
|
- 来源：商品库
|
|
- 操作：查看 / 去基础资产修改
|
|
|
|
- 人物 · 女主
|
|
- 当前立绘状态
|
|
- 人物三视图状态
|
|
- 来源：项目内 / 人物库
|
|
- 操作：查看 / 去基础资产修改
|
|
|
|
### 提示词编辑
|
|
|
|
- 用户直接在原本提示词基础上修改。
|
|
- 提示词就是重新生成故事板的依据。
|
|
- 第一版不做 AI 辅助修改提示词。
|
|
- 可保留恢复原始提示词、重新生成等基础操作。
|
|
|
|
### 待继续确认
|
|
|
|
- 故事板是否进入页面后自动生成，还是由用户点击生成。
|
|
- 生成视频时，已生成故事板是否默认作为参考，还是由用户选择是否使用。
|
|
- 故事板历史版本如何展示。
|
|
|
|
---
|
|
|
|
## 6. 待继续确认页面
|
|
|
|
- Stage 5 拼接导出页
|
|
- 商品库 / 商品详情
|
|
- 资产库
|
|
- AI 图片创作
|
|
- 人物库
|
|
- 工作台
|
|
- 团队
|
|
- 消费
|
|
- 设置
|
|
|
|
---
|
|
|
|
## 7. Stage 5 拼接导出页
|
|
|
|
### 页面定位
|
|
|
|
拼接导出页是最终成片工作台。
|
|
它负责把 Stage 4 采用的 AI 视频片段、用户上传的视频、资产库视频等素材自由拼接，并完成字幕、BGM、转场和导出。
|
|
|
|
### 布局方向
|
|
|
|
参考剪映 / CapCut 的基础剪辑布局，但只保留轻量功能。
|
|
|
|
页面区域：
|
|
|
|
- 顶部：项目名、Stage 导航、导出状态
|
|
- 左侧：素材池
|
|
- 中间上方：成片预览播放器
|
|
- 右侧：属性设置
|
|
- 底部：时间线
|
|
|
|
### 素材池
|
|
|
|
素材池包含：
|
|
|
|
- AI 生成视频片段
|
|
- 上传视频
|
|
- 批量上传视频
|
|
- 从资产库选择视频
|
|
|
|
上传视频时支持勾选：
|
|
|
|
- 保存到资产库，供以后复用
|
|
|
|
默认不勾选，避免资产库变乱。
|
|
|
|
### 时间线
|
|
|
|
第一版只做单主轨轻剪辑。
|
|
|
|
支持：
|
|
|
|
- 自动放入 Stage 4 当前采用的 AI 视频片段，按顺序排列
|
|
- 拖拽排序
|
|
- 添加上传视频
|
|
- 删除片段
|
|
- 替换片段
|
|
- 裁剪起止点
|
|
|
|
不做：
|
|
|
|
- 多轨自由叠加
|
|
- 关键帧
|
|
- 复杂音频混音
|
|
- 速度曲线
|
|
- 画中画
|
|
- 蒙版
|
|
- 贴纸 / 复杂特效
|
|
|
|
### 裁剪
|
|
|
|
需要支持裁剪。
|
|
|
|
选中时间线片段后，右侧属性区显示：
|
|
|
|
- 开始时间
|
|
- 结束时间
|
|
- 当前片段时长
|
|
- 应用裁剪
|
|
|
|
时间线片段两侧可保留轻量拖拽手柄。
|
|
|
|
### 字幕
|
|
|
|
字幕默认自动添加。
|
|
|
|
规则：
|
|
|
|
- 进入 Stage 5 后，系统根据脚本台词 / 旁白自动生成字幕。
|
|
- 字幕默认开启。
|
|
- 用户可以关闭字幕。
|
|
- 用户可以编辑字幕文字和时间。
|
|
- 第一版不强制支持识别用户上传视频语音生成字幕。
|
|
|
|
右侧属性区默认展示：
|
|
|
|
- 字幕开关
|
|
- 字幕来源：脚本台词
|
|
- 字幕样式
|
|
- 编辑字幕入口
|
|
|
|
字幕编辑使用轻量面板，不做复杂字幕工作台。
|
|
|
|
示例：
|
|
|
|
- 00:00 - 00:03 熬夜后皮肤干到起皮？
|
|
- 00:03 - 00:06 这片补水面膜我最近一直在用。
|
|
- 00:06 - 00:10 敷完脸会明显更透亮。
|
|
|
|
### BGM / 转场 / 导出
|
|
|
|
右侧属性区包含：
|
|
|
|
- BGM 开关
|
|
- BGM 选择
|
|
- 原声 / BGM 音量
|
|
- 转场开关
|
|
- 转场类型
|
|
- 导出比例，默认 9:16
|
|
- 清晰度，默认 1080P
|
|
- 格式，默认 MP4
|
|
|
|
BGM 默认开启，用户可修改或关闭。
|
|
转场默认开启，用户可修改或关闭。
|
|
|
|
### 导出成功
|
|
|
|
导出成功后不新增独立页面。
|
|
在 Stage 5 当前页面展示导出成功状态 / 结果面板。
|
|
|
|
导出中：
|
|
|
|
- 显示导出进度。
|
|
|
|
导出成功后展示：
|
|
|
|
- 成片预览播放器
|
|
- 下载 MP4
|
|
- 复制链接
|
|
- 查看成片资产
|
|
- 继续编辑
|
|
- 返回视频项目
|
|
|
|
导出成功后：
|
|
|
|
- 项目状态标记为已完成。
|
|
- 成片自动进入项目资产。
|
|
|
|
后续如果接入平台发布能力，再增加发布入口；第一版不做独立发布页。
|
|
|
|
---
|
|
|
|
## 6. Stage 4 视频页
|
|
|
|
### 页面定位
|
|
|
|
视频页只用于 AI 生成视频片段。
|
|
用户上传视频、使用自己的视频、与 AI 视频混合拼接，都放到 Stage 5 拼接导出页处理。
|
|
|
|
### 核心原则
|
|
|
|
- 视频生成以片段为单位。
|
|
- 每段视频独立生成。
|
|
- 单个视频生成片段上限是 15s。
|
|
- 长视频由多个 15s 内的视频片段组成，后续在 Stage 5 拼接。
|
|
- 视频一次只生成 1 条候选。
|
|
- 首次进入视频页后，AI 可以自动生成视频，不需要用户手动点击生成。
|
|
- 视频有自己的生成提示词。
|
|
- 用户可以直接修改视频提示词。
|
|
- 用户可以不改提示词直接重跑。
|
|
- 每次重跑保留历史版本。
|
|
- 用户可以从历史版本中回选满意的一版。
|
|
|
|
### 视频来源
|
|
|
|
Stage 4 只展示和管理 AI 生成视频片段。
|
|
|
|
每个 AI 片段的视频来源是：
|
|
|
|
- 当前采用的 AI 生成版本
|
|
- AI 历史版本中的某一版
|
|
|
|
### 故事板使用
|
|
|
|
如果当前片段有故事板，默认使用故事板生成视频。
|
|
|
|
原因：
|
|
|
|
- 对小白用户来说，“使用 / 不使用故事板”解释成本高。
|
|
- 用户既然生成了故事板，视频结果和故事板不一致时容易产生困惑。
|
|
|
|
Stage 4 可以允许用户修改是否使用故事板，但默认不主动要求用户选择。
|
|
|
|
### 页面结构初稿
|
|
|
|
左侧：
|
|
|
|
- 片段列表
|
|
- 每段显示时间范围、来源、生成状态、当前采用版本
|
|
|
|
中间：
|
|
|
|
- 当前片段视频预览 / 生成状态
|
|
- 视频播放器
|
|
- 当前采用版本标识
|
|
|
|
右侧：
|
|
|
|
- 视频提示词编辑器
|
|
- 故事板使用状态 / 可修改
|
|
- 绑定输入资产引用
|
|
- 视频历史版本
|
|
|
|
底部：
|
|
|
|
- 重新生成
|
|
- 采用当前版本
|
|
- 进入拼接导出
|
|
|
|
### 待继续确认
|
|
|
|
- 视频历史版本如何展示。
|