From 173baf2e9fd1d835a0c07b79e1953ad4d50de9d7 Mon Sep 17 00:00:00 2001 From: Your Name Date: Mon, 2 Feb 2026 10:56:29 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=A1=E9=98=85=E5=B9=B6=E5=AE=8C=E5=96=84?= =?UTF-8?q?=E7=94=A8=E6=88=B7=E8=A7=92=E8=89=B2=E4=B8=8E=E7=95=8C=E9=9D=A2?= =?UTF-8?q?=E8=A7=84=E8=8C=83=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 基于 Gemini 初稿进行全面审阅和补充： ## 新增内容 - 版本历史追踪 - 各端导航结构图（达人/代理商/品牌方） - 达人端：消息通知中心、历史记录页 - 代理商端：达人管理、数据报表、批量操作中心 - 品牌方端：数据看板(含可视化图表)、代理商管理、舆情预警中心 - 响应式设计规范（断点定义、各端适配策略） - 无障碍设计要求（WCAG 2.1 AA） - 错误处理与边界情况规范 - 页面清单与优先级标注 ## 完善内容 - 扩展角色权限矩阵（增加系统配置、用户管理权限） - 细化品牌方规则配置（版本管理、审批流程） - 补充审计日志的高级筛选和证据链导出功能 Co-Authored-By: Claude Opus 4.5 --- User_Role_Interfaces.md | 502 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 502 insertions(+) create mode 100644 User_Role_Interfaces.md diff --git a/User_Role_Interfaces.md b/User_Role_Interfaces.md new file mode 100644 index 0000000..ec626e3 --- /dev/null +++ b/User_Role_Interfaces.md @@ -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): [待补充] \ No newline at end of file