17 KiB
17 KiB
对话复盘交互规范
本文档整理编导AI对话记录分析报告（HTML）的页面格式、内容顺序、交互规则等全部设计要求，作为后续生成同类报告的统一规范。
一、整体视觉风格
1.1 主题与配色
| 元素 | 规则 |
|---|---|
| 页面背景 | #f5f7fa（浅灰） |
| 卡片背景 | #fff（白色） |
| 正文字色 | #1a1a2e |
| 辅助字色 | #64748b / #94a3b8 |
| 边框色 | #e8ecf1 / #f1f5f9 |
| 主题色 | #667eea（紫蓝渐变起始） |
| 标题栏渐变 | linear-gradient(135deg, #667eea 0%, #764ba2 100%) |
| 字体 | -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif |
核心原则：所有报告统一使用亮色主题，不使用暗色/深色背景。白色卡片 + 浅灰背景 + 紫蓝主色调。
1.2 页面宽度
- 内容最大宽度：
max-width: 1400px，水平居中（margin: 0 auto） - 两侧内边距：
padding: 0 24px - 顶部导航宽度须与内容区域一致（
max-width: 1400px; margin: 0 auto; padding: 0 24px），不得全屏拉伸
二、页面结构（从上到下）
┌─────────────────────────────────────────┐
│ 标题栏（渐变背景，白字） │ ← title-bar
├─────────────────────────────────────────┤
│ 顶部一级导航（sticky，3个大板块） │ ← sticky-nav
├─────────────────────────────────────────┤
│ │
│ ┌─────────────────────────┐ ┌──────┐ │
│ │ 数据概览 │ │右侧 │ │
│ │ （仪表盘卡片+分类表） │ │导航 │ │
│ │ │ │ │ │
│ │ 🔍 问题案例分析（大标题） │ │固定 │ │
│ │ ├─ 类别一：案例1、案例2 │ │右下 │ │
│ │ ├─ 类别二：案例3、案例4 │ │角 │ │
│ │ ├─ ... │ │ │ │
│ │ └─ 类别七：案例13、案例14 │ │ │ │
│ │ │ │ │ │
│ │ 总结与建议 │ │ │ │
│ │ （问题本质+优化建议） │ │ │ │
│ └─────────────────────────┘ └──────┘ │
│ │
├─────────────────────────────────────────┤
│ 页脚（版权/时间信息） │ ← footer
└─────────────────────────────────────────┘
2.1 标题栏（title-bar）
- 渐变背景（
#667eea → #764ba2），白色文字 - 内容：报告标题（h1）+ 副标题信息（数据周期、记录数、会话数、编导数、案例数）
- 内边距：
padding: 40px 24px 48px
2.2 顶部一级导航（sticky-nav）
规则：
position: sticky; top: 0; z-index: 100- 白色背景，底部 1px 边框
- 宽度与内容区一致：
max-width: 1400px; margin: 0 auto; padding: 0 24px; box-sizing: border-box - 只放3个大板块，不放7个问题类别：
| 导航项 | 锚点 | 高亮规则 |
|---|---|---|
| 数据概览 | #overview |
滚动在数据概览区域时高亮 |
| 问题案例分析 | #cases |
滚动在任意问题类别（p1-p7）区域时均高亮 |
| 总结与建议 | #summary |
滚动到总结区域时高亮，或滚动到页面底部时高亮 |
- 导航项样式：
flex: 1; text-align: center; padding: 14px 20px; font-size: 14px - 高亮样式：字色
#667eea，底部 3px 实线边框
2.3 右侧案例分类导航（case-sidebar）
位置规则：
position: fixed; bottom: 24px; right: 24px（固定在页面右下角）- 不吸顶（不是 sticky/top 定位）
z-index: 90
尺寸规则（已缩小至原尺寸的 2/3）：
| 属性 | 值 |
|---|---|
| 整体宽度 | 135px |
| 标签字号 | 8px |
| 导航项字号 | 9px |
| 计数字号 | 7px |
| 圆点大小 | 5px × 5px |
| 导航项 padding | 5px 8px |
| 导航项间距 | 4px |
| 圆角 | 5px |
内容规则：
- 标题：「案例分类导航」
- 7个问题类别 + 1个总结与建议，共8项
- 每项包含：彩色圆点 + 类别名称 + 案例数量
- 顺序与问题案例展示顺序一致（按会话数从高到低）
- 点击平滑滚动到对应锚点
- 滚动时自动高亮当前所在区域
- 移动端隐藏（
@media (max-width: 1024px) { .case-sidebar { display: none; } }）
2.4 主内容区（main-layout）
max-width: 1400px; margin: 0 auto; padding: 0 24px- 左侧内容区 + 右侧浮动导航（右侧导航在 main-layout 外部，用 fixed 定位）
- 内容区最大宽度约
1160px（为右侧导航留空间）
三、内容板块与顺序
3.1 板块一：数据概览（#overview）
内容顺序：
- 板块标题（section-divider）：📊 数据概览
- 仪表盘卡片（dashboard）：4个指标卡片横排
- 总对话记录数
- 总会话数
- 问题会话占比
- AI问题类别数 / 精选案例数
- 问题分类统计表（table）：
- 列：问题类别 | 问题会话数 | 占比 | 核心表现 | 会话案例
- 按会话数从高到低排列
- 条形图宽度按占比比例渲染
- 「会话案例」列：每个问题类别最多放10个会话ID，逗号分隔，字号12px灰色(#64748b)
- 技能问题分布表（如有多技能数据）
- （可选）编导补充细节方向分布表
- （可选）跨周趋势对比表
3.2 板块二：问题案例分析（#cases）
大标题：
- 在第一个问题类别之前，独立显示「🔍 问题案例分析」板块标题
- 附说明文字：「以下N个类别按问题会话数从高到低排列，每类精选1-2个代表性案例，聚焦AI生成内容本身的问题」
问题类别确定规则：
- 问题类别不固定为某几个，而是根据实际对话内容梳理得出
- 每次分析时通读全部会话，从对话中归纳AI生成内容的实际问题维度
- 可能出现新的问题类别，也可能某些类别在当前批次数据中不存在
- 类别数量不设上限，以能覆盖实际问题为准则
- 确定类别后，按会话数从高到低排列，依次编号 p1、p2、p3...
问题类别顺序（按会话数从高到低，以下为当前批次示例）：
| 序号 | 类别名称 | 锚点 | 颜色 |
|---|---|---|---|
| 一 | 骨架没搭好 | #p1 |
#ef4444（红） |
| 二 | 画面不到位 | #p2 |
#f97316（橙） |
| 三 | 语气不对 | #p3 |
#eab308（黄） |
| 四 | 方向跑偏 | #p4 |
#a855f7（紫） |
| 五 | 节奏不对 | #p5 |
#14b8a6（青） |
| 六 | 故事讲不通 | #p6 |
#3b82f6（蓝） |
| 七 | AI处理复杂意图不全面 | #p7 |
#ec4899（粉） |
注意：以上为 7月10-15日 数据的梳理结果，仅作示例。不同批次数据可能产生不同类别和数量。核心规则是「根据实际对话内容梳理类别 → 按会话数从高到低排列」。
每个问题类别内部结构：
- 分类头部（prob-header）：序号 + 类别名称 + 定义说明 + 会话数
- 背景色按类别区分（ph-1 ~ ph-7，浅色背景）
- 案例卡片（case-card），每类 1-2 个
案例卡片格式：
┌─ 案例N：编导名（会话ID，X轮） ─────── [标签] ─┐
│ 元信息：编导名 | 会话ID | 对话轮次 | 技能 │
│ │
│ 对话区域（dialogue）： │
│ ┌─ 第1轮 ─────────────────────────────┐ │
│ │ 编导：用户输入内容摘录 │ │
│ │ AI：AI输出内容摘录（可选） │ │
│ └──────────────────────────────────────┘ │
│ ┌─ 第2轮 ─────────────────────────────┐ │
│ │ ... │ │
│ └──────────────────────────────────────┘ │
│ │
│ 问题高亮（highlight-box）：编导反馈中的关键句 │
│ │
│ 根因分析（analysis-box）：AI问题根因 + 启示 │
└───────────────────────────────────────────────┘
案例编号规则：
- 全文案例连续编号（1, 2, 3, ... 14）
- 编号顺序与问题类别排列顺序一致
- 重排类别时必须同步重编案例号
案例标签（3种）：
| 标签 | 样式 | 含义 |
|---|---|---|
| 经典 | #fef3c7 / #d97706（黄底深黄字） |
教科书级典型案例 |
| 代表性 | #e0e7ff / #4338ca（蓝底深蓝字） |
该类别最典型表现 |
| 独特 | #fce7f3 / #be185d（粉底深粉字） |
独特少见的问题表现 |
对话摘录规则：
- 编导消息：白底 + 左侧 3px 紫蓝边框
- AI消息：白底 + 左侧 3px 灰色边框
- 每轮标注「第N轮」
- 摘录关键内容，非全文照搬（每轮控制在 200-400 字）
3.3 板块三：总结与建议（#summary）
内容顺序：
- 板块标题：💡 总结与建议
- AI生成内容问题本质总结（summary-card）
- 逐条列出7大问题本质
- 优化建议（suggestion-grid）
- 网格布局（auto-fit, minmax 280px）
- 每条建议一个卡片：图标 + 标题 + 说明
四、交互逻辑
4.1 顶部导航高亮
// 滚动时判断当前所在区域
// 数据概览区域 → 高亮"数据概览"
// 问题案例区域(p1-p7) → 高亮"问题案例分析"
// 总结区域 或 滚动到底部 → 高亮"总结与建议"
4.2 右侧导航高亮
// 滚动时判断当前最近的 section id
// 在 p1-p7 + summary 中匹配，高亮对应导航项
4.3 点击平滑滚动
- 所有锚点链接使用
scrollIntoView({ behavior: 'smooth' })或scrollTo+scroll-margin-top: 60px（避免被 sticky-nav 遮挡）
五、响应式规则
| 断点 | 规则 |
|---|---|
≤ 1024px |
右侧导航隐藏 |
≤ 768px |
仪表盘卡片 2列；建议网格 1列 |
≤ 480px |
仪表盘卡片 1列；标题字号缩小 |
六、两类报告的差异
6.1 常规分析报告（按日期批次）
- 顶部导航：5项（数据概览 / 问题分类统计 / 问题案例 / 跨问题分析 / 结论与建议）
- 案例数量：全量展示（如54个案例）
- 案例分类导航：页面内粘性导航条（
position: sticky; top: 49px），横向排列 - 额外内容：编导补充细节方向分布表、跨周趋势对比表
- 问题分类编码：不使用缩写（如 D1-D6），用完整描述
6.2 整体复盘报告（精选案例）
- 顶部导航：3项（数据概览 / 问题案例分析 / 总结与建议）
- 案例数量：精选 14 个（每类 1-2 个）
- 案例分类导航：右下角固定浮动面板（
position: fixed; bottom: 24px; right: 24px） - 案例聚焦：AI生成内容本身的问题，而非编导表述是否清楚
- 额外内容：AI问题本质总结、优化建议网格
- 问题类别排序：按会话数从高到低
七、问题分类体系
7.1 分类原则
- 不预设固定类别：每次分析根据实际对话内容梳理，从编导反馈和AI输出中归纳真实存在的问题维度
- 动态调整：新批次数据可能发现新的问题类别，也可能某些类别在当前数据中不存在
- 以覆盖性为准则：类别数量不设上限，确保能覆盖当前批次的实际问题
- 聚焦AI生成内容：分类针对AI生成内容本身的问题，编导与AI对话完善细节是正常流程，不计入问题
7.2 当前已识别的问题类别（参考）
以下为历次分析中已识别出的问题类别，供后续分析参考，但不作为固定清单：
| 类别 | 定义 | 典型表现 | 首次发现 |
|---|---|---|---|
| 骨架没搭好 | AI对标重构时框架与原作/需求脱节 | 对标视频结构完全偏离、抄袭后混乱 | 6月29日批次 |
| 画面不到位 | AI生成的画面描述不够具体/准确 | 镜头方向反复改错、格式约束丢失 | 6月29日批次 |
| 语气不对 | AI生成的人设语气偏离设定 | 特征放大效应、偶像话术"加戏" | 6月29日批次 |
| 方向跑偏 | AI理解编导意图时方向错误 | 照抄与夸张间摇摆、不做加法 | 6月29日批次 |
| 节奏不对 | AI修改时节奏失控 | 精简变删字数、修改时加法偏好 | 6月29日批次 |
| 故事讲不通 | AI生成的内容逻辑/事实有误 | 用模糊记忆替代事实、遗忘核心设定 | 6月29日批次 |
| AI处理复杂意图不全面 | AI处理≥5维度修改时系统性丢失 | 否定式指令执行力弱、多维度遗漏 | 7月10日批次 |
7.3 新类别发现流程
- 通读全部会话对话内容
- 对每个有问题的会话，判断AI生成内容的具体问题点
- 将问题点聚类归纳，形成类别
- 若发现无法归入已有类别的问题，则新增类别
- 统计各类别会话数，按从高到低排列
八、根因分析框架
8.1 分析视角
- 聚焦AI生成内容的问题（而非编导表述是否清楚）
- 编导与AI对话完善细节是正常创作流程，不归为问题
- 每个案例需指出：AI在什么环节、以什么方式"翻车"
8.2 编导补充细节方向（5类，非问题，作为参考）
| 类别 | 说明 |
|---|---|
| 画面镜头细节 | 补充具体镜头方向、景别、转场 |
| 角色设定细节 | 补充人设特征、性格表现 |
| 剧情逻辑细节 | 补充故事线、因果关系 |
| 台词呈现细节 | 补充口播语气、用词风格 |
| 内容深化与校正 | 纠正事实错误、深化内容 |
九、文件命名与存储
9.1 目录结构
project/编导AI脚本对话记录分析/
├── 编导AI脚本对话记录分析_6月29日至7月5日.html
├── MCN脚本创作输入记录分析_6月29日至7月5日.md
├── 编导AI脚本对话记录分析_7月7日至7月8日.html
├── MCN脚本创作输入记录分析_7月7日至7月8日.md
├── 编导AI脚本对话记录分析_7月10日至7月15日.html
├── MCN脚本创作输入记录分析_7月10日至7月15日.md
├── 编导AI对话记录整体复盘报告.html
└── 对话复盘交互.md ← 本文件
9.2 命名规范
- HTML报告：
编导AI脚本对话记录分析_YYYY月X日至YYYY月Y日.html - MD报告：
MCN脚本创作输入记录分析_YYYY月X日至YYYY月Y日.md - 整体复盘：
编导AI对话记录整体复盘报告.html - 交互规范：
对话复盘交互.md - MD和HTML按日期配对，放在同一目录下
十、关键设计决策记录
- 亮色主题统一：所有报告使用亮色风格，不使用暗色主题
- 顶部导航精简：复盘报告顶部只放3个大板块，不放7个问题类别（避免过于细碎）
- 右侧导航位置：固定在页面右下角（非吸顶），避免遮挡内容
- 右侧导航缩小：整体缩小至原尺寸 2/3，减少视觉干扰
- 顶部导航宽度对齐：与内容区域同宽（max-width: 1400px），不全屏拉伸
- 问题类别动态梳理：不预设固定类别，根据实际对话内容归纳，可能出现新类别或某些类别不存在
- 问题类别按数据排序：确定类别后按会话数从高到低排列，与数据概览表一致
- 案例连续编号：全文案例连续编号，重排类别时同步重编
- 聚焦AI问题：复盘报告聚焦AI生成内容本身的问题，编导补充细节是正常流程不计入问题
- 问题分类编码：不使用缩写（D1-D6等），全部使用完整描述
- 大标题独立显示：「问题案例分析」作为独立板块标题，在数据概览之后、具体案例之前