liyanyu/videos1.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增代理商端和品牌方端移动端 UI 设计

Browse Source 
代理商移动端 (3.8节)：
- 移动端工作台：待审核/待仲裁/今日通过统计
- 快捷审核：外出场景下的紧急视频审核处理
- 任务列表：卡片式任务展示与筛选
- 消息中心：通知类型与快捷操作

品牌方移动端 (4.6节)：
- 移动端数据看板：关键指标与趋势图
- 舆情预警：紧急/关注事项分级展示
- 审批中心：强制通过申请的移动端审批
- 审计日志：快速查询与证据链导出

设计原则：
- 移动端定位为桌面端的轻量补充
- 复杂操作（规则配置等）引导至桌面端完成
- 支持横屏全屏视频预览

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Your Name 2026-02-02 16:15:40 +08:00
parent 63c77323ca
commit b0a661069f
1 changed files with 260 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

263
User_Role_Interfaces.md
View File

@ -17,6 +17,7 @@
| 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 设计（工作台、快捷审核、预警、审批） |
---
@ -28,7 +29,7 @@
| 功能模块 | 👤 达人 (Creator) | 👥 代理商 (Agency) | 🛡️ 品牌方 (Brand) |
| --- | --- | --- | --- |
| **终端设备** | **Mobile (主) / Desktop** | **Desktop (主)** | **Desktop (主)** |
| **终端设备** | **Mobile (主) / Desktop** | **Desktop (主) / Mobile (辅)** | **Desktop (主) / Mobile (辅)** |
| **Brief 管理** | 查看任务详情 | ✅ 上传/解析/编辑 Brief | ✅ 全局规则配置 |
| **脚本/视频提交** | ✅ 上传 & 修改 [US-03] | ❌ 不可提交 | ❌ 不可提交 |
| **查看 AI 报告** | ✅ 仅查看自己的 [US-07] | ✅ 查看所管辖达人的 | ✅ 查看所有 |
@ -65,6 +66,17 @@
└──────────────────────────────────────────────┘
```
### 代理商端 (Mobile Tab Bar) 📱
```
┌─────────────────────────────────────────────┐
│ 底部导航栏 (Tab Bar) │
├─────────┬─────────┬─────────┬─────────┬─────┤
│ 🏠 │ ✅ │ 📋 │ 🔔 │ 👤 │
│ 工作台 │ 审核 │ 任务 │ 消息 │ 我的│
└─────────┴─────────┴─────────┴─────────┴─────┘
```
> 📱 **移动端定位：** 外出场景下的紧急审核处理、进度查看、消息通知，复杂配置操作引导至桌面端完成
### 品牌方端 (Desktop Sidebar)
```
┌──────────────────────────────────────────────┐
@ -77,6 +89,17 @@
└──────────────────────────────────────────────┘
```
### 品牌方端 (Mobile Tab Bar) 📱
```
┌─────────────────────────────────────────────┐
│ 底部导航栏 (Tab Bar) │
├─────────┬─────────┬─────────┬─────────┬─────┤
│ 📊 │ 🔔 │ ✅ │ 📋 │ 👤 │
│ 看板 │ 预警 │ 审批 │ 日志 │ 我的│
└─────────┴─────────┴─────────┴─────────┴─────┘
```
> 📱 **移动端定位：** 关键指标查看、舆情预警响应、强制通过审批，规则配置等复杂操作引导至桌面端完成
---
## 2. 界面详解：达人端 (The Creator Portal)
@ -167,7 +190,7 @@
## 3. 界面详解：代理商端 (The Agency Console)
**设计目标：** 高效、批量、上帝视角。
**核心设备：** 桌面端 (Desktop Web)。
**核心设备：** 桌面端 (Desktop Web) 为主，移动端 (Mobile) 为辅。
### 3.1 工作台 (Dashboard)
@ -296,12 +319,119 @@
* 支持 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)。
**核心设备：** 桌面端 (Desktop Web) 为主，移动端 (Mobile) 为辅。
### 4.1 数据看板 (Executive Dashboard) ✨ *核心功能*
@ -405,7 +535,134 @@
* **预警规则：**
* 配置自动通知规则（如：高风险视频自动 @品牌方）
### 4.6 移动端界面 (Mobile Portal) 📱
**设计目标：** 随时掌握关键指标、即时响应舆情预警、紧急审批处理。
**核心设备：** 手机浏览器 / 小程序 / App。
**定位：** 数据查看与紧急响应，规则配置等复杂操作引导至桌面端完成。
#### 4.6.1 移动端数据看板 (Mobile Dashboard)
```
┌─────────────────────────────────────────────┐
│ 📊 品牌看板 2026-02-02 ▼ │
├─────────────────────────────────────────────┤
│ ┌─────────────────────────────────────┐ │
│ │ 本月审核总量 初审通过率 │ │
│ │ 1,234 78.5% │ │
│ │ ↑12% ↑5.2% │ │
│ └─────────────────────────────────────┘ │
│ ┌─────────────────────────────────────┐ │
│ │ 硬性召回率 平均审核周期 │ │
│ │ 96.2% 4.2 小时 │ │
│ │ 目标≥95% ✅ 目标≤5分钟 ✅ │ │
│ └─────────────────────────────────────┘ │
├─────────────────────────────────────────────┤
│ 📈 趋势图 (近7天) [查看详情 >]│
│ ┌─────────────────────────────────────┐ │
│ │ ╱╲ ╱╲ │ │
│ │ ╱ ╲╱ ╲ ← 通过率趋势 │ │
│ │ ╱ ╲ │ │
│ └─────────────────────────────────────┘ │
├─────────────────────────────────────────────┤
│ 📊 🔔 ✅ 📋 👤 │
│ 看板 预警 审批 日志 我的 │
└─────────────────────────────────────────────┘
```
#### 4.6.2 移动端舆情预警 (Alert Center)
**场景：** 收到舆情预警推送，需快速查看并决策。
```
┌─────────────────────────────────────────────┐
│ 🔔 舆情预警 全部已读 │
├─────────────────────────────────────────────┤
│ 🔴 紧急预警 (2) │
│ ┌─────────────────────────────────────┐ │
│ │ ⚠️ 代理商A - 竞品露出集中爆发 │ │
│ │ 过去24小时内5条视频触发 │ │
│ │ 10分钟前 [查看 >] │ │
│ └─────────────────────────────────────┘ │
│ ┌─────────────────────────────────────┐ │
│ │ ⚠️ 达人B - 高风险舆情内容 │ │
│ │ 疑似性别偏见言论 │ │
│ │ 30分钟前 [查看 >] │ │
│ └─────────────────────────────────────┘ │
├─────────────────────────────────────────────┤
│ 🟠 关注事项 (3) │
│ ┌─────────────────────────────────────┐ │
│ │ 📋 达人C连续3次提交未通过 │ │
│ │ 建议与代理商沟通 │ │
│ │ 2小时前 [详情 >] │ │
│ └─────────────────────────────────────┘ │
├─────────────────────────────────────────────┤
│ 📊 🔔 ✅ 📋 👤 │
└─────────────────────────────────────────────┘
```
#### 4.6.3 移动端审批中心 (Approval Center)
**场景：** 代理商申请"强制通过"，品牌方需审批。
```
┌─────────────────────────────────────────────┐
│ ✅ 待审批 筛选 ▼ │
├─────────────────────────────────────────────┤
│ 待处理 (3) │
│ ┌─────────────────────────────────────┐ │
│ │ 🟡 强制通过申请 │ │
│ │ 达人：@小美美 │ │
│ │ 申请人：代理商A - 张三 │ │
│ │ 原因：达人玩的新梗，品牌方认可 │ │
│ │ ┌─────────────────────────────┐ │ │
│ │ │ 📹 点击查看视频片段 │ │ │
│ │ └─────────────────────────────┘ │ │
│ │ AI报错：00:42 油腻风险 │ │
│ │ │ │
│ │ [ 拒绝 ] [ 批准 ] │ │
│ └─────────────────────────────────────┘ │
├─────────────────────────────────────────────┤
│ 已处理 (12) [查看 >] │
├─────────────────────────────────────────────┤
│ 📊 🔔 ✅ 📋 👤 │
└─────────────────────────────────────────────┘
```
**交互说明：**
* 点击视频片段可预览关键时间点
* 批准/拒绝需二次确认
* 批准后自动通知代理商和达人
* 审批记录同步至审计日志
#### 4.6.4 移动端审计日志 (Audit Quick View)
```
┌─────────────────────────────────────────────┐
│ 📋 审计日志 🔍 搜索 │
├─────────────────────────────────────────────┤
│ 筛选：全部 ▼ 代理商 ▼ 时间 ▼ │
├─────────────────────────────────────────────┤
│ ┌─────────────────────────────────────┐ │
│ │ ✅ XX品牌618推广 - 达人A │ │
│ │ 状态：已通过（强制） │ │
│ │ 审批人：李四 · 今天 14:30 │ │
│ │ [查看详情] [导出证据链] │ │
│ └─────────────────────────────────────┘ │
│ ┌─────────────────────────────────────┐ │
│ │ ❌ XX品牌618推广 - 达人B │ │
│ │ 状态：已驳回 │ │
│ │ 原因：竞品Logo露出 │ │
│ │ [查看详情] │ │
│ └─────────────────────────────────────┘ │
├─────────────────────────────────────────────┤
│ 📊 🔔 ✅ 📋 👤 │
└─────────────────────────────────────────────┘
```
**移动端功能边界：**
* ✅ 支持：数据查看、预警响应、审批处理、日志查询、证据链导出
* ❌ 不支持（引导至桌面端）：规则配置、阈值调整、代理商权限管理、复杂报表分析
---