审阅并完善用户角色与界面规范文档

基于 Gemini 初稿进行全面审阅和补充:

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

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Your Name 2026-02-02 10:56:29 +08:00
parent 57997acd18
commit 173baf2e9f

502
User_Role_Interfaces.md Normal file
View File

@ -0,0 +1,502 @@
# 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): [待补充]