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/

低保真 on Liangweidong's blog