背景：设计师、产品经理、研发工程师日常离不开 6 类设计协作工具——思维导图（xmind）、设计协作平台（蓝湖）、原型设计（axure）、位图编辑（Photoshop）、UI/UX 设计（Adobe XD）、矢量插画（Illustrator）。本文用 6 款工具 + 5 维评分 + 4 套选型方案，覆盖从需求拆解到视觉交付的完整链路。
Why 2019 年：2018-2019 是国内设计协作平台爆发期——蓝湖、Figma、墨刀、即时设计陆续上线；Adobe XD 1.0 正式版发布。Figma 在 2020 年后快速崛起，本文以 2019 年视角做横评。
一、6 款工具全景对比
| 工具 | 定位 | 平台 | 价格 | 学习曲线 | 团队协作 | 国产 | 一句话 |
|---|
| xmind | 思维导图 | Win/Mac/Linux/iOS/Android | 付费（Xmind 8）/ 订阅 | ★★☆ | 弱 | ✅ | 拆需求、列任务的不二之选 |
| 蓝湖 | 设计协作平台 | Web（基于浏览器） | 免费 + 增值 | ★★☆ | 极强 | ✅ | 设计师与前端工程师的"翻译器" |
| axure | 原型设计 | Win/Mac | 付费（约 ¥700/年） | ★★★★ | 中（需共享） | ❌ | 复杂业务逻辑、动态面板的王者 |
| Photoshop | 位图编辑 | Win/Mac | 订阅（¥888/年） | ★★★★ | 弱 | ❌ | 视觉修图、合成、UI 切片的事实标准 |
| Adobe XD | UI/UX 设计 | Win/Mac | 订阅 | ★★★ | 强（实时协作） | ❌ | UI 设计与原型一体的轻量方案 |
| Illustrator | 矢量插画 | Win/Mac | 订阅（¥888/年） | ★★★★ | 弱 | ❌ | Logo、图标、印刷品、矢量插画 |
二、xmind：思维导图与需求拆解
2.1 核心特性
- 多种导图结构：思维导图、鱼骨图、矩阵图、树形图、组织结构图
- 主题与样式：100+ 内置主题，一键切换商务/学术/简约风格
- 图标与标记：600+ 矢量图标 + 优先级/进度/责任人标记
- 大纲与导图双视图：既能可视化又能文本化
- 演示模式：一键进入全屏演示，自动逐条展开
- 导出格式：PNG / PDF / Markdown / Word / Excel / OPML
2.2 适用场景
- 需求调研：列用户痛点、列功能模块
- 项目拆解：WBS 任务分解、里程碑
- 读书笔记：可视化一本书的知识结构
- 会议记录：头脑风暴、决策树
- 不适用：UI 设计、原型设计、复杂业务流（用 axure）
2.3 安装
1
2
3
4
5
6
7
8
9
10
| # Windows
winget install Xmind.Xmind
# macOS
brew install --cask xmind
# Linux（AppImage）
wget https://www.xmind.app/zen/download/linux64/
chmod +x Xmind-*.AppImage
./Xmind-*.AppImage
|
2.4 5 个核心技巧
2.4.1 鱼骨图：根因分析
1
2
3
4
| 问题（鱼头）
↑
┌──────────┬──────────┼──────────┬──────────┐
人 机 料 法 环
|
按"人机料法环"五大维度拆解问题根因。
2.4.2 矩阵图：2 维交叉分析
1
2
3
4
5
6
7
8
9
10
| 重要 紧急
┌───────┬───────┐
│ 重要不│ 重要 │
│ 紧急 │ 且紧急│
│ │ │
高 ├───────┼───────┤
优 │不重要│ 紧急 │
先 │ 不 │ 不重要│
│ 紧急 │ │
└───────┴───────┘
|
横轴：紧急；纵轴：重要。右上角是"重要且紧急"（立即做），左下角是"不重要不紧急"（别做）。
2.4.3 任务优先级标记
1
2
3
4
5
| # 标记 - 4 个
! 红色 = 最高优先级
!! 黄色 = 中优先级
!!! 蓝色 = 低优先级
? 灰色 = 待讨论
|
2.4.4 进度追踪
1
2
3
4
5
6
| # 进度 - 5 个状态
⏳ 待开始
🔄 进行中
✅ 已完成
❌ 阻塞
🚫 已取消
|
2.4.5 多人协作（Xmind Share）
- 导出
.xmind 文件 → 微信/钉钉分享 - 用
Xmind 2024 订阅版可云端协作 - 也可截图 + 标注 后丢到协作平台
三、蓝湖：设计师与研发的"翻译器"
3.1 它解决什么问题
传统流程：
1
| 设计师 Figma/Sketch 出图 → 截图发群里 → 研发手动量像素、写 CSS → 设计师评审 → 反复改
|
蓝湖流程：
1
| 设计师上传 Sketch/Figma/PS 文件 → 自动生成标注意图 → 研发一键复制 CSS/iOS/Android 代码 → 设计师看走查截图
|
3.2 核心特性
| 特性 | 说明 |
|---|
| 设计图上传 | Sketch / Figma / XD / PS 插件一键上传 |
| 自动标注 | 像素、字号、颜色、间距自动读取 |
| 代码生成 | CSS / iOS Swift / Android XML / 小程序 rpx 一键复制 |
| 设计规范 | 颜色/字体/组件库集中管理 |
| 走查对比 | 设计师上传实际页面截图，自动 diff |
| 团队协作 | 评论、@、版本管理、权限控制 |
3.3 适用场景
- 设计师与前端工程师协作（核心场景）
- 设计规范管理（设计 token 一致性）
- 设计走查（UAT 阶段设计师验收）
- 跨团队设计资产共享
- 不适用：设计稿本身制作（用 Figma/PS）
3.4 工作流
1
2
3
4
5
6
7
8
9
10
| 1. 设计师用 Figma/Sketch 设计
2. 装蓝湖插件 → 一键上传
3. 蓝湖自动生成标注页（URL）
4. 前端工程师在标注页：
- 点元素 → 看到 padding/margin/font-size
- 复制 CSS/iOS/Android 代码
- 用蓝湖 Sketch Measure 看颜色变量
5. 工程师本地写完代码 → 上传本地截图到蓝湖
6. 设计师在蓝湖走查页对比设计稿和实际页
7. 标 ✅ 通过 / ❌ 需修改
|
四、axure：复杂原型的王者
4.1 核心特性
- 高保真原型：模拟真实交互（滑动、点击、动画）
- 动态面板：多状态切换（轮播图、Tabs、抽屉）
- 中继器：列表循环渲染（商品列表、表格）
- 变量系统：全局变量 + 局部变量 + 中继器变量
- 条件逻辑：if/else/case 流程控制
- 母版：通用组件一次定义多次复用
- 流程图：自动生成页面流程图
- 交互注释：PRD 直接写在原型上
4.2 适用场景
- 复杂业务系统原型（银行、医疗、ERP）—— 交互多、状态多
- PRD 一体化交付——原型 + 文档一次写完
- 演示给客户/老板——比文档更有说服力
- 用户研究——可点击原型做可用性测试
- 不适用：高保真 UI 设计（用 XD/Figma）、静态展示（用墨刀）
4.3 关键概念
| 概念 | 用途 |
|---|
| 动态面板 | 多个状态切换的容器（实现 Tab、轮播图、菜单） |
| 中继器 | 数据驱动的列表（每条数据自动渲染一行） |
| 全局变量 | 跨页面共享的数据（如用户登录信息） |
| 局部变量 | 单页面内临时数据 |
| 条件判断 | if/else 控制流程（登录后跳转 vs 未登录跳转登录页） |
4.4 一个动态面板示例：登录页
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| 动态面板：LoginPanel
├── 状态 1: 未登录
│ ├── 用户名输入框
│ ├── 密码输入框
│ └── "登录" 按钮
│ ↓ 点击
│ → 校验用户名密码
│ → 成功 → 切换到状态 2
│ → 失败 → 显示错误提示
├── 状态 2: 登录中
│ └── 加载动画 + "登录中..."
└── 状态 3: 已登录
├── 头像
├── 昵称
└── "退出" 按钮
|
五、Photoshop：位图的事实标准
5.1 核心能力
| 能力 | 用途 |
|---|
| 图层系统 | 复杂合成、蒙版、调整层 |
| 选区与蒙版 | 精确抠图、局部调色 |
| 画笔与笔刷 | 数字绘画、手绘 |
| 滤镜与特效 | 模糊、扭曲、HDR |
| Camera Raw | RAW 照片调色 |
| 智能对象 | 非破坏性缩放 |
| 批处理 | 动作 + 批处理（批量缩放、加水印） |
5.2 适用场景
- 摄影后期、视觉修图
- UI 设计稿输出（虽然 Figma/XD 更专业，但 PS 仍是主流之一）
- 海报、banner 营销素材
- 3D 贴图、材质制作
- 切图（设计师切 iOS @1x/@2x/@3x、Android xxhdpi/xxxhdpi）
- 不适用：矢量插画（用 AI）、UI 协作（用 Figma）
5.3 5 个提效技巧
5.3.1 图层复合（Layer Comps）
1
2
3
| Window → Layer Comps → New
→ 同一文档存多版本（暗色/亮色、不同状态）
→ 切版本只需点 Layer Comp，不用复制文档
|
5.3.2 智能对象 + 非破坏缩放
1
2
3
| 图层右击 → Convert to Smart Object
→ 任意缩放不损失画质
→ 双击 Smart Object 可改原图
|
5.3.3 动作（Actions）批量处理
1
2
3
| Window → Actions → New Action
→ 录制：批量加水印、批量缩放、批量导出
→ File → Automate → Batch → 应用到整个文件夹
|
5.3.4 颜色变量（CC 2018+）
1
2
3
| Layer → New Fill Layer → Solid Color
→ 同一文档集中管理颜色 token
→ 改一处全文档同步
|
5.3.5 设计规范同步
1
2
3
| 文件 → 生成 → 图像资源
→ 自动按图层名切片
→ 切图命名与前端组件对应
|
六、Adobe XD：UI/UX 一体化设计
6.1 核心特性
- 画板（Artboards）：多页面设计（移动端、桌面、平板）
- 响应式布局：调整画板大小，元素自动适配
- 交互原型：点 A → 跳转 B，支持过渡动画
- 实时协作（CC 版本）：多人同时编辑（类 Figma）
- 设计规范：颜色样式、字符样式、组件库
- 插件生态：500+ 插件（图标库、占位图、设计检查器）
- 与 PS/AI 联动：可直接导入 PS/AI 文件
- 导出代码：CSS、iOS Swift、Android XML、Flutter
6.2 适用场景
- UI 设计与高保真原型一体化（设计 + 演示一次完成）
- 移动 App / Web 设计
- 设计系统（Design System）建设
- 快速原型验证（比 axure 轻量）
- 不适用：超复杂业务逻辑原型（用 axure）、位图编辑（用 PS）
6.3 与 Figma 对比
| 维度 | Adobe XD | Figma |
|---|
| 平台 | 桌面（Win/Mac） | Web（浏览器） |
| 协作 | 实时（CC 团队） | 实时（业界最强） |
| 性能 | 桌面 GPU 加速 | 云端（依赖网络） |
| 离线 | 完全离线 | 需联网 |
| 价格 | Creative Cloud 订阅 | 免费 + 团队版 |
| 设计稿市场 | Adobe Stock 集成 | Figma Community |
2019 年视角：Figma 在欧美已普及，国内蓝湖 + Sketch 仍为主流。2024 年视角：Figma 国内市场份额已超 XD 3 倍。
6.4 5 个核心操作
6.4.1 Repeat Grid（重复网格）
1
2
| 画一个按钮 → 拖到 Repeat Grid 区域
→ 自动生成 N 个相同按钮（用于商品列表、卡片列表）
|
6.4.2 Auto Animate（自动动画）
1
2
3
4
| 画板 1：按钮在左下角
画板 2：按钮在右上角
→ 连接两个画板 → 选 Auto Animate
→ 预览：按钮自动从左下角动画到右上角
|
6.4.3 Component States（组件状态）
1
2
3
4
5
6
| 按钮组件：
├── Default（默认）
├── Hover（悬停）
├── Pressed（按下）
└── Disabled（禁用）
→ 一次定义，所有实例同步切换
|
6.4.4 Responsive Resize
1
2
3
| 选中元素 → 拖画板边角
→ 元素按规则（Fixed / Hug / Fill）适配
→ 设计响应式页面
|
6.4.5 Voice Prototyping
1
2
3
| Prototype → 添加 Voice Trigger
→ "Alexa, show me menu" → 自动触发跳转
→ 语音交互原型设计
|
七、Illustrator：矢量插画与品牌设计
7.1 核心能力
| 能力 | 用途 |
|---|
| 矢量绘图 | Logo、图标、插画无限缩放不失真 |
| 钢笔工具 | 精确路径绘制 |
| 文字排版 | 印刷级文字、字体变形 |
| 画板多页 | 一文档多页面（杂志画册） |
| 图案与笔刷 | 自定义笔刷、图案填充 |
| 3D 效果 | 简单的 3D 旋转、立体字 |
| 导出格式 | SVG、PDF、AI、EPS 印刷级 |
7.2 适用场景
- 品牌设计：Logo、VI 系统、品牌指南
- 图标设计：App 图标、系统图标
- 印刷品：海报、画册、包装
- 插画：扁平化插画、矢量漫画
- 图标字体：导出 SVG → 制作 Iconfont
- 不适用：照片处理（用 PS）、UI 协作（用 Figma）
7.3 5 个 Logo 设计原则
- 简洁：3-5 个元素，避免复杂
- 可缩放：矢量保证任意大小不失真
- 黑白可用：先做黑白版，再加颜色
- 跨文化：避免只在某文化下有意义的符号
- 可记忆：独特的形状或颜色
7.4 制作 Iconfont 全流程
1
2
3
4
5
6
| 1. AI 中画 16-32 个图标（每个图层命名为 icon-home / icon-user）
2. 全选 → Export → SVG
3. 用 iconfont.cn（阿里）或 icomoon.io 批量导入 SVG
4. 在线编辑命名、生成字体
5. 下载字体 + CSS
6. 集成到项目（Web/iOS/Android）
|
八、5 维评分（满分 5 星）
| 维度 | xmind | 蓝湖 | axure | PS | XD | AI |
|---|
| 学习曲线 | ★★★★ | ★★★★ | ★★ | ★★★ | ★★★★ | ★★★ |
| 协作能力 | ★★ | ★★★★★ | ★★★ | ★★ | ★★★★ | ★★ |
| 国产化适配 | ★★★★★ | ★★★★★ | ★★★ | ★★ | ★★ | ★★ |
| 价格友好 | ★★★（付费） | ★★★★（免费版够用） | ★★（贵） | ★★（订阅） | ★★★（订阅） | ★★（订阅） |
| 生态成熟 | ★★★★ | ★★★★ | ★★★★★ | ★★★★★ | ★★★★ | ★★★★★ |
九、4 套选型方案
方案 A：初创小团队（< 10 人）
1
2
3
4
5
| xmind（思维导图，免费版够用）
+ 蓝湖（设计协作，免费）
+ Figma / XD（UI 设计）
+ AI（Logo、图标）
+ axure 试用版（仅复杂原型）
|
成本：约 1000-3000 元/年（按需订阅）
方案 B：中型研发团队（10-100 人）
1
2
3
4
5
| xmind Pro（思维导图，团队共享）
+ 蓝湖专业版（设计协作 + 走查）
+ Sketch / Figma（UI 设计）
+ PS + AI 全套（视觉设计）
+ axure（复杂业务原型）
|
成本：约 20000-50000 元/年
方案 C：大型企业 / 设计院
1
2
3
4
5
6
| xmind 企业版（SSO + 权限）
+ 蓝湖企业版（私有部署）
+ Figma 企业版 / XD 团队版
+ Adobe Creative Cloud 全员授权
+ axure 企业版（多席位）
+ 国产替代：即时设计 + 墨刀（合规要求）
|
成本：约 100000-500000 元/年
方案 D：个人 / 自由职业者
1
2
3
4
5
6
| xmind 免费版
+ 蓝湖免费版
+ Figma 免费版
+ Photopea（在线 PS 替代）
+ Inkscape（开源 AI 替代）
+ axure 试用 30 天
|
成本：0 元
十、5 个提效组合拳
| 场景 | 组合 |
|---|
| 需求评审 | xmind（需求拆解）→ axure（高保真原型）→ 蓝湖（设计师标注） |
| UI 设计走查 | Figma/XD（设计）→ 蓝湖（上传 + 自动标注）→ 工程师实现 → 蓝湖（走查对比） |
| 品牌物料 | AI（Logo）→ PS（KV 海报）→ AI（矢量延展） |
| 营销视频 | AI（动画 logo）→ PS（静态分镜）→ AE（合成） |
| 用户研究 | axure（可点击原型）→ 用户测试 → xmind（问题归类） |
十一、2024 回看（写于 2024-01）
本篇首发于 2019-01，5 年过去设计协作领域已经发生翻天覆地的变化。回顾 2019 vs 2024：
11.1 已淘汰 / 边缘化
- Adobe XD：2023-04 官方宣布停止开发，资源全面转入 Figma——本文的 XD 章节已经是历史，未来不再更新。
- Axure：仍然在用，但市场份额持续下滑（复杂业务原型场景被 Figma + 飞书多维表格 / Airtable 部分替代）。
- 蓝湖：2024 仍活跃，但即时设计、墨刀、MasterGo 三家国产 Figma 替代品在合规和性能上对蓝湖构成强竞争。
- Photoshop 做 UI 切片：几乎被 Figma + 飞书多维表格的"自动 CSS 输出"完全替代。
11.2 仍主流
- Figma：从 2019 欧美的"新秀" → 2024 全球 UI 设计事实标准；2024 虽经 Adobe 收购失败风波，用户活跃度未受实质影响。
- Photoshop：视觉修图、品牌物料、营销素材仍是事实标准。
- Illustrator：Logo、矢量、品牌 VI 系统仍是设计师首选。
- xmind：思维导图领域仍是最稳的国产工具。
11.3 2024 新增 / 崛起的工具
| 工具 | 定位 | 2024 状态 |
|---|
| Figma | UI/UX 设计 | 全球第一 |
| 即时设计 | 国产 Figma 替代 | 国内市场份额第二，仅次于蓝湖 |
| 墨刀 | 原型 + 协作 | 国产原型工具事实标准 |
| MasterGo | 阿里出品 UI 协作 | 阿里集团内部全面切换 |
| Pixso | 字节出品 UI 协作 | 字节内部用，对外开放 |
| FigJam | Figma 白板 | 团队脑暴 / 流程梳理 |
| Miro | 在线白板 | 海外远程团队协作 |
| Airtable | 多维表格 + 业务系统 | 部分替代 axure 的"业务逻辑"场景 |
| 飞书多维表格 | 国产 Airtable 替代 | 互联网团队首选 |
| Notion | 文档 + 数据库 | 知识库 / 团队 wiki |
| Figma Slides | 2024 内测 PPT 工具 | 对标 PowerPoint / Keynote |
| Whimsical | 流程图 + 线框图 | 轻量流程图 |
11.4 2024 选型建议（与 2019 对比）
1
2
3
4
5
6
7
8
9
| 2019 选型：
xmind + 蓝湖 + axure + PS + XD + AI
2024 选型：
xmind + 即时设计/墨刀（替代蓝湖+XD+axure）
+ Figma（海外/创新业务）
+ PS（视觉/品牌）
+ AI（矢量/Logo）
+ 飞书多维表格（替代部分 axure 业务逻辑）
|
核心变化：从 6 款工具 → 4-5 款工具，**“多端协作 + AI + 浏览器化”**是 2024 的主旋律。
11.5 5 年工具演进的 3 条规律
- 从桌面到浏览器：Figma / 即时设计 / 墨刀都是 Web 化 → 跨平台、实时协作、零安装
- 从多工具到一体化：当年"思维导图 + 原型 + UI + 协作"四件套 → Figma + FigJam / 飞书多维表格一站式
- 从订阅到免费增值：Figma / 即时设计 / 墨刀 / xmind 都采用"个人免费 + 团队付费"模型
11.6 设计师要不要担心被 AI 替代？
- Midjourney / Stable Diffusion / 即时 AI 绘画：能生成视觉素材，但商业落地仍需 Photoshop 后期
- Galileo AI / Figma AI / 墨刀 AI：能根据文字描述生成 UI 原型，但复杂业务逻辑仍需 axure / 多维表格
- 结论：AI 是设计师的"超级工具"，不是"替代者"——5 年后设计师的核心能力还是"业务理解 + 视觉判断 + 用户洞察"
下面继续参考与延伸。
十二、参考与延伸
下一步：先选一款工具深入学精（如 xmind 拆需求 + 蓝湖协作），其他按需补；别追求工具数量——大多数团队 3-4 款工具足以覆盖 80% 场景。
