924 lines
52 KiB
Markdown
924 lines
52 KiB
Markdown
# User_Role_Interfaces.md - 用户角色与界面规范
|
||
|
||
| 文档类型 | **UI/UX Spec (Interface Definitions)** |
|
||
| --- | --- |
|
||
| **项目名称** | SmartAudit (AI 营销内容合规审核平台) |
|
||
| **版本号** | V1.0 |
|
||
| **发布日期** | 2026-01-30 |
|
||
| **关联文档** | RequirementsDoc.md (RD), PRD.md |
|
||
| **侧重** | 角色权限、核心页面布局、交互逻辑 |
|
||
|
||
---
|
||
|
||
## 版本历史 (Version History)
|
||
|
||
| 版本 | 日期 | 作者 | 变更说明 |
|
||
| --- | --- | --- | --- |
|
||
| V0.1 | 2026-01-30 | Gemini | 初稿：角色权限、三端界面设计 |
|
||
| V1.0 | 2026-02-02 | Claude | 审阅补充：导航结构、数据看板、响应式/无障碍设计、错误处理规范 |
|
||
| V1.1 | 2026-02-02 | Claude | 与 RD/PRD 对齐：补充用户故事引用、区域合规、特例记录规范、证据链权限 |
|
||
| V1.2 | 2026-02-02 | Claude | 新增代理商端和品牌方端移动端 UI 设计（工作台、快捷审核、预警、审批） |
|
||
| V1.3 | 2026-02-02 | Claude | 新增 AI 服务配置章节（4.6），品牌方专属功能 |
|
||
|
||
---
|
||
|
||
## 1. 角色权限矩阵 (Role-Permission Matrix)
|
||
|
||
在进入界面细节前，先明确各角色在系统中的能力边界。
|
||
|
||
> 对应 PRD 第8章、RequirementsDoc 第3章
|
||
|
||
| 功能模块 | 👤 达人 (Creator) | 👥 代理商 (Agency) | 🛡️ 品牌方 (Brand) |
|
||
| --- | --- | --- | --- |
|
||
| **终端设备** | **Mobile (主) / Desktop** | **Desktop (主) / Mobile (辅)** | **Desktop (主) / Mobile (辅)** |
|
||
| **Brief 管理** | 查看任务详情 | ✅ 上传/解析/编辑 Brief | ✅ 全局规则配置 |
|
||
| **脚本/视频提交** | ✅ 上传 & 修改 [US-03] | ❌ 不可提交 | ❌ 不可提交 |
|
||
| **查看 AI 报告** | ✅ 仅查看自己的 [US-07] | ✅ 查看所管辖达人的 | ✅ 查看所有 |
|
||
| **审核决策** | ❌ 无权 | ✅ 初审 (驳回/通过) [US-08] | ✅ 终审 / 强制通过 [US-09] |
|
||
| **申诉功能** | ✅ 发起申诉 (消耗令牌) | ✅ 仲裁申诉 | ❌ 无需申诉 |
|
||
| **证据链导出** | ❌ 无权 | ✅ 导出所管辖任务 | ✅ 导出全部 [US-12] |
|
||
| **数据看板** | 仅看个人任务进度 | 整体进度 / 达人排名 | 全局合规率 / 舆情风控 |
|
||
| **系统配置** | ❌ 无权 | ❌ 无权 | ✅ 规则库/阈值/白名单/区域合规 [US-10] |
|
||
| **AI 服务配置** | ❌ 无权 | ❌ 无权（继承品牌方配置） | ✅ 配置 AI 提供商/模型/参数 |
|
||
| **用户管理** | ❌ 无权 | ✅ 管理所属达人 | ✅ 管理代理商与达人 |
|
||
|
||
---
|
||
|
||
## 1.1 各端导航结构 (Navigation Structure)
|
||
|
||
### 达人端 (Mobile-First)
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ 底部导航栏 (Tab Bar) │
|
||
├─────────┬─────────┬─────────┬───────┤
|
||
│ 🏠 │ 📤 │ 🔔 │ 👤 │
|
||
│ 任务 │ 上传 │ 消息 │ 我的 │
|
||
└─────────┴─────────┴─────────┴───────┘
|
||
```
|
||
|
||
### 代理商端 (Desktop Sidebar)
|
||
```
|
||
┌──────────────────────────────────────────────┐
|
||
│ 📊 工作台 (Dashboard) │
|
||
│ 📋 Brief 管理 │
|
||
│ ✅ 审核台 (Review) │
|
||
│ 👥 达人管理 │
|
||
│ 📈 数据报表 │
|
||
│ ⚙️ 设置 │
|
||
└──────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 代理商端 (Mobile Tab Bar) 📱
|
||
```
|
||
┌─────────────────────────────────────────────┐
|
||
│ 底部导航栏 (Tab Bar) │
|
||
├─────────┬─────────┬─────────┬─────────┬─────┤
|
||
│ 🏠 │ ✅ │ 📋 │ 🔔 │ 👤 │
|
||
│ 工作台 │ 审核 │ 任务 │ 消息 │ 我的│
|
||
└─────────┴─────────┴─────────┴─────────┴─────┘
|
||
```
|
||
> 📱 **移动端定位：** 外出场景下的紧急审核处理、进度查看、消息通知，复杂配置操作引导至桌面端完成
|
||
|
||
### 品牌方端 (Desktop Sidebar)
|
||
```
|
||
┌──────────────────────────────────────────────┐
|
||
│ 📊 数据看板 (Analytics) │
|
||
│ 🛡️ 规则配置 (Rule Engine) │
|
||
│ 📋 审计日志 (Audit Log) │
|
||
│ 👥 代理商管理 │
|
||
│ 🔔 舆情预警 │
|
||
│ ⚙️ 系统设置 │
|
||
│ └ 🤖 AI 服务配置 │
|
||
└──────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 品牌方端 (Mobile Tab Bar) 📱
|
||
```
|
||
┌─────────────────────────────────────────────┐
|
||
│ 底部导航栏 (Tab Bar) │
|
||
├─────────┬─────────┬─────────┬─────────┬─────┤
|
||
│ 📊 │ 🔔 │ ✅ │ 📋 │ 👤 │
|
||
│ 看板 │ 预警 │ 审批 │ 日志 │ 我的│
|
||
└─────────┴─────────┴─────────┴─────────┴─────┘
|
||
```
|
||
> 📱 **移动端定位：** 关键指标查看、舆情预警响应、强制通过审批，规则配置等复杂操作引导至桌面端完成
|
||
|
||
---
|
||
|
||
## 2. 界面详解：达人端 (The Creator Portal)
|
||
|
||
**设计目标：** 极简、透明、减少焦虑。让达人像发朋友圈一样简单地完成合规检查。
|
||
**核心设备：** 手机浏览器 (Mobile Web) / 小程序。
|
||
|
||
### 2.1 任务列表页 (Task List)
|
||
|
||
* **状态概览：** 卡片式布局，显示当前任务状态（待提交、AI审核中、需修改、已通过）。
|
||
* **行动号召 (CTA):** 针对不同状态显示醒目按钮，如 `[上传脚本]` 或 `[查看修改意见]`。
|
||
|
||
### 2.2 智能上传与扫描页 (The Magic Scanner) [US-03, US-07]
|
||
|
||
这是达人等待 AI 结果的页面，必须缓解等待焦虑（Wait-time Anxiety）。
|
||
|
||
* **文件支持：** 支持粘贴文本、上传文档、上传视频文件（≤ 100MB，1080p）
|
||
* **透明思考 UI：** 实时显示 AI 处理进度
|
||
* 屏幕中央显示 AI 正在扫描的动态波纹
|
||
* **进度指示器：** 显示当前处理阶段和预估剩余时间
|
||
* **滚动日志 (Rolling Log):** 实时显示 AI 动作，例如：
|
||
> 🔍 *正在解析 Brief 核心卖点...*
|
||
> 👁️ *正在逐帧检测竞品 Logo...*
|
||
> 🧠 *正在分析口播情感色彩...*
|
||
> ✅ *口播检测完成，正在核对卖点覆盖...*
|
||
* **离开提示：** 深度审核约需 1-3 分钟，可选择离开并通过微信通知结果
|
||
|
||
|
||
|
||
|
||
|
||
### 2.3 审核结果反馈页 (Audit Report)
|
||
|
||
当 AI 发现问题时，不能直接把 JSON 扔给达人，要翻译成“人话”。
|
||
|
||
* **结果横幅：**
|
||
* 🔴 **未通过 (Blocked):** 存在硬性违规，必须修改。
|
||
* 🟡 **建议修改 (Warning):** 存在舆情风险或卖点遗漏，建议优化。
|
||
* 🟢 **AI 初审通过:** 已自动转交人工复核。
|
||
|
||
|
||
* **修改清单 (Action Items):**
|
||
* **时间轴跳转：** 点击报错条目，视频自动跳转到对应秒数（例如 00:15）。
|
||
* **错误详情：**
|
||
* *错误类型：* 广告法违禁词
|
||
* *原内容：* “全网第一”
|
||
* *AI建议：* 建议改为“深受喜爱”或“销量领先”。
|
||
|
||
|
||
|
||
|
||
* **申诉入口：**
|
||
* 在每一条报错旁边提供 `[ 申诉 ]` 按钮
|
||
* **申诉弹窗：**
|
||
* 显示剩余令牌数量（如：剩余 2 次）
|
||
* 令牌配额基于达人信用评分（历史表现越好，配额越高）
|
||
* 提供理由输入框（必填，≥ 10 字）
|
||
* 可上传补充证据（截图、链接等）
|
||
* **申诉流程：** 提交 → 代理商仲裁 → 结果通知
|
||
* **令牌返还：** 申诉成功后令牌自动返还
|
||
|
||
### 2.4 消息通知中心 (Notification Center)
|
||
|
||
达人需要及时获知任务状态变化，避免反复主动查询。
|
||
|
||
* **通知类型：**
|
||
* 🔔 **任务分配：** "您有一个新任务【XX品牌618推广】，请在 3 天内提交脚本"
|
||
* ✅ **审核通过：** "恭喜！您的视频已通过审核，可安排发布"
|
||
* ❌ **需要修改：** "您的视频有 2 处需修改，点击查看详情"
|
||
* 💬 **申诉结果：** "您的申诉已通过，AI 已学习您的反馈"
|
||
|
||
* **通知渠道：**
|
||
* App 内消息中心（必选）
|
||
* 微信服务号推送（可选）
|
||
* 短信提醒（仅紧急/超时）
|
||
|
||
### 2.5 历史记录页 (History)
|
||
|
||
* **任务归档：** 按品牌/时间筛选已完成的任务
|
||
* **数据统计：**
|
||
* 累计完成任务数
|
||
* 一次通过率（个人）
|
||
* 平均修改轮次
|
||
* **证书导出：** 支持导出"合规达人"认证徽章（达到一定通过率后解锁）
|
||
|
||
---
|
||
|
||
## 3. 界面详解：代理商端 (The Agency Console)
|
||
|
||
**设计目标：** 高效、批量、上帝视角。
|
||
**核心设备：** 桌面端 (Desktop Web) 为主，移动端 (Mobile) 为辅。
|
||
|
||
### 3.1 工作台 (Dashboard)
|
||
|
||
* **待办事项：** 醒目显示 `待人工复核 (12)`、`申诉待仲裁 (3)`。
|
||
* **项目概览：** 显示当前 Brief 下的所有达人提交进度条。
|
||
|
||
### 3.2 Brief 配置中心 (Brief Setup) [US-01, US-02]
|
||
|
||
* **全能解析器：** 巨大的拖拽上传区域
|
||
* 支持 PDF/Word/Excel/PPT/图片上传
|
||
* **在线文档链接导入：** 支持飞书/Notion 等已授权分享链接
|
||
* ⚠️ **重要约束：** 仅支持用户授权的分享链接；不得绕过权限或抓取受限内容
|
||
* **投放平台选择：** 选择目标平台（抖音/小红书/B站等），自动加载对应平台规则库
|
||
* **区域合规切换：** 不同地区投放可切换对应法规与平台规则版本
|
||
* **规则确认区 (Split View):**
|
||
* 左侧：原始 PDF/文档预览
|
||
* 右侧：AI 提取出的**结构化规则表单**（可编辑）
|
||
* *必含词：* [美白] [淡斑] (支持手动增删)
|
||
* *禁忌词：* [药用] [治疗]
|
||
* *语义卖点：* [产品核心功效] [使用场景] (支持手动增删，AI 基于语义理解而非关键词匹配)
|
||
* *调性标签：* [年轻活力] [专业可信] (支持手动选择/自定义)
|
||
* *时序要求：* [产品同框 > 5秒] [品牌名提及 ≥ 3次] (支持手动配置)
|
||
* *参考图：* (显示 AI 从 Brief 提取的参考图，支持增删)
|
||
* **规则冲突提示：** 若 Brief 要求与平台规则冲突，高亮显示并给出建议
|
||
|
||
> 💡 **软广/种草内容审核说明：** 软性植入内容通常没有明确的关键词，系统通过**语义理解**而非关键词匹配来检测卖点覆盖情况。例如，"产品核心功效"是一个语义概念，AI 会理解达人是否表达了产品的功效，而不是简单搜索某个具体词汇。
|
||
|
||
|
||
|
||
|
||
|
||
### 3.3 核心审核决策台 (The Review Cockpit) ✨ *核心功能* [US-05, US-08]
|
||
|
||
这是系统最复杂的界面，用于人工复核 AI 的结果。
|
||
|
||
**布局结构：**
|
||
|
||
* **左侧：视频播放器**
|
||
* **智能进度条：** 进度条上打满 colored dots
|
||
* 🔴 红点：硬伤（点击跳转）
|
||
* 🟠 橙点：油腻/舆情风险
|
||
* 🟢 绿点：成功识别到的卖点（High-light）
|
||
* **画中画参考：** 播放器角落可悬浮 Brief 中的参考图，方便对比（如对比手持产品的手势）
|
||
|
||
* **右侧：AI 检查单 (The Checklist)**
|
||
* **分区一：硬性合规 (Hard Rules)** — 必须处理
|
||
* [✅] 违禁词检测
|
||
* [✅] 竞品 Logo 检测
|
||
* **分区二：Brief 完成度 (Brief Compliance)**
|
||
* [❌] 卖点：未提及"24小时持妆" (AI 提示：全程未检测到相关语义)
|
||
* **分区三：舆情雷达 (Sentiment Radar)** [US-06]
|
||
* [⚠️] **00:42 油腻预警：** 达人表情过于夸张，建议检查
|
||
* ⚠️ **重要说明：** 软性风险（油腻/爹味/性别偏见等）**仅作提示，不强制拦截**，需人工复核确认
|
||
|
||
* **底部：决策栏 (Action Bar)**
|
||
* `[ 驳回 ]`：点击后，自动将勾选的问题打包发送给达人
|
||
* `[ 强制通过 ]` [US-09]：忽略 AI 的黄色警告，强制放行
|
||
* **必须填写放行原因**（如"达人玩的新梗，品牌方认可"）
|
||
* **记录审批人**与操作时间，纳入审计日志
|
||
* `[ 记录为特例 ]`：将当前判断记录为规则白名单/豁免条款
|
||
* 需品牌方确认后生效
|
||
* 如需用于模型优化，必须确保数据授权与合规评估
|
||
* `[ 通过 ]`：流程结束
|
||
|
||
|
||
|
||
### 3.4 版本比对视窗 (Diff View) [US-13]
|
||
|
||
当达人提交 V2 版本时触发。
|
||
|
||
* **顶部统计摘要：**
|
||
```
|
||
┌─────────────────────────────────────────────────────┐
|
||
│ 📊 版本差异报告 │
|
||
│ V1 版本指出 3 个违规点：✅ 已修复 2 个 | ❌ 未修复 1 个 │
|
||
└─────────────────────────────────────────────────────┘
|
||
```
|
||
* **双屏模式：** 左侧 V1，右侧 V2（同步播放）
|
||
* **差异高亮：**
|
||
* 右侧列表仅显示 **"V1 报错点"** 的修复情况
|
||
* 状态：`已修复 ✅` 或 `未修复 ❌`
|
||
* 点击条目可跳转到对应时间戳，V1/V2 同步定位
|
||
* **快速决策：** 若所有违规点均已修复，提供"快速通过"按钮
|
||
|
||
### 3.5 达人管理 (Creator Management)
|
||
|
||
* **达人列表：**
|
||
* 显示所有关联达人的基本信息、信用评分、历史通过率
|
||
* 支持按平台（抖音/小红书/B站）、状态（活跃/休眠）筛选
|
||
|
||
* **达人画像卡片：**
|
||
* 基本信息：昵称、平台账号、粉丝量级
|
||
* 合作数据：累计任务数、一次通过率、平均响应时长
|
||
* 信用评分：基于历史表现的信用分（影响申诉令牌配额）
|
||
|
||
* **批量操作：**
|
||
* 批量分配任务
|
||
* 批量发送催促通知
|
||
* 批量导出达人数据
|
||
|
||
### 3.6 数据报表 (Analytics Reports)
|
||
|
||
* **项目维度：**
|
||
* 当前项目进度：已提交 / 审核中 / 已通过 / 待修改
|
||
* 平均审核周期（从提交到最终通过）
|
||
* 修改轮次分布图
|
||
|
||
* **达人维度：**
|
||
* 达人排行榜（按通过率、响应速度）
|
||
* 问题达人预警（连续多次未通过）
|
||
|
||
* **问题类型分析：**
|
||
* 高频违规词 TOP 10
|
||
* 常见遗漏卖点统计
|
||
* 舆情风险分布
|
||
|
||
* **导出功能：**
|
||
* 支持导出 Excel/PDF 格式
|
||
* 支持定时邮件订阅周报
|
||
|
||
### 3.7 批量操作中心 (Batch Operations) [US-11]
|
||
|
||
* **批量上传：** 支持 ZIP 压缩包批量上传多个视频
|
||
* **批量审核：** 对无问题项批量通过（需二次确认）
|
||
* **批量导出：** 一键导出选中任务的审核报告
|
||
* 支持 Excel/PDF 格式
|
||
* 包含完整审核证据链
|
||
|
||
### 3.8 移动端界面 (Mobile Portal) 📱
|
||
|
||
**设计目标：** 外出场景下的紧急审核处理、进度监控、即时通知响应。
|
||
**核心设备：** 手机浏览器 / 小程序 / App。
|
||
**定位：** 桌面端的轻量补充，复杂操作引导至桌面端完成。
|
||
|
||
#### 3.8.1 移动端工作台 (Mobile Dashboard)
|
||
|
||
```
|
||
┌─────────────────────────────────────────────┐
|
||
│ 📊 代理商工作台 [头像] │
|
||
├─────────────────────────────────────────────┤
|
||
│ ┌─────────────┐ ┌─────────────┐ │
|
||
│ │ 🔴 待审核 │ │ ⚠️ 待仲裁 │ │
|
||
│ │ 12 │ │ 3 │ │
|
||
│ └─────────────┘ └─────────────┘ │
|
||
│ ┌─────────────┐ ┌─────────────┐ │
|
||
│ │ ✅ 今日通过 │ │ 📋 进行中 │ │
|
||
│ │ 28 │ │ 45 │ │
|
||
│ └─────────────┘ └─────────────┘ │
|
||
├─────────────────────────────────────────────┤
|
||
│ 📌 紧急待办 │
|
||
│ ├─ 🔴 达人A视频 - 竞品露出 (2小时前) │
|
||
│ ├─ 🟠 达人B申诉 - 待仲裁 (30分钟前) │
|
||
│ └─ 🟡 达人C视频 - AI审核完成 │
|
||
├─────────────────────────────────────────────┤
|
||
│ 🏠 ✅ 📋 🔔 👤 │
|
||
│ 工作台 审核 任务 消息 我的 │
|
||
└─────────────────────────────────────────────┘
|
||
```
|
||
|
||
#### 3.8.2 移动端快捷审核 (Quick Review)
|
||
|
||
**场景：** 外出时收到紧急审核通知，需快速处理。
|
||
|
||
```
|
||
┌─────────────────────────────────────────────┐
|
||
│ ← 返回 快捷审核 ⋮ 更多 │
|
||
├─────────────────────────────────────────────┤
|
||
│ ┌─────────────────────────────────────┐ │
|
||
│ │ │ │
|
||
│ │ 📹 视频播放器 │ │
|
||
│ │ (支持横屏全屏) │ │
|
||
│ │ │ │
|
||
│ │ advancement bar with colored dots │ │
|
||
│ │ 🔴──🟠────────🟢────────────────── │ │
|
||
│ └─────────────────────────────────────┘ │
|
||
├─────────────────────────────────────────────┤
|
||
│ 🔴 硬性问题 (1) 展开 ▼│
|
||
│ ├─ 00:15 竞品Logo露出 [点击跳转] │
|
||
├─────────────────────────────────────────────┤
|
||
│ 🟠 舆情提示 (1) 展开 ▼│
|
||
│ ├─ 00:42 油腻风险 (仅提示) │
|
||
├─────────────────────────────────────────────┤
|
||
│ 🟢 卖点覆盖 (3/4) 展开 ▼│
|
||
├─────────────────────────────────────────────┤
|
||
│ │
|
||
│ [ 驳回 ] [ 通过 ] [强制通过▼] │
|
||
│ │
|
||
└─────────────────────────────────────────────┘
|
||
```
|
||
|
||
**交互说明：**
|
||
* 点击问题条目自动跳转到视频对应时间点
|
||
* 横屏模式下视频全屏播放，问题列表收起为浮层
|
||
* "强制通过"需输入原因，记录审批人
|
||
* 复杂编辑（如修改 Brief）提示"请在电脑端操作"
|
||
|
||
#### 3.8.3 移动端任务列表 (Task List)
|
||
|
||
```
|
||
┌─────────────────────────────────────────────┐
|
||
│ 📋 任务列表 🔍 筛选 ▼ │
|
||
├─────────────────────────────────────────────┤
|
||
│ ┌─────────────────────────────────────┐ │
|
||
│ │ 🔴 XX品牌618推广 - 达人A │ │
|
||
│ │ 竞品露出 · 待审核 · 2小时前 │ │
|
||
│ │ [查看详情] │ │
|
||
│ └─────────────────────────────────────┘ │
|
||
│ ┌─────────────────────────────────────┐ │
|
||
│ │ 🟡 XX品牌618推广 - 达人B │ │
|
||
│ │ AI审核完成 · 待确认 · 1小时前 │ │
|
||
│ │ [快捷审核] │ │
|
||
│ └─────────────────────────────────────┘ │
|
||
│ ┌─────────────────────────────────────┐ │
|
||
│ │ ✅ XX品牌618推广 - 达人C │ │
|
||
│ │ 已通过 · 今天 14:30 │ │
|
||
│ │ [查看报告] │ │
|
||
│ └─────────────────────────────────────┘ │
|
||
├─────────────────────────────────────────────┤
|
||
│ 🏠 ✅ 📋 🔔 👤 │
|
||
└─────────────────────────────────────────────┘
|
||
```
|
||
|
||
#### 3.8.4 移动端消息中心 (Notifications)
|
||
|
||
* **通知类型：**
|
||
* 🔴 **紧急：** 硬性违规视频需处理
|
||
* 🟠 **申诉：** 达人申诉待仲裁
|
||
* 🟢 **完成：** 达人提交新版本 / 审核通过
|
||
* 📊 **日报：** 每日审核数据汇总（可配置推送时间）
|
||
|
||
* **快捷操作：**
|
||
* 通知卡片支持左滑"标记已读"
|
||
* 点击直接跳转对应任务
|
||
* 支持按类型筛选
|
||
|
||
---
|
||
|
||
## 4. 界面详解：品牌方端 (The Brand Admin)
|
||
|
||
**设计目标：** 监管、配置、数据沉淀、风险预警。
|
||
**核心设备：** 桌面端 (Desktop Web) 为主，移动端 (Mobile) 为辅。
|
||
|
||
### 4.1 数据看板 (Executive Dashboard) ✨ *核心功能*
|
||
|
||
品牌方需要一目了然地掌握整体合规状况。
|
||
|
||
> 对应 PRD 成功指标：人工投入时长、初审通过率、召回率/误报率、舆情一致性
|
||
|
||
**顶部指标卡片：**
|
||
```
|
||
┌─────────────┬─────────────┬─────────────┬─────────────┬─────────────┐
|
||
│ 📊 本月 │ ✅ 初审 │ 🎯 硬性 │ ⚠️ 舆情 │ ⏱️ 平均 │
|
||
│ 审核总量 │ 通过率 │ 召回率 │ 拦截数 │ 审核周期 │
|
||
│ 1,234 │ 78.5% │ 96.2% │ 23 │ 4.2 小时 │
|
||
│ ↑12% │ ↑5.2% │ 目标≥95% │ ↓18% │ 目标≤5分钟 │
|
||
└─────────────┴─────────────┴─────────────┴─────────────┴─────────────┘
|
||
```
|
||
|
||
**可视化图表区：**
|
||
* **趋势图：** 近 30 天审核量与通过率趋势
|
||
* **问题分布：** 饼图展示违规类型占比（违禁词 / 竞品 / 舆情 / 卖点遗漏）
|
||
* **代理商对比：** 柱状图对比各代理商的审核效率与通过率
|
||
* **热力图：** 问题高发时段分布（帮助优化审核资源配置）
|
||
* **舆情一致性：** 软性风控判断与人工复核的一致率（目标 ≥ 80%）
|
||
|
||
**风险预警区：**
|
||
* 🔴 **紧急：** "代理商A在过去24小时内有5条视频触发'竞品露出'，请关注"
|
||
* 🟠 **关注：** "达人B连续3次提交未通过，建议沟通"
|
||
* 🟡 **舆情：** "本周舆情风险拦截数异常上升，建议检查阈值设置"
|
||
|
||
### 4.2 全局规则配置 (Rule Engine) [US-10]
|
||
|
||
* **黑白名单管理：**
|
||
* **禁用词库：** 支持分类管理（广告法 / 平台规则 / 品牌私有）
|
||
* **竞品列表：** 上传竞品 Logo 图库，支持相似度阈值设置
|
||
* **白名单：** 允许特定达人/场景豁免某些规则
|
||
* **特例记录：** 查看从审核台记录的豁免条款，支持确认/撤销
|
||
|
||
* **区域合规配置：**
|
||
* 支持按投放地区切换法规版本（中国大陆 / 港澳台 / 海外）
|
||
* 不同地区规则库独立管理
|
||
* 切换时自动校验现有 Brief 与新规则的兼容性
|
||
|
||
* **舆情阈值设置：**
|
||
* 调整 AI 对"油腻"、"性感"、"争议话题"的敏感度
|
||
* 支持 High / Medium / Low 三档
|
||
* 支持按平台差异化配置（抖音 vs 小红书）
|
||
* ⚠️ **提示：** 舆情风险仅作提示，不作为强制拦截依据
|
||
|
||
* **规则版本管理：**
|
||
* 规则变更历史可追溯（含变更人、变更时间、变更内容）
|
||
* 支持回滚到历史版本
|
||
* 变更需审批生效（防止误操作）
|
||
* **平台规则同步：** 抖音/小红书规则变更时，系统在 1 工作日内更新并通知
|
||
|
||
### 4.3 代理商管理 (Agency Management)
|
||
|
||
* **代理商列表：**
|
||
* 显示合作代理商及其绑定的品牌项目
|
||
* 数据指标：管理达人数、审核量、通过率、平均周期
|
||
|
||
* **权限配置：**
|
||
* 可见的 Brief 范围
|
||
* 是否允许"强制通过"
|
||
* 申诉仲裁权限
|
||
|
||
* **绩效评估：**
|
||
* 代理商月度评分卡
|
||
* 问题率对比排名
|
||
|
||
### 4.4 审计日志 (Audit Log) [US-12]
|
||
|
||
* **列表视图：** 查看所有审核记录，支持高级筛选
|
||
* 按时间范围 / 代理商 / 达人 / 审核结果筛选
|
||
* 关键词搜索（搜索视频标题、报错内容）
|
||
|
||
* **详情页：** 点击任意记录查看完整审核链路
|
||
* 原始视频（带时间戳标注）
|
||
* AI 检测报告全文
|
||
* 人工决策记录（谁在什么时间做了什么操作）
|
||
* 申诉记录（如有）
|
||
|
||
* **证据链导出：** 生成符合法务要求的 PDF 报告，包含：
|
||
* **时间戳：** 所有操作的精确时间记录
|
||
* **截图：** AI 报错对应的视频截图
|
||
* **规则依据：** 触发的规则版本与具体条款
|
||
* **审核人：** 操作人身份与电子签名
|
||
* **规则版本号：** 审核时使用的规则库版本
|
||
* **模型版本号：** AI 检测时使用的模型版本
|
||
* 完整操作日志（不可篡改）
|
||
|
||
### 4.5 舆情预警中心 (Brand Safety Center)
|
||
|
||
* **实时监控：**
|
||
* 近期被 AI 标记为"舆情风险"的视频列表
|
||
* 按风险等级排序（高 / 中 / 低）
|
||
|
||
* **案例库：**
|
||
* 历史舆情事件归档
|
||
* 作为培训素材供代理商学习
|
||
|
||
* **预警规则：**
|
||
* 配置自动通知规则（如：高风险视频自动 @品牌方）
|
||
|
||
### 4.6 AI 服务配置 (AI Configuration) 🤖
|
||
|
||
**入口位置：** 系统设置 → AI 服务配置
|
||
**权限控制：** 仅品牌管理员可配置，代理商和达人自动继承品牌方配置
|
||
|
||
#### 4.6.1 配置界面
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────┐
|
||
│ 🤖 AI 服务配置 │
|
||
├─────────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ AI 提供商 │
|
||
│ ┌───────────────────────────────────────────────────────────┐ │
|
||
│ │ OneAPI 中转服务 ▼ │ │
|
||
│ └───────────────────────────────────────────────────────────┘ │
|
||
│ 💡 支持 OneAPI、Anthropic Claude、OpenAI、DeepSeek 等 │
|
||
│ │
|
||
│ ───────────────────────────────────────────────────────────── │
|
||
│ │
|
||
│ 模型配置 │
|
||
│ │
|
||
│ 文字处理模型 (LLM) │
|
||
│ ┌───────────────────────────────────────────────────────────┐ │
|
||
│ │ claude-opus-4-5-20251101 ▼ │ │
|
||
│ └───────────────────────────────────────────────────────────┘ │
|
||
│ 用于 Brief 解析、语义分析、报告生成 │
|
||
│ │
|
||
│ 视频分析模型 (Vision) │
|
||
│ ┌───────────────────────────────────────────────────────────┐ │
|
||
│ │ doubao-seed-1.6-thinking-vision ▼ │ │
|
||
│ └───────────────────────────────────────────────────────────┘ │
|
||
│ 用于 Logo 检测、画面分析、竞品识别 │
|
||
│ │
|
||
│ 音频解析模型 (ASR) │
|
||
│ ┌───────────────────────────────────────────────────────────┐ │
|
||
│ │ whisper-large-v3 ▼ │ │
|
||
│ └───────────────────────────────────────────────────────────┘ │
|
||
│ 用于语音转文字、口播内容提取 │
|
||
│ │
|
||
│ ───────────────────────────────────────────────────────────── │
|
||
│ │
|
||
│ 连接配置 │
|
||
│ │
|
||
│ Base URL │
|
||
│ ┌───────────────────────────────────────────────────────────┐ │
|
||
│ │ https://oneapi.intelligrow.cn │ │
|
||
│ └───────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ API Key │
|
||
│ ┌───────────────────────────────────────────────────┐ ┌────┐ │
|
||
│ │ sk-•••••••••••••••••••••••••••••• │ │ 👁️ │ │
|
||
│ └───────────────────────────────────────────────────┘ └────┘ │
|
||
│ │
|
||
│ ───────────────────────────────────────────────────────────── │
|
||
│ │
|
||
│ 生成参数 │
|
||
│ │
|
||
│ Temperature: 0.7 Max Tokens: 2000 │
|
||
│ ├────────●───────┤ ┌─────────────────┐ │
|
||
│ 0 1.0 │ 2000 │ │
|
||
│ └─────────────────┘ │
|
||
│ │
|
||
│ ┌───────────────┐ ┌───────────────┐ │
|
||
│ │ 测试连接 │ │ 保存 │ │
|
||
│ └───────────────┘ └───────────────┘ │
|
||
│ │
|
||
└─────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
#### 4.6.2 功能说明
|
||
|
||
| 功能 | 说明 |
|
||
| --- | --- |
|
||
| **AI 提供商选择** | 下拉选择：OneAPI / Anthropic / OpenAI / DeepSeek / 自定义 |
|
||
| **模型动态获取** | 输入 Base URL 和 API Key 后，调用 `/v1/models` 接口获取可用模型列表 |
|
||
| **三类模型配置** | 分别配置文字处理（LLM）、视频分析（Vision）、音频解析（ASR）模型 |
|
||
| **测试连接** | 并行测试三个模型的连通性，弹窗显示每个模型的测试结果 |
|
||
| **配置继承** | 品牌方配置后，所属代理商和达人自动使用此配置，无需单独设置 |
|
||
|
||
#### 4.6.3 配置继承关系
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────┐
|
||
│ 配置继承模型 │
|
||
├─────────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ ┌─────────────────┐ │
|
||
│ │ 🛡️ 品牌方 │ ← 唯一配置入口 │
|
||
│ │ AI 服务配置 │ │
|
||
│ └────────┬────────┘ │
|
||
│ │ │
|
||
│ ┌────────┴────────┐ │
|
||
│ ▼ ▼ │
|
||
│ ┌─────────────┐ ┌─────────────┐ │
|
||
│ │ 👥 代理商A │ │ 👥 代理商B │ ← 自动继承，只读查看 │
|
||
│ └──────┬──────┘ └──────┬──────┘ │
|
||
│ │ │ │
|
||
│ ┌─────┴─────┐ ┌─────┴─────┐ │
|
||
│ ▼ ▼ ▼ ▼ │
|
||
│ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │
|
||
│ │👤达人1│ │👤达人2│ │👤达人3│ │👤达人4│ ← 自动继承，无感知 │
|
||
│ └──────┘ └──────┘ └──────┘ └──────┘ │
|
||
│ │
|
||
└─────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
#### 4.6.4 安全说明
|
||
|
||
* **API Key 加密存储：** 使用 AES-256-GCM 加密，密钥与数据分离存储
|
||
* **传输安全：** 所有 API 请求强制 HTTPS
|
||
* **权限隔离：** 仅品牌管理员可查看/修改 AI 配置
|
||
* **审计日志：** 配置变更记录操作人、时间、变更内容
|
||
|
||
### 4.7 移动端界面 (Mobile Portal) 📱
|
||
|
||
**设计目标：** 随时掌握关键指标、即时响应舆情预警、紧急审批处理。
|
||
**核心设备：** 手机浏览器 / 小程序 / App。
|
||
**定位：** 数据查看与紧急响应，规则配置等复杂操作引导至桌面端完成。
|
||
|
||
#### 4.7.1 移动端数据看板 (Mobile Dashboard)
|
||
|
||
```
|
||
┌─────────────────────────────────────────────┐
|
||
│ 📊 品牌看板 2026-02-02 ▼ │
|
||
├─────────────────────────────────────────────┤
|
||
│ ┌─────────────────────────────────────┐ │
|
||
│ │ 本月审核总量 初审通过率 │ │
|
||
│ │ 1,234 78.5% │ │
|
||
│ │ ↑12% ↑5.2% │ │
|
||
│ └─────────────────────────────────────┘ │
|
||
│ ┌─────────────────────────────────────┐ │
|
||
│ │ 硬性召回率 平均审核周期 │ │
|
||
│ │ 96.2% 4.2 小时 │ │
|
||
│ │ 目标≥95% ✅ 目标≤5分钟 ✅ │ │
|
||
│ └─────────────────────────────────────┘ │
|
||
├─────────────────────────────────────────────┤
|
||
│ 📈 趋势图 (近7天) [查看详情 >]│
|
||
│ ┌─────────────────────────────────────┐ │
|
||
│ │ ╱╲ ╱╲ │ │
|
||
│ │ ╱ ╲╱ ╲ ← 通过率趋势 │ │
|
||
│ │ ╱ ╲ │ │
|
||
│ └─────────────────────────────────────┘ │
|
||
├─────────────────────────────────────────────┤
|
||
│ 📊 🔔 ✅ 📋 👤 │
|
||
│ 看板 预警 审批 日志 我的 │
|
||
└─────────────────────────────────────────────┘
|
||
```
|
||
|
||
#### 4.7.2 移动端舆情预警 (Alert Center)
|
||
|
||
**场景：** 收到舆情预警推送，需快速查看并决策。
|
||
|
||
```
|
||
┌─────────────────────────────────────────────┐
|
||
│ 🔔 舆情预警 全部已读 │
|
||
├─────────────────────────────────────────────┤
|
||
│ 🔴 紧急预警 (2) │
|
||
│ ┌─────────────────────────────────────┐ │
|
||
│ │ ⚠️ 代理商A - 竞品露出集中爆发 │ │
|
||
│ │ 过去24小时内5条视频触发 │ │
|
||
│ │ 10分钟前 [查看 >] │ │
|
||
│ └─────────────────────────────────────┘ │
|
||
│ ┌─────────────────────────────────────┐ │
|
||
│ │ ⚠️ 达人B - 高风险舆情内容 │ │
|
||
│ │ 疑似性别偏见言论 │ │
|
||
│ │ 30分钟前 [查看 >] │ │
|
||
│ └─────────────────────────────────────┘ │
|
||
├─────────────────────────────────────────────┤
|
||
│ 🟠 关注事项 (3) │
|
||
│ ┌─────────────────────────────────────┐ │
|
||
│ │ 📋 达人C连续3次提交未通过 │ │
|
||
│ │ 建议与代理商沟通 │ │
|
||
│ │ 2小时前 [详情 >] │ │
|
||
│ └─────────────────────────────────────┘ │
|
||
├─────────────────────────────────────────────┤
|
||
│ 📊 🔔 ✅ 📋 👤 │
|
||
└─────────────────────────────────────────────┘
|
||
```
|
||
|
||
#### 4.7.3 移动端审批中心 (Approval Center)
|
||
|
||
**场景：** 代理商申请"强制通过"，品牌方需审批。
|
||
|
||
```
|
||
┌─────────────────────────────────────────────┐
|
||
│ ✅ 待审批 筛选 ▼ │
|
||
├─────────────────────────────────────────────┤
|
||
│ 待处理 (3) │
|
||
│ ┌─────────────────────────────────────┐ │
|
||
│ │ 🟡 强制通过申请 │ │
|
||
│ │ 达人：@小美美 │ │
|
||
│ │ 申请人：代理商A - 张三 │ │
|
||
│ │ 原因：达人玩的新梗，品牌方认可 │ │
|
||
│ │ ┌─────────────────────────────┐ │ │
|
||
│ │ │ 📹 点击查看视频片段 │ │ │
|
||
│ │ └─────────────────────────────┘ │ │
|
||
│ │ AI报错：00:42 油腻风险 │ │
|
||
│ │ │ │
|
||
│ │ [ 拒绝 ] [ 批准 ] │ │
|
||
│ └─────────────────────────────────────┘ │
|
||
├─────────────────────────────────────────────┤
|
||
│ 已处理 (12) [查看 >] │
|
||
├─────────────────────────────────────────────┤
|
||
│ 📊 🔔 ✅ 📋 👤 │
|
||
└─────────────────────────────────────────────┘
|
||
```
|
||
|
||
**交互说明：**
|
||
* 点击视频片段可预览关键时间点
|
||
* 批准/拒绝需二次确认
|
||
* 批准后自动通知代理商和达人
|
||
* 审批记录同步至审计日志
|
||
|
||
#### 4.7.4 移动端审计日志 (Audit Quick View)
|
||
|
||
```
|
||
┌─────────────────────────────────────────────┐
|
||
│ 📋 审计日志 🔍 搜索 │
|
||
├─────────────────────────────────────────────┤
|
||
│ 筛选：全部 ▼ 代理商 ▼ 时间 ▼ │
|
||
├─────────────────────────────────────────────┤
|
||
│ ┌─────────────────────────────────────┐ │
|
||
│ │ ✅ XX品牌618推广 - 达人A │ │
|
||
│ │ 状态：已通过（强制） │ │
|
||
│ │ 审批人：李四 · 今天 14:30 │ │
|
||
│ │ [查看详情] [导出证据链] │ │
|
||
│ └─────────────────────────────────────┘ │
|
||
│ ┌─────────────────────────────────────┐ │
|
||
│ │ ❌ XX品牌618推广 - 达人B │ │
|
||
│ │ 状态：已驳回 │ │
|
||
│ │ 原因：竞品Logo露出 │ │
|
||
│ │ [查看详情] │ │
|
||
│ └─────────────────────────────────────┘ │
|
||
├─────────────────────────────────────────────┤
|
||
│ 📊 🔔 ✅ 📋 👤 │
|
||
└─────────────────────────────────────────────┘
|
||
```
|
||
|
||
**移动端功能边界：**
|
||
* ✅ 支持：数据查看、预警响应、审批处理、日志查询、证据链导出
|
||
* ❌ 不支持（引导至桌面端）：规则配置、阈值调整、代理商权限管理、复杂报表分析
|
||
|
||
---
|
||
|
||
## 5. 交互状态与反馈规范 (UX States)
|
||
|
||
为保证体验流畅，需定义以下关键交互状态：
|
||
|
||
| 状态 (State) | 界面反馈 (UI Behavior) | 文案示例 (Micro-copy) |
|
||
| --- | --- | --- |
|
||
| **上传中** | 进度条 + 剩余时间预估 | "正在上传视频 (35%)... 请勿关闭页面" |
|
||
| **排队中** | 队列位置提示 | "前面还有 3 个任务，AI 马上就到..." |
|
||
| **处理中 (长时)** | 允许离开提示 | "深度审核约需 3 分钟。您可以先去喝杯咖啡，结果将通过微信通知您。" |
|
||
| **解析失败** | 错误引导 + 手动兜底 | "无法读取此 PDF 内容。请检查文件是否加密，或[切换到文本输入模式]。" |
|
||
| **申诉成功** | 激励动效 (Confetti) | "申诉生效！令牌已返还。AI 正在学习您的反馈。" |
|
||
|
||
---
|
||
|
||
## 6. 设计风格指导 (Design Guidelines)
|
||
|
||
* **色调 (Palette):**
|
||
* **科技蓝 (Tech Blue):** 用于 AI 正在思考、扫描的状态。
|
||
* **警示红 (Alert Red):** 用于硬性阻断。
|
||
* **风险橙 (Risk Orange):** 用于舆情/油腻提示。
|
||
* **安全绿 (Safe Green):** 用于通过、合规项。
|
||
|
||
|
||
* **字体 (Typography):** 清晰的无衬线字体，确保在视频播放器旁的密集文字依然易读。
|
||
* **动效 (Motion):** 仅在"AI 处理中"使用微动效（波纹、扫描光效），强调系统的智能化属性；审核台保持静态高效。
|
||
|
||
---
|
||
|
||
## 7. 响应式设计规范 (Responsive Design)
|
||
|
||
### 7.1 断点定义 (Breakpoints)
|
||
|
||
| 设备类型 | 断点范围 | 适用角色 |
|
||
| --- | --- | --- |
|
||
| **Mobile** | < 768px | 达人端（主要） |
|
||
| **Tablet** | 768px - 1024px | 达人端（辅助）、代理商外出场景 |
|
||
| **Desktop** | > 1024px | 代理商端、品牌方端（主要） |
|
||
|
||
### 7.2 各端适配策略
|
||
|
||
* **达人端 (Mobile-First):**
|
||
* 单列布局，卡片式信息展示
|
||
* 底部固定导航栏
|
||
* 视频播放器全屏优先
|
||
* 手势操作支持（左滑删除、下拉刷新）
|
||
|
||
* **代理商端 (Desktop-First):**
|
||
* 侧边栏导航（可折叠）
|
||
* 多列布局，支持分屏操作
|
||
* Tablet 下侧边栏自动收起为图标模式
|
||
|
||
* **品牌方端 (Desktop-Only):**
|
||
* 数据看板响应式网格布局
|
||
* 图表自适应容器宽度
|
||
* 最小支持宽度 1280px
|
||
|
||
---
|
||
|
||
## 8. 无障碍设计 (Accessibility / a11y)
|
||
|
||
### 8.1 基本要求
|
||
|
||
* **WCAG 2.1 AA 级合规**
|
||
* **颜色对比度：** 文字与背景对比度 ≥ 4.5:1
|
||
* **键盘导航：** 所有交互元素可通过 Tab 键访问
|
||
* **屏幕阅读器：** 关键元素提供 ARIA 标签
|
||
|
||
### 8.2 具体实现
|
||
|
||
| 场景 | 无障碍要求 |
|
||
| --- | --- |
|
||
| **颜色标识** | 红/黄/绿状态不仅用颜色，同时用图标和文字区分 |
|
||
| **视频播放器** | 提供字幕轨道、支持键盘控制播放/暂停/跳转 |
|
||
| **表单** | 所有输入框有明确的 label 关联 |
|
||
| **错误提示** | 错误信息同时通过颜色、图标、文字三种方式呈现 |
|
||
| **动效** | 提供"减少动态效果"选项，尊重系统偏好设置 |
|
||
|
||
---
|
||
|
||
## 9. 错误处理与边界情况 (Error Handling)
|
||
|
||
### 9.1 错误类型与处理策略
|
||
|
||
| 错误类型 | 触发场景 | 用户提示 | 技术处理 |
|
||
| --- | --- | --- | --- |
|
||
| **网络错误** | 请求超时/断网 | "网络不给力，请检查连接后重试" | 自动重试 3 次，指数退避 |
|
||
| **上传失败** | 文件过大/格式不支持 | "文件格式不支持，请上传 MP4/MOV 格式" | 前端预校验 + 后端双重验证 |
|
||
| **解析失败** | Brief PDF 加密/损坏 | "无法读取此文件，请检查是否加密" | 提供手动输入降级方案 |
|
||
| **AI 服务异常** | 模型超时/不可用 | "AI 正在休息，请稍后重试" | 自动进入队列，恢复后继续处理 |
|
||
| **权限不足** | 越权操作 | "您没有权限执行此操作" | 记录日志，通知管理员 |
|
||
| **并发冲突** | 多人同时编辑 | "其他用户正在编辑，请刷新后重试" | 乐观锁 + 版本号校验 |
|
||
|
||
### 9.2 空状态设计 (Empty States)
|
||
|
||
| 页面 | 空状态提示 | 引导动作 |
|
||
| --- | --- | --- |
|
||
| **任务列表** | "暂无任务，等待品牌方分配" | 显示品牌方联系方式 |
|
||
| **审核队列** | "太棒了！所有任务都已处理完毕" | 显示历史数据入口 |
|
||
| **搜索结果** | "未找到匹配结果" | 建议调整筛选条件 |
|
||
| **数据看板** | "暂无数据，审核开始后将自动生成" | 显示示例数据 |
|
||
|
||
### 9.3 加载状态规范 (Loading States)
|
||
|
||
* **骨架屏 (Skeleton):** 列表页、卡片区域使用骨架屏占位
|
||
* **进度条：** 文件上传显示精确进度百分比
|
||
* **Spinner：** 短时操作（< 3s）使用旋转加载图标
|
||
* **进度提示：** 长时操作显示预计剩余时间和当前步骤
|
||
|
||
---
|
||
|
||
## 10. 附录
|
||
|
||
### 10.1 页面清单 (Page Inventory)
|
||
|
||
| 角色 | 页面名称 | 优先级 | 备注 |
|
||
| --- | --- | --- | --- |
|
||
| **达人** | 任务列表 | P0 | MVP |
|
||
| | 智能上传页 | P0 | MVP |
|
||
| | 审核结果页 | P0 | MVP |
|
||
| | 消息中心 | P1 | |
|
||
| | 历史记录 | P2 | |
|
||
| **代理商** | 工作台 | P0 | MVP |
|
||
| | Brief 配置 | P0 | MVP |
|
||
| | 审核决策台 | P0 | MVP |
|
||
| | 版本比对 | P1 | |
|
||
| | 达人管理 | P1 | |
|
||
| | 数据报表 | P2 | |
|
||
| **品牌方** | 数据看板 | P0 | MVP |
|
||
| | 规则配置 | P0 | MVP |
|
||
| | AI 服务配置 | P0 | MVP - 品牌方专属 |
|
||
| | 审计日志 | P1 | |
|
||
| | 代理商管理 | P1 | |
|
||
| | 舆情预警 | P2 | |
|
||
|
||
### 10.2 设计资源
|
||
|
||
* 设计稿 (Figma): [待补充]
|
||
* 组件库 (Design System): [待补充]
|
||
* 图标库 (Icon Set): [待补充] |