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:
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 阴影规范
/* 悬浮卡片 */
.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 缓动曲线
/* 标准缓动 - 用于大多数过渡 */
--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 动效偏好
@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 参考资源
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 |
开发计划与技术架构 |
915a13fd0e