From 5e1aa95969577f0c4cba9a6a8c6dbaa2d5a9eb04 Mon Sep 17 00:00:00 2001 From: wlt Date: Wed, 17 Jun 2026 10:48:30 +0800 Subject: [PATCH] docs: add workspace UX redesign plan Comprehensive UX design document covering: current state analysis, design principles (minimal/functional/AI-first), navigation restructuring plan, new dashboard design, page-level AI enhancements, and phased migration strategy. Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus --- docs/UX_DESIGN_V2.md | 265 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 265 insertions(+) create mode 100644 docs/UX_DESIGN_V2.md diff --git a/docs/UX_DESIGN_V2.md b/docs/UX_DESIGN_V2.md new file mode 100644 index 0000000..21b8539 --- /dev/null +++ b/docs/UX_DESIGN_V2.md @@ -0,0 +1,265 @@ +# TradeMate 工作台极简改造设计方案 (V2) + +> 版本: v1.0 | 创建日期: 2026-06-17 | 状态: 待审核 + +--- + +## 1. 现状分析与痛点评级 + +### 1.1 导航架构现状 + +当前 `user-frontend` 共 **18 个路由**：侧边栏 11 项、个人中心子菜单 5 项、独立页面 2 个。 + +**侧边栏（11 项）**: + +| 路由 | 页面 | 图标 | 说明 | +|------|------|------|------| +| /agent | AI数字员工 | MagicStick | Agent Orchestrator 仪表盘 | +| /discovery | 发现客户 | Search | Google 搜索+联系人提取 | +| /workspace | 工作台 | Odometer | 统计+快捷入口+活动 | +| /customers | 客户管理 | User | CRUD | +| /products | 产品库 | Goods | CRUD | +| /quotations | 报价单 | DocumentCopy | CRUD + AI 智能报价 | +| /translate | 智能翻译 | ChatLineSquare | 翻译+回复+提取 | +| /marketing | 营销素材 | Promotion | AI 文案生成 | +| /followup | 智能跟进 | Message | 沉默检测+建议 | +| /analytics | 数据分析 | DataAnalysis | 统计+图表 | +| /team | 团队协作 | UserFilled | 团队管理 | + +**个人中心子菜单（Dropdown → 5 项）**: 购买次数 / 实名认证 / 发票管理 / 通知中心 / 意见反馈 + +### 1.2 核心问题 + +| 等级 | 问题 | 影响 | +|------|------|------| +| 🔴 P1 | 侧边栏 11 项过载 | 用户决策瘫痪，不知从何开始 | +| 🔴 P2 | 工作台仪表盘 8+ 模块堆砌 | 核心任务被淹没 | +| 🔴 P3 | AI数字员工与 Discovery/Marketing/Followup 功能重叠 | 用户困惑该用哪个 | +| 🟡 P4 | AiAssistant 浮动聊天与工作台脱节 | 需反复粘贴文字 | +| 🟡 P5 | 快捷翻译在 Workspace 和 Translate 重复 | 维护成本+体验不一致 | +| 🟢 P6 | 各页面无统一空状态引导 | 新用户不知所措 | + +### 1.3 功能重叠分析 + +``` +Agent.vue → 产品发现(重复Discovery) + 营销文案(重复Marketing) + 跟进分析(重复Followup) +Workspace.vue → 快捷翻译(重复Translate) + 跟进提醒(重复Followup) +``` + +--- + +## 2. 设计原则 + +### 2.1 AI-First，而非 Feature-First + +AI 数字员工从"一个页面"升级为工作台核心入口。用户在 AI 输入栏发起任务，系统自动路由。特征功能（翻译、跟进、营销）后退为 AI 的工具箱。 + +### 2.2 任务驱动，而非页面驱动 + +统一输入栏取代分散表单。"帮我找美国市场做户外折叠椅的买家"→ 一步触发 Agent 完整工作流。 + +### 2.3 Progressive Disclosure（渐进展示） + +首屏只展示：输入栏 + 核心 3 数据 + 下一步建议。卡片默认收起，展开才显示详情。 + +### 2.4 零认知摩擦 + +导航不超过 5 项。次级入口通过"更多"折叠。操作提示用自然语言。 + +### 2.5 嵌入式 AI，而非分离式 Chat + +翻译中 AI 自动感知文本。客户详情中 AI 生成跟进话术。报价单中 AI 分析询盘。 + +--- + +## 3. 改造目标 + +| 指标 | 当前 | 目标 | +|------|------|------| +| 侧边栏项数 | 11 | ≤ 5 | +| 首屏模块数 | 8+ | ≤ 5 | +| 新用户首步完成 | 自行探索 | ≤ 3 秒 | +| 冗余页面 | 3 处 | 0 处 | + +### 改造范围 + +- **Scope A (必做)**: 导航 11→5 + Profile 侧边栏化 +- **Scope B (必做)**: Agent 升级为工作台首页 + 统一输入栏 +- **Scope C (推荐)**: Discovery/Marketing/Followup → Agent 工作流 +- **Scope D (推荐)**: 各页面 AI 嵌入 + 空状态引导 + +--- + +## 4. 导航架构重构 + +### 4.1 新侧边栏设计 + +| 图标 | 名称 | 说明 | +|------|------|------| +| 🏠 | 首页工作台 | Agent + 仪表盘合二为一 | +| 👥 | 客户管理 | 保持不变 | +| 📄 | 报价产品 | Products + Quotations 合并导航 | +| 🌐 | 智能翻译 | 保持不变 | +| ☰ | 更多 | Analytics / Team / 个人设置 | + +**要点**: + +- `AI数字员工` + `工作台` → **首页工作台**（Agent.vue 改造为新首页） +- `发现客户` + `营销素材` + `智能跟进` → 嵌入 Agent 工作流，不再独立导航 +- `产品库` + `报价单` → 合并为"报价产品" +- Discovery/Marketing/Followup 保留路由但不在导航显示（向后兼容） + +### 4.2 新路由架构 + +``` +/workspace/ + ├── (空) → NewHome.vue（原 Agent.vue 改造） + ├── customers → 客户管理 + ├── products → 产品库 + ├── quotations → 报价单 + ├── translate → 智能翻译 + ├── analytics → 数据分析 + ├── team → 团队协作 + └── profile → 个人中心（含所有子页面侧边栏） +``` + +--- + +## 5. 新仪表盘设计 + +### 5.1 页面布局 + +``` +┌── AI 输入栏 ──────────────────────────────────────────┐ +│ [💡 描述你的需求，AI 会帮你完成... ] │ +│ 快捷: [🔍 找客户] [📝 写文案] [💬 翻译] [📋 报价] │ +└─────────────────────────────────────────────────────────┘ + +┌── 今日核心 ──────────────────────────────────────────┐ +│ 待跟进: 5 新客户: 3 今日翻译: 12 │ +└─────────────────────────────────────────────────────────┘ + +┌── 最近活动 ──────────────────────────────────────────┐ +│ [Agent] 为 户外折叠椅 找到 15 个美国潜在买家 │ +│ [Agent] 已发送 3 封跟进邮件给墨西哥客户 │ +│ [翻译] 翻译了 2 段 WhatsApp 消息 │ +│ [系统] 客户 Carlos 已沉默 5 天 │ +└─────────────────────────────────────────────────────────┘ + +┌── 快捷入口 ──────────────────────────────────────────┐ +│ [👥 客户管理] [📄 报价产品] [🌐 翻译] [📊 分析] │ +└─────────────────────────────────────────────────────────┘ +``` + +### 5.2 AI 输入栏（核心交互） + +- 进入工作台自动聚焦，`Cmd+K`/`Ctrl+K` 随时唤起 +- 自然语言指令自动识别意图： + - "帮我找美国市场做户外折叠椅的买家" → Agent Pipeline + - "给上周报价的墨西哥客户写一封跟进邮件" → Agent 跟进 + - "翻译这段文本：..." → 翻译工具 + - "展示上个月的客户情况分析" → 分析页 +- 输入历史可回溯，支持追问 + +### 5.3 组件化设计 + +``` +NewHome.vue +├── AiInputBar.vue # AI 统一输入栏 +│ ├── QuickTasks.vue # 快捷任务按钮 +│ └── IntentDetector.js # 意图识别 +├── CoreStats.vue # 今日核心 +├── ActivityFeed.vue # 最近活动 +│ ├── ActivityItem.vue +│ └── ActivityEmpty.vue +└── QuickAccess.vue # 快捷入口 +``` + +--- + +## 6. 页面级改造 + +| 页面 | 现状 | 改造 | +|------|------|------| +| Translate.vue | 三段式需手动切换 | AI 自动识别语言 + "一键回复"联动 Agent | +| Customers.vue | 标准 CRUD | AI 批量操作 + "建议动作"列 | +| Products+Quotations | 独立 | "产品→报价"一键流转 + AI 自动填充 | +| Analytics.vue | 静态统计 | AI 分析摘要 + 交互图表 + 趋势线 | +| Agent.vue | 独立仪表盘 | 升级为 NewHome.vue (首页) | + +--- + +## 7. 要素合并 + +| 现状 | 改造后 | +|------|--------| +| AiAssistant 浮动气泡 | Agent 对话模式，可执行操作+感知上下文 | +| Discovery 独立页 | Agent Pipeline 步骤（自动搜索→分析→评分） | +| Marketing 独立页 | Agent 生成能力，自动读取产品库 | +| Followup 独立页 | Agent 后台任务，活动流确认即可 | + +--- + +## 8. 迁移计划 + +### 阶段一：导航精简 + Agent 首页化（2-3 天） + +``` +1. 侧边栏 11 → 5 项 +2. Agent.vue 迁移到 /workspace +3. Workspace.vue 内容并入 +4. Profile 侧边栏子菜单 +``` + +涉及: UserLayout.vue, router/index.js, Agent.vue, Workspace.vue, Profile.vue + +### 阶段二：AI 输入栏 + 活动流（2-3 天） + +``` +1. AiInputBar 组件（意图识别复用 Agent 逻辑） +2. QuickTasks 快捷按钮 +3. ActivityFeed 活动流 +4. 整合 NewHome.vue +``` + +涉及: NewHome.vue, AiInputBar.vue, ActivityFeed.vue, CoreStats.vue, QuickTasks.vue + +### 阶段三：页面 AI 嵌入（3-4 天） + +``` +1. Translate.vue 增强 +2. Customers.vue AI 操作 +3. Products/Quotations AI 联动 +4. Analytics.vue AI 摘要 +``` + +### 阶段四：功能合并收尾（2-3 天） + +``` +1. AiAssistant → Agent 对话模式 +2. 保留隐藏路由但移除导航入口 +3. 全局空状态引导 +4. 移动端适配 +``` + +### 工时汇总 + +| 阶段 | 工时 | 可单独上线 | +|------|------|-----------| +| 一：导航精简 | 2-3 天 | ✅ 是 | +| 二：AI 输入栏 | 2-3 天 | ✅ 是 | +| 三：页面 AI 嵌入 | 3-4 天 | ❌ 建议与前序合并 | +| 四：功能合并 | 2-3 天 | ✅ 是 | +| **合计** | **9-13 天** | | + +--- + +## 附录：参考案例 + +| 产品 | 参考点 | +|------|--------| +| **ChatGPT** | 统一输入 → 意图识别 → 结果展示 | +| **Perplexity** | 输入即搜索，结果结构化 | +| **Cursor** | AI 嵌入编辑器，inline 操作 | +| **Notion AI** | 自然语言 + 结构化输出 | +| **外贸 SaaS 案例** | AI 出现在需要时刻，不单独跳转 |