设计协作工具选型：xmind / 蓝湖 / axure / PS / XD / Illustrator 横评

Mon, 15 Jan 2024 00:00:00 +0800

背景：设计师、产品经理、研发工程师日常离不开 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 个状态
⏳ 待开始
🔄 进行中
✅ 已完成
❌ 阻塞
🚫 已取消

导出 .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 教程：https://www.xmind.app/zen/tutorials/
蓝湖帮助中心：https://lanhuapp.com/help
axure 官方文档：https://www.axure.com/support/
Photoshop 用户指南：https://helpx.adobe.com/photoshop/user-guide.html
Adobe XD 教程：https://helpx.adobe.com/xd/tutorials.html
Illustrator 教程：https://helpx.adobe.com/illustrator/tutorials.html
设计协作工具横评：https://www.uisdc.com/（优设）

下一步：先选一款工具深入学精（如 xmind 拆需求 + 蓝湖协作），其他按需补；别追求工具数量——大多数团队 3-4 款工具足以覆盖 80% 场景。

设计工具 on Liangweidong's blog