915a13fd0e
tasks.md (V1.1): - 基于 PRD/FeatureSummary/DevelopmentPlan/UIDesign/User_Role_Interfaces 拆解 74 个开发任务 - Phase 1-4 共 11 周开发周期 - 包含代理商/品牌方移动端开发任务 (TASK-037A~I) - 包含响应式设计与无障碍设计任务 (TASK-037J~L) - 包含任务依赖关系图与验收标准汇总 UIDesign.md: - UI 设计规范文档 (Apple HIG 风格) - 色彩系统、组件规范、三端界面设计 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1189 lines
90 KiB
Markdown
1189 lines
90 KiB
Markdown
# UIDesign.md - 智能视频审核系统 UI 设计规范
|
||
|
||
| 文档类型 | **UI Design System (设计系统规范)** |
|
||
| --- | --- |
|
||
| **项目名称** | SmartAudit (AI 营销内容合规审核平台) |
|
||
| **版本号** | V1.0 |
|
||
| **发布日期** | 2026-02-02 |
|
||
| **设计风格** | Apple Human Interface Guidelines 浅色系 |
|
||
| **关联文档** | PRD.md, FeatureSummary.md, User_Role_Interfaces.md, DevelopmentPlan.md |
|
||
|
||
---
|
||
|
||
## 版本历史 (Version History)
|
||
|
||
| 版本 | 日期 | 作者 | 变更说明 |
|
||
| --- | --- | --- | --- |
|
||
| V1.0 | 2026-02-02 | Claude | 初稿：设计原则、色彩系统、组件库、三端界面规范 |
|
||
|
||
---
|
||
|
||
## 1. 设计原则 (Design Principles)
|
||
|
||
借鉴 Apple Human Interface Guidelines，SmartAudit 的设计遵循以下核心原则：
|
||
|
||
### 1.1 核心设计理念
|
||
|
||
| 原则 | 描述 | 在 SmartAudit 中的体现 |
|
||
| --- | --- | --- |
|
||
| **Clarity (清晰)** | 文字清晰易读，图标精确传意，功能显而易见 | 审核结论用红/黄/绿 + 文字 + 图标三重表达 |
|
||
| **Deference (克制)** | UI 退居幕后，内容为王 | 审核台以视频和报告为核心，界面元素轻量化 |
|
||
| **Depth (层次)** | 通过视觉层次和流畅动效建立空间感 | 卡片悬浮阴影、模态弹窗、进度条层叠 |
|
||
|
||
### 1.2 SmartAudit 专属原则
|
||
|
||
| 原则 | 说明 |
|
||
| --- | --- |
|
||
| **透明 AI** | 不做黑盒，AI 的每一步思考都向用户展示（"正在检测 Logo..."） |
|
||
| **减少焦虑** | 长时任务（3-5分钟）提供精细进度反馈，允许用户离开并通知结果 |
|
||
| **轻量操作** | 达人端操作不超过 3 步完成核心任务（上传 → 等待 → 查看） |
|
||
| **专业高效** | 代理商/品牌方端追求信息密度与操作效率的平衡 |
|
||
|
||
---
|
||
|
||
## 2. 色彩系统 (Color System)
|
||
|
||
### 2.1 主色板 (Primary Palette)
|
||
|
||
采用 Apple 风格浅色系，以纯净白色为基底，辅以柔和的功能色。
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────┐
|
||
│ 主色板 │
|
||
├─────────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
|
||
│ │ │ │ │ │ │ │ │ │
|
||
│ │ Primary │ │Secondary │ │ Accent │ │ Dark │ │
|
||
│ │ #007AFF │ │ #5856D6 │ │ #34C759 │ │ #1D1D1F │ │
|
||
│ │ │ │ │ │ │ │ │ │
|
||
│ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │
|
||
│ │
|
||
│ 品牌蓝 智能紫 成功绿 深空黑 │
|
||
│ 主要操作 AI 相关 通过状态 标题文字 │
|
||
│ │
|
||
└─────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
| 色彩名称 | 色值 | 用途 |
|
||
| --- | --- | --- |
|
||
| **Primary Blue** | `#007AFF` | 主要按钮、链接、选中状态 |
|
||
| **AI Purple** | `#5856D6` | AI 相关元素、进度指示、智能提示 |
|
||
| **Success Green** | `#34C759` | 通过、合规、正确 |
|
||
| **Warning Orange** | `#FF9500` | 舆情风险、建议修改 |
|
||
| **Error Red** | `#FF3B30` | 硬性违规、必须处理 |
|
||
| **Dark** | `#1D1D1F` | 主标题、重要文字 |
|
||
| **Secondary** | `#86868B` | 次要文字、说明文字 |
|
||
| **Tertiary** | `#AEAEB2` | 占位符、禁用状态 |
|
||
|
||
### 2.2 背景色 (Background Colors)
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────┐
|
||
│ 背景色 │
|
||
├─────────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
|
||
│ │ ░░░░░░░░ │ │ ░░░░░░░░ │ │ ░░░░░░░░ │ │ ░░░░░░░░ │ │
|
||
│ │ Primary │ │Secondary │ │ Tertiary │ │Elevated │ │
|
||
│ │ #FFFFFF │ │ #F5F5F7 │ │ #E8E8ED │ │ #FFFFFF │ │
|
||
│ │ ░░░░░░░░ │ │ ░░░░░░░░ │ │ ░░░░░░░░ │ │ +shadow │ │
|
||
│ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │
|
||
│ │
|
||
│ 纯白 浅灰 分隔线 悬浮卡片 │
|
||
│ 页面底色 区块背景 边框/分隔 卡片/弹窗 │
|
||
│ │
|
||
└─────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
| 背景名称 | 色值 | 用途 |
|
||
| --- | --- | --- |
|
||
| **Background Primary** | `#FFFFFF` | 页面主背景 |
|
||
| **Background Secondary** | `#F5F5F7` | 区块背景、侧边栏 |
|
||
| **Background Tertiary** | `#E8E8ED` | 分隔线、输入框边框 |
|
||
| **Background Elevated** | `#FFFFFF` + `shadow` | 悬浮卡片、弹窗、下拉菜单 |
|
||
|
||
### 2.3 语义色 (Semantic Colors)
|
||
|
||
用于审核状态标识，需同时搭配图标和文字，满足无障碍要求。
|
||
|
||
| 状态 | 色值 | 图标 | 文案示例 |
|
||
| --- | --- | --- | --- |
|
||
| **通过 (Pass)** | `#34C759` | ✓ | 审核通过 |
|
||
| **警告 (Warning)** | `#FF9500` | ⚠ | 建议修改 |
|
||
| **拒绝 (Reject)** | `#FF3B30` | ✕ | 硬性违规 |
|
||
| **进行中 (Processing)** | `#5856D6` | ◐ | AI 审核中 |
|
||
| **待处理 (Pending)** | `#86868B` | ○ | 等待审核 |
|
||
|
||
---
|
||
|
||
## 3. 排版系统 (Typography)
|
||
|
||
### 3.1 字体选择
|
||
|
||
| 平台 | 主字体 | 备选字体 |
|
||
| --- | --- | --- |
|
||
| **iOS/macOS** | SF Pro Display / SF Pro Text | -apple-system |
|
||
| **Android** | Roboto | Noto Sans SC |
|
||
| **Windows** | Segoe UI | Microsoft YaHei |
|
||
| **Web 通用** | Inter | -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto |
|
||
|
||
**CSS Font Stack:**
|
||
```css
|
||
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
|
||
"Helvetica Neue", "Segoe UI", Roboto, "Noto Sans SC",
|
||
"PingFang SC", "Hiragino Sans GB", sans-serif;
|
||
```
|
||
|
||
### 3.2 字号规范
|
||
|
||
| 层级 | 字号 (Desktop) | 字号 (Mobile) | 行高 | 字重 | 用途 |
|
||
| --- | --- | --- | --- | --- | --- |
|
||
| **Display Large** | 34px | 28px | 1.2 | Bold (700) | 页面大标题 |
|
||
| **Display Medium** | 28px | 22px | 1.25 | Bold (700) | 区块标题 |
|
||
| **Title Large** | 22px | 20px | 1.3 | Semibold (600) | 卡片标题 |
|
||
| **Title Medium** | 17px | 17px | 1.35 | Semibold (600) | 列表项标题 |
|
||
| **Body Large** | 17px | 17px | 1.5 | Regular (400) | 正文主体 |
|
||
| **Body Medium** | 15px | 15px | 1.5 | Regular (400) | 次要正文 |
|
||
| **Caption** | 13px | 13px | 1.4 | Regular (400) | 说明文字 |
|
||
| **Footnote** | 12px | 12px | 1.4 | Regular (400) | 脚注、时间戳 |
|
||
|
||
### 3.3 文字颜色
|
||
|
||
| 层级 | 颜色 | 色值 | 用途 |
|
||
| --- | --- | --- | --- |
|
||
| **Primary** | Dark | `#1D1D1F` | 主标题、重要内容 |
|
||
| **Secondary** | Gray | `#86868B` | 次要文字、说明 |
|
||
| **Tertiary** | Light Gray | `#AEAEB2` | 占位符、禁用 |
|
||
| **Link** | Blue | `#007AFF` | 链接、可点击文字 |
|
||
| **Inverse** | White | `#FFFFFF` | 深色背景上的文字 |
|
||
|
||
---
|
||
|
||
## 4. 间距与布局 (Spacing & Layout)
|
||
|
||
### 4.1 间距系统
|
||
|
||
采用 8px 基准网格系统：
|
||
|
||
| 间距名称 | 数值 | 用途 |
|
||
| --- | --- | --- |
|
||
| **xs** | 4px | 图标与文字间距 |
|
||
| **sm** | 8px | 紧凑元素间距 |
|
||
| **md** | 16px | 组件内间距 |
|
||
| **lg** | 24px | 区块间距 |
|
||
| **xl** | 32px | 大区块间距 |
|
||
| **xxl** | 48px | 页面级间距 |
|
||
|
||
### 4.2 布局断点
|
||
|
||
| 断点名称 | 宽度范围 | 适用场景 |
|
||
| --- | --- | --- |
|
||
| **Mobile** | < 768px | 达人端主要 |
|
||
| **Tablet** | 768px - 1024px | 达人端辅助 |
|
||
| **Desktop** | 1024px - 1440px | 代理商/品牌方端 |
|
||
| **Wide** | > 1440px | 大屏展示 |
|
||
|
||
### 4.3 内容区最大宽度
|
||
|
||
| 场景 | 最大宽度 | 说明 |
|
||
| --- | --- | --- |
|
||
| **阅读内容** | 680px | 报告详情、说明文字 |
|
||
| **表单** | 560px | 输入表单 |
|
||
| **卡片网格** | 1200px | Dashboard 卡片 |
|
||
| **全宽** | 100% | 视频播放器、数据表格 |
|
||
|
||
---
|
||
|
||
## 5. 圆角与阴影 (Radius & Shadow)
|
||
|
||
### 5.1 圆角规范
|
||
|
||
| 元素类型 | 圆角值 | 示例 |
|
||
| --- | --- | --- |
|
||
| **Small** | 6px | 标签、徽章 |
|
||
| **Medium** | 12px | 按钮、输入框 |
|
||
| **Large** | 16px | 卡片、模态框 |
|
||
| **XLarge** | 24px | 底部弹出面板 |
|
||
| **Full** | 9999px | 圆形按钮、头像 |
|
||
|
||
### 5.2 阴影规范
|
||
|
||
```css
|
||
/* 悬浮卡片 */
|
||
.shadow-card {
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04),
|
||
0 4px 24px rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
/* 弹窗/模态框 */
|
||
.shadow-modal {
|
||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12),
|
||
0 2px 8px rgba(0, 0, 0, 0.06);
|
||
}
|
||
|
||
/* 下拉菜单 */
|
||
.shadow-dropdown {
|
||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08),
|
||
0 1px 4px rgba(0, 0, 0, 0.04);
|
||
}
|
||
|
||
/* 按钮悬停 */
|
||
.shadow-button-hover {
|
||
box-shadow: 0 2px 12px rgba(0, 122, 255, 0.3);
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 6. 组件设计 (Component Library)
|
||
|
||
### 6.1 按钮 (Buttons)
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────┐
|
||
│ 按钮样式 │
|
||
├─────────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ ┌────────────────┐ ┌────────────────┐ ┌────────────────┐ │
|
||
│ │ Primary │ │ Secondary │ │ Tertiary │ │
|
||
│ │ ██████████ │ │ ░░░░░░░░░░ │ │ Text │ │
|
||
│ │ #007AFF │ │ #F5F5F7 │ │ #007AFF │ │
|
||
│ └────────────────┘ └────────────────┘ └────────────────┘ │
|
||
│ │
|
||
│ ┌────────────────┐ ┌────────────────┐ ┌────────────────┐ │
|
||
│ │ Success │ │ Warning │ │ Destructive │ │
|
||
│ │ ██████████ │ │ ██████████ │ │ ██████████ │ │
|
||
│ │ #34C759 │ │ #FF9500 │ │ #FF3B30 │ │
|
||
│ └────────────────┘ └────────────────┘ └────────────────┘ │
|
||
│ │
|
||
└─────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
| 类型 | 背景色 | 文字色 | 用途 |
|
||
| --- | --- | --- | --- |
|
||
| **Primary** | `#007AFF` | `#FFFFFF` | 主要操作：上传、提交、确认 |
|
||
| **Secondary** | `#F5F5F7` | `#1D1D1F` | 次要操作：取消、返回 |
|
||
| **Tertiary** | 透明 | `#007AFF` | 文字链接：查看详情 |
|
||
| **Success** | `#34C759` | `#FFFFFF` | 成功操作：通过 |
|
||
| **Destructive** | `#FF3B30` | `#FFFFFF` | 危险操作：驳回、删除 |
|
||
|
||
**按钮尺寸：**
|
||
|
||
| 尺寸 | 高度 | 内边距 | 字号 | 用途 |
|
||
| --- | --- | --- | --- | --- |
|
||
| **Large** | 50px | 24px | 17px | 移动端主按钮 |
|
||
| **Medium** | 44px | 20px | 15px | 桌面端主按钮 |
|
||
| **Small** | 32px | 12px | 13px | 内联操作按钮 |
|
||
|
||
### 6.2 输入框 (Input Fields)
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────┐
|
||
│ 输入框状态 │
|
||
├─────────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ Default Focus │
|
||
│ ┌──────────────────────┐ ┌──────────────────────┐ │
|
||
│ │ 请输入内容... │ │ 输入内容 │ │
|
||
│ │ ────────────────────│ │ ════════════════════│ │
|
||
│ │ #E8E8ED │ │ #007AFF │ │
|
||
│ └──────────────────────┘ └──────────────────────┘ │
|
||
│ │
|
||
│ Error Disabled │
|
||
│ ┌──────────────────────┐ ┌──────────────────────┐ │
|
||
│ │ 错误内容 │ │ 禁用状态 │ │
|
||
│ │ ════════════════════│ │ ────────────────────│ │
|
||
│ │ #FF3B30 │ │ #F5F5F7 │ │
|
||
│ │ ⚠️ 请输入有效内容 │ │ │ │
|
||
│ └──────────────────────┘ └──────────────────────┘ │
|
||
│ │
|
||
└─────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
| 状态 | 边框色 | 背景色 | 说明 |
|
||
| --- | --- | --- | --- |
|
||
| **Default** | `#E8E8ED` | `#FFFFFF` | 默认状态 |
|
||
| **Focus** | `#007AFF` | `#FFFFFF` | 聚焦状态，2px 边框 |
|
||
| **Error** | `#FF3B30` | `#FFFFFF` | 错误状态，显示错误提示 |
|
||
| **Disabled** | `#E8E8ED` | `#F5F5F7` | 禁用状态 |
|
||
|
||
### 6.3 卡片 (Cards)
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────┐
|
||
│ 卡片样式 │
|
||
├─────────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ ╭─────────────────────────────────────────────────╮ │
|
||
│ │ │ │
|
||
│ │ 📋 Brief 解析完成 │ │
|
||
│ │ │ │
|
||
│ │ ───────────────────────────────────────────── │ │
|
||
│ │ │ │
|
||
│ │ 已提取 3 个核心卖点，2 个禁忌词 │ │
|
||
│ │ 投放平台：抖音 │ │
|
||
│ │ │ │
|
||
│ │ ┌──────────┐ ┌──────────┐ │ │
|
||
│ │ │ 查看详情 │ │ 编辑 │ │ │
|
||
│ │ └──────────┘ └──────────┘ │ │
|
||
│ │ │ │
|
||
│ ╰─────────────────────────────────────────────────╯ │
|
||
│ │
|
||
│ 背景: #FFFFFF │
|
||
│ 圆角: 16px │
|
||
│ 阴影: shadow-card │
|
||
│ 内边距: 24px │
|
||
│ │
|
||
└─────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 6.4 标签与徽章 (Tags & Badges)
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────┐
|
||
│ 标签与徽章 │
|
||
├─────────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ 状态标签 (Status Tags) │
|
||
│ ╭──────────╮ ╭──────────╮ ╭──────────╮ ╭──────────╮ │
|
||
│ │ ✓ 已通过 │ │ ⚠ 待修改 │ │ ✕ 已驳回 │ │ ◐ 审核中 │ │
|
||
│ ╰──────────╯ ╰──────────╯ ╰──────────╯ ╰──────────╯ │
|
||
│ #E8F5E9 #FFF3E0 #FFEBEE #EDE7F6 │
|
||
│ #34C759 #FF9500 #FF3B30 #5856D6 │
|
||
│ │
|
||
│ 数量徽章 (Count Badges) │
|
||
│ ╭────╮ ╭────╮ ╭────╮ │
|
||
│ │ 12 │ │ 3 │ │ 99+│ │
|
||
│ ╰────╯ ╰────╯ ╰────╯ │
|
||
│ #FF3B30 (红点通知) │
|
||
│ │
|
||
└─────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 6.5 进度指示器 (Progress Indicators)
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────┐
|
||
│ 进度指示器 │
|
||
├─────────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ 线性进度条 (Linear Progress) │
|
||
│ ┌─────────────────────────────────────────────────────────┐ │
|
||
│ │████████████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │
|
||
│ └─────────────────────────────────────────────────────────┘ │
|
||
│ 45% - 正在检测竞品 Logo... │
|
||
│ │
|
||
│ 环形进度 (Circular Progress) │
|
||
│ ╭───────╮ │
|
||
│ ╱ ╭───╮ ╲ │
|
||
│ │ │ 45%│ │ │
|
||
│ ╲ ╰───╯ ╱ │
|
||
│ ╰───────╯ │
|
||
│ │
|
||
│ 步骤进度 (Step Progress) - AI 透明思考 │
|
||
│ ● ──────── ● ──────── ◐ ──────── ○ ──────── ○ │
|
||
│ Brief解析 ASR转写 Logo检测 语义分析 生成报告 │
|
||
│ │
|
||
└─────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 7. 达人端界面设计 (Creator Portal)
|
||
|
||
### 7.1 设计定位
|
||
|
||
- **核心设备：** 手机浏览器 / 微信内嵌浏览器
|
||
- **设计风格：** 极简、友好、减少焦虑
|
||
- **参考：** Apple Music / Apple Podcasts 移动端
|
||
|
||
### 7.2 底部导航栏
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────┐
|
||
│ │
|
||
│ [ 页面内容区域 ] │
|
||
│ │
|
||
├─────────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ 🏠 📤 🔔 👤 │
|
||
│ 任务 上传 消息 我的 │
|
||
│ │
|
||
│ ━━━━━━ ──── ──── ──── │
|
||
│ (选中态) (3) │
|
||
│ │
|
||
└─────────────────────────────────────────────────────────────────┘
|
||
|
||
选中态：图标 + 文字变为 Primary Blue (#007AFF)
|
||
未选中：图标 + 文字为 Secondary (#86868B)
|
||
消息角标：红色圆点徽章显示未读数
|
||
```
|
||
|
||
### 7.3 任务列表页
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────┐
|
||
│ ◀ 返回 任务中心 ⚙️ │
|
||
├─────────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ [ 全部 ] [ 待提交 ] [ 审核中 ] [ 已完成 ] │
|
||
│ ━━━━━━ │
|
||
│ │
|
||
│ ╭─────────────────────────────────────────────────────────╮ │
|
||
│ │ │ │
|
||
│ │ 📋 XX品牌 618 推广 │ │
|
||
│ │ │ │
|
||
│ │ 投放平台：抖音 │ │
|
||
│ │ 截止时间：2026-02-15 │ │
|
||
│ │ │ │
|
||
│ │ ╭────────────╮ │ │
|
||
│ │ │ ⚠ 待修改 │ │ │
|
||
│ │ ╰────────────╯ │ │
|
||
│ │ │ │
|
||
│ │ ┌──────────────────────────────────────────────────┐ │ │
|
||
│ │ │ 查看修改意见 │ │ │
|
||
│ │ └──────────────────────────────────────────────────┘ │ │
|
||
│ │ │ │
|
||
│ ╰─────────────────────────────────────────────────────────╯ │
|
||
│ │
|
||
│ ╭─────────────────────────────────────────────────────────╮ │
|
||
│ │ 📋 YY品牌 新品发布 │ │
|
||
│ │ ... │ │
|
||
│ ╰─────────────────────────────────────────────────────────╯ │
|
||
│ │
|
||
├─────────────────────────────────────────────────────────────────┤
|
||
│ 🏠 📤 🔔 👤 │
|
||
└─────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 7.4 智能上传页 (透明思考 UI)
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────┐
|
||
│ ◀ 返回 上传视频 │
|
||
├─────────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ ╭─────────────╮ │
|
||
│ ╱ ╲ │
|
||
│ │ ╭─────╮ │ │
|
||
│ │ │ ◐ │ │ AI 正在思考... │
|
||
│ │ │ 45% │ │ │
|
||
│ │ ╰─────╯ │ │
|
||
│ ╲ ╱ │
|
||
│ ╰─────────────╯ │
|
||
│ │
|
||
│ ┌─────────────────────────────────────────────────────────┐ │
|
||
│ │████████████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │
|
||
│ └─────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ ───────────────────────────────────────────────────────── │
|
||
│ │
|
||
│ 👁️ 正在逐帧检测竞品 Logo... │
|
||
│ │
|
||
│ ✅ Brief 解析完成 00:05 │
|
||
│ ✅ ASR 语音转写完成 00:23 │
|
||
│ ◐ Logo 检测中... 进行中 │
|
||
│ ○ 语义分析 等待中 │
|
||
│ ○ 生成审核报告 等待中 │
|
||
│ │
|
||
│ ───────────────────────────────────────────────────────── │
|
||
│ │
|
||
│ 💡 预计还需 2 分钟。您可以先离开， │
|
||
│ 结果将通过微信通知您。 │
|
||
│ │
|
||
│ ┌──────────────────────────────────────────────────────────┐ │
|
||
│ │ 离开并稍后查看 │ │
|
||
│ └──────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
├─────────────────────────────────────────────────────────────────┤
|
||
│ ⚠️ 上传中请保持屏幕常亮，切勿锁屏或切换应用 │
|
||
└─────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**设计要点：**
|
||
- 中央环形进度，显示整体进度百分比
|
||
- 步骤列表实时更新，已完成项显示耗时
|
||
- 当前步骤高亮，带动态指示器
|
||
- 底部提供"离开"选项，减少用户被困感
|
||
- 上传时显示防锁屏提示（Wake Lock API）
|
||
|
||
### 7.5 审核结果页
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────┐
|
||
│ ◀ 返回 审核报告 │
|
||
├─────────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ ╭─────────────────────────────────────────────────────────╮ │
|
||
│ │ │ │
|
||
│ │ 🔴 未通过 - 存在 2 处硬性违规 │ │
|
||
│ │ │ │
|
||
│ │ 请根据以下意见修改后重新提交 │ │
|
||
│ │ │ │
|
||
│ ╰─────────────────────────────────────────────────────────╯ │
|
||
│ │
|
||
│ ┌─────────────────────────────────────────────────────────┐ │
|
||
│ │ ▶ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ │
|
||
│ │ 🔴 🔴 🟡 │ │
|
||
│ │ 00:15 00:42 01:28 │ │
|
||
│ └─────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ 修改清单 │
|
||
│ ───────────────────────────────────────────────────────── │
|
||
│ │
|
||
│ ╭─────────────────────────────────────────────────────────╮ │
|
||
│ │ 🔴 00:15 广告法违禁词 │ │
|
||
│ │ │ │
|
||
│ │ 原内容："全网第一的产品" │ │
|
||
│ │ │ │
|
||
│ │ 💡 建议：改为"深受喜爱"或"销量领先" │ │
|
||
│ │ │ │
|
||
│ │ ┌────────────┐ ┌────────────┐ │ │
|
||
│ │ │ 跳转 │ │ 申诉 │ │ │
|
||
│ │ └────────────┘ └────────────┘ │ │
|
||
│ ╰─────────────────────────────────────────────────────────╯ │
|
||
│ │
|
||
│ ╭─────────────────────────────────────────────────────────╮ │
|
||
│ │ 🔴 00:42 竞品 Logo 露出 │ │
|
||
│ │ │ │
|
||
│ │ [截图预览] │ │
|
||
│ │ │ │
|
||
│ │ 检测到画面中出现竞品 Logo（置信度 92%） │ │
|
||
│ │ │ │
|
||
│ │ ┌────────────┐ ┌────────────┐ │ │
|
||
│ │ │ 跳转 │ │ 申诉 │ │ │
|
||
│ │ └────────────┘ └────────────┘ │ │
|
||
│ ╰─────────────────────────────────────────────────────────╯ │
|
||
│ │
|
||
│ ╭─────────────────────────────────────────────────────────╮ │
|
||
│ │ 🟡 01:28 舆情风险提示 │ │
|
||
│ │ │ │
|
||
│ │ AI 检测到可能存在"油腻"风险（建议检查） │ │
|
||
│ │ 此为软性提示，不影响通过 │ │
|
||
│ │ │ │
|
||
│ ╰─────────────────────────────────────────────────────────╯ │
|
||
│ │
|
||
├─────────────────────────────────────────────────────────────────┤
|
||
│ ┌──────────────────────────────────────────────────────────┐ │
|
||
│ │ 重新上传 │ │
|
||
│ └──────────────────────────────────────────────────────────┘ │
|
||
└─────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**设计要点：**
|
||
- 顶部结果横幅用语义色背景，一目了然
|
||
- 视频进度条上标注问题时间点（红/黄点）
|
||
- 点击时间点可跳转视频对应位置
|
||
- 每条问题提供"跳转"和"申诉"两个操作
|
||
- 软性提示明确标注"不影响通过"
|
||
|
||
### 7.6 申诉弹窗
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────┐
|
||
│ │
|
||
│ │
|
||
│ ╭─────────────────────────────────────────────────────────╮ │
|
||
│ │ │ │
|
||
│ │ 发起申诉 ✕ │ │
|
||
│ │ │ │
|
||
│ │ ─────────────────────────────────────────────────── │ │
|
||
│ │ │ │
|
||
│ │ 问题类型：广告法违禁词 │ │
|
||
│ │ 时间点：00:15 │ │
|
||
│ │ │ │
|
||
│ │ ─────────────────────────────────────────────────── │ │
|
||
│ │ │ │
|
||
│ │ 申诉理由 * │ │
|
||
│ │ ┌─────────────────────────────────────────────────┐ │ │
|
||
│ │ │ │ │ │
|
||
│ │ │ 请详细说明您的申诉理由（至少10字） │ │ │
|
||
│ │ │ │ │ │
|
||
│ │ │ │ │ │
|
||
│ │ └─────────────────────────────────────────────────┘ │ │
|
||
│ │ 0/200 │ │
|
||
│ │ │ │
|
||
│ │ 上传补充证据（可选） │ │
|
||
│ │ ┌──────────┐ │ │
|
||
│ │ │ + 添加 │ │ │
|
||
│ │ └──────────┘ │ │
|
||
│ │ │ │
|
||
│ │ ─────────────────────────────────────────────────── │ │
|
||
│ │ │ │
|
||
│ │ 💡 剩余申诉令牌：2 次 │ │
|
||
│ │ 申诉成功后令牌将自动返还 │ │
|
||
│ │ │ │
|
||
│ │ ┌──────────────────────────────────────────────────┐ │ │
|
||
│ │ │ 提交申诉 │ │ │
|
||
│ │ └──────────────────────────────────────────────────┘ │ │
|
||
│ │ │ │
|
||
│ ╰─────────────────────────────────────────────────────────╯ │
|
||
│ │
|
||
└─────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 8. 代理商端界面设计 (Agency Console)
|
||
|
||
### 8.1 设计定位
|
||
|
||
- **核心设备：** 桌面端 (1280px+)
|
||
- **设计风格：** 高效、专业、信息密集
|
||
- **参考：** Apple Developer Console / Notion
|
||
|
||
### 8.2 侧边栏导航
|
||
|
||
```
|
||
┌────────────────────────────────────────────────────────────────────────────┐
|
||
│ │
|
||
│ ┌──────────┐ ┌────────────────────────────────────────────────────────┐ │
|
||
│ │ │ │ │ │
|
||
│ │ SmartAudit│ │ 页面内容区域 │ │
|
||
│ │ │ │ │ │
|
||
│ ├──────────┤ │ │ │
|
||
│ │ │ │ │ │
|
||
│ │ 📊 工作台 │ │ │ │
|
||
│ │ ━━━━━━━━ │ │ │ │
|
||
│ │ │ │ │ │
|
||
│ │ 📋 Brief │ │ │ │
|
||
│ │ 管理 │ │ │ │
|
||
│ │ │ │ │ │
|
||
│ │ ✅ 审核台 │ │ │ │
|
||
│ │ (12) │ │ │ │
|
||
│ │ │ │ │ │
|
||
│ │ 👥 达人 │ │ │ │
|
||
│ │ 管理 │ │ │ │
|
||
│ │ │ │ │ │
|
||
│ │ 📈 数据 │ │ │ │
|
||
│ │ 报表 │ │ │ │
|
||
│ │ │ │ │ │
|
||
│ ├──────────┤ │ │ │
|
||
│ │ │ │ │ │
|
||
│ │ ⚙️ 设置 │ │ │ │
|
||
│ │ │ │ │ │
|
||
│ │ 张三 │ │ │ │
|
||
│ │ 代理商 │ │ │ │
|
||
│ │ │ │ │ │
|
||
│ └──────────┘ └────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
└────────────────────────────────────────────────────────────────────────────┘
|
||
|
||
侧边栏宽度：240px（可折叠为 64px 图标模式）
|
||
选中项：左侧 3px Primary Blue 边框 + 浅蓝背景
|
||
徽章：审核台显示待处理数量
|
||
```
|
||
|
||
### 8.3 工作台 (Dashboard)
|
||
|
||
```
|
||
┌────────────────────────────────────────────────────────────────────────────┐
|
||
│ SmartAudit 🔔 (3) 👤 张三 │
|
||
├──────────┬─────────────────────────────────────────────────────────────────┤
|
||
│ │ │
|
||
│ 📊 工作台 │ 工作台 │
|
||
│ ━━━━━━━━ │ │
|
||
│ │ ┌─────────────────────────────────────────────────────────┐ │
|
||
│ 📋 Brief │ │ │ │
|
||
│ 管理 │ │ 待办事项 │ │
|
||
│ │ │ │ │
|
||
│ ✅ 审核台 │ │ ╭──────────────╮ ╭──────────────╮ ╭──────────────╮ │ │
|
||
│ (12) │ │ │ │ │ │ │ │ │ │
|
||
│ │ │ │ 12 │ │ 3 │ │ 5 │ │ │
|
||
│ 👥 达人 │ │ │ 待人工复核 │ │ 申诉待仲裁 │ │ 超时预警 │ │ │
|
||
│ 管理 │ │ │ │ │ │ │ │ │ │
|
||
│ │ │ ╰──────────────╯ ╰──────────────╯ ╰──────────────╯ │ │
|
||
│ 📈 数据 │ │ │ │
|
||
│ 报表 │ └─────────────────────────────────────────────────────────┘ │
|
||
│ │ │
|
||
│ │ ┌─────────────────────────────────────────────────────────┐ │
|
||
│ ⚙️ 设置 │ │ │ │
|
||
│ │ │ 进行中的项目 │ │
|
||
│ │ │ │ │
|
||
│ │ │ XX品牌 618 推广 │ │
|
||
│ │ │ ████████████████████░░░░░░░░░░░░ 12/20 完成 │ │
|
||
│ │ │ │ │
|
||
│ │ │ YY品牌 新品发布 │ │
|
||
│ │ │ ██████████░░░░░░░░░░░░░░░░░░░░░░ 5/15 完成 │ │
|
||
│ │ │ │ │
|
||
│ │ └─────────────────────────────────────────────────────────┘ │
|
||
│ │ │
|
||
│ │ ┌─────────────────────────────────────────────────────────┐ │
|
||
│ │ │ │ │
|
||
│ │ │ 最近活动 │ │
|
||
│ │ │ │ │
|
||
│ │ │ 🟢 达人A 的视频已通过审核 5分钟前 │ │
|
||
│ │ │ 🔴 达人B 的视频被驳回 12分钟前 │ │
|
||
│ │ │ 📋 新 Brief 已上传解析完成 1小时前 │ │
|
||
│ │ │ │ │
|
||
│ │ └─────────────────────────────────────────────────────────┘ │
|
||
│ │ │
|
||
└──────────┴─────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 8.4 Brief 配置中心
|
||
|
||
```
|
||
┌────────────────────────────────────────────────────────────────────────────┐
|
||
│ SmartAudit 🔔 (3) 👤 张三 │
|
||
├──────────┬─────────────────────────────────────────────────────────────────┤
|
||
│ │ │
|
||
│ 📊 工作台 │ Brief 配置中心 │
|
||
│ │ │
|
||
│ 📋 Brief │ ┌──────────────────────────────────────────────────────────┐ │
|
||
│ 管理 │ │ │ │
|
||
│ ━━━━━━━━ │ │ ╭─────────────────────────────────────────────────╮ │ │
|
||
│ │ │ │ │ │ │
|
||
│ ✅ 审核台 │ │ │ 📄 拖拽文件到此处上传 │ │ │
|
||
│ │ │ │ │ │ │
|
||
│ 👥 达人 │ │ │ 支持 PDF / Word / Excel / PPT / 图片 │ │ │
|
||
│ 管理 │ │ │ │ │ │
|
||
│ │ │ │ ────────── 或 ────────── │ │ │
|
||
│ 📈 数据 │ │ │ │ │ │
|
||
│ 报表 │ │ │ ┌───────────┐ ┌───────────────────────┐ │ │ │
|
||
│ │ │ │ │ 选择文件 │ │ 粘贴在线文档链接 │ │ │ │
|
||
│ │ │ │ └───────────┘ └───────────────────────┘ │ │ │
|
||
│ ⚙️ 设置 │ │ │ │ │ │
|
||
│ │ │ ╰─────────────────────────────────────────────────╯ │ │
|
||
│ │ │ │ │
|
||
│ │ │ 投放平台 │ │
|
||
│ │ │ ╭────────╮ ╭────────╮ ╭────────╮ ╭────────╮ │ │
|
||
│ │ │ │ 抖音 │ │ 小红书 │ │ B站 │ │ 快手 │ │ │
|
||
│ │ │ │ ━━━ │ │ │ │ │ │ │ │ │
|
||
│ │ │ ╰────────╯ ╰────────╯ ╰────────╯ ╰────────╯ │ │
|
||
│ │ │ │ │
|
||
│ │ │ 投放区域 │ │
|
||
│ │ │ ╭────────────╮ ╭────────────╮ ╭────────────╮ │ │
|
||
│ │ │ │ 中国大陆 │ │ 港澳台 │ │ 海外 │ │ │
|
||
│ │ │ │ ━━━ │ │ │ │ │ │ │
|
||
│ │ │ ╰────────────╯ ╰────────────╯ ╰────────────╯ │ │
|
||
│ │ │ │ │
|
||
│ │ └──────────────────────────────────────────────────────────┘ │
|
||
│ │ │
|
||
└──────────┴─────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 8.5 审核决策台 (核心页面)
|
||
|
||
```
|
||
┌────────────────────────────────────────────────────────────────────────────┐
|
||
│ SmartAudit 🔔 (3) 👤 张三 │
|
||
├──────────┬─────────────────────────────────────────────────────────────────┤
|
||
│ │ │
|
||
│ 📊 工作台 │ 审核决策台 ⬅️ ➡️ │
|
||
│ │ │
|
||
│ 📋 Brief │ ┌────────────────────────┬─────────────────────────────────┐ │
|
||
│ 管理 │ │ │ │ │
|
||
│ │ │ ┌──────────────────┐ │ AI 检查单 │ │
|
||
│ ✅ 审核台 │ │ │ │ │ │ │
|
||
│ ━━━━━━━━ │ │ │ │ │ 硬性合规 │ │
|
||
│ │ │ │ │ │ ───────────────────────────── │ │
|
||
│ 👥 达人 │ │ │ 视频播放器 │ │ │ │
|
||
│ 管理 │ │ │ │ │ 🔴 00:15 广告法违禁词 │ │
|
||
│ │ │ │ │ │ "全网第一" │ │
|
||
│ 📈 数据 │ │ │ │ │ [展开详情] │ │
|
||
│ 报表 │ │ │ │ │ │ │
|
||
│ │ │ └──────────────────┘ │ 🔴 00:42 竞品 Logo 露出 │ │
|
||
│ │ │ │ 置信度 92% │ │
|
||
│ ⚙️ 设置 │ │ ──────────────────── │ [展开详情] [查看截图] │ │
|
||
│ │ │ 🔴 🔴 🟡 │ │ │
|
||
│ │ │ ▼ ▼ ▼ │ Brief 完成度 │ │
|
||
│ │ │ ░░░░░░░░░░░░░░░░░░░░ │ ───────────────────────────── │ │
|
||
│ │ │ 00:00 02:30 │ │ │
|
||
│ │ │ │ ✅ 卖点1：美白 │ │
|
||
│ │ │ ┌──────────────────┐ │ ✅ 卖点2：补水 │ │
|
||
│ │ │ │ │ │ ❌ 卖点3：24小时持妆 (未提及) │ │
|
||
│ │ │ │ Brief 参考图 │ │ │ │
|
||
│ │ │ │ (画中画悬浮) │ │ 舆情雷达 │ │
|
||
│ │ │ │ │ │ ───────────────────────────── │ │
|
||
│ │ │ └──────────────────┘ │ │ │
|
||
│ │ │ │ 🟡 01:28 油腻风险 (仅提示) │ │
|
||
│ │ │ │ 达人表情过于夸张 │ │
|
||
│ │ │ │ │ │
|
||
│ │ └────────────────────────┴─────────────────────────────────┘ │
|
||
│ │ │
|
||
│ │ ┌──────────────────────────────────────────────────────────┐ │
|
||
│ │ │ │ │
|
||
│ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │
|
||
│ │ │ │ 驳回 │ │ 强制通过 │ │ 记录特例 │ │ 通过 │ │ │
|
||
│ │ │ │ #FF3B30 │ │ #FF9500 │ │ #86868B │ │ #34C759 │ │ │
|
||
│ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │
|
||
│ │ │ │ │
|
||
│ │ └──────────────────────────────────────────────────────────┘ │
|
||
│ │ │
|
||
└──────────┴─────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**设计要点：**
|
||
- 左侧 60%：视频播放器 + 智能进度条（红/黄/绿点）
|
||
- 右侧 40%：AI 检查单，分为"硬性合规"、"Brief 完成度"、"舆情雷达"三区
|
||
- 底部固定操作栏，四个决策按钮
|
||
- Brief 参考图可悬浮在视频角落对比
|
||
|
||
### 8.6 版本比对视窗
|
||
|
||
```
|
||
┌────────────────────────────────────────────────────────────────────────────┐
|
||
│ 版本比对 ✕ │
|
||
├────────────────────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ 📊 版本差异报告 │
|
||
│ ┌─────────────────────────────────────────────────────────────────────┐ │
|
||
│ │ V1 版本指出 3 个违规点： ✅ 已修复 2 个 │ ❌ 未修复 1 个 │ │
|
||
│ └─────────────────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ ┌────────────────────────────┬────────────────────────────┐ │
|
||
│ │ │ │ │
|
||
│ │ V1 版本 │ V2 版本 │ │
|
||
│ │ │ │ │
|
||
│ │ ┌──────────────────────┐ │ ┌──────────────────────┐ │ │
|
||
│ │ │ │ │ │ │ │ │
|
||
│ │ │ │ │ │ │ │ │
|
||
│ │ │ 视频播放器 │ │ │ 视频播放器 │ │ │
|
||
│ │ │ │ │ │ │ │ │
|
||
│ │ │ │ │ │ │ │ │
|
||
│ │ └──────────────────────┘ │ └──────────────────────┘ │ │
|
||
│ │ │ │ │
|
||
│ │ ░░░░░░░░░░░░░░░░░░░░░░░░ │ ░░░░░░░░░░░░░░░░░░░░░░░░░ │ │
|
||
│ │ 🔴 🔴 🟡 │ 🟢 🟢 🔴 │ │
|
||
│ │ │ │ │
|
||
│ └────────────────────────────┴────────────────────────────┘ │
|
||
│ │
|
||
│ 修改点对比 │
|
||
│ ───────────────────────────────────────────────────────────────────── │
|
||
│ │
|
||
│ ╭───────────────────────────────────────────────────────────────────╮ │
|
||
│ │ 00:15 广告法违禁词 ✅ 已修复 │ │
|
||
│ │ V1: "全网第一" → V2: "销量领先" │ │
|
||
│ ╰───────────────────────────────────────────────────────────────────╯ │
|
||
│ │
|
||
│ ╭───────────────────────────────────────────────────────────────────╮ │
|
||
│ │ 00:42 竞品 Logo 露出 ✅ 已修复 │ │
|
||
│ │ V1: 可见 → V2: 已遮挡 │ │
|
||
│ ╰───────────────────────────────────────────────────────────────────╯ │
|
||
│ │
|
||
│ ╭───────────────────────────────────────────────────────────────────╮ │
|
||
│ │ 01:28 卖点遗漏 ❌ 未修复 │ │
|
||
│ │ 仍未提及"24小时持妆" │ │
|
||
│ ╰───────────────────────────────────────────────────────────────────╯ │
|
||
│ │
|
||
│ ┌──────────────────────────────────────────────────────────────────────┐│
|
||
│ │ 快速通过 ││
|
||
│ └──────────────────────────────────────────────────────────────────────┘│
|
||
│ │
|
||
└────────────────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 9. 品牌方端界面设计 (Brand Admin)
|
||
|
||
### 9.1 设计定位
|
||
|
||
- **核心设备：** 桌面端 (1280px+)
|
||
- **设计风格：** 监管视角、数据驱动、风险预警
|
||
- **参考：** Apple Business Manager / Analytics Dashboard
|
||
|
||
### 9.2 数据看板
|
||
|
||
```
|
||
┌────────────────────────────────────────────────────────────────────────────┐
|
||
│ SmartAudit 🔔 (3) 👤 王总 │
|
||
├──────────┬─────────────────────────────────────────────────────────────────┤
|
||
│ │ │
|
||
│ 📊 数据 │ 数据看板 本月 ▼ 导出报告 ▼ │
|
||
│ 看板 │ │
|
||
│ ━━━━━━━━ │ ┌───────────┬───────────┬───────────┬───────────┬───────────┐│
|
||
│ │ │ │ │ │ │ ││
|
||
│ 🛡️ 规则 │ │ 1,234 │ 78.5% │ 96.2% │ 23 │ 4.2 小时 ││
|
||
│ 配置 │ │ │ │ │ │ ││
|
||
│ │ │ 审核总量 │ 初审通过率 │ 硬性召回率 │ 舆情拦截 │ 平均周期 ││
|
||
│ 📋 审计 │ │ ↑12% │ ↑5.2% │ 目标≥95% │ ↓18% │ 目标≤5分钟││
|
||
│ 日志 │ │ │ │ │ │ ││
|
||
│ │ └───────────┴───────────┴───────────┴───────────┴───────────┘│
|
||
│ 👥 代理商 │ │
|
||
│ 管理 │ ┌─────────────────────────────┬─────────────────────────────┐│
|
||
│ │ │ │ ││
|
||
│ 🔔 舆情 │ │ 审核量与通过率趋势 │ 问题类型分布 ││
|
||
│ 预警 │ │ │ ││
|
||
│ │ │ ╱╲ ╱╲ │ ╭─────╮ ││
|
||
│ ⚙️ 系统 │ │ ╱ ╲ ╱ ╲ ╱╲ │ ╱ 违禁词╲ ││
|
||
│ 设置 │ │ ╱ ╲╱ ╲ ╱ ╲ │ │ 35% │ ││
|
||
│ │ │ ╱ ╲╱ ╲ │ ╲_______╱ 竞品 25% ││
|
||
│ │ │ ───────────────────── │ 舆情 20% 卖点 20% ││
|
||
│ │ │ 1月 2月 3月 4月 5月 │ ││
|
||
│ │ │ │ ││
|
||
│ │ └─────────────────────────────┴─────────────────────────────┘│
|
||
│ │ │
|
||
│ │ ┌────────────────────────────────────────────────────────────┐│
|
||
│ │ │ ││
|
||
│ │ │ 风险预警 ││
|
||
│ │ │ ││
|
||
│ │ │ 🔴 紧急 代理商A 24小时内 5 条视频触发"竞品露出"，请关注 ││
|
||
│ │ │ 🟠 关注 达人B 连续 3 次提交未通过，建议沟通 ││
|
||
│ │ │ 🟡 舆情 本周舆情拦截数异常上升 (+45%) ││
|
||
│ │ │ ││
|
||
│ │ └────────────────────────────────────────────────────────────┘│
|
||
│ │ │
|
||
└──────────┴─────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 9.3 规则配置
|
||
|
||
```
|
||
┌────────────────────────────────────────────────────────────────────────────┐
|
||
│ SmartAudit 🔔 (3) 👤 王总 │
|
||
├──────────┬─────────────────────────────────────────────────────────────────┤
|
||
│ │ │
|
||
│ 📊 数据 │ 规则配置 │
|
||
│ 看板 │ │
|
||
│ │ [ 黑白名单 ] [ 竞品库 ] [ 舆情阈值 ] [ 版本管理 ] │
|
||
│ 🛡️ 规则 │ ━━━━━━━ │
|
||
│ 配置 │ │
|
||
│ ━━━━━━━━ │ ┌────────────────────────────────────────────────────────────┐│
|
||
│ │ │ ││
|
||
│ 📋 审计 │ │ 禁用词库 + 添加词条 ││
|
||
│ 日志 │ │ ││
|
||
│ │ │ ┌─────────────────────────────────────────────────────┐ ││
|
||
│ 👥 代理商 │ │ │ │ ││
|
||
│ 管理 │ │ │ 分类筛选： [ 全部 ] [ 广告法 ] [ 平台 ] [ 私有 ] │ ││
|
||
│ │ │ │ │ ││
|
||
│ 🔔 舆情 │ │ │ ╭──────────────────────────────────────────────╮ │ ││
|
||
│ 预警 │ │ │ │ 全网第一 广告法 系统内置 ✕ │ │ ││
|
||
│ │ │ │ ╰──────────────────────────────────────────────╯ │ ││
|
||
│ ⚙️ 系统 │ │ │ ╭──────────────────────────────────────────────╮ │ ││
|
||
│ 设置 │ │ │ │ 最好的 广告法 系统内置 ✕ │ │ ││
|
||
│ │ │ │ ╰──────────────────────────────────────────────╯ │ ││
|
||
│ │ │ │ ╭──────────────────────────────────────────────╮ │ ││
|
||
│ │ │ │ │ 独家 平台规则 抖音 ✕ │ │ ││
|
||
│ │ │ │ ╰──────────────────────────────────────────────╯ │ ││
|
||
│ │ │ │ ╭──────────────────────────────────────────────╮ │ ││
|
||
│ │ │ │ │ 竞品A 品牌私有 自定义 ✕ │ │ ││
|
||
│ │ │ │ ╰──────────────────────────────────────────────╯ │ ││
|
||
│ │ │ │ │ ││
|
||
│ │ │ └─────────────────────────────────────────────────────┘ ││
|
||
│ │ │ ││
|
||
│ │ │ 白名单 + 添加词条 ││
|
||
│ │ │ ───────────────────────────────────────────────────── ││
|
||
│ │ │ ││
|
||
│ │ │ ╭──────────────────────────────────────────────────────╮ ││
|
||
│ │ │ │ 我们的产品 允许达人使用此表述 ✕ │ ││
|
||
│ │ │ ╰──────────────────────────────────────────────────────╯ ││
|
||
│ │ │ ││
|
||
│ │ └────────────────────────────────────────────────────────────┘│
|
||
│ │ │
|
||
│ │ ┌──────────────────────────────────────────────────────────┐ │
|
||
│ │ │ 保存更改 │ │
|
||
│ │ └──────────────────────────────────────────────────────────┘ │
|
||
│ │ │
|
||
└──────────┴─────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 10. 动效规范 (Motion Design)
|
||
|
||
### 10.1 动效原则
|
||
|
||
| 原则 | 说明 |
|
||
| --- | --- |
|
||
| **目的性** | 动效服务于功能，非装饰 |
|
||
| **自然** | 遵循物理规律，缓入缓出 |
|
||
| **快速** | 保持流畅，不阻塞操作 |
|
||
| **一致** | 相似交互使用相同动效 |
|
||
|
||
### 10.2 缓动曲线
|
||
|
||
```css
|
||
/* 标准缓动 - 用于大多数过渡 */
|
||
--ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
|
||
|
||
/* 减速缓动 - 用于进入动画 */
|
||
--ease-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1);
|
||
|
||
/* 加速缓动 - 用于退出动画 */
|
||
--ease-accelerate: cubic-bezier(0.4, 0.0, 1, 1);
|
||
|
||
/* 弹性缓动 - 用于强调动画 */
|
||
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
|
||
```
|
||
|
||
### 10.3 时长规范
|
||
|
||
| 动效类型 | 时长 | 用途 |
|
||
| --- | --- | --- |
|
||
| **Micro** | 100ms | 按钮状态、图标变化 |
|
||
| **Short** | 200ms | 下拉菜单、提示框 |
|
||
| **Medium** | 300ms | 模态框、卡片展开 |
|
||
| **Long** | 500ms | 页面切换、复杂动画 |
|
||
|
||
### 10.4 特殊动效
|
||
|
||
| 场景 | 动效描述 |
|
||
| --- | --- |
|
||
| **AI 思考中** | 环形进度 + 柔和脉冲波纹 (使用 AI Purple) |
|
||
| **上传进度** | 线性进度条 + 数字跳动 |
|
||
| **审核通过** | 绿色对勾 ✓ 从中心放大弹出 (ease-bounce) |
|
||
| **审核驳回** | 红色叉号 ✕ 轻微震动 |
|
||
| **申诉成功** | 彩色纸屑动效 (Confetti) |
|
||
|
||
---
|
||
|
||
## 11. 图标系统 (Iconography)
|
||
|
||
### 11.1 图标风格
|
||
|
||
- **线条粗细：** 1.5px (与 SF Symbols 一致)
|
||
- **圆角：** 与组件圆角保持一致
|
||
- **尺寸：** 16px / 20px / 24px / 32px
|
||
- **颜色：** 继承文字颜色或使用语义色
|
||
|
||
### 11.2 核心图标清单
|
||
|
||
| 图标 | 名称 | 用途 |
|
||
| --- | --- | --- |
|
||
| 📊 | chart-bar | 数据看板 |
|
||
| 📋 | document | Brief / 任务 |
|
||
| ✅ | checkmark-circle | 通过 / 完成 |
|
||
| ❌ | xmark-circle | 驳回 / 错误 |
|
||
| ⚠️ | exclamation-triangle | 警告 / 风险 |
|
||
| 🔍 | magnifying-glass | 搜索 / 检测中 |
|
||
| 👁️ | eye | 查看 / Logo 检测 |
|
||
| 🧠 | brain | AI / 语义分析 |
|
||
| 📤 | arrow-up-doc | 上传 |
|
||
| 📥 | arrow-down-doc | 下载 / 导出 |
|
||
| 🔔 | bell | 通知 |
|
||
| ⚙️ | gear | 设置 |
|
||
| 👤 | person | 用户 / 达人 |
|
||
| 👥 | person-2 | 团队 / 代理商 |
|
||
| 🛡️ | shield | 品牌方 / 规则 |
|
||
|
||
---
|
||
|
||
## 12. 无障碍设计 (Accessibility)
|
||
|
||
### 12.1 色彩对比度
|
||
|
||
| 组合 | 对比度 | 合规等级 |
|
||
| --- | --- | --- |
|
||
| Dark (#1D1D1F) on White (#FFFFFF) | 16.1:1 | AAA |
|
||
| Secondary (#86868B) on White (#FFFFFF) | 4.6:1 | AA |
|
||
| Primary (#007AFF) on White (#FFFFFF) | 4.5:1 | AA |
|
||
| White (#FFFFFF) on Primary (#007AFF) | 4.5:1 | AA |
|
||
|
||
### 12.2 键盘导航
|
||
|
||
- 所有交互元素可通过 Tab 键访问
|
||
- Enter/Space 触发主要操作
|
||
- Escape 关闭模态框
|
||
- 方向键在列表中导航
|
||
|
||
### 12.3 屏幕阅读器
|
||
|
||
- 所有图标提供 `aria-label`
|
||
- 状态变化通过 `aria-live` 通知
|
||
- 表单元素关联 `<label>`
|
||
- 错误提示通过 `aria-describedby` 关联
|
||
|
||
### 12.4 动效偏好
|
||
|
||
```css
|
||
@media (prefers-reduced-motion: reduce) {
|
||
* {
|
||
animation-duration: 0.01ms !important;
|
||
transition-duration: 0.01ms !important;
|
||
}
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 13. 响应式策略 (Responsive Strategy)
|
||
|
||
### 13.1 达人端 (Mobile-First)
|
||
|
||
```
|
||
Mobile (< 768px) Tablet (768px - 1024px)
|
||
┌─────────────────┐ ┌─────────────────────────┐
|
||
│ │ │ │
|
||
│ 单列布局 │ │ 双列卡片布局 │
|
||
│ 全宽组件 │ → │ 更大的视频预览 │
|
||
│ 底部导航 │ │ 底部导航保留 │
|
||
│ │ │ │
|
||
└─────────────────┘ └─────────────────────────┘
|
||
```
|
||
|
||
### 13.2 代理商/品牌方端 (Desktop-First)
|
||
|
||
```
|
||
Desktop (> 1024px) Tablet (768px - 1024px)
|
||
┌─────┬───────────────┐ ┌───┬───────────────────┐
|
||
│ │ │ │ │ │
|
||
│侧边栏│ 内容区域 │ │图标│ 内容区域 │
|
||
│ │ │ → │模式│ │
|
||
│240px│ │ │64px│ │
|
||
│ │ │ │ │ │
|
||
└─────┴───────────────┘ └───┴───────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 14. 设计资源 (Design Resources)
|
||
|
||
### 14.1 设计工具
|
||
|
||
| 工具 | 用途 |
|
||
| --- | --- |
|
||
| **Figma** | UI 设计、组件库、原型 |
|
||
| **Lottie** | 复杂动效 |
|
||
| **Phosphor Icons** | 图标库 (与 SF Symbols 风格一致) |
|
||
|
||
### 14.2 交付物清单
|
||
|
||
| 交付物 | 格式 | 说明 |
|
||
| --- | --- | --- |
|
||
| 设计稿 | Figma | 三端完整界面 |
|
||
| 组件库 | Figma | 可复用组件 |
|
||
| 切图资源 | SVG/PNG | 图标、图片 |
|
||
| 动效文件 | Lottie JSON | AI 动画 |
|
||
| 设计标注 | Figma Dev Mode | 开发交接 |
|
||
|
||
### 14.3 参考资源
|
||
|
||
- [Apple Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/)
|
||
- [SF Symbols](https://developer.apple.com/sf-symbols/)
|
||
- [Tailwind CSS](https://tailwindcss.com/)
|
||
|
||
---
|
||
|
||
## 15. 附录：页面优先级清单
|
||
|
||
| 角色 | 页面名称 | 优先级 | 设计状态 |
|
||
| --- | --- | --- | --- |
|
||
| **达人** | 任务列表 | P0 | 待设计 |
|
||
| | 智能上传页 (透明思考 UI) | P0 | 待设计 |
|
||
| | 审核结果页 | P0 | 待设计 |
|
||
| | 申诉弹窗 | P1 | 待设计 |
|
||
| | 消息中心 | P1 | 待设计 |
|
||
| **代理商** | 工作台 | P0 | 待设计 |
|
||
| | Brief 配置 | P0 | 待设计 |
|
||
| | 审核决策台 | P0 | 待设计 |
|
||
| | 版本比对 | P1 | 待设计 |
|
||
| | 达人管理 | P1 | 待设计 |
|
||
| **品牌方** | 数据看板 | P0 | 待设计 |
|
||
| | 规则配置 | P0 | 待设计 |
|
||
| | 审计日志 | P1 | 待设计 |
|
||
| | 舆情预警 | P2 | 待设计 |
|
||
|
||
---
|
||
|
||
## 16. 相关文档
|
||
|
||
| 文档 | 说明 |
|
||
| --- | --- |
|
||
| PRD.md | 产品需求文档 |
|
||
| FeatureSummary.md | 功能清单与优先级 |
|
||
| User_Role_Interfaces.md | 用户角色与界面规范 |
|
||
| DevelopmentPlan.md | 开发计划与技术架构 |
|