虽然 Axure 7.0 已经有些年头（后续版本为 8、9、10），但其核心功能和操作逻辑与新版基本一致，对于初学者来说，7.0 界面相对简洁，资源丰富，依然是学习 Axure 的绝佳选择。
（图片来源网络，侵删）
本教程将分为以下几个部分，从入门到精通,循序渐进：
第一部分：Axure 7.0 基础入门
1 什么是 Axure？为什么学习它？
- 定义：Axure RP 是一款专业的快速原型设计工具，全称是 "Axure Rapid Prototyping"，它能让产品经理、UI/UX 设计师、开发人员等，通过拖拽的方式，创建出高保真、可交互的网页或 App 原型。
- 核心价值：
- 清晰沟通：用可交互的原型代替文字和静态图片,让需求更直观。
- 提前验证：在开发前测试产品逻辑和用户体验,降低后期修改成本。
- 高效协作：生成的原型可以链接分享,方便团队成员评审和反馈。
2 Axure 7.0 界面初识
打开 Axure 7.0,你会看到以下几个主要区域：
- 顶部菜单栏：文件、编辑、视图、布局、格式、发布、分享、帮助等。
- 左侧面板：
- 页面大纲：管理原型的所有页面和层级,类似文件夹结构。
- 元件库：存放所有可用的设计元素（按钮、文本框、图片等）。
- 中间画布：你的主要设计工作区，在这里拖拽、排列元件。
- 右侧面板：
- 页面交互：这是 Axure 的灵魂！在这里为元件添加交互事件（如点击、悬停）和动作（如打开页面、显示/隐藏）。
- 页面设置：设置当前页面的尺寸、背景等。
- 注释：为元件添加说明文字,方便他人理解。
- 顶部工具栏：包含常用操作，如预览、撤销/重做、元件对齐等。
第二部分：核心功能详解
1 页面管理
- 新建页面：在“页面大纲”面板中右键 -> “添加页面”。
- 重命名页面：双击页面名称。
- 创建子页面：右键点击一个页面 -> “添加子页面”，这对于组织复杂流程（如注册流程、购物流程）非常有用。
- 设置首页：右键点击页面 -> “设为首页”，预览时,首页会自动打开。
2 元件库
Axure 的元件是构建原型的基本单元,分为以下几类：
- 基本元件：矩形、圆形、线条、文本标签等。
- 表单元件：文本框、文本区域、下拉列表、复选框、单选按钮等。
- 菜单/按钮元件：按钮、水平菜单、垂直菜单、树形菜单等。
- 标记元件：占位符、流程图形状等。
- HTML 元件：可以嵌入网页、视频等。
使用技巧：
（图片来源网络，侵删）
- 拖拽：直接从左侧库中拖到画布上。
- 复制：
Ctrl + D(Windows) /Cmd + D(Mac) 快速复制。 - 对齐：选中多个元件后，使用顶部工具栏的“对齐”工具（左对齐、水平分布等）。
- 组合：
Ctrl + G(Windows) /Cmd + G(Mac) 将多个元件组合成一个整体,方便移动。
3 样式设置
选中一个元件，可以在右侧的“样式”面板中调整其外观：
- 位置和尺寸：精确设置 X, Y 坐标和宽度、高度。
- 填充：设置背景颜色。
- 边框：设置边框颜色、粗细和样式。
- 文本：设置字体、大小、颜色、对齐方式等。
- 阴影：为元件添加阴影,增加立体感。
第三部分：交互逻辑 - Axure 的核心
交互由 事件 和 动作 两部分组成。
事件：用户在元件上进行的操作，如 单击鼠标、鼠标悬停、鼠标移开。
动作：事件触发后，原型执行的操作，如 打开页面、显示/隐藏元件、移动元件。
1 三种最核心的交互
页面跳转
这是最基础的交互,用于模拟在不同页面间的导航。
（图片来源网络，侵删）
- 示例：为“登录”按钮添加点击后跳转到“登录页面”。
- 在画布上选中“登录”按钮。
- 在右侧面板，点击“新建交互”。
- 在弹出的事件列表中，选择 “单击鼠标时”。
- 在右侧的动作列表中，选择 “打开链接”。
- 在下方选择 “链接到当前项目的页面”，然后从下拉菜单中选择“登录页面”。
- 点击“确定”。
- 按
F5或点击顶部工具栏的“预览”按钮,测试效果。
显示/隐藏元件
用于创建动态效果，如弹出菜单、提示框。
- 示例：点击“用户头像”，显示一个下拉菜单。
- 准备两个元件：一个“用户头像”和一个“下拉菜单”（初始状态设置为“隐藏”）。
- 选中“用户头像”，添加交互：“单击鼠标时” -> “显示/隐藏”。
- 在设置中，选择“显示”，并勾选“切换单选组状态”（这样再次点击时可以隐藏）。
- 在下拉菜单上添加交互：“鼠标单击时” -> “显示/隐藏”，并设置为“隐藏”,这样点击菜单本身也能关闭它。
- 预览测试。
动态面板
动态面板是 Axure 最强大的功能之一，它可以实现非常复杂的交互效果，如选项卡、轮播图、手风琴菜单等。
- 什么是动态面板？ 它像一个容器，可以包含多个“状态”，每个状态可以是一组完全不同的设计内容，通过切换状态,来实现动态效果。
- 示例：创建一个简单的选项卡。
- 从元件库拖一个“动态面板”到画布上。
- 在动态面板上右键 -> “管理状态...”。
- 默认有一个
State1，点击“添加状态”，创建State2和State3。 - 在
State1中设计“首页”内容，State2中设计“订单”内容，State3中设计“我的”内容。 - 在画布上创建三个“标签”按钮：“首页”、“订单”、“我的”。
- 选中“首页”按钮，添加交互：“单击鼠标时” -> “设置面板状态”，在下方选择动态面板，并设置状态为
State1。 - 同理，为“订单”和“我的”按钮设置相应的状态。
- 预览测试，点击不同标签,内容会随之切换。
第四部分：常用高级交互
1 条件逻辑
让交互变得更智能,根据不同情况执行不同动作。
- 示例：实现一个简单的登录验证。
- 画一个登录表单（用户名、密码框，登录按钮）。
- 画一个“登录成功”的提示框（初始隐藏）。
- 选中“登录按钮”，添加交互：“单击鼠标时” -> “设置文本”（用于在提示框里显示信息）。
- 在“设置文本”动作下方，点击 “新增条件”。
- 设置条件：
[[This.text]](输入框的内容)"admin"并且[[This.text2]](密码框的内容) "123456"。 - 点击 “否则” 分支。
- 在 “如果为真” 分支下，添加动作：“显示” “登录成功”提示框。
- 在 “否则” 分支下，添加动作：“设置文本” 到一个错误提示标签上，内容为“用户名或密码错误”。
2 变量
用于在原型中临时存储数据。
- 创建变量：在“页面交互”面板顶部，点击“添加全局变量”或“添加局部变量”。
- 使用变量：在交互动作中，可以通过
[[变量名]]的方式来引用或设置变量值。 - 示例：计算器、购物车商品数量累加等。
第五部分：如何学习 Axure 7.0
1 学习路径建议
- 熟悉界面：花 15 分钟了解 Axure 的各个面板是做什么的。
- 模仿练习：找一些简单的网页（如登录页、注册页），用 Axure 画出来，并添加基础的跳转和显示/隐藏交互。
- 攻克核心：重点掌握动态面板，这是从“会用”到“精通”的分水岭，尝试用动态面板实现选项卡、轮播图。
- 学习条件：理解“....否则...”的逻辑，让你的原型“思考”起来。
- 综合项目：尝试完整地做一个项目原型，比如一个电商 App 的核心流程（浏览商品 -> 加入购物车 -> 下单支付）。
2 推荐资源
- Bilibili (B站)：B站是学习 Axure 的最佳平台之一，有大量免费的中文视频教程，搜索关键词 “Axure 7.0 教程”、“Axure 入门到精通”,可以找到非常系统的课程。
- Axure 官方论坛：
axure.com的论坛有官方和用户分享的模板、插件和问答。 - 知乎/掘金：搜索 “Axure”,有很多高质量的文章和技巧分享。
- 模板库：下载优秀的 Axure 模板，拆解它们的交互逻辑,是快速提升技能的好方法。
第六部分：Axure 7.0 的局限性
虽然 7.0 很经典，但也要了解它的不足,以便未来升级：
- 性能：在处理非常复杂的原型时，7.0 的性能不如新版本。
- 功能缺失：
- 没有自适应/流式布局：新版 Axure 9/10 的“流式布局”和“堆叠面板”让响应式设计变得极其简单。
- 插件生态：新版本的插件市场更丰富,功能更强。
- 协同编辑：新版支持多人同时在线编辑原型。
对于初学者，Axure 7.0 完全够用，并且是学习 Axure 核心思想的绝佳工具，掌握了 7.0 的核心逻辑后,再学习新版会非常容易。
祝你学习愉快！
