# 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 后,请确认以下项目: - [x] 覆盖 DevelopmentPlan 所有功能模块 - [x] 页面导航图清晰展示页面关系 - [x] 每个页面都有 ASCII 原型图 - [x] 原型图展示了完整的页面结构 - [x] 用户流程有流程图 - [x] 每个页面都有状态说明 (默认/加载/空/错误) - [x] 组件清单完整 - [x] 交互说明清晰 - [x] 设计规范统一 (色彩/字体/间距) - [x] 品牌元素应用 (Logo/Slogan) - [x] 响应式设计考虑 - [x] 数据展示规范 (26个字段) ## 附录 B: 与开发对接 **开发实现优先级** 1. P0: 核心布局和查询功能 (T-005~T-009) 2. P1: 结果展示和导出功能 (T-010~T-011) 3. P2: 视频链接跳转和细节优化 (T-014) **关键设计决策** - **单页应用**: 简化交互流程,提升用户体验 - **品牌强化**: 多处展示"麦秒思AI制作",建立品牌认知 - **数据优先**: 核心是数据展示,UI 简洁不干扰 - **响应式**: 支持桌面/平板/移动端访问 --- **文档版本**: v1.0 **最后更新**: 2026-01-28 **设计团队**: 麦秒思AI **审核状态**: 待审核 (建议运行 `/ru` 进行评审)