什么是 Axure

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

主要应用：

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

安装

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

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

工作区基础

三种工作模式

顶栏切换：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 快捷键

Axure vs Figma vs 墨刀

企业级最佳实践

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

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

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

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/