Axure on Liangweidong's blog

设计协作工具选型：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% 场景。

设计建模工具实战：Axure / PowerDesigner / VSCode 全攻略

Wed, 15 Oct 2014 00:00:00 +0800

一、Windows 设计与建模工具全景

2014 年的 Windows 设计与开发工具链呈"专业分工"格局——没有一款 IDE 能通吃所有场景。本文整理：

Axure RP —— 交互原型
PowerDesigner —— 数据库建模
VSCode —— 轻量代码编辑器
Trae —— AI 辅助编程
Notepad++ —— 文本编辑瑞士军刀
Android Studio —— 移动开发

这套组合至今仍是"前端 + 后端 + 数据 + 移动"团队的标配。

二、Axure RP：交互原型的事实标准

2.1 定位

Axure RP（Rapid Prototyping）2003 年起源，是产品经理 + UX 设计师的"画图工具"。2014 年 Axure 7 已成熟，2017 年 Axure 8 加了 Team Project。

2.2 安装

官方 https://www.axure.com/。Windows 版 + Mac 版。安装时注意：

64 位系统 装 64 位（默认）
首次启动 要登录 Axure 账户激活
字体选 Microsoft YaHei / 思源黑体（比系统默认宋体好看 10 倍）

2.3 核心功能

页面与母版（Master）：

页面：每个独立屏
母版：复用元素（导航栏/页脚）
母版拖到页面就是占位，双击进入母版修改会全站联动

交互面板（Interactions）：

1
2
3
4
5


用例 1：登录失败弹窗
- 触发：点击登录按钮
- 条件：用户名 == "" OR 密码 == ""
- 动作：显示 Toast → 红色文字 "请输入用户名密码"
- 动作：聚焦到第一个空输入框

动态面板（Dynamic Panel）：

状态 A：未登录（头像占位 + 登录按钮）
状态 B：已登录（用户头像 + 退出按钮）
状态切换：交互中 Set Panel state to B

2.4 团队协作

Axure Share：上传 RP 文件到云 → 团队成员在线查看
链接预览：https://share.axure.com/XXXXX
导出 HTML 包：菜单 Publish → Generate HTML Files，双击 index.html 离线预览

2.5 与现代工具对比

工具	强项
Axure RP	逻辑交互最完整、逻辑面板最丰富
Figma	多人实时协作、组件库生态
Sketch	Mac 生态、矢量
墨刀 / 即时设计	国产、轻量
draw.io	流程图 + ER 图免费

经验法则：复杂逻辑交互用 Axure，简单 mockup 用 Figma。

三、PowerDesigner：数据库建模的老牌强者

3.1 定位

PowerDesigner 1989 年起源 Powersoft，SAP 收购 Sybase 后纳入麾下。2014 年是 16.5/16.6 版本。两套核心能力：

CDN/PDM：概念数据模型 / 物理数据模型
OOM/BPM：面向对象模型 / 业务流程模型

3.2 安装

16.5/16.6 SP06 兼容 Windows 7/8/10
16.7 是民间对 16.6 升级包的称呼
需要 JDK 1.6+（是的 2014 时代需要 Java）

3.3 CDM → PDM → SQL 三件套

1
2
3
4
5


概念模型（CDM）
 ↓ 自动转换
物理模型（PDM）
 ↓ 生成 SQL
数据库（MySQL/Oracle/PostgreSQL/...）

为什么需要 CDM：

CDM 关注业务实体（客户、订单、商品）
PDM 关注数据库细节（字段类型、索引、约束）
业务变了只改 CDM，PDM 自动重生成

3.4 名称转注释

PDM 里 Name 是逻辑名（中文友好），Code 是物理名（英文/SQL 字段）。批量把 Name 复制到 Comment：

Tools → Execute Commands → Edit/Run Scripts：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


' Name → Comment
Dim model
Set model = ActiveModel

For Each tbl In model.Tables
 tbl.Comment = tbl.Name
 For Each col In tbl.Columns
 col.Comment = col.Name
 Next
Next

执行后所有字段 Comment 都是 Name 中文，DDL 导出时自动带 COMMENT。

3.5 全局通用字段

每个表都加：create_by / create_time / update_by / update_time / sys_org_code。

两种做法：

PDM 全局模板：Tools → Model Options → Naming Convention → Default Field 添加
复制粘贴：先建一个表，右键 → Copy → Paste 保留字段

3.6 导出 DDL

Database → Generate Database：

Directory: 输出目录
File name: 默认 Script.sql
Generation options：勾选 Check model、Generate name in comment

导出的 SQL 直接 Navicat 执行。

3.7 PDMReader：免费 PDM 查看器

PDM 文件是 PowerDesigner 私有格式，没有 PD 看不了。PDMReader 是国产开源 PDM 浏览器：

装好后直接 .pdm 文件 → 自动生成 HTML 报告
免费导出 Word / Excel 数据字典

下载地址 http://www.pdmreader.com/（小众，但好用）。

四、VSCode：轻量编辑器的王者

4.1 定位

VSCode 2015-04 发布，4 年时间击败 Sublime、Atom。2014 时代它还是个"新生儿"——本文以 2024 视角写"VSCode 在 2014 之后的崛起"。

4.2 必备扩展（按场景）

通用：

扩展	用途
`Chinese (Simplified) Language Pack`	中文菜单
`Atom One Dark Theme`	经典暗色
`Markdown PDF`	MD 转 PDF
`IntelliJ IDEA Keybindings`	IDEA 快捷键习惯

Java 开发：

扩展	用途
`Extension Pack for Java`	微软官方全家桶
`Spring Boot Extension Pack`	Spring 全家桶
`Maven for Java`	Maven 集成
`Debugger for Java`	调试

4.3 配置代理

VSCode 启动可能需要代理（如果插件下载慢）：

File → Preferences → Settings → 搜 proxy：

1
2
3
4


{
 "http.proxy": "http://127.0.0.1:1081",
 "http.proxyStrictSSL": false
}

或者给 git 单独设代理：

1

git config --global http.https://github.com.proxy socks5://127.0.0.1:1080

4.4 常用快捷键

快捷键	作用
`Ctrl + P`	快速打开文件
`Ctrl + Shift + P`	命令面板
`Ctrl + B`	切换侧边栏
`Ctrl +` `	切换终端
`Ctrl + Shift + F`	全项目搜索
`F12`	跳转到定义
`Alt + F12`	查看定义（侧边）
`Ctrl + K Ctrl + C`	注释
`Shift + Alt + F`	格式化
`Ctrl + /`	行注释

五、Trae：AI 辅助编程的新时代

5.1 定位

Trae（2024）是字节跳动推出的 AI Native IDE，深度集成 Claude 3.5/GPT-4o。对标 Cursor。

5.2 核心能力

AI Chat 侧栏：写需求 → AI 自动改多文件
Inline Edit：Ctrl+K 在光标处改写代码
Agent Mode：写任务 → AI 拆解 → 自动执行 + 自我测试
上下文感知：自动读光标所在文件 + 关联文件

5.3 适用场景

新项目从 0 到 1：Agent 模式一键生成脚手架
老项目重构：AI 全项目扫描 → 出重构方案
Bug 定位：贴错误堆栈 → AI 给出最小复现 + 修复建议
单元测试生成：选中方法 → AI 自动生成 JUnit 5 / pytest 用例

六、Notepad++：Windows 文本编辑器之王

6.1 定位

Notepad++ 2003 年由 Don Ho 开发，基于 Scintilla 编辑组件。2014 时代是程序员最常用的"非 IDE"文本编辑器。

6.2 安装与配置

官方 https://notepad-plus-plus.org/downloads/
32 位版兼容更多插件
首次启动：Settings → Preferences → General → Language → 中文（界面中文化）
字体：Consolas 10pt（等宽字体之首）

6.3 必备插件

插件	用途
`Compare`	文件差异对比
`Explorer`	文件浏览器侧栏
`NppFTP`	内置 FTP/SFTP
`JSTool`	JSON 格式化
`XML Tools`	XML 美化
`MIME Tools`	Base64 编解码
`Markdown Panel`	MD 实时预览

6.4 杀手锏功能

列编辑：Alt + 鼠标拖动（多光标同时输入）
正则替换：Ctrl+H 勾选 Regular expression
多文件搜索：Ctrl+Shift+F
宏录制：Macro → Start Recording（重复操作自动化）

6.5 与 VSCode 对比

维度	Notepad++	VSCode
启动速度	★★★★★	★★★
内存	★★★★★	★★
插件生态	★★	★★★★★
大文件（>1 GB）	★★★★	★★（会卡）
多语言	★★★	★★★★★

经验法则：大文件 / 临时查看 → Notepad++，项目开发 → VSCode。

七、Android Studio：移动开发官方 IDE

7.1 定位

2013-12 Google 发布 Android Studio 1.0，正式取代 Eclipse ADT。基于 IntelliJ IDEA 社区版——前文提到的 IDEA 快捷键、插件全部通用。

7.2 安装与 SDK

官方 https://developer.android.com/studio。

安装时选 Android SDK + Android Virtual Device (AVD)
首次启动自动下载 SDK 平台工具 + Build Tools，强烈建议配置代理（详见 IDEA 章节）

7.3 Gradle 配置

gradle-wrapper.properties：

1
2
3
4
5


distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-8.5-bin.zip
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists

国内加速：用阿里云镜像：

1

distributionUrl=https\://mirrors.aliyun.com/macports/distfiles/gradle/gradle-8.5-bin.zip

7.4 模拟器选型

Android Studio 自带 AVD Manager：

x86_64 Image：Intel CPU 加速（推荐）
ARM Image：兼容性好但慢
物理机调试：开发者选项 → USB 调试 → adb devices 看

7.5 关键快捷键

快捷键	作用
`Alt + Enter`	导包 / 修复
`Ctrl + O`	重写方法
`Ctrl + I`	实现方法
`Ctrl + Shift + A`	找动作
`Ctrl + Alt + L`	格式化
`Alt + Insert`	生成代码

八、组合实战：产品→设计→开发→发布

8.1 完整工作流

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


产品经理（Axure）
 ↓ 输出原型 + 交互文档
UX 设计师（Figma/Axure）
 ↓ 输出 UI 设计稿
前端（VSCode + Trae AI）
 ↓ 输出静态页面
后端（IntelliJ IDEA）
 ↓ 输出 API + 业务
数据库（PowerDesigner）
 ↓ 输出 PDM + DDL
运维（Navicat + 服务器）
 ↓ 部署 + 监控

8.2 移动端

1
2
3
4
5
6
7
8


产品（Axure）
 ↓
UI 设计师（Figma）
 ↓
Android 端（Android Studio）
iOS 端（Xcode）
 ↓
测试（Android Studio AVD + 真机）

九、常见问题

9.1 Axure 启动慢

关掉"自动保存"
减少页面数量
升级 SSD

9.2 PowerDesigner 反向工程（从数据库生成 PDM）

File → Reverse Engineer → Database：

选择 ODBC 数据源或自定义 JDBC
选表 → 生成 PDM
注意：需要先在 Windows 装好 ODBC 驱动

9.3 VSCode 插件装不上

Extensions → Search → Install 失败通常因为插件市场被墙。对策：

1
2


# 离线安装
code --install-extension /path/to/extension.vsix

或配置国内镜像：编辑 argv.json 替换 marketplace。

9.4 Notepad++ 大文件卡

Settings → Preferences → Editing → 取消 Enable large file detection（超过 100MB 自动关掉语法高亮）。

9.5 Android Studio Gradle 同步慢

~/.gradle/init.gradle：

1
2
3
4
5
6
7


allprojects {
 repositories {
 maven { url 'https://maven.aliyun.com/repository/public' }
 maven { url 'https://maven.aliyun.com/repository/google' }
 maven { url 'https://maven.aliyun.com/repository/gradle-plugin' }
 }
}

十、下一步

想看 IDEA 深度：[2014-04-15 IntelliJ IDEA 全攻略]
想看版本控制：[2014-11-15 Git 与版本控制]
想看数据库建模输出：[2016-11-15 数据库客户端实战]

本文写于 2014 年，回看当时：Axure 7 是产品经理标配，Figma 直到 2016 年才发布；PowerDesigner 至今仍是金融/电信/制造行业的"老牌"；VSCode 2015 年发布后 4 年击败 Sublime 创下编辑器神话——这些工具的演化史就是一部 Web 开发演进史。

Axure 产品原型设计：从入门到企业级交付

Thu, 15 May 2014 00:00:00 +0800

什么是 Axure

Axure RP 是 2003 年由 Axure Software 发布的专业原型设计工具，产品经理 / UX 设计师用它把"产品想法"画成"可点击的 HTML 原型"。

主要应用：

低保真原型（线框图）：Axure 起家功能
中保真原型：带交互、动效
高保真原型：拟真 UI、视觉稿
PRD 文档：内置流程图、文档生成
HTML 预览：导出可点击的 HTML 文件，分享给开发/客户

安装

Axure RP 9/10/11/12 各版本差异不大。下载官方安装包（Windows / Mac）后激活。

Axure 11 起支持中文；10 以下需用中文语言包。

工作区基础

三种工作模式

模式	用途
设计模式	拖组件、画线框图
流程图模式	画流程图、架构图
注释模式	写 PRD 文档、说明

顶栏切换：Design / Flow / Note。

核心面板

Pages（页面）：左侧，每个页面一个 tab
Masters（母版）：可复用的组件模板
Widgets（组件库）：基础 UI 组件
Outline（大纲）：当前页面的元素树
Style / Properties：右侧，编辑样式和属性
Interactions（交互）：底栏，配置点击事件

低保真 vs 中保真 vs 高保真

低保真（Lo-fi）

灰色线框 + 占位文字
用 Axure 自带组件即可
用途：早期讨论、需求评审
时间：1~3 天

中保真（Mid-fi）

灰色 + 简单色块
基础交互（点击跳转、显示/隐藏）
用途：内部评审、Stakeholder 决策
时间：3~7 天

高保真（Hi-fi）

拟真 UI（图标、字体、真实图片）
完整交互（动画、条件判断、变量传递）
用途：用户测试、开发参照、上线前确认
时间：1~3 周

核心概念

母版（Master）

母版是可复用的组件——把 logo / 导航 / 页脚做成母版，所有页面引用它。改一处全站同步。

1
2
3
4


Master: "顶部导航"
 ├─ Page 1 (引用)
 ├─ Page 2 (引用)
 └─ Page 3 (引用)

右键组件 → Create Master。修改 master 自动同步所有引用页。

动态面板（Dynamic Panel）

动态面板是 Axure 最强的功能——一个容器可以有多个状态（State），通过交互切换：

1
2
3
4


Dynamic Panel: "弹窗"
 ├─ State 1: 隐藏
 ├─ State 2: 显示登录
 └─ State 3: 显示注册

交互：点击登录按钮 → Set Panel state to State 2。

中继器（Repeater）

中继器是数据驱动的列表组件——配合数据集（Dataset），可以动态生成 N 行：

1
2
3
4
5


Repeater: "商品列表"
 Dataset:
 ├─ row 1: { name: "iPhone", price: 5999 }
 ├─ row 2: { name: "iPad", price: 3999 }
 └─ row 3: { name: "MacBook", price: 12999 }

每行有 4 个单元格：item.name / item.price 等。

变量（Variables）

Global Variables：全局变量，跨页面
Local Variables：局部变量，仅当前交互链

1
2
3
4
5


// 设置全局变量
Set Variable "user_id" to "12345"

// 读取
OnPageLoad: Set Text "Welcome" to "Hello, [[user_id]]"

条件（Conditions）

1
2
3
4


If [[user_role]] == "admin"
 Show "管理员面板"
Else
 Show "普通用户"

表达式

[[var]]：取变量
[[LVAR.length]]：字符串长度
[[LVAR.substring(0, 5)]]：截取
[[LVAR.toUpperCase()]]：大写
Math.random()：随机数
Now.getFullYear()：当前年

常用交互模式

1. 点击跳转

1

OnClick: Open Link "page2.html" in current window

2. 显示/隐藏

1

OnClick: Show "弹窗" with effect "fade" 500ms

3. 移动

1

OnClick: Move "元素" by (100, 0) with animation "easeOut" 300ms

4. 设置文本

1

OnClick: Set Text "title" to "已提交成功"

5. 提交到 URL

1

OnClick: Open Link "https://api.example.com/submit?id=123" in new window

完整示例：登录流程

页面 1: 登录页

输入框：用户名、密码
按钮：登录、注册

页面 2: 首页（登录成功跳转）

显示"欢迎，{{username}}"
退出按钮

交互

1
2
3
4
5
6
7


// 登录按钮 OnClick
Case 1: If [[username]] == "admin" AND [[password]] == "123456"
 Set Variable "logged_in" to "true"
 Open Link "home.html"
Case 2: Else
 Show "错误提示" with fade 300ms
 Set Text "错误提示" to "用户名或密码错误"

适配与响应式

Axure 9+ 支持响应式布局：

1
2
3
4
5
6
7


OnWindowResize:
 If window.width <= 768
 Set size of "导航" to (0, 0)
 Show "汉堡菜单"
 Else
 Set size of "导航" to (200, 600)
 Hide "汉堡菜单"

Axure Cloud 协作

Axure 10+ 起官方有 Axure Cloud（原 AxShare）：

在线托管原型
团队协作
反馈评论
链接分享给客户

国内访问慢，多用"导出 HTML"本地分享。

导出与发布

1
2
3
4
5
6
7
8


# 顶部菜单 Publish → Generate HTML Files
# 选择输出目录，得到 index.html + assets/

# 上传到内网服务器
scp -r build/html user@server:/var/www/prototype/

# 客户用浏览器打开
http://server/index.html

Axure 快捷键

键位	动作
Ctrl + D	复制选中
Ctrl + Shift + D	复制并粘贴到原位
空格	切换到"平移"工具
Ctrl + 鼠标滚轮	缩放
鼠标中键拖动	移动画布
Ctrl + G	编组
Ctrl + Shift + G	取消编组
双击组件	编辑文本
F2	重命名
Ctrl + 5	50% 缩放
Ctrl + 1	100% 缩放

Axure vs Figma vs 墨刀

工具	优势	劣势
Axure	复杂交互、母版、PRD 一体	上手难、协作弱
Figma	协作、设计稿	复杂逻辑交互弱
墨刀	上手快、组件丰富	自由度低、性能一般
Sketch	macOS 设计稿、插件丰富	仅 Mac

企业级最佳实践

母版 + 中继器 + 变量 三件套用熟练，能盖 80% 场景
先画流程图再画原型：在 Note 模式写完 PRD 再切换 Design
不要追求高保真：除非设计资源到位，否则中保真足够
页面命名规范：<模块>-<功能>-<状态>（如 login-form-error）
定期归档：每个 milestone 单独存一个 .rp 文件

插件

Axure Font Awesome：图标库
Element UI Kit：Web 组件库
iOS / Android 原生组件库：分别适配移动端

2024 视角：原型设计工具现状

本文写于 2014 年（Axure RP 7/8 时代，Sketch 刚崛起、Figma 还没出生）。10 年后（2024）回望，原型设计工具市场已经被重新洗牌：Figma 主导全球、国产工具（墨刀/即时设计/摹客）在中国市场强势崛起、Axure 退守"企业复杂流程"细分。

1. 2024 主流工具全景

工具	类型	主要用户	协作	复杂度	价格
Figma	云端 SaaS	全球设计师、产品	实时多人	中	免费 + Pro $15/月
Figma Slides / FigJam	白板 / 演示	全员	实时	低	包含在 Figma
即时设计	国产云端	中国设计师	实时多人	中	免费 + 团队版 ¥99/人/月
墨刀	国产原型	中国产品经理	多人	中	免费 + Pro ¥99/月
摹客（Mockplus）	国产原型 + 设计	中国团队	多人	中	免费 + 企业版定制
MasterGo	国产云端设计	中国互联网	实时	中	免费 + 企业版
Pixso	国产云端	中国 UI 设计师	实时	中	免费 + Pro
Axure RP 11/12	桌面端	企业复杂流程	弱	高	$25/月（订阅）
Sketch	macOS 桌面	Mac 设计团队	中等	中	$10/月
Adobe XD	桌面 + 云	Adobe 用户	中	中	已停止开发（2023 Adobe 战略调整）
Framer	云端 + 代码	设计师 + 工程师	实时	中	免费 + Pro
ProtoPie	桌面原型（高保真）	移动端、IoT	中	高	$15/月

2. Figma 主导全球

2024 市占率：Figma 在全球设计师协作市场占据 80%+
核心优势：
- 浏览器即用——零安装
- 实时多人光标——比 Axure 强 10 倍
- Auto Layout / Variables / Modes——3 个特性把 Figma 从"画图工具"升级为"设计系统"
- Dev Mode——2023 推出，工程师直接看 Specs / CSS / 切图
2023 收购风云：Adobe 计划以 200 亿美元收购 Figma，2023-12 监管否决，Figma 继续保持独立

3. 国产替代：即时设计、墨刀、MasterGo

中国市场因为访问速度 + 合规等原因，国产工具快速崛起：

工具	优势	劣势
即时设计（js.design）	Figma 90% 功能复刻 + 中文 + 国内 CDN	插件生态不如 Figma
墨刀	上手最快、组件丰富、移动端原型	复杂逻辑交互弱
MasterGo	字节系产品都在用，团队协作强	生态起步中
Pixso	UI 设计 + 原型一体	复杂逻辑不如 Axure
摹客	文档交付完整，私有化部署可	设计能力一般

2024 现状：字节跳动、京东、美团等大厂的新项目几乎全部切到 MasterGo/即时设计，不再用 Figma（部分因合规要求数据不出境）。

4. Axure 仍是"企业复杂流程"首选

Axure 仍然没死——但战场已经收缩到：

银行 / 保险 / 政府——强流程、强审批、强条件判断
ERP / MES / WMS——复杂业务规则
B 端后台系统——表单、表格、权限流程

Axure 的不可替代：

母版（Master）+ 中继器（Repeater）+ 变量 + 条件——这 4 件套是 Figma/墨刀至今没完全追平的
复杂逻辑交互（动态面板多状态切换、跨页面变量传递、条件分支）
离线可用（无网环境、内网部署）
导出 Word / Markdown 文档——PRD 一体化

实操建议（2024）：

创业公司 / 中小团队 / 移动端 / SaaS → Figma 或即时设计
企业 B 端 / 政府 / 银行 → Axure 仍最稳
国产化要求（数据不出境、信创） → MasterGo / 即时设计
白板 + 流程图 → FigJam / Miro / 飞书文档白板
高保真交互（如 IoT、AR/VR 流程演示） → ProtoPie

5. 新趋势（2024）

AI 原型：Figma AI（自动生成组件 / 配图）、即时 AI（输入文字生成页面）
代码化原型：Framer（设计师写 React）、V0.dev / Bolt（输入 prompt 生成 React/Tailwind 代码）
从"画原型"到"产代码"：Dev Mode / Anima / Locofy 等工具直接把设计稿转成 React/Vue 代码，Axure 时代"设计交付"流程被重塑
Design Tokens / Design System：Figma Variables 让"设计 token"和"代码 token"统一

6. Axure 现在的"活法"

Axure 还在更新（RP 11/12 已发布），但定位变成：

企业用户——保留 Axure workflow 不变
B 端产品经理——复杂后台原型
中老年产品经理——习惯迁移成本太高

建议：

如果团队只有 1~2 人、做的是消费端 App → 趁早切到 Figma/即时设计
如果团队做的是银行/政府 ERP → 继续用 Axure 没毛病
如果是新毕业生想进产品经理岗 → Figma 是必须会的（Axure 反而成加分项）

7. 一句话总结

2014 年是 Axure 一统天下 的时代； 2024 年是 Figma 主导全球 + 国产工具（中国）+ Axure（企业 B 端） 三分天下的时代。

Axure 不会死，但不再是默认选择。新人先学 Figma，B 端 / 政府项目再补 Axure。

下一步

想把设计稿转开发代码，看 2017-08-15《iOS 应用开发与证书管理》
想要画 UML 类图、流程图，看 2015-05-15《Mermaid 与 PlantUML 类图》
2024 新工具：看 Figma 官方教程 + 即时设计帮助中心

参考资料

Axure 官方文档：https://docs.axure.com/
Axure 教程：https://www.axure.com.cn/
Axure Cloud：https://www.axure.cloud/
Figma 官方：https://www.figma.com/
即时设计：https://js.design/
墨刀：https://modao.cc/
MasterGo：https://mastergo.com/