Axure RP Pro 全方位教程：从零到高手
第一部分：入门篇 - 初识 Axure
什么是 Axure RP？
（图片来源网络，侵删）
Axure RP (Rapid Prototyping) 是一款专业的快速原型设计工具，被广泛用于产品经理、UI/UX 设计师、业务分析师和开发人员。
- 核心功能：通过拖拽组件、设置交互逻辑和动态内容，可以创建高保真、可交互的网页或 App 原型。
- 主要优势：
- 快速迭代：无需写代码,即可快速验证产品想法和设计。
- 清晰沟通：可交互的原型能更直观地向团队、客户和开发人员展示产品功能。
- 文档生成：可以自动生成规格说明文档,方便开发人员参考。
界面概览
启动 Axure 后,你会看到以下几个核心区域：
- 页面大纲：位于左侧，显示所有页面的层级结构,方便管理页面和母版。
- 组件库：位于右侧，包含了所有可用的 UI 元素（如按钮、文本框、图片、形状等）。
- 画布：位于中间,是你设计和构建原型的主区域。
- 交互/注释：位于右侧,切换后可以设置组件的交互行为和添加注释。
- 顶部工具栏：包含常用操作，如保存、预览、生成原型等。
第二部分：基础篇 - 构建你的第一个原型
创建新项目
（图片来源网络，侵删）
- 打开 Axure，选择“文件” -> “新建”。
- 在页面大纲中，可以重命名默认的“Page 1”。
- 点击 号可以创建新页面。
使用组件库
- 拖拽：从右侧组件库中,直接将需要的组件拖拽到画布上。
- 常用组件：
- 基本形状：矩形、圆形、线条。
- 按钮：用于触发交互。
- 图片：导入你的设计稿或图标。
- 文本框：用于输入和显示文本。
- 列表框/表格：用于展示列表和表格数据。
- 菜单/树形：用于导航和层级结构。
调整组件
- 选中组件：单击画布上的组件。
- 调整大小：拖动组件四角的蓝色小方块。
- 移动位置：拖动组件本身。
- 设置样式：在右侧的“样式”面板中，可以修改颜色、边框、阴影、字体等。
添加交互 - 原型的灵魂
交互是让原型“活”起来的关键，交互通常由三部分组成：事件、动作、目标。
（图片来源网络，侵删）
- 事件：用户在组件上的操作，如“单击”、“鼠标悬停”、“双击”等。
- 动作：事件发生后的具体行为，如“打开页面”、“显示/隐藏组件”、“设置文本”等。
- 目标：动作作用的对象，如“页面”、“另一个组件”、“当前组件”。
实战：制作一个简单的登录页面跳转
-
准备画布：
- 拖入一个“文本框”作为用户名输入框。
- 拖入一个“文本框”作为密码输入框（选中后，在样式面板中勾选“密码”）。
- 拖入一个“按钮”，并修改文字为“登录”。
- 拖入一个“矩形”作为“首页”的占位符，先隐藏它（选中矩形，在样式面板的“填充”中选择“无填充”，或者直接放在画布外）。
-
设置交互：
- 选中“登录”按钮。
- 在右侧切换到“交互”面板。
- 点击
+ 新建交互。 - 事件：选择
单击。 - 动作：选择
打开链接->当前窗口。 - 目标：点击“选择页面”，然后选择你创建的“首页”页面。
- 点击“确定”。
-
预览效果：
- 点击顶部工具栏的 预览 按钮 (或按
F5)。 - 在浏览器中，点击画布上的“登录”按钮，页面就会跳转到“首页”。
- 点击顶部工具栏的 预览 按钮 (或按
第三部分：进阶篇 - 掌握高级功能
母版 - 提高复用率
母版相当于一个可复用的组件模板，非常适合制作导航栏、页脚、统一的弹窗等。
- 创建母版：在页面大纲下方，点击“母版”标签，然后点击
+ 新建母版。 - 编辑母版：像编辑普通页面一样，将需要复用的元素（如Logo、导航菜单）拖入母版画布。
- 使用母版：
- 从“母版”库中,直接将母版拖拽到页面画布上。
- 优势：修改母版后,所有使用了该母版的页面都会自动更新。
动态面板 - 实现复杂状态
动态面板是 Axure 最强大的功能之一，它可以包含多个“状态”，每个状态可以是一整个不同的页面设计，常用于实现选项卡、轮播图、手风琴菜单等。
-
创建动态面板：
- 从组件库中拖入一个“动态面板”到画布上。
- 选中动态面板，在右侧“交互”面板下方，点击“状态”管理。
- 默认有一个“State 1”，点击
+ 添加状态,可以创建多个状态。
-
实战：制作一个选项卡
- 创建一个动态面板，命名为“选项卡内容”。
- 进入状态管理，添加两个状态：“选项卡A”和“选项卡B”。
- 在“选项卡A”状态中，拖入一段文本“这是选项卡A的内容”。
- 在“选项卡B”状态中，拖入一段文本“这是选项卡B的内容”。
- 在画布上，创建两个按钮：“选项卡A”和“选项卡B”。
- 选中“选项卡A”按钮，添加交互：
- 事件：
单击 - 动作：
设置面板状态-> 动态面板选择“选项卡内容”，状态选择“选项卡A”。
- 事件：
- 同理，为“选项卡B”按钮设置交互，将其状态设置为“选项卡B”。
- 预览，点击按钮,你会发现内容区域在切换。
变量和函数 - 实现数据交互
变量用于存储和传递数据,函数则用于处理这些数据。
-
全局变量：在整个原型中都可用的变量。
- 创建：点击顶部菜单
项目->全局变量。 - 使用：在交互动作中，可以使用“设置文本”或“设置变量值”来修改变量。
- 创建：点击顶部菜单
-
常用函数：
[[变量名]]：在文本框中插入变量值。[[Now]]：获取当前时间。[[Lp.length]]：获取列表项的数量。
-
实战：实现一个简单的计数器
- 创建一个全局变量，命名为
counter，初始值为0。 - 画布上拖入一个文本框，命名为“计数器显示”。
- 选中“计数器显示”文本框，在右侧“样式”面板的“文本”中，输入
[[counter]]。 - 拖入一个按钮，命名为“+1”。
- 为“+1”按钮添加交互：
- 事件：
单击 - 动作：
设置变量值-> 变量选择counter，值设置为[[counter + 1]]。
- 事件：
- 预览，点击按钮,文本框中的数字会增加。
- 创建一个全局变量，命名为
第四部分：高级篇 - 深入与优化
条件逻辑 - 让交互更智能
在设置动作时，可以添加条件，只有当条件满足时,动作才会执行。
- 实战：登录验证
- 假设用户名输入框的 ID 是
username_input，密码输入框的 ID 是password_input。 - 为“登录”按钮添加交互，事件为
单击，动作为打开链接。 - 点击“交互”面板中的
条件按钮。 - 点击
+ 添加条件。 - 设置条件：
- 第一个下拉框选择
文本。 - 第二个下拉框选择
username_input。 - 第三个下拉框选择 (等于)。
- 最后一个输入框输入
admin。
- 第一个下拉框选择
- 点击
+ 添加另一个条件，并选择或者。 - 同样设置密码框的条件：
password_input的文本123456。 - 点击“确定”。
- 只有当用户名是
admin且密码是123456时，才会跳转到首页，否则,什么都不会发生。
- 假设用户名输入框的 ID 是
中继器 - 实现数据列表
中继器是 Axure 中最强大的组件，它可以模拟真实的数据列表，支持数据的增、删、改、查。
- 使用方法：
- 从组件库拖入一个“中继器”到画布上。
- 双击中继器，进入“交互”面板下的“数据”标签。
- 点击
+ 添加列，定义你的数据字段，如item_name,item_price。 - 点击
+ 添加行,手动输入几条示例数据。 - 返回画布,中继器会循环显示每一行的数据。
- 你可以通过交互动作（如
设置中继器项）来动态改变中继器中的数据。
自定义组件
当组件库无法满足你的需求时,可以创建自定义组件。
- 创建方法：
- 在画布上用基本组件组合成一个你想要的复杂组件（一个带图标的按钮）。
- 选中所有组件，右键点击，选择
转换为自定义组件。 - 为自定义组件命名,并设置默认属性。
- 之后，你就可以像使用普通组件一样，从“自定义”组件库中拖出它。
第五部分：输出与协作
生成原型
- 点击顶部工具栏的 生成HTML原型 按钮。
- Axure 会将所有页面和交互打包成一个 HTML 文件夹。
- 你可以将这个文件夹上传到服务器，或者直接发给同事，他们用浏览器打开
index.html即可查看和交互。
生成规格说明
- 在生成 HTML 原型时，勾选“生成规格说明”选项。
- Axure 会生成一个包含页面截图、交互说明、组件注释和页面数据的详细文档。
- 这份文档对开发人员非常有帮助,可以作为开发参考。
团队协作
- Axure 支持通过 Axure Cloud 进行团队协作。
- 你可以将原型上传到云端，与团队成员共享,进行评论和版本管理。
第六部分：学习资源推荐
- 官方资源：
- Axure 官方教程：最权威、最全面的学习资料，点击访问。
- Axure 官方示例：下载官方提供的原型文件,拆解学习。
- 中文社区：
- AxureShare：国内最大的 Axure 资源和教程分享社区,有大量模板和教程。
- 知乎/简书/B站：搜索“Axure教程”,可以找到大量图文和视频教程。
- 练习建议：
- 模仿：找你喜欢的 App（如微信、淘宝），尝试用 Axure 仿制它的核心界面和交互。
- 创作：尝试设计一个你自己的小产品，从低保真线框图到高保真交互原型,完整地走一遍流程。
学习 Axure 是一个循序渐进的过程，从掌握基础组件和简单交互开始，逐步深入到母版、动态面板、变量和中继器等高级功能，最重要的是 多动手、多练习，通过不断实践，你就能熟练运用 Axure 将你的想法变为生动可交互的原型,祝你学习愉快！
