--- doc_id: DSG-006 title: "通用桌面应用_UI_-_UX_产品设计规范" owner: 文档治理团队 approver: 业务与技术负责人 status: active version: 1.0.0 classification: internal last_reviewed: 2026-08-25 next_review: 2027-02-21 --- # 通用桌面应用 UI / UX 产品设计规范 ## Apple-inspired 极简桌面智能体完整界面方案 V1.0 ### 1. 产品定位 通用桌面应用 是一款 Windows 本地优先的自主 AI Desktop Agent。 当前产品能力基础： - Agent Core 已就绪 - 112 个 Tool 可调用 - 支持本地模型与外部模型 - 支持任务执行 - 支持文件与工作区 - 支持权限控制 - 支持模型管理 - 支持系统工具调用 - 后续支持 Vision、Browser、Shell、SSH、Voice、Memory、GUI Automation 等能力 UI 的目标不是展示复杂技术架构，而是让用户能够自然地完成： > 对话 → 提出目标 → 项目负责人规划 → 调用工具 → 请求必要权限 → 执行 → 验证 → 返回结果。 --- # 2. 设计目标 产品视觉采用： **Apple-inspired Desktop Application** 关键词： - 极简 - 安静 - 大量留白 - 清晰 - 高级 - 克制 - 低视觉噪音 - 层级明确 - 强交互反馈 - 状态可感知 - 动画自然 - 支持 Light / Dark Mode 禁止： - 后台管理系统风格 - IDE 式信息堆叠 - 大量边框 - 大量彩色卡片 - 满屏 Dashboard - 霓虹科技风 - 复杂装饰 - 大面积渐变 - 112 个工具直接展示成 112 个按钮 “极简”指减少视觉噪音，而不是减少产品能力。 --- # 3. 整体信息架构 一级功能分为： ```text 项目负责人 任务 工作区 工具 记忆 活动 设置 ``` 对应职责： ```text 项目负责人 → 对话、Agent、即时任务 任务 → 所有执行任务与自动化 工作区 → 项目、文件、Git、环境 工具 → 112 Tool 与各种高级能力 记忆 → 长期记忆与用户资料 活动 → 操作记录、审计、错误 设置 → 整个应用配置 ``` --- # 4. App Shell 桌面应用采用稳定三层结构： ```text ┌────────────────────────────────────────────────────────────┐ │ Top Bar │ ├──────┬───────────────────────────────────┬─────────────────┤ │ │ │ │ │ NAV │ Main Area │ Context Panel │ │ │ │ │ │ │ │ │ ├──────┴───────────────────────────────────┴─────────────────┤ │ Status │ └────────────────────────────────────────────────────────────┘ ``` ## 四个核心区域 ### Top Bar 展示全局信息与高频入口。 ### Navigation 负责页面导航。 ### Main Area 当前任务主要操作区域。 ### Context Panel 只在需要时出现，展示当前任务、上下文、文件、环境信息。 --- # 5. 左侧 Navigation 默认使用 64–72px 极简图标栏。 顺序： ```text ✦ 项目负责人 ✓ 任务 ▣ 工作区 ⬡ 工具 ◉ 记忆 ≡ 活动 ⚙ 设置 ``` 鼠标 Hover： 显示 Tooltip。 点击顶部折叠按钮可展开为： ```text ✦ 项目负责人 ✓ 任务 ▣ 工作区 ⬡ 工具 ◉ 记忆 ≡ 活动 ⚙ 设置 ``` 展开宽度约 210px。 导航栏不得使用大量卡片背景。 当前页面只通过： - 图标状态 - 非常轻的背景 - 字体权重 表达选中状态。 --- # 6. Top Bar 高度约： ```text 48–52px ``` 布局： ```text 项目负责人 Workspace ▾ ● Local ⌕ 🔔 ``` ## 左侧 ### Logo / 项目负责人 点击： 返回项目负责人主页面。 ### Workspace Selector 显示： ```text 通用应用 Project ▾ ``` 点击： ```text 最近工作区 全部工作区 打开文件夹 新建工作区 Git Clone ``` --- ## 右侧 ### Runtime Status 例如： ```text ● Local ``` 或： ```text ● Qwen ○ Offline ● OpenAI ⚠ Core ``` 点击展开状态面板： - Agent Core - 当前模型 - Provider - 网络 - RAM - 当前运行任务数 --- ### Search / Command 按钮： ```text ⌕ ``` 快捷键： ```text Ctrl + K ``` --- ### Notifications 按钮： ```text 🔔 ``` 展示： - 任务完成 - 任务失败 - 权限请求 - 下载 - 更新 - 重要异常 --- # 7. 项目负责人主页面 这是应用默认主页。 主页面不做 Dashboard。 核心只展示： ```text Conversation + Agent Execution + Input ``` 默认界面： ```text ┌──────┬─────────────────────────────────────────────┐ │ NAV │ │ │ │ 对话 │ │ │ │ │ │ │ │ │ │ │ │ ┌──────────────────────────────────────┐ │ │ │ │ 输入消息或任务…… │ │ │ │ │ + Model ▾ Auto ▾ 🎤 ↑ │ │ │ │ └──────────────────────────────────────┘ │ └──────┴─────────────────────────────────────────────┘ ``` --- # 8. Conversation History 会话历史不永久占据屏幕。 点击： ```text 历史 ``` 从左侧滑出 Secondary Sidebar。 顶部： ```text + 新对话 搜索 ``` 分组： ```text 今天 昨天 过去 7 天 更早 ``` 单个会话支持： ```text 打开 重命名 置顶 移动到工作区 导出 Markdown 归档 删除 ``` --- # 9. Chat Message ## 用户消息菜单 ```text 复制 引用 编辑并重新发送 创建任务 ``` ## 项目负责人消息菜单 ```text 复制 引用 重新生成 创建任务 查看执行详情 ``` 涉及 Tool 时展示折叠式执行卡片。 --- # 10. 输入框 采用大型浮动 Composer。 最小高度： ```text 64px ``` 自动向上扩展。 结构： ```text 输入消息、问题或任务…… + Qwen ▾ 自动 ▾ 🎤 ↑ ``` --- # 11. 「+」附件菜单 点击显示： ```text 上传文件 上传图片 选择文件夹 截图 读取剪贴板 添加工作区文件 ``` 支持拖放文件进入输入区域。 --- # 12. 模型选择 点击模型名称： ```text Qwen ▾ ``` 出现 Popover： ```text 推荐 最近使用 本地模型 云模型 管理模型 ``` 模型状态： ```text Ready Loading Unavailable Downloading Error ``` --- # 13. Agent Mode 支持： ```text 聊天 思考 执行 自动 ``` ### 聊天 主要负责回答。 ### 思考 允许分析和读取上下文。 ### 执行 明确进入 Agent Tool 执行。 ### 自动 由 Agent 判断是否需要工具。 默认： ```text 自动 ``` --- # 14. 语音按钮 状态： ```text 🎤 ``` 点击： 开始录音。 录音： ```text ■ 00:12 ``` 支持： ```text 暂停 完成 取消 ``` --- # 15. Agent Execution Card 当 Agent 执行任务时，在 Chat 中显示： ```text 正在部署项目 ✓ 分析项目 ✓ 检查依赖 → 构建项目 ○ 上传文件 ○ 验证部署 3 / 5 查看详情 停止 ``` 状态： ```text Planning Waiting Waiting Permission Running Verifying Completed Failed Cancelled Rolling Back ``` --- # 16. Context Panel Context Panel 默认隐藏。 在以下情况出现： - 多步骤任务 - 打开 Workspace - 使用多个文件 - Agent 正在执行 - 用户主动打开 宽度约： ```text 300–340px ``` Tab： ```text 任务 上下文 环境 ``` --- # 17. Context / 当前任务 显示： ```text 任务目标 当前状态 进度 当前步骤 下一步骤 ``` 按钮： ```text 暂停 继续 停止 查看完整任务 ``` --- # 18. Context / 上下文 展示： ```text Files Images Web Memory References ``` 每个项目： ```text 查看 定位 从上下文移除 ``` 注意： **“从上下文移除”不得等同于“删除文件”。** --- # 19. Context / Environment 显示： ```text Workspace Branch Model Provider Runtime RAM Network ``` 点击： ```text 环境详情 ``` --- # 20. Task Center 一级页面： ```text 任务 ``` 顶部： ```text 任务 + 新任务 ``` Tabs： ```text 全部 运行中 等待授权 已完成 失败 ``` 任务卡： ```text 部署 通用数字产品 运行中 3 / 6 ██████░░░░ 刚刚 ``` --- # 21. Task 状态模型 界面必须能够表示： ```text QUEUED PLANNING WAITING_PERMISSION RUNNING PAUSING PAUSED VERIFYING ROLLING_BACK CANCELLING CANCELLED COMPLETED FAILED RECOVERING UNKNOWN ``` --- # 22. Task Detail 页面： ```text 任务名称 Timeline ✓ 分析 ✓ 准备 → 执行 ○ 验证 -------------------------------- Execution Log ``` 右侧： ```text 状态 Workspace Model 创建时间 运行时间 风险 ``` 顶部操作： ```text 暂停 继续 停止 重新运行 … ``` 更多菜单： ```text 复制任务 导出 查看 Audit 查看日志 删除记录 ``` --- # 23. New Task 弹窗： ```text 新建任务 任务名称 目标 Workspace Model 模式： 建议 自动执行 只规划 取消 创建 ``` 默认： ```text 建议模式 ``` --- # 24. Workspace 一级页面： ```text 工作区 ``` 展示： ```text 最近 通用应用 D:\Projects\通用应用 通用数字产品 D:\Projects\通用数字产品 + 打开工作区 ``` 顶部： ```text 搜索 新建 打开文件夹 ``` --- # 25. New Workspace 支持： ```text 打开本地文件夹 创建空工作区 克隆 Git 远程工作区 ``` --- # 26. Workspace Detail 顶部： ```text 通用应用 D:\Projects\通用应用 ``` 快捷按钮： ```text 让项目负责人分析 新建任务 终端 资源管理器 ``` 内部 Tab： ```text 概览 文件 Git 任务 环境 ``` --- # 27. Workspace Overview 显示： ```text 项目类型 项目路径 Git 状态 最近文件 最近任务 当前环境 ``` 避免 Dashboard 化。 --- # 28. Files Workspace → Files。 界面： ```text ┌───────────────────┬────────────────────────────┐ │ File Tree │ Preview / Editor │ │ │ │ │ src │ │ │ docs │ │ │ README.md │ │ └───────────────────┴────────────────────────────┘ ``` --- # 29. File Toolbar 按钮： ```text 返回 前进 搜索 新建文件 新建文件夹 刷新 … ``` 更多： ```text 在资源管理器打开 在终端打开 复制目录路径 扫描目录 ``` --- # 30. File Menu 文件右键： ```text 打开 新标签打开 加入上下文 让项目负责人分析 复制路径 重命名 移动 复制 删除 ``` --- # 31. File Preview 支持： ```text TXT Markdown Code PDF DOCX XLSX PPTX Image ``` 顶部： ```text 编辑 加入 Context 让项目负责人分析 … ``` --- # 32. Git Workspace → Git。 页面区域： ```text Changes Branches History Remote ``` 功能： ```text Stage Unstage Commit Pull Push Fetch Checkout Create Branch Diff History ``` --- # 33. Tools Center 一级： ```text 工具 ``` 112 Tool 不直接全部展示。 统一按 Capability 分类。 --- # 34. Tool 分类 ```text 文件与数据 系统 浏览器 代码 Git SSH 视觉 语音 网络 自动化 AI 扩展 Utility ``` --- # 35. Tools 首页 顶部： ```text 搜索工具 ``` 下面： ```text 常用 Browser Terminal Files Git AI Vision Voice Image Development Code Git SSH Automation Browser Automation GUI Control Extensions MCP Plugins ``` --- # 36. Tool Card 统一： ```text Terminal Shell / PowerShell 命令执行 ● 可用 Risk L2 打开 ``` 支持： ```text Available Unavailable Needs Setup Disabled Running Error ``` --- # 37. Tool Registry 与 UI 所有 Tool UI 数据来自 Tool Registry。 每项 Tool 至少包含： ```text tool_id name category description risk_level availability permission ``` Tool 新增后，应自动出现在： ```text Tools Center Search Command Palette ``` 不需要增加一级菜单。 --- # 38. Browser 页面： ```text ← → ↻ URL 网页内容 ``` Agent 控制： ```text 只读 / 可交互 截图 提取内容 加入 Context 停止 ``` Agent 处于浏览器自动化状态时必须明确显示： ```text 项目负责人正在控制网页 ``` --- # 39. Terminal 页面： ```text Terminal PowerShell ▾ + New ``` 支持： ```text 命令 历史 多 Terminal 复制 清空 停止 工作目录 ``` AI 准备执行高风险命令时进入 Permission Gateway。 --- # 40. SSH 页面： ```text SSH + 新连接 ``` Profile： ```text 名称 Host User Port Authentication Last Connected Status ``` 操作： ```text 连接 测试 编辑 删除 ``` Secret / Private Key 不展示明文。 --- # 41. Code Coding Workspace 支持： ```text 浏览代码 编辑 Diff Apply Patch Explain Review Run Test Build ``` --- # 42. Vision 页面： ```text 上传图片 截图 读取屏幕 ``` 功能： ```text Vision Analysis OCR UI Understanding Object Recognition Layout ``` 输出操作： ```text 加入聊天 加入 Context 创建任务 复制 ``` --- # 43. Voice 页面： ```text Input Device Output Device ASR TTS Voice ``` 中央状态： ```text Listening Transcribing Thinking Speaking ``` 支持： ```text 开始 暂停 结束 Mute ``` --- # 44. GUI Automation 作为高级 Tool。 状态： ```text 禁用 等待权限 Ready Running Paused ``` 按钮： ```text 开始 暂停 停止 ``` 必须始终提供 Emergency Stop。 --- # 45. Memory 一级： ```text 记忆 ``` Tabs： ```text 全部 个人 项目 偏好 工作 临时 ``` --- # 46. Memory Card 展示： ```text 记忆正文 来源 更新时间 ``` 操作： ```text 编辑 查看来源 忘记 ``` --- # 47. Memory Toolbar ```text 搜索 + 添加记忆 记忆设置 ``` --- # 48. Activity 一级： ```text 活动 ``` Tabs： ```text 活动 审计 错误 ``` --- # 49. Activity Timeline 示例： ```text 19:22 读取 README.md 19:23 运行 pytest 19:25 任务完成 ``` --- # 50. Audit 展示： ```text Time Task Tool Arguments Summary Risk Permission Execution Verification Rollback Result ``` 支持筛选： ```text Files Shell SSH Browser System Agent ``` --- # 51. Error Center 错误卡不得只有技术代码。 格式： ```text 模型服务无法连接 可能原因 Ollama 未运行 当前影响 本地模型不可用 自动修复 打开设置 查看详情 ``` --- # 52. Permission Interaction 普通权限状态可以在界面内提示。 高风险操作必须使用 Native Dialog。 示例： ```text 高风险操作 项目负责人准备删除： D:\Projects\...\build 原因： 清理构建目录 已创建恢复点 拒绝 允许一次 ``` 不允许使用网页 Modal 替代系统级高风险授权。 --- # 53. Notification Center 显示： ```text 等待授权 任务完成 任务失败 模型下载完成 更新可用 重要系统事件 ``` 支持： ```text 全部已读 清除 ``` --- # 54. Settings 二级菜单： ```text 常规 外观 模型 AI 工具 权限 记忆 语音 资源 网络 数据 更新 关于 高级 ``` --- # 55. General ```text 启动页面 恢复上次状态 开机启动 后台运行 关闭窗口行为 语言 ``` --- # 56. Appearance ```text Theme System Light Dark ``` 界面密度： ```text Compact Standard Comfortable ``` Sidebar： ```text Auto Collapsed Expanded ``` --- # 57. Model Management 页面： ```text 当前模型 已安装模型 可用 Provider ``` 模型卡： ```text Qwen Text / Tool Calling 5.2 GB RAM 约 8GB 使用 ``` 菜单： ```text 详情 参数 模型目录 删除 ``` --- # 58. Model Parameters 标准模式： ```text Temperature Context Length Max Output ``` 高级模式： ```text Top P Top K Repeat Penalty Seed ``` --- # 59. AI Behavior ```text 默认模式 聊天 / 思考 / 执行 / 自动 回答长度 任务执行方式 失败恢复 自动重试 ``` --- # 60. Tool Settings 112 Tool 通过分类进行管理。 每项： ```text Enabled Risk Dependencies Permission Status ``` --- # 61. Permission Settings 显示： ```text L0 READ 自动允许 L1 LOW 自动允许 L2 MEDIUM 允许 + Audit L3 HIGH 每次确认 L4 BLOCKED 禁止 ``` --- # 62. Resource Manager 页面： ```text RAM GPU Disk Loaded Models Runtime ``` 操作： ```text 释放闲置模型 卸载模型 ``` 模式： ```text 自动 性能 节能 自定义 ``` 默认： ```text 自动 ``` --- # 63. Network ```text Core Status Internet Proxy LAN Remote ``` 普通模式隐藏复杂 Port / Binding。 高级模式显示。 --- # 64. Data ```text 数据目录 打开目录 备份 恢复 导出 导入 清理缓存 删除全部数据 ``` 删除全部数据进入独立危险区域。 --- # 65. Update ```text Current Version Check Update Automatic Update Release Notes ``` --- # 66. About 显示： ```text 通用应用 Version Build Git Commit Core Version DB Schema Runtime ``` 按钮： ```text 复制诊断信息 打开日志目录 许可证 第三方组件 ``` --- # 67. Advanced Mode 高级模式允许查看： ```text IPC Runtime Ports PID Raw Tool Result Model Debug Tool Trace MCP Plugin Audit Hash Performance Developer Options ``` 默认关闭。 --- # 68. Command Palette 快捷键： ```text Ctrl + K ``` 搜索范围： ```text 功能 Tool 文件 Workspace 任务 会话 记忆 设置 Command ``` 例如： ```text > SSH ``` 结果： ```text 连接 SSH 新建 SSH Profile 打开 SSH SSH 设置 ``` --- # 69. Global Keyboard Shortcuts ```text Ctrl + N 新对话 Ctrl + K Command Palette Ctrl + O 打开工作区 Ctrl + , 设置 Ctrl + L 聚焦聊天输入 Ctrl + Shift + P 新任务 Esc 关闭当前浮层 / 取消操作 ``` --- # 70. Status Bar 底部保持极简。 正常时： ```text ● Core ● Qwen ● Local ``` 异常时： ```text ⚠ Core Restarting ``` 或： ```text ○ Offline ``` --- # 71. Offline 状态 断网时应用不能整体失效。 点击 Offline 状态显示： ```text 本地聊天 ✓ 本地文件 ✓ 本地工具 ✓ 本地模型 ✓ Web Search × 云模型 × 在线服务 × ``` --- # 72. Core Crash 显示： ```text 项目负责人核心服务已停止 正在尝试恢复…… 重新启动 查看日志 ``` 成功： ```text Core 已恢复 ``` --- # 73. Crash Recovery 如果发现未完成任务： ```text 发现未完成任务 上次状态： 正在上传文件 系统无法确认该步骤最终结果。 检查状态 继续 结束任务 ``` 禁止自动标记成功。 --- # 74. Loading / Error / Empty State 每个模块必须实现： ```text Loading Empty Error Offline Disabled Permission Required Unavailable ``` --- # 75. Apple-inspired Design System 视觉原则： - 大面积留白 - 低饱和度 - 浅层级背景 - 轻边框 - 细腻阴影 - 克制毛玻璃 - 高质量 Typography - 内容优先 - 控件尺寸统一 - 动画柔和 --- # 76. Spacing 采用： ```text 4px Grid ``` 主要间距： ```text 4 8 12 16 20 24 32 40 48 ``` --- # 77. Radius 统一： ```text Small 6px Medium 10px Large 14px Panel 16px Dialog 18px ``` --- # 78. Buttons 四类： ```text Primary Secondary Ghost Danger ``` 一个页面原则上只设置一个主要 Primary Action。 --- # 79. Button States 必须包括： ```text Default Hover Pressed Focus Loading Disabled ``` --- # 80. Popover / Sheet / Dialog ### Popover 用于： ```text 模型选择 菜单 筛选 快速配置 ``` ### Sheet 用于： ```text History Context Detail ``` ### Dialog 用于： ```text 创建 编辑 确认 ``` ### Native Dialog 用于： ```text L3 高风险授权 ``` --- # 81. Glass Material 只建议用于： ```text Top Bar Popover Command Palette Floating Composer Dialog ``` 主体内容区域使用正常 Surface。 不要整个应用全毛玻璃。 --- # 82. Motion 推荐： ```text Hover 120–160ms Popover 160–200ms Sidebar 200–240ms Context 220–260ms Page 180–240ms ``` 动画只用于： - 层级 - 空间关系 - 状态变化 - 出现/离开 禁止无意义持续动画。 --- # 83. Light Mode 默认背景： ```text 柔和白 / 极浅灰 ``` 内容层通过非常细微的 Surface 区分。 不要大量使用深色分割线。 --- # 84. Dark Mode 必须独立调整： - Typography - Border - Surface - Glass - Shadow - Code - Terminal - Danger - Warning 不能简单颜色反转。 --- # 85. Responsive Desktop Layout ## 大窗口 ```text NAV MAIN CONTEXT ``` ## 中窗口 ```text NAV MAIN Context 使用 Overlay ``` ## 小窗口 ```text Collapsed NAV MAIN ``` --- # 86. 默认 14 英寸布局 优先级： ```text Main > Context > Secondary Sidebar ``` 普通聊天时： 只显示： ```text NAV + Chat ``` 确保聊天区域最大。 --- # 87. First Launch 首次启动最多四步： ### Step 1 ```text 欢迎使用项目负责人 开始 ``` ### Step 2 ```text 检测设备 CPU RAM GPU Disk ``` ### Step 3 ```text 推荐配置 Text Model Vision Voice 预计磁盘空间 ``` ### Step 4 ```text 准备完成 进入项目负责人 ``` --- # 88. System Tray 菜单： ```text 打开项目负责人 新对话 查看任务 暂停全部任务 系统状态 设置 退出 ``` --- # 89. Tool 可发现性 112 个工具必须满足至少一种入口： ```text Feature Page Tools Center Command Palette Context Action ``` 不允许存在： ```text Tool 已经可用 但用户完全找不到 ``` --- # 90. 核心交互规则 ### Rule 1 用户永远知道： > 项目负责人现在在做什么。 ### Rule 2 用户永远知道： > 任务做到哪一步。 ### Rule 3 系统永远区分： > 读取 / 修改 / 删除。 ### Rule 4 高风险操作必须明确确认。 ### Rule 5 失败必须告诉用户下一步如何处理。 ### Rule 6 高级信息不得干扰普通用户。 ### Rule 7 所有 Tool 调用必须有运行状态反馈。 ### Rule 8 所有异步操作必须支持 Loading / Error / Cancel。 ### Rule 9 页面之间共享统一 Design System。 ### Rule 10 任何功能不得通过单独创造一套 UI 规则实现。 --- # 91. 最终产品结构 ```text 通用桌面应用 │ ├── 项目负责人 │ ├── Chat │ ├── Agent │ ├── History │ └── Context │ ├── Tasks │ ├── Current │ ├── History │ └── Automation │ ├── Workspace │ ├── Overview │ ├── Files │ ├── Git │ ├── Tasks │ └── Environment │ ├── Tools │ ├── Browser │ ├── Terminal │ ├── Code │ ├── Git │ ├── SSH │ ├── Vision │ ├── Voice │ ├── GUI Automation │ ├── Network │ ├── MCP │ ├── Plugins │ └── Utility │ ├── Memory │ ├── Activity │ ├── Timeline │ ├── Audit │ └── Errors │ └── Settings ├── General ├── Appearance ├── Models ├── AI ├── Tools ├── Permission ├── Memory ├── Voice ├── Resource ├── Network ├── Data ├── Update ├── About └── Advanced ``` --- # 92. 最终设计目标 通用桌面应用 不应表现为： > 一个拥有很多按钮的 AI 工具箱。 也不应表现为： > ChatGPT + IDE + 服务器后台三个产品硬拼在一起。 最终体验应该是： > **一个拥有完整系统操作能力的个人 AI Workspace。** 用户主要面对的永远只有三件事： ```text 我想做什么 ↓ 项目负责人正在做什么 ↓ 结果是什么 ``` 而 Agent Core、112 Tools、模型、权限、文件系统、浏览器、Shell、SSH、Memory、资源管理等复杂能力全部位于这套简单交互结构之下。 视觉保持极简。 能力保持完整。 普通用户容易使用。 高级用户可以深入。 后续新增 Tool、模型和 Agent 能力时，不需要重新设计整个 Desktop Shell。