mcn-short-video/flova短剧创作界面分析_20260907.md

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 实现	借鉴点
双栏创作	左画布右对话,对话永驻不打断	mcn-workshop 的 AI 弹窗可改为右侧常驻面板
创作规范注入	对话首轮自动载入 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/文本实测,弹窗与引导层已关闭后采集。