d52509d630
主要变更： - 项目名称统一为"秒思智能审核平台"（替换 SmartAudit） - 完善 TDD 实施评估与计划 (featuredoc/tdd_plan.md V2.0) - 新增项目现状诊断与可行性分析 - 新增前后端测试策略与工具链配置模板 - 新增 CI/CD 集成方案与 Codecov 配置说明 - 标注所有待创建模板文件 - 新增 GitHub 配置脚本 (scripts/setup-github.sh) - 自动配置分支保护规则 - 验证 GitHub CLI 登录状态 - 更新 TASK-005-C 包含分支保护与 Codecov 配置 - 同步更新 F-51/F-52 功能至所有相关文档 - UI 设计 Logo 统一为"秒思" Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1454 lines
114 KiB
Markdown
1454 lines
114 KiB
Markdown
# UIDesign.md - 智能视频审核系统 UI 设计规范
|
||
|
||
> ⚠️ **重要说明 (2026-02-03)**
|
||
>
|
||
> 本文档为**早期设计参考文档**，设计风格为浅色系。
|
||
>
|
||
> **当前正式设计规范请参考：[UIDesignSpec.md](./UIDesignSpec.md)**
|
||
> - 设计稿文件：`pencil-new.pen`
|
||
> - 设计风格：Apple-style **暗色主题**
|
||
> - 包含最新的设计令牌、组件规范和页面清单
|
||
>
|
||
> 本文档仅保留用于历史参考和设计原则说明。开发时以 `UIDesignSpec.md` 为准。
|
||
|
||
| 文档类型 | **UI Design System (设计系统规范)** |
|
||
| --- | --- |
|
||
| **项目名称** | 秒思智能审核平台 (AI 营销内容合规审核平台) |
|
||
| **版本号** | V1.1 |
|
||
| **发布日期** | 2026-02-03 |
|
||
| **设计风格** | ~~Apple Human Interface Guidelines 浅色系~~ → 已更新为暗色主题，见 UIDesignSpec.md |
|
||
| **关联文档** | PRD.md, FeatureSummary.md, User_Role_Interfaces.md, DevelopmentPlan.md, **UIDesignSpec.md** |
|
||
|
||
---
|
||
|
||
## 版本历史 (Version History)
|
||
|
||
| 版本 | 日期 | 作者 | 变更说明 |
|
||
| --- | --- | --- | --- |
|
||
| V1.0 | 2026-02-02 | Claude | 初稿：设计原则、色彩系统、组件库、三端界面规范 |
|
||
| V1.1 | 2026-02-02 | Claude | 新增第10章：AI 服务配置界面设计规范 |
|
||
| V1.2 | 2026-02-03 | Claude | 添加废弃声明，指向 UIDesignSpec.md（暗色主题） |
|
||
|
||
---
|
||
|
||
## 1. 设计原则 (Design Principles)
|
||
|
||
借鉴 Apple Human Interface Guidelines，秒思智能审核平台 的设计遵循以下核心原则：
|
||
|
||
### 1.1 核心设计理念
|
||
|
||
| 原则 | 描述 | 在 秒思智能审核平台 中的体现 |
|
||
| --- | --- | --- |
|
||
| **Clarity (清晰)** | 文字清晰易读，图标精确传意，功能显而易见 | 审核结论用红/黄/绿 + 文字 + 图标三重表达 |
|
||
| **Deference (克制)** | UI 退居幕后，内容为王 | 审核台以视频和报告为核心，界面元素轻量化 |
|
||
| **Depth (层次)** | 通过视觉层次和流畅动效建立空间感 | 卡片悬浮阴影、模态弹窗、进度条层叠 |
|
||
|
||
### 1.2 秒思智能审核平台 专属原则
|
||
|
||
| 原则 | 说明 |
|
||
| --- | --- |
|
||
| **透明 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 侧边栏导航
|
||
|
||
```
|
||
┌────────────────────────────────────────────────────────────────────────────┐
|
||
│ │
|
||
│ ┌──────────┐ ┌────────────────────────────────────────────────────────┐ │
|
||
│ │ │ │ │ │
|
||
│ │ 秒思智能审核平台│ │ 页面内容区域 │ │
|
||
│ │ │ │ │ │
|
||
│ ├──────────┤ │ │ │
|
||
│ │ │ │ │ │
|
||
│ │ 📊 工作台 │ │ │ │
|
||
│ │ ━━━━━━━━ │ │ │ │
|
||
│ │ │ │ │ │
|
||
│ │ 📋 Brief │ │ │ │
|
||
│ │ 管理 │ │ │ │
|
||
│ │ │ │ │ │
|
||
│ │ ✅ 审核台 │ │ │ │
|
||
│ │ (12) │ │ │ │
|
||
│ │ │ │ │ │
|
||
│ │ 👥 达人 │ │ │ │
|
||
│ │ 管理 │ │ │ │
|
||
│ │ │ │ │ │
|
||
│ │ 📈 数据 │ │ │ │
|
||
│ │ 报表 │ │ │ │
|
||
│ │ │ │ │ │
|
||
│ ├──────────┤ │ │ │
|
||
│ │ │ │ │ │
|
||
│ │ ⚙️ 设置 │ │ │ │
|
||
│ │ │ │ │ │
|
||
│ │ 张三 │ │ │ │
|
||
│ │ 代理商 │ │ │ │
|
||
│ │ │ │ │ │
|
||
│ └──────────┘ └────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
└────────────────────────────────────────────────────────────────────────────┘
|
||
|
||
侧边栏宽度：240px（可折叠为 64px 图标模式）
|
||
选中项：左侧 3px Primary Blue 边框 + 浅蓝背景
|
||
徽章：审核台显示待处理数量
|
||
```
|
||
|
||
### 8.3 工作台 (Dashboard)
|
||
|
||
```
|
||
┌────────────────────────────────────────────────────────────────────────────┐
|
||
│ 秒思智能审核平台 🔔 (3) 👤 张三 │
|
||
├──────────┬─────────────────────────────────────────────────────────────────┤
|
||
│ │ │
|
||
│ 📊 工作台 │ 工作台 │
|
||
│ ━━━━━━━━ │ │
|
||
│ │ ┌─────────────────────────────────────────────────────────┐ │
|
||
│ 📋 Brief │ │ │ │
|
||
│ 管理 │ │ 待办事项 │ │
|
||
│ │ │ │ │
|
||
│ ✅ 审核台 │ │ ╭──────────────╮ ╭──────────────╮ ╭──────────────╮ │ │
|
||
│ (12) │ │ │ │ │ │ │ │ │ │
|
||
│ │ │ │ 12 │ │ 3 │ │ 5 │ │ │
|
||
│ 👥 达人 │ │ │ 待人工复核 │ │ 申诉待仲裁 │ │ 超时预警 │ │ │
|
||
│ 管理 │ │ │ │ │ │ │ │ │ │
|
||
│ │ │ ╰──────────────╯ ╰──────────────╯ ╰──────────────╯ │ │
|
||
│ 📈 数据 │ │ │ │
|
||
│ 报表 │ └─────────────────────────────────────────────────────────┘ │
|
||
│ │ │
|
||
│ │ ┌─────────────────────────────────────────────────────────┐ │
|
||
│ ⚙️ 设置 │ │ │ │
|
||
│ │ │ 进行中的项目 │ │
|
||
│ │ │ │ │
|
||
│ │ │ XX品牌 618 推广 │ │
|
||
│ │ │ ████████████████████░░░░░░░░░░░░ 12/20 完成 │ │
|
||
│ │ │ │ │
|
||
│ │ │ YY品牌 新品发布 │ │
|
||
│ │ │ ██████████░░░░░░░░░░░░░░░░░░░░░░ 5/15 完成 │ │
|
||
│ │ │ │ │
|
||
│ │ └─────────────────────────────────────────────────────────┘ │
|
||
│ │ │
|
||
│ │ ┌─────────────────────────────────────────────────────────┐ │
|
||
│ │ │ │ │
|
||
│ │ │ 最近活动 │ │
|
||
│ │ │ │ │
|
||
│ │ │ 🟢 达人A 的视频已通过审核 5分钟前 │ │
|
||
│ │ │ 🔴 达人B 的视频被驳回 12分钟前 │ │
|
||
│ │ │ 📋 新 Brief 已上传解析完成 1小时前 │ │
|
||
│ │ │ │ │
|
||
│ │ └─────────────────────────────────────────────────────────┘ │
|
||
│ │ │
|
||
└──────────┴─────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 8.4 Brief 配置中心
|
||
|
||
```
|
||
┌────────────────────────────────────────────────────────────────────────────┐
|
||
│ 秒思智能审核平台 🔔 (3) 👤 张三 │
|
||
├──────────┬─────────────────────────────────────────────────────────────────┤
|
||
│ │ │
|
||
│ 📊 工作台 │ Brief 配置中心 │
|
||
│ │ │
|
||
│ 📋 Brief │ ┌──────────────────────────────────────────────────────────┐ │
|
||
│ 管理 │ │ │ │
|
||
│ ━━━━━━━━ │ │ ╭─────────────────────────────────────────────────╮ │ │
|
||
│ │ │ │ │ │ │
|
||
│ ✅ 审核台 │ │ │ 📄 拖拽文件到此处上传 │ │ │
|
||
│ │ │ │ │ │ │
|
||
│ 👥 达人 │ │ │ 支持 PDF / Word / Excel / PPT / 图片 │ │ │
|
||
│ 管理 │ │ │ │ │ │
|
||
│ │ │ │ ────────── 或 ────────── │ │ │
|
||
│ 📈 数据 │ │ │ │ │ │
|
||
│ 报表 │ │ │ ┌───────────┐ ┌───────────────────────┐ │ │ │
|
||
│ │ │ │ │ 选择文件 │ │ 粘贴在线文档链接 │ │ │ │
|
||
│ │ │ │ └───────────┘ └───────────────────────┘ │ │ │
|
||
│ ⚙️ 设置 │ │ │ │ │ │
|
||
│ │ │ ╰─────────────────────────────────────────────────╯ │ │
|
||
│ │ │ │ │
|
||
│ │ │ 投放平台 │ │
|
||
│ │ │ ╭────────╮ ╭────────╮ ╭────────╮ ╭────────╮ │ │
|
||
│ │ │ │ 抖音 │ │ 小红书 │ │ B站 │ │ 快手 │ │ │
|
||
│ │ │ │ ━━━ │ │ │ │ │ │ │ │ │
|
||
│ │ │ ╰────────╯ ╰────────╯ ╰────────╯ ╰────────╯ │ │
|
||
│ │ │ │ │
|
||
│ │ │ 投放区域 │ │
|
||
│ │ │ ╭────────────╮ ╭────────────╮ ╭────────────╮ │ │
|
||
│ │ │ │ 中国大陆 │ │ 港澳台 │ │ 海外 │ │ │
|
||
│ │ │ │ ━━━ │ │ │ │ │ │ │
|
||
│ │ │ ╰────────────╯ ╰────────────╯ ╰────────────╯ │ │
|
||
│ │ │ │ │
|
||
│ │ └──────────────────────────────────────────────────────────┘ │
|
||
│ │ │
|
||
└──────────┴─────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 8.5 审核决策台 (核心页面)
|
||
|
||
```
|
||
┌────────────────────────────────────────────────────────────────────────────┐
|
||
│ 秒思智能审核平台 🔔 (3) 👤 张三 │
|
||
├──────────┬─────────────────────────────────────────────────────────────────┤
|
||
│ │ │
|
||
│ 📊 工作台 │ 审核决策台 ⬅️ ➡️ │
|
||
│ │ │
|
||
│ 📋 Brief │ ┌────────────────────────┬─────────────────────────────────┐ │
|
||
│ 管理 │ │ │ │ │
|
||
│ │ │ ┌──────────────────┐ │ AI 检查单 │ │
|
||
│ ✅ 审核台 │ │ │ │ │ │ │
|
||
│ ━━━━━━━━ │ │ │ │ │ 硬性合规 │ │
|
||
│ │ │ │ │ │ ───────────────────────────── │ │
|
||
│ 👥 达人 │ │ │ 视频播放器 │ │ │ │
|
||
│ 管理 │ │ │ │ │ 🔴 00:15 广告法违禁词 │ │
|
||
│ │ │ │ │ │ "全网第一" │ │
|
||
│ 📈 数据 │ │ │ │ │ [展开详情] │ │
|
||
│ 报表 │ │ │ │ │ │ │
|
||
│ │ │ └──────────────────┘ │ 🔴 00:42 竞品 Logo 露出 │ │
|
||
│ │ │ │ 置信度 92% │ │
|
||
│ ⚙️ 设置 │ │ ──────────────────── │ [展开详情] [查看截图] │ │
|
||
│ │ │ 🔴 🔴 🟡 │ │ │
|
||
│ │ │ ▼ ▼ ▼ │ Brief 完成度 │ │
|
||
│ │ │ ░░░░░░░░░░░░░░░░░░░░ │ ───────────────────────────── │ │
|
||
│ │ │ 00:00 02:30 │ │ │
|
||
│ │ │ │ ✅ 卖点1：美白 │ │
|
||
│ │ │ ┌──────────────────┐ │ ✅ 卖点2：补水 │ │
|
||
│ │ │ │ │ │ ❌ 卖点3：24小时持妆 (未提及) │ │
|
||
│ │ │ │ Brief 参考图 │ │ │ │
|
||
│ │ │ │ (画中画悬浮) │ │ 舆情雷达 │ │
|
||
│ │ │ │ │ │ ───────────────────────────── │ │
|
||
│ │ │ └──────────────────┘ │ │ │
|
||
│ │ │ │ 🟡 01:28 油腻风险 (仅提示) │ │
|
||
│ │ │ │ 达人表情过于夸张 │ │
|
||
│ │ │ │ │ │
|
||
│ │ └────────────────────────┴─────────────────────────────────┘ │
|
||
│ │ │
|
||
│ │ ┌──────────────────────────────────────────────────────────┐ │
|
||
│ │ │ │ │
|
||
│ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │
|
||
│ │ │ │ 驳回 │ │ 强制通过 │ │ 通过 │ │ │
|
||
│ │ │ │ #FF3B30 │ │ #FF9500 │ │ #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 数据看板
|
||
|
||
```
|
||
┌────────────────────────────────────────────────────────────────────────────┐
|
||
│ 秒思智能审核平台 🔔 (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 规则配置
|
||
|
||
```
|
||
┌────────────────────────────────────────────────────────────────────────────┐
|
||
│ 秒思智能审核平台 🔔 (3) 👤 王总 │
|
||
├──────────┬─────────────────────────────────────────────────────────────────┤
|
||
│ │ │
|
||
│ 📊 数据 │ 规则配置 │
|
||
│ 看板 │ │
|
||
│ │ [ 黑白名单 ] [ 竞品库 ] [ 舆情阈值 ] [ 版本管理 ] │
|
||
│ 🛡️ 规则 │ ━━━━━━━ │
|
||
│ 配置 │ │
|
||
│ ━━━━━━━━ │ ┌────────────────────────────────────────────────────────────┐│
|
||
│ │ │ ││
|
||
│ 📋 审计 │ │ 禁用词库 + 添加词条 ││
|
||
│ 日志 │ │ ││
|
||
│ │ │ ┌─────────────────────────────────────────────────────┐ ││
|
||
│ 👥 代理商 │ │ │ │ ││
|
||
│ 管理 │ │ │ 分类筛选： [ 全部 ] [ 广告法 ] [ 平台 ] [ 私有 ] │ ││
|
||
│ │ │ │ │ ││
|
||
│ 🔔 舆情 │ │ │ ╭──────────────────────────────────────────────╮ │ ││
|
||
│ 预警 │ │ │ │ 全网第一 广告法 系统内置 ✕ │ │ ││
|
||
│ │ │ │ ╰──────────────────────────────────────────────╯ │ ││
|
||
│ ⚙️ 系统 │ │ │ ╭──────────────────────────────────────────────╮ │ ││
|
||
│ 设置 │ │ │ │ 最好的 广告法 系统内置 ✕ │ │ ││
|
||
│ │ │ │ ╰──────────────────────────────────────────────╯ │ ││
|
||
│ │ │ │ ╭──────────────────────────────────────────────╮ │ ││
|
||
│ │ │ │ │ 独家 平台规则 抖音 ✕ │ │ ││
|
||
│ │ │ │ ╰──────────────────────────────────────────────╯ │ ││
|
||
│ │ │ │ ╭──────────────────────────────────────────────╮ │ ││
|
||
│ │ │ │ │ 竞品A 品牌私有 自定义 ✕ │ │ ││
|
||
│ │ │ │ ╰──────────────────────────────────────────────╯ │ ││
|
||
│ │ │ │ │ ││
|
||
│ │ │ └─────────────────────────────────────────────────────┘ ││
|
||
│ │ │ ││
|
||
│ │ │ 白名单 + 添加词条 ││
|
||
│ │ │ ───────────────────────────────────────────────────── ││
|
||
│ │ │ ││
|
||
│ │ │ ╭──────────────────────────────────────────────────────╮ ││
|
||
│ │ │ │ 我们的产品 允许达人使用此表述 ✕ │ ││
|
||
│ │ │ ╰──────────────────────────────────────────────────────╯ ││
|
||
│ │ │ ││
|
||
│ │ └────────────────────────────────────────────────────────────┘│
|
||
│ │ │
|
||
│ │ ┌──────────────────────────────────────────────────────────┐ │
|
||
│ │ │ 保存更改 │ │
|
||
│ │ └──────────────────────────────────────────────────────────┘ │
|
||
│ │ │
|
||
└──────────┴─────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 10. AI 服务配置界面 (AI Configuration)
|
||
|
||
### 10.1 设计定位
|
||
|
||
- **所属角色：** 品牌方管理员（Brand Admin）
|
||
- **入口位置：** 品牌方端侧边栏「系统设置」→「AI 服务配置」
|
||
- **核心功能：** 配置 AI 提供商、模型选择、连接参数
|
||
- **权限控制：** 仅品牌管理员可见和操作；代理商/达人不可见
|
||
|
||
### 10.2 界面布局
|
||
|
||
```
|
||
┌────────────────────────────────────────────────────────────────────────────┐
|
||
│ 秒思智能审核平台 🔔 (3) 👤 王总 │
|
||
├──────────┬─────────────────────────────────────────────────────────────────┤
|
||
│ │ │
|
||
│ 📊 数据 │ AI 服务配置 │
|
||
│ 看板 │ │
|
||
│ │ ┌────────────────────────────────────────────────────────────┐│
|
||
│ 🛡️ 规则 │ │ ││
|
||
│ 配置 │ │ AI 提供商 ││
|
||
│ │ │ ┌──────────────────────────────────────────────────────┐ ││
|
||
│ 📋 审计 │ │ │ OneAPI 中转服务 ▼ │ ││
|
||
│ 日志 │ │ └──────────────────────────────────────────────────────┘ ││
|
||
│ │ │ 💡 支持 OneAPI、Anthropic Claude、OpenAI、DeepSeek 等 ││
|
||
│ 👥 代理商 │ │ ││
|
||
│ 管理 │ │ ───────────────────────────────────────────────────── ││
|
||
│ │ │ ││
|
||
│ 🔔 舆情 │ │ 模型配置 ││
|
||
│ 预警 │ │ ││
|
||
│ │ │ 文字处理模型 (LLM) ││
|
||
│ ⚙️ 系统 │ │ ┌──────────────────────────────────────────────────────┐ ││
|
||
│ 设置 │ │ │ claude-opus-4-5-20251101 ▼ │ ││
|
||
│ ━━━━━━━━ │ │ └──────────────────────────────────────────────────────┘ ││
|
||
│ │ │ 用于 Brief 解析、语义分析、报告生成 ││
|
||
│ └ 🤖 AI │ │ ││
|
||
│ 配置 │ │ 视频分析模型 (Vision) ││
|
||
│ ━━━━━━ │ │ ┌──────────────────────────────────────────────────────┐ ││
|
||
│ │ │ │ doubao-seed-1.6-thinking-vision ▼ │ ││
|
||
│ │ │ └──────────────────────────────────────────────────────┘ ││
|
||
│ │ │ 用于画面语义分析、场景/风险识别（Logo 检测由系统内置 CV 完成） ││
|
||
│ │ │ ││
|
||
│ │ │ 音频解析模型 (ASR) ││
|
||
│ │ │ ┌──────────────────────────────────────────────────────┐ ││
|
||
│ │ │ │ whisper-large-v3 ▼ │ ││
|
||
│ │ │ └──────────────────────────────────────────────────────┘ ││
|
||
│ │ │ 用于语音转文字、口播内容提取 ││
|
||
│ │ │ ││
|
||
│ │ └────────────────────────────────────────────────────────────┘│
|
||
│ │ │
|
||
└──────────┴─────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 10.3 连接配置区域
|
||
|
||
```
|
||
┌────────────────────────────────────────────────────────────────────────────┐
|
||
│ │
|
||
│ ┌────────────────────────────────────────────────────────────────────┐ │
|
||
│ │ │ │
|
||
│ │ 连接配置 │ │
|
||
│ │ │ │
|
||
│ │ Base URL │ │
|
||
│ │ ┌──────────────────────────────────────────────────────────────┐ │ │
|
||
│ │ │ https://oneapi.intelligrow.cn │ │ │
|
||
│ │ └──────────────────────────────────────────────────────────────┘ │ │
|
||
│ │ API 服务端点地址，需支持 OpenAI 兼容接口 │ │
|
||
│ │ │ │
|
||
│ │ API Key │ │
|
||
│ │ ┌──────────────────────────────────────────────────────┐ ┌────┐ │ │
|
||
│ │ │ sk-•••••••••••••••••••••••••••••••• │ │ 👁️ │ │ │
|
||
│ │ └──────────────────────────────────────────────────────┘ └────┘ │ │
|
||
│ │ API 密钥将加密存储，仅用于后端调用 │ │
|
||
│ │ │ │
|
||
│ │ ───────────────────────────────────────────────────────────── │ │
|
||
│ │ │ │
|
||
│ │ 生成参数 │ │
|
||
│ │ │ │
|
||
│ │ Temperature │ │
|
||
│ │ ┌──────────────────────────────────────────────────────────────┐ │ │
|
||
│ │ │ ░░░░░░░░░░░░░░░░░░░░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ │ │
|
||
│ │ │ 0 0.7 1.0 │ │ │
|
||
│ │ └──────────────────────────────────────────────────────────────┘ │ │
|
||
│ │ 控制输出的随机性。0 = 确定性输出，1 = 高创意性 │ │
|
||
│ │ │ │
|
||
│ │ Max Tokens │ │
|
||
│ │ ┌──────────────────────────────────────────────────────────────┐ │ │
|
||
│ │ │ 2000 │ │ │
|
||
│ │ └──────────────────────────────────────────────────────────────┘ │ │
|
||
│ │ 单次请求的最大输出 token 数量 │ │
|
||
│ │ │ │
|
||
│ └────────────────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ ┌────────────────────────────────────────────────────────────────────┐ │
|
||
│ │ │ │
|
||
│ │ ┌───────────────┐ ┌───────────────┐ │ │
|
||
│ │ │ 测试连接 │ │ 保存 │ │ │
|
||
│ │ │ #F5F5F7 │ │ #007AFF │ │ │
|
||
│ │ └───────────────┘ └───────────────┘ │ │
|
||
│ │ │ │
|
||
│ └────────────────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
└────────────────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 10.4 测试连接结果弹窗
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────┐
|
||
│ │
|
||
│ 测试连接结果 ✕ │
|
||
│ │
|
||
│ ─────────────────────────────────────────────────────────── │
|
||
│ │
|
||
│ ╭─────────────────────────────────────────────────────────╮ │
|
||
│ │ │ │
|
||
│ │ ✅ 文字处理模型 (LLM) │ │
|
||
│ │ claude-opus-4-5-20251101 │ │
|
||
│ │ 响应时间: 1.2s │ │
|
||
│ │ │ │
|
||
│ ╰─────────────────────────────────────────────────────────╯ │
|
||
│ │
|
||
│ ╭─────────────────────────────────────────────────────────╮ │
|
||
│ │ │ │
|
||
│ │ ✅ 视频分析模型 (Vision) │ │
|
||
│ │ doubao-seed-1.6-thinking-vision │ │
|
||
│ │ 响应时间: 0.8s │ │
|
||
│ │ │ │
|
||
│ ╰─────────────────────────────────────────────────────────╯ │
|
||
│ │
|
||
│ ╭─────────────────────────────────────────────────────────╮ │
|
||
│ │ │ │
|
||
│ │ ✅ 音频解析模型 (ASR) │ │
|
||
│ │ whisper-large-v3 │ │
|
||
│ │ 响应时间: 0.5s │ │
|
||
│ │ │ │
|
||
│ ╰─────────────────────────────────────────────────────────╯ │
|
||
│ │
|
||
│ ─────────────────────────────────────────────────────────── │
|
||
│ │
|
||
│ 🎉 所有模型连接正常！ │
|
||
│ │
|
||
│ ┌──────────────────────────────────────────────────────────┐ │
|
||
│ │ 确定 │ │
|
||
│ └──────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
└─────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 10.5 测试失败状态
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────┐
|
||
│ │
|
||
│ 测试连接结果 ✕ │
|
||
│ │
|
||
│ ─────────────────────────────────────────────────────────── │
|
||
│ │
|
||
│ ╭─────────────────────────────────────────────────────────╮ │
|
||
│ │ │ │
|
||
│ │ ✅ 文字处理模型 (LLM) │ │
|
||
│ │ claude-opus-4-5-20251101 │ │
|
||
│ │ 响应时间: 1.2s │ │
|
||
│ │ │ │
|
||
│ ╰─────────────────────────────────────────────────────────╯ │
|
||
│ │
|
||
│ ╭─────────────────────────────────────────────────────────╮ │
|
||
│ │ │ │
|
||
│ │ ❌ 视频分析模型 (Vision) │ │
|
||
│ │ doubao-seed-1.6-thinking-vision │ │
|
||
│ │ │ │
|
||
│ │ 错误: 模型不存在或无访问权限 │ │
|
||
│ │ 请确认模型名称正确且 API Key 有访问权限 │ │
|
||
│ │ │ │
|
||
│ ╰─────────────────────────────────────────────────────────╯ │
|
||
│ │
|
||
│ ╭─────────────────────────────────────────────────────────╮ │
|
||
│ │ │ │
|
||
│ │ ✅ 音频解析模型 (ASR) │ │
|
||
│ │ whisper-large-v3 │ │
|
||
│ │ 响应时间: 0.5s │ │
|
||
│ │ │ │
|
||
│ ╰─────────────────────────────────────────────────────────╯ │
|
||
│ │
|
||
│ ─────────────────────────────────────────────────────────── │
|
||
│ │
|
||
│ ⚠️ 部分模型连接失败，请检查配置后重试 │
|
||
│ │
|
||
│ ┌──────────────────────────────────────────────────────────┐ │
|
||
│ │ 确定 │ │
|
||
│ └──────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
└─────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 10.6 组件规格
|
||
|
||
| 组件 | 规格 | 说明 |
|
||
| --- | --- | --- |
|
||
| **AI 提供商下拉** | 高度 44px，圆角 12px | 下拉选项：OneAPI / Anthropic / OpenAI / DeepSeek / 自定义 |
|
||
| **模型选择下拉** | 高度 44px，圆角 12px | 动态从 API 获取可用模型列表 |
|
||
| **模型能力标签** | 标签 12px | 下拉项标注能力（如 `gpt-4o [文字/视觉]`） |
|
||
| **Base URL 输入** | 高度 44px，圆角 12px | 默认显示 placeholder |
|
||
| **API Key 输入** | 高度 44px，圆角 12px | 密码模式，带显示/隐藏切换按钮 |
|
||
| **Temperature 滑块** | 高度 8px，滑块 24px | 范围 0-1，步进 0.1 |
|
||
| **Max Tokens 输入** | 高度 44px，圆角 12px | 数字输入，范围 100-32000 |
|
||
| **测试连接按钮** | 高度 44px，圆角 12px | Secondary 样式 (#F5F5F7) |
|
||
| **保存按钮** | 高度 44px，圆角 12px | Primary 样式 (#007AFF) |
|
||
|
||
### 10.7 交互说明
|
||
|
||
| 交互 | 行为 |
|
||
| --- | --- |
|
||
| **切换 AI 提供商** | 自动填充该提供商的默认 Base URL；清空并重新获取模型列表 |
|
||
| **获取模型列表** | 输入 Base URL 和 API Key 后，调用 `/api/v1/ai-config/models` 获取可用模型（后端代理厂商 `/v1/models`） |
|
||
| **模型能力提示** | 模型下拉项展示能力标签，帮助识别多模态模型 |
|
||
| **显示/隐藏 API Key** | 点击眼睛图标切换密码显示/隐藏状态 |
|
||
| **拖动 Temperature 滑块** | 实时显示当前数值 |
|
||
| **点击测试连接** | 并行测试三个模型，弹窗显示结果；按钮显示加载状态 |
|
||
| **点击保存** | 表单验证通过后保存配置；成功显示 Toast 提示 |
|
||
|
||
### 10.8 表单验证规则
|
||
|
||
| 字段 | 验证规则 | 错误提示 |
|
||
| --- | --- | --- |
|
||
| **AI 提供商** | 必选 | 请选择 AI 提供商 |
|
||
| **文字处理模型** | 必选 | 请选择文字处理模型 |
|
||
| **视频分析模型** | 必选 | 请选择视频分析模型 |
|
||
| **音频解析模型** | 必选 | 请选择音频解析模型 |
|
||
| **Base URL** | 必填，URL 格式 | 请输入有效的 API 地址 |
|
||
| **API Key** | 必填，以 `sk-` 开头 | 请输入有效的 API Key |
|
||
| **Temperature** | 0-1 之间 | Temperature 必须在 0-1 之间 |
|
||
| **Max Tokens** | 100-32000 之间的整数 | Max Tokens 必须在 100-32000 之间 |
|
||
|
||
### 10.9 状态说明
|
||
|
||
| 状态 | 说明 |
|
||
| --- | --- |
|
||
| **未配置** | 首次进入，所有字段为空，提示"请配置 AI 服务以启用智能审核功能" |
|
||
| **已配置** | 显示已保存的配置，API Key 以掩码形式显示 |
|
||
| **加载模型列表中** | 模型下拉框显示加载指示器 |
|
||
| **测试连接中** | 测试按钮显示 Spinner，禁用保存按钮 |
|
||
| **保存中** | 保存按钮显示 Spinner |
|
||
|
||
---
|
||
|
||
## 11. 动效规范 (Motion Design)
|
||
|
||
### 11.1 动效原则
|
||
|
||
| 原则 | 说明 |
|
||
| --- | --- |
|
||
| **目的性** | 动效服务于功能，非装饰 |
|
||
| **自然** | 遵循物理规律，缓入缓出 |
|
||
| **快速** | 保持流畅，不阻塞操作 |
|
||
| **一致** | 相似交互使用相同动效 |
|
||
|
||
### 11.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);
|
||
```
|
||
|
||
### 11.3 时长规范
|
||
|
||
| 动效类型 | 时长 | 用途 |
|
||
| --- | --- | --- |
|
||
| **Micro** | 100ms | 按钮状态、图标变化 |
|
||
| **Short** | 200ms | 下拉菜单、提示框 |
|
||
| **Medium** | 300ms | 模态框、卡片展开 |
|
||
| **Long** | 500ms | 页面切换、复杂动画 |
|
||
|
||
### 11.4 特殊动效
|
||
|
||
| 场景 | 动效描述 |
|
||
| --- | --- |
|
||
| **AI 思考中** | 环形进度 + 柔和脉冲波纹 (使用 AI Purple) |
|
||
| **上传进度** | 线性进度条 + 数字跳动 |
|
||
| **审核通过** | 绿色对勾 ✓ 从中心放大弹出 (ease-bounce) |
|
||
| **审核驳回** | 红色叉号 ✕ 轻微震动 |
|
||
| **申诉成功** | 彩色纸屑动效 (Confetti) |
|
||
|
||
---
|
||
|
||
## 12. 图标系统 (Iconography)
|
||
|
||
### 12.1 图标风格
|
||
|
||
- **线条粗细：** 1.5px (与 SF Symbols 一致)
|
||
- **圆角：** 与组件圆角保持一致
|
||
- **尺寸：** 16px / 20px / 24px / 32px
|
||
- **颜色：** 继承文字颜色或使用语义色
|
||
|
||
### 12.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 | 品牌方 / 规则 |
|
||
|
||
---
|
||
|
||
## 13. 无障碍设计 (Accessibility)
|
||
|
||
### 13.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 |
|
||
|
||
### 13.2 键盘导航
|
||
|
||
- 所有交互元素可通过 Tab 键访问
|
||
- Enter/Space 触发主要操作
|
||
- Escape 关闭模态框
|
||
- 方向键在列表中导航
|
||
|
||
### 13.3 屏幕阅读器
|
||
|
||
- 所有图标提供 `aria-label`
|
||
- 状态变化通过 `aria-live` 通知
|
||
- 表单元素关联 `<label>`
|
||
- 错误提示通过 `aria-describedby` 关联
|
||
|
||
### 13.4 动效偏好
|
||
|
||
```css
|
||
@media (prefers-reduced-motion: reduce) {
|
||
* {
|
||
animation-duration: 0.01ms !important;
|
||
transition-duration: 0.01ms !important;
|
||
}
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 14. 响应式策略 (Responsive Strategy)
|
||
|
||
### 14.1 达人端 (Mobile-First)
|
||
|
||
```
|
||
Mobile (< 768px) Tablet (768px - 1024px)
|
||
┌─────────────────┐ ┌─────────────────────────┐
|
||
│ │ │ │
|
||
│ 单列布局 │ │ 双列卡片布局 │
|
||
│ 全宽组件 │ → │ 更大的视频预览 │
|
||
│ 底部导航 │ │ 底部导航保留 │
|
||
│ │ │ │
|
||
└─────────────────┘ └─────────────────────────┘
|
||
```
|
||
|
||
### 14.2 代理商/品牌方端 (Desktop-First)
|
||
|
||
```
|
||
Desktop (> 1024px) Tablet (768px - 1024px)
|
||
┌─────┬───────────────┐ ┌───┬───────────────────┐
|
||
│ │ │ │ │ │
|
||
│侧边栏│ 内容区域 │ │图标│ 内容区域 │
|
||
│ │ │ → │模式│ │
|
||
│240px│ │ │64px│ │
|
||
│ │ │ │ │ │
|
||
└─────┴───────────────┘ └───┴───────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 15. 设计资源 (Design Resources)
|
||
|
||
### 15.1 设计工具
|
||
|
||
| 工具 | 用途 |
|
||
| --- | --- |
|
||
| **Figma** | UI 设计、组件库、原型 |
|
||
| **Lottie** | 复杂动效 |
|
||
| **Phosphor Icons** | 图标库 (与 SF Symbols 风格一致) |
|
||
|
||
### 15.2 交付物清单
|
||
|
||
| 交付物 | 格式 | 说明 |
|
||
| --- | --- | --- |
|
||
| 设计稿 | Figma | 三端完整界面 |
|
||
| 组件库 | Figma | 可复用组件 |
|
||
| 切图资源 | SVG/PNG | 图标、图片 |
|
||
| 动效文件 | Lottie JSON | AI 动画 |
|
||
| 设计标注 | Figma Dev Mode | 开发交接 |
|
||
|
||
### 15.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/)
|
||
|
||
---
|
||
|
||
## 16. 附录：页面优先级清单
|
||
|
||
| 角色 | 页面名称 | 优先级 | 设计状态 |
|
||
| --- | --- | --- | --- |
|
||
| **达人** | 任务列表 | P0 | 待设计 |
|
||
| | 智能上传页 (透明思考 UI) | P0 | 待设计 |
|
||
| | 审核结果页 | P0 | 待设计 |
|
||
| | 申诉弹窗 | P1 | 待设计 |
|
||
| | 消息中心 | P1 | 待设计 |
|
||
| | 历史记录 | P2 | 待设计 |
|
||
| **代理商** | 工作台 | P0 | 待设计 |
|
||
| | Brief 配置 | P0 | 待设计 |
|
||
| | 审核决策台 | P0 | 待设计 |
|
||
| | 版本比对 | P2 | 待设计 |
|
||
| | 达人管理 | P1 | 待设计 |
|
||
| | 数据报表 | P1 | 待设计 |
|
||
| **品牌方** | 数据看板 | P0 | 待设计 |
|
||
| | 规则配置 | P0 | 待设计 |
|
||
| | AI 服务配置 | P0 | 已设计 |
|
||
| | 审计日志 | P1 | 待设计 |
|
||
| | 代理商管理 | P1 | 待设计 |
|
||
| | 舆情预警 | P2 | 待设计 |
|
||
|
||
---
|
||
|
||
## 17. 相关文档
|
||
|
||
| 文档 | 说明 |
|
||
| --- | --- |
|
||
| PRD.md | 产品需求文档 |
|
||
| FeatureSummary.md | 功能清单与优先级 |
|
||
| User_Role_Interfaces.md | 用户角色与界面规范 |
|
||
| DevelopmentPlan.md | 开发计划与技术架构 |
|