videos1.0/User_Role_Interfaces.md
Your Name 173baf2e9f 审阅并完善用户角色与界面规范文档
基于 Gemini 初稿进行全面审阅和补充:

## 新增内容
- 版本历史追踪
- 各端导航结构图(达人/代理商/品牌方)
- 达人端:消息通知中心、历史记录页
- 代理商端:达人管理、数据报表、批量操作中心
- 品牌方端:数据看板(含可视化图表)、代理商管理、舆情预警中心
- 响应式设计规范(断点定义、各端适配策略)
- 无障碍设计要求(WCAG 2.1 AA)
- 错误处理与边界情况规范
- 页面清单与优先级标注

## 完善内容
- 扩展角色权限矩阵(增加系统配置、用户管理权限)
- 细化品牌方规则配置(版本管理、审批流程)
- 补充审计日志的高级筛选和证据链导出功能

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-02 10:56:29 +08:00

502 lines
19 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 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 | 审阅补充:导航结构、数据看板、响应式/无障碍设计、错误处理规范 |
---
## 1. 角色权限矩阵 (Role-Permission Matrix)
在进入界面细节前,先明确各角色在系统中的能力边界。
| 功能模块 | 👤 达人 (Creator) | 👥 代理商 (Agency) | 🛡️ 品牌方 (Brand) |
| --- | --- | --- | --- |
| **终端设备** | **Mobile (主) / Desktop** | **Desktop (主)** | **Desktop (主)** |
| **Brief 管理** | 查看任务详情 | ✅ 上传/解析/编辑 Brief | ✅ 全局规则配置 |
| **脚本/视频提交** | ✅ 上传 & 修改 | ❌ 不可提交 | ❌ 不可提交 |
| **查看 AI 报告** | ✅ 仅查看自己的 | ✅ 查看所管辖达人的 | ✅ 查看所有 |
| **审核决策** | ❌ 无权 | ✅ 初审 (驳回/通过) | ✅ 终审 / 强制通过 |
| **申诉功能** | ✅ 发起申诉 (消耗令牌) | ✅ 仲裁申诉 | ❌ 无需申诉 |
| **数据看板** | 仅看个人任务进度 | 整体进度 / 达人排名 | 全局合规率 / 舆情风控 |
| **系统配置** | ❌ 无权 | ❌ 无权 | ✅ 规则库/阈值/白名单配置 |
| **用户管理** | ❌ 无权 | ✅ 管理所属达人 | ✅ 管理代理商与达人 |
---
## 1.1 各端导航结构 (Navigation Structure)
### 达人端 (Mobile-First)
```
┌─────────────────────────────────────┐
│ 底部导航栏 (Tab Bar) │
├─────────┬─────────┬─────────┬───────┤
│ 🏠 │ 📤 │ 🔔 │ 👤 │
│ 任务 │ 上传 │ 消息 │ 我的 │
└─────────┴─────────┴─────────┴───────┘
```
### 代理商端 (Desktop Sidebar)
```
┌──────────────────────────────────────────────┐
│ 📊 工作台 (Dashboard) │
│ 📋 Brief 管理 │
│ ✅ 审核台 (Review) │
│ 👥 达人管理 │
│ 📈 数据报表 │
│ ⚙️ 设置 │
└──────────────────────────────────────────────┘
```
### 品牌方端 (Desktop Sidebar)
```
┌──────────────────────────────────────────────┐
│ 📊 数据看板 (Analytics) │
│ 🛡️ 规则配置 (Rule Engine) │
│ 📋 审计日志 (Audit Log) │
│ 👥 代理商管理 │
│ 🔔 舆情预警 │
│ ⚙️ 系统设置 │
└──────────────────────────────────────────────┘
```
---
## 2. 界面详解:达人端 (The Creator Portal)
**设计目标:** 极简、透明、减少焦虑。让达人像发朋友圈一样简单地完成合规检查。
**核心设备:** 手机浏览器 (Mobile Web) / 小程序。
### 2.1 任务列表页 (Task List)
* **状态概览:** 卡片式布局显示当前任务状态待提交、AI审核中、需修改、已通过
* **行动号召 (CTA):** 针对不同状态显示醒目按钮,如 `[上传脚本]``[查看修改意见]`
### 2.2 智能上传与扫描页 (The Magic Scanner)
这是达人等待 AI 结果的页面必须缓解等待焦虑Wait-time Anxiety
* **文件支持:** 支持粘贴文本、上传文档、上传视频文件。
* **透明思考 UI**
* 屏幕中央显示 AI 正在扫描的动态波纹。
* **滚动日志 (Rolling Log):** 实时显示 AI 动作,例如:
> 🔍 *正在解析 Brief 核心卖点...*
> 👁️ *正在逐帧检测竞品 Logo...*
> 🧠 *正在分析口播情感色彩...*
### 2.3 审核结果反馈页 (Audit Report)
当 AI 发现问题时,不能直接把 JSON 扔给达人,要翻译成“人话”。
* **结果横幅:**
* 🔴 **未通过 (Blocked):** 存在硬性违规,必须修改。
* 🟡 **建议修改 (Warning):** 存在舆情风险或卖点遗漏,建议优化。
* 🟢 **AI 初审通过:** 已自动转交人工复核。
* **修改清单 (Action Items):**
* **时间轴跳转:** 点击报错条目,视频自动跳转到对应秒数(例如 00:15
* **错误详情:**
* *错误类型:* 广告法违禁词
* *原内容:* “全网第一”
* *AI建议* 建议改为“深受喜爱”或“销量领先”。
* **申诉入口:**
* 在每一条报错旁边提供 `[ 申诉 ]` 按钮。
* **申诉弹窗:** 显示剩余令牌数量(如:剩余 2 次),并提供理由输入框。
### 2.4 消息通知中心 (Notification Center)
达人需要及时获知任务状态变化,避免反复主动查询。
* **通知类型:**
* 🔔 **任务分配:** "您有一个新任务【XX品牌618推广】请在 3 天内提交脚本"
***审核通过:** "恭喜!您的视频已通过审核,可安排发布"
***需要修改:** "您的视频有 2 处需修改,点击查看详情"
* 💬 **申诉结果:** "您的申诉已通过AI 已学习您的反馈"
* **通知渠道:**
* App 内消息中心(必选)
* 微信服务号推送(可选)
* 短信提醒(仅紧急/超时)
### 2.5 历史记录页 (History)
* **任务归档:** 按品牌/时间筛选已完成的任务
* **数据统计:**
* 累计完成任务数
* 一次通过率(个人)
* 平均修改轮次
* **证书导出:** 支持导出"合规达人"认证徽章(达到一定通过率后解锁)
---
## 3. 界面详解:代理商端 (The Agency Console)
**设计目标:** 高效、批量、上帝视角。
**核心设备:** 桌面端 (Desktop Web)。
### 3.1 工作台 (Dashboard)
* **待办事项:** 醒目显示 `待人工复核 (12)``申诉待仲裁 (3)`
* **项目概览:** 显示当前 Brief 下的所有达人提交进度条。
### 3.2 Brief 配置中心 (Brief Setup)
* **全能解析器:** 巨大的拖拽上传区域。
* **规则确认区 (Split View):**
* 左侧:原始 PDF/文档预览。
* 右侧AI 提取出的**结构化规则表单**(可编辑)。
* *必含词:* [美白] [淡斑] (支持手动增删)
* *禁忌词:* [药用] [治疗]
* *参考图:* (显示 AI 从 Brief 提取的 3 张参考图)
### 3.3 核心审核决策台 (The Review Cockpit) ✨ *核心功能*
这是系统最复杂的界面,用于人工复核 AI 的结果。
**布局结构:**
* **左侧:视频播放器**
* **智能进度条:** 进度条上打满 colored dots。
* 🔴 红点:硬伤(点击跳转)。
* 🟠 橙点:油腻/舆情风险。
* 🟢 绿点成功识别到的卖点High-light
* **画中画参考:** 播放器角落可悬浮 Brief 中的参考图,方便对比(如对比手持产品的手势)。
* **右侧AI 检查单 (The Checklist)**
* **分区一:硬性合规 (Hard Rules)**
* [✅] 违禁词检测
* [✅] 竞品 Logo 检测
* **分区二Brief 完成度 (Brief Compliance)**
* [❌] 卖点未提及“24小时持妆” (AI 提示:全程未检测到相关语义)
* **分区三:舆情雷达 (Sentiment Radar)**
* [⚠️] **00:42 油腻预警:** 达人表情过于夸张,建议检查。
* **底部:决策栏 (Action Bar)**
* `[ 驳回 ]`:点击后,自动将勾选的问题打包发送给达人。
* `[ 强制通过 ]`:忽略 AI 的黄色警告,强制放行(需填写备注)。
* `[ 通过 ]`:流程结束。
### 3.4 版本比对视窗 (Diff View)
当达人提交 V2 版本时触发。
* **双屏模式:** 左侧 V1右侧 V2同步播放
* **差异高亮:**
* 右侧列表仅显示 **"V1 报错点"** 的修复情况。
* 状态:`已修复 ✅``未修复 ❌`
### 3.5 达人管理 (Creator Management)
* **达人列表:**
* 显示所有关联达人的基本信息、信用评分、历史通过率
* 支持按平台(抖音/小红书/B站、状态活跃/休眠)筛选
* **达人画像卡片:**
* 基本信息:昵称、平台账号、粉丝量级
* 合作数据:累计任务数、一次通过率、平均响应时长
* 信用评分:基于历史表现的信用分(影响申诉令牌配额)
* **批量操作:**
* 批量分配任务
* 批量发送催促通知
* 批量导出达人数据
### 3.6 数据报表 (Analytics Reports)
* **项目维度:**
* 当前项目进度:已提交 / 审核中 / 已通过 / 待修改
* 平均审核周期(从提交到最终通过)
* 修改轮次分布图
* **达人维度:**
* 达人排行榜(按通过率、响应速度)
* 问题达人预警(连续多次未通过)
* **问题类型分析:**
* 高频违规词 TOP 10
* 常见遗漏卖点统计
* 舆情风险分布
* **导出功能:**
* 支持导出 Excel/PDF 格式
* 支持定时邮件订阅周报
### 3.7 批量操作中心 (Batch Operations)
* **批量上传:** 支持 ZIP 压缩包批量上传多个视频
* **批量审核:** 对无问题项批量通过(需二次确认)
* **批量导出:** 一键导出选中任务的审核报告
---
## 4. 界面详解:品牌方端 (The Brand Admin)
**设计目标:** 监管、配置、数据沉淀、风险预警。
**核心设备:** 桌面端 (Desktop Web)。
### 4.1 数据看板 (Executive Dashboard) ✨ *核心功能*
品牌方需要一目了然地掌握整体合规状况。
**顶部指标卡片:**
```
┌─────────────┬─────────────┬─────────────┬─────────────┐
│ 📊 本月 │ ✅ 初审 │ ⚠️ 舆情 │ ⏱️ 平均 │
│ 审核总量 │ 通过率 │ 拦截数 │ 审核周期 │
│ 1,234 │ 78.5% │ 23 │ 4.2 小时 │
│ ↑12% │ ↑5.2% │ ↓18% │ ↓32% │
└─────────────┴─────────────┴─────────────┴─────────────┘
```
**可视化图表区:**
* **趋势图:** 近 30 天审核量与通过率趋势
* **问题分布:** 饼图展示违规类型占比(违禁词 / 竞品 / 舆情 / 卖点遗漏)
* **代理商对比:** 柱状图对比各代理商的审核效率与通过率
* **热力图:** 问题高发时段分布(帮助优化审核资源配置)
**风险预警区:**
* 🔴 **紧急:** "代理商A在过去24小时内有5条视频触发'竞品露出',请关注"
* 🟠 **关注:** "达人B连续3次提交未通过建议沟通"
### 4.2 全局规则配置 (Rule Engine)
* **黑白名单管理:**
* **禁用词库:** 支持分类管理(广告法 / 平台规则 / 品牌私有)
* **竞品列表:** 上传竞品 Logo 图库,支持相似度阈值设置
* **白名单:** 允许特定达人/场景豁免某些规则
* **舆情阈值设置:**
* 调整 AI 对"油腻"、"性感"、"争议话题"的敏感度
* 支持 High / Medium / Low 三档
* 支持按平台差异化配置(抖音 vs 小红书)
* **规则版本管理:**
* 规则变更历史可追溯
* 支持回滚到历史版本
* 变更需审批生效(防止误操作)
### 4.3 代理商管理 (Agency Management)
* **代理商列表:**
* 显示合作代理商及其绑定的品牌项目
* 数据指标:管理达人数、审核量、通过率、平均周期
* **权限配置:**
* 可见的 Brief 范围
* 是否允许"强制通过"
* 申诉仲裁权限
* **绩效评估:**
* 代理商月度评分卡
* 问题率对比排名
### 4.4 审计日志 (Audit Log)
* **列表视图:** 查看所有审核记录,支持高级筛选
* 按时间范围 / 代理商 / 达人 / 审核结果筛选
* 关键词搜索(搜索视频标题、报错内容)
* **详情页:** 点击任意记录查看完整审核链路
* 原始视频(带时间戳标注)
* AI 检测报告全文
* 人工决策记录(谁在什么时间做了什么操作)
* 申诉记录(如有)
* **证据链导出:** 生成符合法务要求的 PDF 报告,包含:
* 审核人签名(电子)
* AI 报错截图与时间戳
* 人工决策依据
* 完整操作日志
### 4.5 舆情预警中心 (Brand Safety Center)
* **实时监控:**
* 近期被 AI 标记为"舆情风险"的视频列表
* 按风险等级排序(高 / 中 / 低)
* **案例库:**
* 历史舆情事件归档
* 作为培训素材供代理商学习
* **预警规则:**
* 配置自动通知规则(如:高风险视频自动 @品牌方
---
## 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 |
| | 审计日志 | P1 | |
| | 代理商管理 | P1 | |
| | 舆情预警 | P2 | |
### 10.2 设计资源
* 设计稿 (Figma): [待补充]
* 组件库 (Design System): [待补充]
* 图标库 (Icon Set): [待补充]