ac0f086821
- 完成 T-001A: 前端项目初始化 (Next.js 14 + TypeScript + Tailwind CSS) - 完成 T-001B: 后端项目初始化 (FastAPI + SQLAlchemy + asyncpg) - 完成 T-002: 数据库配置 (KolVideo 模型 + 索引 + 测试) - 完成 T-003: 基础 UI 框架 (Header/Footer 组件 + 品牌色系) - 完成 T-004: 环境变量配置 (前后端环境变量) Co-Authored-By: Claude <noreply@anthropic.com>
44 KiB
44 KiB
KOL Insight - UI 设计文档
文档信息
| 项目 | 内容 |
|---|---|
| 版本 | v1.0 |
| 创建日期 | 2026-01-28 |
| 来源文档 | DevelopmentPlan.md, PRD.md, FeatureSummary.md |
| 品牌主体 | 麦秒思AI制作 |
1. 设计概述
1.1 设计原则
麦秒思AI设计语言
| 原则 | 说明 | 应用 |
|---|---|---|
| 优雅简洁 | 去除冗余元素,聚焦核心功能 | 单页应用,扁平化设计 |
| 专业可信 | 体现数据分析的专业性 | 稳重色系,清晰的信息层级 |
| 高效直观 | 减少用户学习成本 | 明确的操作流程,即时反馈 |
| 品牌一致 | 强化麦秒思AI品牌形象 | 统一使用品牌标识和色彩 |
品牌元素
- Logo: doc/ui/muse.svg (麦秒思AI品牌标识)
- Slogan: "麦秒思AI制作" (展示在关键位置)
- 色调: 专业、现代、科技感
1.2 页面总览
| 页面ID | 页面名称 | 描述 | 对应功能 | 优先级 |
|---|---|---|---|---|
| P-001 | 数据查询主页 | 单页应用,包含查询、展示、导出功能 | F-001~F-009 | P0 |
1.3 页面导航图
┌─────────────────────┐
│ 数据查询主页 │
│ P-001 │
│ (单页应用) │
└──────────┬──────────┘
│
│ 页面内交互
│
┌───────────────────┼───────────────────┐
│ │ │
▼ ▼ ▼
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ 查询区域 │ │ 结果区域 │ │ 导出操作 │
│ (顶部) │ │ (主体) │ │ (右上角) │
└─────────────┘ └─────────────┘ └─────────────┘
说明: KOL Insight 采用单页应用设计,所有功能集成在一个页面内,通过区域划分组织功能。
2. 页面设计
2.1 P-001: 数据查询主页
页面信息
| 属性 | 值 |
|---|---|
| 页面ID | P-001 |
| 对应功能 | F-001(星图ID查询), F-002(达人ID查询), F-003(昵称模糊查询), F-004~F-009(计算、展示、导出) |
| 入口 | 直接访问 (首页) |
| 出口 | 无 (单页应用) |
| 布局类型 | 垂直布局,从上到下依次为:品牌头部 → 查询区 → 结果区 |
【必须】页面布局 - ASCII 原型图
┌────────────────────────────────────────────────────────────────────────────┐
│ ┌──────────────────────────────────────────────────────────────────────┐ │
│ │ Header (品牌头部) │ │
│ │ ┌──────┐ [麦秒思AI制作] │ │
│ │ │ MUSE │ KOL Insight - 云图数据查询分析 │ │
│ │ │ Logo │ (品牌标识 + 产品名称) │ │
│ │ └──────┘ │ │
│ └──────────────────────────────────────────────────────────────────────┘ │
├────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────────────────────────────────────────────────────────────┐ │
│ │ 查询区域 (Query Section) │ │
│ │ │ │
│ │ 查询方式: ( • ) 星图ID ( ) 达人unique_id ( ) 达人昵称 │ │
│ │ │ │
│ │ ┌─────────────────────────────────────────────────────────────────┐ │ │
│ │ │ 输入查询内容... │ │ │
│ │ │ (支持批量输入,每行一个ID或输入昵称关键词) │ │ │
│ │ │ │ │ │
│ │ │ │ │ │
│ │ └─────────────────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ [清空] [开始查询] │ │
│ │ │ │
│ └──────────────────────────────────────────────────────────────────────┘ │
│ │
├────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────────────────────────────────────────────────────────────┐ │
│ │ 结果区域 (Results Section) │ │
│ │ │ │
│ │ 查询结果 (共 128 条) [导出Excel] [导出CSV]│ │
│ │ │ │
│ │ ┌─────────────────────────────────────────────────────────────────┐ │ │
│ │ │ 视频ID │ 标题 │ 达人 │ 自然曝光 │ CPM │ 看后搜成本 │ ... │ 操作 │ │ │
│ │ ├─────────────────────────────────────────────────────────────────┤ │ │
│ │ │ 12345 │ XXX │ @XX │ 100.2K │12.5 │ 8.3 │ ... │ [链接]│ │ │
│ │ │ 12346 │ YYY │ @YY │ 85.3K │15.2 │ 9.8 │ ... │ [链接]│ │ │
│ │ │ 12347 │ ZZZ │ @ZZ │ 92.1K │13.8 │ 7.5 │ ... │ [链接]│ │ │
│ │ │ ... │ ... │ ... │ ... │ ... │ ... │ ... │ ... │ │ │
│ │ │ ... │ ... │ ... │ ... │ ... │ ... │ ... │ ... │ │ │
│ │ └─────────────────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ◀ 上一页 1 / 10 下一页 ▶ │ │
│ │ │ │
│ └──────────────────────────────────────────────────────────────────────┘ │
│ │
├────────────────────────────────────────────────────────────────────────────┤
│ ┌──────────────────────────────────────────────────────────────────────┐ │
│ │ Footer │ │
│ │ © 2026 麦秒思AI制作 | KOL Insight v1.0 │ │
│ └──────────────────────────────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────────────────────────────┘
组件清单
| 组件ID | 组件名称 | 类型 | 说明 | 交互 |
|---|---|---|---|---|
| C-001 | 品牌头部 | Header | 展示麦秒思AI品牌Logo和产品名称 | 静态展示 |
| C-002 | 查询方式选择器 | Radio Group | 三种查询方式单选 | 点击切换查询方式 |
| C-003 | 查询输入框 | Textarea | 批量输入或昵称输入 | 文本输入 |
| C-004 | 查询按钮组 | Button Group | 清空、开始查询 | 点击执行操作 |
| C-005 | 结果表格 | Table | 展示26个字段的数据 | 横向滚动,列排序 |
| C-006 | 导出按钮组 | Button Group | 导出Excel/CSV | 点击触发下载 |
| C-007 | 分页器 | Pagination | 翻页控制 | 点击切换页码 |
| C-008 | 视频链接 | Link | 跳转到原视频 | 新窗口打开 |
| C-009 | Footer | Footer | 版权信息和品牌声明 | 静态展示 |
交互说明
| 触发 | 动作 | 结果 |
|---|---|---|
| 选择查询方式 | 切换 Radio | 输入框提示文案变化 |
| 输入查询条件 | 文本输入 | 实时验证输入格式 |
| 点击"清空" | 清空输入 | 输入框清空,结果区隐藏 |
| 点击"开始查询" | 提交查询 | 显示 Loading → 展示结果表格 |
| 点击表头 | 排序 | 按列排序数据 |
| 点击"导出Excel/CSV" | 触发下载 | 浏览器下载文件 |
| 点击视频链接 | 跳转 | 新窗口打开视频页面 |
| 点击分页 | 切换页 | 加载对应页数据 |
页面状态
| 状态 | 说明 | 展示 |
|---|---|---|
| 默认态 | 页面初始加载 | 查询区可用,结果区显示引导文案 |
| 输入态 | 用户正在输入 | 输入框聚焦,显示输入提示 |
| 查询中 | 提交查询后等待响应 | 按钮禁用,显示 Loading 动画 |
| 结果态 | 查询成功返回数据 | 展示结果表格和分页 |
| 空结果态 | 查询无匹配数据 | 显示空状态插图和提示 |
| 错误态 | 查询失败或网络错误 | 显示错误提示和重试按钮 |
默认态原型
┌─────────────────────────────────────────────────────────────┐
│ 查询区域 │
│ [查询方式选择器] │
│ [输入框 - 待输入] │
│ [清空] [开始查询] │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ 结果区域 │
│ │
│ ┌─────────────┐ │
│ │ 搜索图标 │ │
│ └─────────────┘ │
│ │
│ 请选择查询方式并输入查询条件 │
│ │
└─────────────────────────────────────────────────────────────┘
空结果态原型
┌─────────────────────────────────────────────────────────────┐
│ 结果区域 │
│ │
│ ┌─────────────┐ │
│ │ 空盒子图标 │ │
│ └─────────────┘ │
│ │
│ 未找到匹配数据 │
│ │
│ 请调整查询条件后重新尝试 │
│ │
│ [修改查询条件] │
│ │
└─────────────────────────────────────────────────────────────┘
查询中状态原型
┌─────────────────────────────────────────────────────────────┐
│ 结果区域 │
│ │
│ ┌─────────────┐ │
│ │ ⟳ Loading │ │
│ └─────────────┘ │
│ │
│ 正在查询数据,请稍候... │
│ │
└─────────────────────────────────────────────────────────────┘
错误态原型
┌─────────────────────────────────────────────────────────────┐
│ 结果区域 │
│ │
│ ┌─────────────┐ │
│ │ ⚠ 错误图标 │ │
│ └─────────────┘ │
│ │
│ 查询失败,请重试 │
│ │
│ 可能原因:网络异常或数据库连接失败 │
│ │
│ [重新查询] │
│ │
└─────────────────────────────────────────────────────────────┘
3. 用户流程
3.1 核心流程:批量查询 KOL 数据
【必须】流程图展示用户操作流程:
┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ 打开页面 │ ──▶ │ 选择查询 │ ──▶ │ 输入查询 │ ──▶ │ 提交查询 │
│ P-001 │ │ 方式 │ │ 条件 │ │ │
└─────────────┘ └─────────────┘ └─────────────┘ └──────┬──────┘
│
▼
┌─────────────┐
│ 查询处理 │
│ (后端) │
└──────┬──────┘
│
┌─────────────────────┼─────────────────────┐
│ 成功 │ 失败
▼ ▼
┌─────────────┐ ┌─────────────┐
│ 展示结果 │ │ 显示错误 │
│ (结果表格) │ │ (重试) │
└──────┬──────┘ └─────────────┘
│
│
┌───────────────────────┼───────────────────────┐
│ │ │
▼ ▼ ▼
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ 浏览数据 │ │ 点击视频 │ │ 导出数据 │
│ (翻页/排序)│ │ 链接 │ │ (Excel/CSV)│
└──────┬──────┘ └─────────────┘ └─────────────┘
│
▼
┌─────────────┐
│ 继续查询 │
│ 或离开 │
└─────────────┘
流程步骤详解
| 步骤 | 页面/区域 | 用户操作 | 系统响应 | 预期时间 |
|---|---|---|---|---|
| 1 | P-001 | 打开页面 | 加载默认态,显示引导文案 | < 2s |
| 2 | 查询区 | 选择查询方式(Radio) | 输入框提示文案更新 | 即时 |
| 3 | 查询区 | 输入查询条件(Textarea) | 实时验证,显示字符数 | 即时 |
| 4 | 查询区 | 点击"开始查询"按钮 | 按钮禁用,显示 Loading | 即时 |
| 5 | 后端 | 提交查询请求 | 查询数据库,计算指标 | < 3s |
| 6a | 结果区 | 查询成功 | 展示结果表格,显示数据条数 | < 0.5s |
| 6b | 结果区 | 查询失败 | 显示错误提示和重试按钮 | < 0.5s |
| 7 | 结果区 | 浏览数据(滚动/翻页) | 加载更多数据或切换页 | < 0.5s |
| 8 | 结果区 | 点击视频链接 | 新窗口打开视频页面 | 即时 |
| 9 | 结果区 | 点击导出按钮 | 生成文件,触发下载 | < 5s |
3.2 辅助流程:修改查询条件
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ 查看结果 │ ──▶ │ 点击"清空" │ ──▶ │ 输入框清空 │
│ (不满意) │ │ 按钮 │ │ (重新输入) │
└─────────────┘ └─────────────┘ └──────┬──────┘
│
▼
┌─────────────┐
│ 重新查询 │
│ │
└─────────────┘
3.3 异常流程:错误处理
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ 提交查询 │ ──▶ │ 网络异常/ │ ──▶ │ 显示错误 │
│ │ │ 数据库错误 │ │ 提示 │
└─────────────┘ └─────────────┘ └──────┬──────┘
│
▼
┌─────────────┐
│ 点击"重新 │
│ 查询"按钮 │
└──────┬──────┘
│
▼
┌─────────────┐
│ 重试查询 │
│ │
└─────────────┘
4. 组件规范
4.1 基础组件
Button 按钮
主按钮 (Primary):
┌────────────────┐
│ 开始查询 │ (品牌主色背景,白色文字)
└────────────────┘
:hover → 加深 10%
:active → 加深 20%
次按钮 (Secondary):
┌────────────────┐
│ 清空 │ (白色背景,边框,灰色文字)
└────────────────┘
:hover → 灰色背景
:active → 深灰背景
导出按钮 (Action):
┌────────────────┐
│ 导出Excel ▼ │ (绿色背景,白色文字)
└────────────────┘
禁用态 (Disabled):
┌────────────────┐
│ 查询中... │ (灰色背景,禁止点击)
└────────────────┘
Input/Textarea 输入框
默认态:
┌────────────────────────────────────────┐
│ 请输入星图ID,每行一个... │
└────────────────────────────────────────┘
聚焦态:
┌────────────────────────────────────────┐
│ 12345▊ │ (蓝色边框高亮)
└────────────────────────────────────────┘
错误态:
┌────────────────────────────────────────┐
│ (输入内容) │ (红色边框)
└────────────────────────────────────────┘
⚠ 请输入有效的ID格式
Radio 单选框
未选中: ( ) 星图ID
选中: (•) 星图ID (品牌主色圆点)
禁用: ( ) 星图ID (灰色文字)
Table 表格
┌──────────┬──────────┬──────────┬──────────┬──────────┐
│ 视频ID ▲ │ 标题 │ 达人 │ 自然曝光 │ CPM │ (表头:深色背景)
├──────────┼──────────┼──────────┼──────────┼──────────┤
│ 12345 │ 测试标题 │ @测试 │ 100.2K │ 12.5 │ (奇数行:白色)
├──────────┼──────────┼──────────┼──────────┼──────────┤
│ 12346 │ 测试标题 │ @测试 │ 85.3K │ 15.2 │ (偶数行:浅灰)
└──────────┴──────────┴──────────┴──────────┴──────────┘
:hover 行 → 浅蓝色背景高亮
Pagination 分页器
◀ 上一页 1 2 [3] 4 5 下一页 ▶
当前页: [3] → 品牌主色背景
其他页: 2 → 可点击,悬停高亮
禁用页: ◀ → 灰色,不可点击
Loading 加载动画
方案1: 旋转圆环
┌─⟳─┐
│ │ 正在加载...
└───┘
方案2: 骨架屏 (表格数据加载)
┌──────────┬──────────┬──────────┐
│ ░░░░░░ │ ░░░░░░ │ ░░░░░░ │
│ ░░░░░░ │ ░░░░░░ │ ░░░░░░ │
│ ░░░░░░ │ ░░░░░░ │ ░░░░░░ │
└──────────┴──────────┴──────────┘
4.2 业务组件
QueryForm 查询表单组件
┌──────────────────────────────────────────────────────┐
│ 查询方式: (•) 星图ID ( ) 达人unique_id ( ) 昵称 │
│ │
│ ┌────────────────────────────────────────────────┐ │
│ │ 请输入星图ID,每行一个... │ │
│ │ │ │
│ │ │ │
│ └────────────────────────────────────────────────┘ │
│ │
│ [清空] [开始查询] │
└──────────────────────────────────────────────────────┘
功能:
• 支持三种查询方式切换
• 根据查询方式动态更新输入提示
• 输入验证(实时)
• 清空和提交操作
ResultTable 结果表格组件
┌──────────────────────────────────────────────────────────────┐
│ 查询结果 (共 128 条) [导出Excel] [导出CSV] │
│ │
│ ┌────────────────────────────────────────────────────────┐ │
│ │ 26个字段的数据表格 (可横向滚动) │ │
│ │ • 视频ID、标题、达人、曝光数据、互动数据 │ │
│ │ • 预估CPM、预估看后搜人数、预估看后搜成本 │ │
│ │ • 品牌信息、发布时间等 │ │
│ └────────────────────────────────────────────────────────┘ │
│ │
│ ◀ 上一页 1 / 10 下一页 ▶ │
└──────────────────────────────────────────────────────────────┘
功能:
• 展示26个字段
• 支持列排序
• 横向滚动(表格宽度超出)
• 分页展示(每页20条)
• 数字格式化(千分位)
• 视频链接可点击
EmptyState 空状态组件
┌─────────────────────────────────────────┐
│ │
│ ┌─────────────┐ │
│ │ 📦 空盒子 │ │
│ └─────────────┘ │
│ │
│ 未找到匹配数据 │
│ │
│ 请调整查询条件后重新尝试 │
│ │
│ [修改查询条件] │
│ │
└─────────────────────────────────────────┘
ErrorState 错误状态组件
┌─────────────────────────────────────────┐
│ │
│ ┌─────────────┐ │
│ │ ⚠ 错误 │ │
│ └─────────────┘ │
│ │
│ 查询失败,请重试 │
│ │
│ 可能原因:网络异常或数据库连接失败 │
│ │
│ [重新查询] │
│ │
└─────────────────────────────────────────┘
5. 设计规范
5.1 色彩规范
麦秒思AI品牌色系
| 用途 | 色值 | 示例 | 说明 |
|---|---|---|---|
| 主色 (Primary) | #4F46E5 | 主按钮、链接、选中态 | 品牌核心色,专业科技感 |
| 主色浅 | #818CF8 | 悬停态、次要元素 | 主色的衍生色 |
| 主色深 | #3730A3 | 按下态、强调元素 | 主色的深色变体 |
| 成功 (Success) | #10B981 | 成功提示、导出按钮 | 绿色系 |
| 警告 (Warning) | #F59E0B | 警告提示 | 橙色系 |
| 错误 (Error) | #EF4444 | 错误提示、删除操作 | 红色系 |
| 信息 (Info) | #3B82F6 | 信息提示 | 蓝色系 |
| 文字主色 | #111827 | 标题、正文 | 深灰色,易读 |
| 文字次色 | #6B7280 | 辅助文字、提示 | 中灰色 |
| 文字禁用 | #D1D5DB | 禁用文字 | 浅灰色 |
| 背景主色 | #FFFFFF | 页面背景 | 纯白 |
| 背景次色 | #F9FAFB | 卡片背景、表格奇数行 | 浅灰白 |
| 边框色 | #E5E7EB | 输入框边框、分隔线 | 浅灰 |
色彩使用示例
主按钮: ████████ #4F46E5 (主色)
导出按钮: ████████ #10B981 (成功色)
错误提示: ████████ #EF4444 (错误色)
文字主色: ████████ #111827
背景色: ████████ #FFFFFF
5.2 字体规范
字体家族
| 平台 | 字体 | 备用 |
|---|---|---|
| 中文 | PingFang SC, Microsoft YaHei | sans-serif |
| 英文 | Inter, -apple-system, BlinkMacSystemFont | sans-serif |
| 数字 | Tabular Nums (等宽数字) | - |
字号规范
| 用途 | 字号 | 字重 | 行高 | 示例 |
|---|---|---|---|---|
| 页面标题 | 28px | Bold (700) | 1.3 | KOL Insight |
| 区域标题 | 20px | Semibold (600) | 1.4 | 查询结果 |
| 小标题 | 16px | Medium (500) | 1.5 | 查询方式 |
| 正文 | 14px | Regular (400) | 1.6 | 表格内容、按钮文字 |
| 辅助文字 | 12px | Regular (400) | 1.5 | 提示文案、标签 |
| 表格数据 | 14px | Regular (400) | 1.5 | 数据单元格 |
5.3 间距规范
基础间距单位: 4px
| 间距 | 值 | 用途 |
|---|---|---|
| xs | 4px | 紧凑元素间距 |
| sm | 8px | 小间距,如图标与文字 |
| md | 16px | 标准间距,组件内部 |
| lg | 24px | 大间距,区域之间 |
| xl | 32px | 特大间距,页面区块 |
| 2xl | 48px | 超大间距,顶部底部留白 |
组件间距示例
页面整体: padding: 32px (xl)
┌────────────────────────────────┐
│ [32px 顶部留白] │
│ ┌──────────────────────────┐ │
│ │ 查询区域 │ │
│ └──────────────────────────┘ │
│ [24px 区域间距] │
│ ┌──────────────────────────┐ │
│ │ 结果区域 │ │
│ └──────────────────────────┘ │
│ [32px 底部留白] │
└────────────────────────────────┘
按钮组: gap: 8px (sm)
[清空] [8px] [开始查询]
5.4 圆角规范
| 元素 | 圆角值 | 说明 |
|---|---|---|
| 按钮 | 6px | 适中圆角,现代感 |
| 输入框 | 6px | 与按钮保持一致 |
| 卡片 | 8px | 稍大圆角,柔和 |
| 表格 | 8px | 整体表格边框 |
| Badge/Tag | 12px | 较大圆角,标签感 |
5.5 阴影规范
| 用途 | 阴影值 | 使用场景 |
|---|---|---|
| 轻微阴影 | 0 1px 3px rgba(0,0,0,0.1) | 卡片、输入框 |
| 标准阴影 | 0 4px 6px rgba(0,0,0,0.1) | 悬浮元素 |
| 深度阴影 | 0 10px 15px rgba(0,0,0,0.1) | 模态框、下拉菜单 |
5.6 响应式断点
| 断点 | 宽度 | 布局说明 |
|---|---|---|
| Mobile | < 768px | 单栏布局,表格横向滚动 |
| Tablet | 768px - 1024px | 优化表格列宽 |
| Desktop | 1024px - 1440px | 标准布局 |
| Large Desktop | > 1440px | 居中固定宽度或适当扩展 |
响应式布局示例
Desktop (> 1024px):
┌────────────────────────────────────────┐
│ [查询区域 - 全宽] │
│ [结果表格 - 全宽,所有列可见] │
└────────────────────────────────────────┘
Tablet (768px - 1024px):
┌──────────────────────────────┐
│ [查询区域 - 全宽] │
│ [结果表格 - 隐藏部分次要列] │
└──────────────────────────────┘
Mobile (< 768px):
┌──────────────────┐
│ [查询区域] │
│ [结果卡片列表] │ (表格转为卡片布局)
│ [卡片1] │
│ [卡片2] │
└──────────────────┘
6. 品牌应用
6.1 品牌标识使用
Logo 使用规范
| 位置 | 尺寸 | 说明 |
|---|---|---|
| Header 左侧 | 高度 40px | 麦秒思AI Logo (doc/ui/muse.svg) |
| Favicon | 32x32px | 简化版 Logo 图标 |
| 加载动画 | - | 可选:Logo 动效 |
品牌声明位置
- Header 右上角:"麦秒思AI制作"
- Footer 中央:"© 2026 麦秒思AI制作 | KOL Insight v1.0"
Header 品牌区域详细设计
┌────────────────────────────────────────────────────────────────┐
│ ┌──────┐ │
│ │ │ KOL Insight 麦秒思AI制作 │
│ │ MUSE │ 云图数据查询分析 │
│ │ Logo │ (产品名称 + Slogan) (品牌声明) │
│ │ │ │
│ └──────┘ │
│ [40px] [16px] [产品名称:20px Bold] [14px Regular] │
└────────────────────────────────────────────────────────────────┘
6.2 空状态插图风格
- 使用简洁的线条插图
- 色彩与品牌主色保持一致
- 插图风格:扁平化、现代、专业
7. 动效规范
7.1 过渡动效
| 交互 | 动效 | 时长 | 缓动函数 |
|---|---|---|---|
| 按钮悬停 | 背景色变化 | 150ms | ease-out |
| 输入框聚焦 | 边框高亮 | 200ms | ease-in-out |
| 页面切换 | 淡入淡出 | 300ms | ease-in-out |
| 表格排序 | 淡入 | 200ms | ease-out |
| 模态框打开 | 缩放+淡入 | 250ms | cubic-bezier(0.4, 0, 0.2, 1) |
7.2 加载动画
方案: 旋转圆环
┌─────┐
│ ⟳ │ (360度旋转,1s 一圈,无限循环)
└─────┘
或: 品牌色脉动
┌─────┐
│ ● │ (主色圆点,缩放脉动)
└─────┘
8. 数据展示规范
8.1 数字格式化
| 数据类型 | 格式 | 示例 |
|---|---|---|
| 整数 | 千分位分隔 | 1,234,567 |
| 小数 | 保留2位 | 12.34 |
| 大数值 | K/M 缩写 | 100.2K, 1.5M |
| 百分比 | % 符号 | 85.3% |
| 金额 | ¥ + 千分位 | ¥ 1,234.56 |
| 日期 | YYYY-MM-DD | 2026-01-28 |
8.2 表格列定义
完整的26个输出字段
| 序号 | 中文名 | 字段宽度 | 对齐方式 | 格式化 |
|---|---|---|---|---|
| 1 | 视频ID | 120px | 左对齐 | 文本 |
| 2 | 视频标题 | 200px | 左对齐 | 文本,超出省略 |
| 3 | 爆文类型 | 100px | 居中 | Badge |
| 4 | 视频链接 | 100px | 居中 | 链接按钮 |
| 5 | 新增A3率 | 100px | 右对齐 | 百分比 |
| 6 | 看后搜人数 | 120px | 右对齐 | 千分位 |
| 7 | 回搜次数 | 100px | 右对齐 | 千分位 |
| 8 | 自然曝光数 | 120px | 右对齐 | K/M 缩写 |
| 9 | 加热曝光数 | 120px | 右对齐 | K/M 缩写 |
| 10 | 总曝光数 | 120px | 右对齐 | K/M 缩写 |
| 11 | 总互动 | 100px | 右对齐 | 千分位 |
| 12 | 点赞 | 100px | 右对齐 | 千分位 |
| 13 | 转发 | 100px | 右对齐 | 千分位 |
| 14 | 评论 | 100px | 右对齐 | 千分位 |
| 15 | 合作行业ID | 120px | 左对齐 | 文本 |
| 16 | 合作行业 | 120px | 左对齐 | 文本 |
| 17 | 合作品牌ID | 120px | 左对齐 | 文本 |
| 18 | 合作品牌 | 150px | 左对齐 | 文本 |
| 19 | 发布时间 | 120px | 居中 | YYYY-MM-DD |
| 20 | 达人昵称 | 120px | 左对齐 | 文本 |
| 21 | 达人unique_id | 150px | 左对齐 | 文本 |
| 22 | 预估视频价格 | 120px | 右对齐 | ¥ + 千分位 |
| 23 | 预估自然CPM | 120px | 右对齐 | 小数2位 |
| 24 | 预估自然看后搜人数 | 150px | 右对齐 | 小数2位 |
| 25 | 预估自然看后搜人数成本 | 180px | 右对齐 | ¥ + 小数2位 |
表格列优先级 (移动端渐进隐藏)
- P0 (必显): 视频ID、标题、达人、自然曝光、CPM、看后搜成本
- P1 (平板可隐藏): 爆文类型、看后搜人数、总互动、品牌
- P2 (移动端隐藏): 其他详细指标
8.3 空值处理
| 场景 | 显示 |
|---|---|
| 字段为 null | "-" |
| 计算结果为 0 | "0" |
| 除零错误 | "-" |
| API 获取失败 | 显示原始 ID |
9. 可访问性 (Accessibility)
| 规范 | 说明 |
|---|---|
| 语义化 HTML | 使用正确的 HTML 标签 |
| 键盘导航 | 支持 Tab 键切换焦点 |
| ARIA 标签 | 为交互元素添加 aria-label |
| 颜色对比度 | 文字与背景对比度 ≥ 4.5:1 |
| 焦点可见性 | 聚焦元素显示明显边框 |
10. 性能优化
| 优化项 | 说明 |
|---|---|
| 图片优化 | Logo 使用 SVG,支持 Retina |
| 表格虚拟滚动 | 大数据量时使用虚拟滚动 |
| 懒加载 | 分页数据按需加载 |
| 防抖节流 | 搜索输入使用防抖 |
11. 设计交付物
| 交付物 | 说明 |
|---|---|
| UIDesign.md | 本文档 |
| doc/ui/muse.svg | 品牌 Logo 文件 |
| 组件规范 | 可复用的 React 组件 |
| 样式变量 | CSS/Tailwind 配置文件 |
附录 A: 设计检查清单
生成 UIDesign 后,请确认以下项目:
- 覆盖 DevelopmentPlan 所有功能模块
- 页面导航图清晰展示页面关系
- 每个页面都有 ASCII 原型图
- 原型图展示了完整的页面结构
- 用户流程有流程图
- 每个页面都有状态说明 (默认/加载/空/错误)
- 组件清单完整
- 交互说明清晰
- 设计规范统一 (色彩/字体/间距)
- 品牌元素应用 (Logo/Slogan)
- 响应式设计考虑
- 数据展示规范 (26个字段)
附录 B: 与开发对接
开发实现优先级
- P0: 核心布局和查询功能 (T-005~T-009)
- P1: 结果展示和导出功能 (T-010~T-011)
- P2: 视频链接跳转和细节优化 (T-014)
关键设计决策
- 单页应用: 简化交互流程,提升用户体验
- 品牌强化: 多处展示"麦秒思AI制作",建立品牌认知
- 数据优先: 核心是数据展示,UI 简洁不干扰
- 响应式: 支持桌面/平板/移动端访问
文档版本: v1.0
最后更新: 2026-01-28
设计团队: 麦秒思AI
审核状态: 待审核 (建议运行 /ru 进行评审)