From 915a13fd0ed2e624ebbecf82162bd09ce71deb26 Mon Sep 17 00:00:00 2001 From: Your Name Date: Mon, 2 Feb 2026 16:26:48 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=BC=80=E5=8F=91=E4=BB=BB?= =?UTF-8?q?=E5=8A=A1=E6=B8=85=E5=8D=95=E4=B8=8EUI=E8=AE=BE=E8=AE=A1?= =?UTF-8?q?=E8=A7=84=E8=8C=83=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- UIDesign.md | 1188 ++++++++++++++++++++++++++++++++++++ tasks.md | 1670 +++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 2858 insertions(+) create mode 100644 UIDesign.md create mode 100644 tasks.md diff --git a/UIDesign.md b/UIDesign.md new file mode 100644 index 0000000..0e35ac3 --- /dev/null +++ b/UIDesign.md @@ -0,0 +1,1188 @@ +# 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` 通知 +- 表单元素关联 `