2026-09-29 18:56:24 +08:00
|
|
|
|
# flova.tv 短剧创作界面交互布局与历史对话分析
|
|
|
|
|
|
|
|
|
|
|
|
> 分析日期:2026-09-07 | 数据来源:登录态下页面 DOM 实测(非截图推测)
|
|
|
|
|
|
> 项目:海岸玄幻短剧 → Skill:「3D国漫古装精品短剧」| 项目状态:筹拍中
|
|
|
|
|
|
> URL:`https://flova.tv/zh-CN/project/?id=6546c10813c6436d9c2ee0e39fce39d3`
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
## 一、整体布局
|
|
|
|
|
|
|
|
|
|
|
|
### 响应式双栏(实测两种视口)
|
|
|
|
|
|
|
|
|
|
|
|
| 视口 | 左侧创作区 | 分隔条 | 右侧对话区 |
|
|
|
|
|
|
|------|-----------|--------|-----------|
|
|
|
|
|
|
| 1280 级(小窗)1251×1278 | x=16, **794px(63%)** | — | x=816, **420px(33%)** |
|
|
|
|
|
|
| 全屏 2560×1304 | x=15, **1893px(74%)** | 6px | x=1914, **631px(25%)** |
|
|
|
|
|
|
|
|
|
|
|
|
**布局规律**:右侧对话区 `min-w-[420px]` 且有宽度上限占比,大屏时**创作区优先吃宽度**(74%),对话区最多约 631px;小屏时两者约 63/33。→ 对话区是"窄栏常驻",创作区是"弹性主区"。
|
|
|
|
|
|
|
|
|
|
|
|
### 小窗(1280 级)下的结构示意
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
┌────────────────────────────────────────────────────────────┐
|
|
|
|
|
|
│ 顶部促销 banner(48px) Seedance 2.5 & Wan 3.0 限时狂欢… │
|
|
|
|
|
|
├────────────────────────────────────────────────────────────┤
|
|
|
|
|
|
│ 顶栏:‹ 返回 | 媒体空间 · 时间线 · 文档 | 导出 | 75积分 | Free │
|
|
|
|
|
|
├───────────────────────────────┬────────────────────────────┤
|
|
|
|
|
|
│ 左:创作面板 794px(63%) │ 右:对话区 420px(33%) │
|
|
|
|
|
|
│ ┌───────────────────────────┐ │ ┌────────────────────────┐ │
|
|
|
|
|
|
│ │ 标签页:故事板(当前) │ │ │ 头部:「对话」(40px) │ │
|
|
|
|
|
|
│ │ · 关键元素 · 分镜 │ │ │ ┌────────────────────┐ │ │
|
|
|
|
|
|
│ │ · 音频层 · 未归类素材[全]│ │ │ │ 消息流(988px,滚动) │ │ │
|
|
|
|
|
|
│ │ ┌───────────────────────┐ │ │ │ │ 用户→右对齐卡片 │ │ │
|
|
|
|
|
|
│ │ │ 画布区(生成素材占位) │ │ │ │ │ AI←左对齐Markdown │ │ │
|
|
|
|
|
|
│ │ └───────────────────────┘ │ │ │ │ 状态行(Skill已完成) │ │ │
|
|
|
|
|
|
│ │ 缩放控制 70% │ │ │ │ 选项按钮行 │ │ │
|
|
|
|
|
|
│ └───────────────────────────┘ │ │ └────────────────────┘ │ │
|
|
|
|
|
|
│ │ │ 输入区(122px): │ │
|
|
|
|
|
|
│ │ │ 流程·模型·Skill·资产库 │ │
|
|
|
|
|
|
│ │ │ [请输入消息] 📷 🎤 🎵 ▶ │ │
|
|
|
|
|
|
│ │ └────────────────────────┘ │
|
|
|
|
|
|
└───────────────────────────────┴────────────────────────────┘
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
## 二、交互布局细节(DOM 实测)
|
|
|
|
|
|
|
|
|
|
|
|
### 1. 顶栏(页面级)
|
|
|
|
|
|
- 返回按钮 ‹ / 「媒体空间」「时间线」「文档」三个页面切换入口 / 右侧「导出」按钮 + 积分 75 + 账号 "Free"
|
|
|
|
|
|
|
|
|
|
|
|
### 2. 左侧创作面板(按项目阶段切换标签)
|
|
|
|
|
|
- **标签体系**:`故事板`(当前)/ `关键元素` / `分镜` / `音频层` / `未归类素材`
|
|
|
|
|
|
- 「未归类素材」带 **全部** 开关:默认只显示未放入故事板的素材,打开后包含已入板的素材
|
|
|
|
|
|
- 画布占位文案:「生成的故事板,以及 Flova 放入故事板的素材会显示在这里」→ 该区域是**素材-分镜可视化编排区**
|
|
|
|
|
|
- 底部有缩放控制(当前 70%)
|
|
|
|
|
|
|
|
|
|
|
|
### 3. 右侧对话区(核心:创作引导 + 历史对话)
|
|
|
|
|
|
- **头部**:单标签「对话」(无多会话/多 Tab)
|
|
|
|
|
|
- **消息流**(上下滚动):
|
|
|
|
|
|
- 用户消息:容器 `justify-end`(**右对齐**卡片),带背景图像装饰
|
|
|
|
|
|
- AI 回复:容器 `justify-start`(**左对齐**),内容渲染为 `markdown-content prose prose-invert`(Markdown 富文本,深色反白)
|
|
|
|
|
|
- **工具状态行**:独立小行,如「Skill已完成」→ 展示 AI 内部动作(载入 Skill 等)
|
|
|
|
|
|
- **快捷选项行**:`gap-2` 按钮行,AI 在回复末尾给出待选项(用户点选即发送,如"背叛家族的巡河长辈")
|
|
|
|
|
|
- **输入区**(122px):
|
|
|
|
|
|
- 顶部工具行:流程(默认)/ 模型(新)/ Skill / 资产库 —— 类似 chat 的上下文工具选择
|
|
|
|
|
|
- 输入框 placeholder「请输入消息」+ 📷上传 🎤语音 🎵音频 + 发送 ▶
|
|
|
|
|
|
|
|
|
|
|
|
### 4. 交互特征小结(对本项目最有参考价值)
|
|
|
|
|
|
| 特征 | flova 实现 | 借鉴点 |
|
|
|
|
|
|
|------|-----------|--------|
|
2026-10-08 13:09:06 +08:00
|
|
|
|
| 双栏创作 | 左画布右对话,**对话永驻不打断** | mcn-workshop 的 AI 弹窗可改为右侧常驻面板 |
|
2026-09-29 18:56:24 +08:00
|
|
|
|
| 创作规范注入 | 对话首轮自动载入 Skill("Skill已完成"状态行) | 用户选定 Skill 后第一步就声明规范,后续全部按规范执行 |
|
|
|
|
|
|
| 分步引导 | AI 每次只确认 1 个参数,确认完再问下一个 | 选题→时长→对白→形象→关系→框架→剧本 的渐进式锁定 |
|
|
|
|
|
|
| AI 提供选项 | 回复末尾出 2-4 个**可点选方向**,用户一键续接 | 降低输入成本、保持共创节奏 |
|
|
|
|
|
|
| 素材归属 | 未归类素材 vs 故事板素材 + 「全部」开关 | 素材状态可见性管理 |
|
|
|
|
|
|
| 项目状态 | 顶部状态胶囊(筹拍中) | 创作阶段可视化 |
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
## 三、右侧历史对话完整记录(7 轮共创)
|
|
|
|
|
|
|
|
|
|
|
|
> 主题:**《海河镇蛟录》** 东方玄幻短剧从创意到框架的共创
|
|
|
|
|
|
> 模式:用户提创意 → AI 载入 Skill 规范 → 逐步提问 → 用户逐项选择 → 逐步细化
|
|
|
|
|
|
|
|
|
|
|
|
| 轮次 | 发送者 | 内容摘要 |
|
|
|
|
|
|
|------|--------|----------|
|
|
|
|
|
|
| 1 | 👤 用户 | 指定 Skill「3D国漫古装精品短剧」+ 创意画面:**暴雨夜,天津解放桥霓虹倒映海河,黑影如巨蟒破水而出又沉没** → 请生成东方玄幻短片选题 |
|
|
|
|
|
|
| 1 | 🤖 AI | 「Skill已完成」→ 已载入规范(16:9 横版、3D 古风质感),当前为从零开发阶段;该异象适合做开篇钩子 → 请确认选题方向 + 时长 + 语言 |
|
|
|
|
|
|
| 2 | 👤 用户 | 选题《海河镇蛟录》:解放桥下封印千年玄蛟苏醒,背负家族罪契的年轻巡河人须在洪峰前重新镇蛟;**60秒中文短片**(中文旁白或少量对白) |
|
|
|
|
|
|
| 2 | 🤖 AI | 锁定 60秒/中文/16:9/3D古风东方玄幻;追问:巡河人形象、罪契来源、旁白 or 对白、可上传参考图 |
|
|
|
|
|
|
| 3 | 👤 用户 | 选「以少量中文对白为主」+ 形象「冷峻青年巡河人」(二十多岁、黑色湿发、深色现代巡河服融入古风符纹、背负祖传镇蛟铜铃) |
|
|
|
|
|
|
| 3 | 🤖 AI | 确认参数;追问**核心对白关系**(影响"罪契"揭露的情感方向),请选一种再展示完整故事框架 |
|
|
|
|
|
|
| 4 | 👤 用户 | 选「与长辈遗留的声音对话」:祖辈残音揭家族以血脉续封玄蛟的秘密,主角洪峰前主动接下使命 |
|
|
|
|
|
|
| 4 | 🤖 AI | 给出**完整故事框架**;《海河镇蛟录》暴雨夜玄蛟苏醒→巡河人携铜铃赶到→祖辈残音揭血脉续封秘密→洪峰将至,在逃离宿命与主动接下之间选择→以血脉唤醒铜铃重镇玄蛟。对白=主角×祖辈残音,请确认后细化为剧本 |
|
|
|
|
|
|
| 5 | 👤 用户 | 提要求「强化玄蛟威胁」:保留设定,提升洪峰与城市危机压迫感 |
|
|
|
|
|
|
| 5 | 🤖 AI | 已强化:封印松动→河水暴涨、桥下符印崩裂→洪峰逼向两岸城区;祖辈残音台词「**封印若断,整座城都要陪葬。**」→ 主角须在城市被吞没前以血脉重启封印 |
|
|
|
|
|
|
| 6 | 👤 用户 | 点评「**故事缺少钩子和反派,看点不够**」 |
|
|
|
|
|
|
| 6 | 🤖 AI | 承认"异象—使命—镇压"直线推进的问题 → 建议反派=**背叛家族的巡河长辈**(主动撕开封印、借洪峰达成目的),给出方向选项 |
|
|
|
|
|
|
| 7 | 👤 用户 | (从选项点选)「背叛家族的巡河长辈」:失踪多年的长辈与玄蛟交易,制造洪峰逼主角交出血脉与铜铃 |
|
|
|
|
|
|
| 7 | 🤖 AI | 给出**核心改写四件套**:①开场钩子——铜铃残音警告「**别回头——真正要害死你的,就在身后。**」②反派身份③反派目的④戏剧冲突(祖辈残音揭露:该长辈正是当年罪契失控源头) |
|
|
|
|
|
|
| — | 👤 用户 | 当前最后一条:「**这个结果怎么样?**」→ 等待 AI 综合评估 |
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
## 四、对话结构上的产品发现
|
|
|
|
|
|
|
|
|
|
|
|
> **完整性已验证**:消息列表非虚拟滚动——滚动容器总高 3039px / 可视 982px,30 个消息块全部常驻 DOM,innerText 一次抓全;窗口最大化(2560px)后再次全量抓取,首尾(创意 → "这个结果怎么样?")一致,覆盖全部 7 轮共创,无遗漏。
|
|
|
|
|
|
|
|
|
|
|
|
1. **AI 采用"一次只锁一个参数"的引导节奏**,每个回合末尾必给下一步(提问/选项/确认请求),形成稳定的闭环轮次。
|
|
|
|
|
|
2. **工具动作可视化**:AI 载入 Skill 时插入「Skill已完成」状态行,用户能感知"规范已被应用"。
|
|
|
|
|
|
3. **用户消息常为"标题+说明"双层结构**(如《海河镇蛟录》+ 详细设定),支持多段同发。
|
|
|
|
|
|
4. **剧情质量由用户主动把关**:第 6 轮用户指出"缺钩子和反派",AI 立即重构——共创模式依赖用户提出质量缺口。
|
|
|
|
|
|
5. 对话末尾停留在用户征询「这个结果怎么样?」,**AI 尚未回复** → 会话处于"待 AI 回应"的悬挂状态。
|
|
|
|
|
|
|
|
|
|
|
|
*注:以上全部基于页面 DOM/文本实测,弹窗与引导层已关闭后采集。*
|
