368 lines
17 KiB
Markdown
368 lines
17 KiB
Markdown
# 对话复盘交互规范
|
||
|
||
> 本文档整理编导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）
|
||
|
||
**内容顺序**：
|
||
1. 板块标题（section-divider）：📊 数据概览
|
||
2. 仪表盘卡片（dashboard）：4个指标卡片横排
|
||
- 总对话记录数
|
||
- 总会话数
|
||
- 问题会话占比
|
||
- AI问题类别数 / 精选案例数
|
||
3. 问题分类统计表（table）：
|
||
- 列：问题类别 | 问题会话数 | 占比 | 核心表现 | 会话案例
|
||
- **按会话数从高到低排列**
|
||
- 条形图宽度按占比比例渲染
|
||
- 「会话案例」列：每个问题类别最多放10个会话ID，逗号分隔，字号12px灰色(#64748b)
|
||
4. 技能问题分布表（如有多技能数据）
|
||
5. （可选）编导补充细节方向分布表
|
||
6. （可选）跨周趋势对比表
|
||
|
||
### 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日 数据的梳理结果，仅作示例。不同批次数据可能产生不同类别和数量。核心规则是「根据实际对话内容梳理类别 → 按会话数从高到低排列」。
|
||
|
||
**每个问题类别内部结构**：
|
||
1. 分类头部（prob-header）：序号 + 类别名称 + 定义说明 + 会话数
|
||
- 背景色按类别区分（ph-1 ~ ph-7，浅色背景）
|
||
2. 案例卡片（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）
|
||
|
||
**内容顺序**：
|
||
1. 板块标题：💡 总结与建议
|
||
2. AI生成内容问题本质总结（summary-card）
|
||
- 逐条列出7大问题本质
|
||
3. 优化建议（suggestion-grid）
|
||
- 网格布局（auto-fit, minmax 280px）
|
||
- 每条建议一个卡片：图标 + 标题 + 说明
|
||
|
||
---
|
||
|
||
## 四、交互逻辑
|
||
|
||
### 4.1 顶部导航高亮
|
||
|
||
```javascript
|
||
// 滚动时判断当前所在区域
|
||
// 数据概览区域 → 高亮"数据概览"
|
||
// 问题案例区域(p1-p7) → 高亮"问题案例分析"
|
||
// 总结区域 或 滚动到底部 → 高亮"总结与建议"
|
||
```
|
||
|
||
### 4.2 右侧导航高亮
|
||
|
||
```javascript
|
||
// 滚动时判断当前最近的 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 新类别发现流程
|
||
|
||
1. 通读全部会话对话内容
|
||
2. 对每个有问题的会话，判断AI生成内容的具体问题点
|
||
3. 将问题点聚类归纳，形成类别
|
||
4. 若发现无法归入已有类别的问题，则新增类别
|
||
5. 统计各类别会话数，按从高到低排列
|
||
|
||
---
|
||
|
||
## 八、根因分析框架
|
||
|
||
### 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按日期配对，放在同一目录下
|
||
|
||
---
|
||
|
||
## 十、关键设计决策记录
|
||
|
||
1. **亮色主题统一**：所有报告使用亮色风格，不使用暗色主题
|
||
2. **顶部导航精简**：复盘报告顶部只放3个大板块，不放7个问题类别（避免过于细碎）
|
||
3. **右侧导航位置**：固定在页面右下角（非吸顶），避免遮挡内容
|
||
4. **右侧导航缩小**：整体缩小至原尺寸 2/3，减少视觉干扰
|
||
5. **顶部导航宽度对齐**：与内容区域同宽（max-width: 1400px），不全屏拉伸
|
||
6. **问题类别动态梳理**：不预设固定类别，根据实际对话内容归纳，可能出现新类别或某些类别不存在
|
||
7. **问题类别按数据排序**：确定类别后按会话数从高到低排列，与数据概览表一致
|
||
8. **案例连续编号**：全文案例连续编号，重排类别时同步重编
|
||
9. **聚焦AI问题**：复盘报告聚焦AI生成内容本身的问题，编导补充细节是正常流程不计入问题
|
||
10. **问题分类编码**：不使用缩写（D1-D6等），全部使用完整描述
|
||
11. **大标题独立显示**：「问题案例分析」作为独立板块标题，在数据概览之后、具体案例之前
|