第一部分：初识 Axure RP 6.5

什么是 Axure RP？

Axure RP（Rapid Prototyping，快速原型设计）是一款专业的原型设计工具，它不像 Photoshop 那样专注于视觉像素，也不像 Visio 那样专注于流程图，Axure 的核心是通过创建可交互、可点击的线框图和原型，来模拟真实产品的用户体验和功能流程。

你可以用 Axure 制作一个“假的 App”或“假的网站”，这个“假”产品看起来和用起来都和真的差不多,但不需要任何代码。

Axure RP 6.5 的工作界面

打开 Axure,你会看到以下主要区域：

• 菜单栏: 包含所有操作命令，如文件、编辑、视图等。
• 工具栏: 快速访问常用功能，如保存、预览、撤销、组件库管理等。
• 左侧面板:
  • 页面/大纲: 管理你所有的页面和流程图,是原型的大脑。
  • 元件库: 存放所有可以拖拽到画布上的组件,是原型的积木。
• 中间画布: 你进行设计的主要区域。
• 右侧面板:
  • 样式: 设置元件的颜色、边框、阴影等。
  • 交互: 这是 Axure 的灵魂！ 用于设置元件的交互行为，如点击、悬停等。
  • 说明: 为元件添加文字说明,方便团队沟通。

第二部分：核心概念与基础操作

页面管理

在左边的“页面”面板中,你可以：

• 添加页面: 点击 号,新建一个页面。
• 添加文件夹: 如果你的 App 页面很多，可以创建文件夹（如“登录模块”、“首页模块”）来组织它们,保持项目整洁。
• 重命名: 双击页面名称即可修改。
• 设置首页: 在页面名上右键，选择“设为首页”，预览时,会首先打开这个页面。

元件的使用

“元件库”是 Axure 的核心，默认情况下，Axure 提供了丰富的元件库,如：

• 基本元件: 矩形、圆形、图片、文本标签等。
• 表单元件: 文本框、下拉列表、复选框、单选按钮等。
• 菜单按钮: 水平菜单、垂直菜单、按钮等。
• 标记元件: 用于注释和说明。

操作流程：

1. 拖拽: 从左侧元件库中,将你需要的元件拖到中间的画布上。
2. 编辑:
   • 修改文字: 双击元件即可输入文字。
   • 修改样式: 在右侧的“样式”面板中，可以修改填充颜色、边框、圆角、阴影等。
   • 调整大小: 拖拽元件边缘的控制点，或直接在“样式”面板中输入宽高值。

第三部分：Axure 的灵魂——交互与动态面板

这是 Axure 最强大、最核心的部分，通过“交互”面板，你可以让静态的线框图“活”起来。

交互三要素

一个完整的交互动作通常由三部分组成：

1. 事件: 触发交互的“时机”，如 鼠标单击、鼠标悬停、页面载入时 等。
2. 动作: 事件发生后要执行的“行为”，如 打开链接、显示/隐藏、移动元件 等。
3. 目标: 动作作用的对象，如“当前元件”、“另一个元件”、“动态面板”等。

第一个交互案例：制作一个简单的登录跳转

假设我们有两个页面：登录页面 和 欢迎页面。

目标： 在登录页面上，当用户输入用户名和密码，并点击“登录”按钮后，跳转到“欢迎页面”。

步骤：

1. 准备页面：

   • 在“页面”面板中，创建两个页面，分别命名为 登录页面 和 欢迎页面。
   • 在 登录页面 的画布上，拖入两个“文本框”元件（分别用于输入用户名和密码）和一个“按钮”元件（命名为“登录”）。
   • 在 欢迎页面 的画布上，简单放一个“文本标签”元件，写上“登录成功！”。

2. 设置交互：

   • 选中 登录页面 上的“登录”按钮。
   • 在右侧面板中，切换到 “交互” 标签页。
   • 点击 “新建交互”。
   • Step 1: 选择事件
     • 在弹出的窗口中，选择事件为 鼠标单击时。
   • Step 2: 添加动作
     • 此时下方会显示“动作”列表，点击 号，选择 “链接” -> “打开链接”。
   • Step 3: 设置目标
     • 在“链接到”的下拉菜单中，选择 “页面”。
     • 在页面列表中，选择你之前创建的 欢迎页面。
     • 在“在新窗口中打开”选项中，选择 “当前窗口”。

3. 预览效果：

   • 点击右上角的 预览 按钮（或按快捷键 F5）。
   • 在浏览器中打开你的原型，点击“登录”按钮，页面就会跳转到“欢迎页面”了！

第四部分：进阶功能详解

动态面板 - 实现复杂交互的利器

动态面板是 Axure 中最强大的元件，它像一个可以切换内容的“容器”或“幻灯片”。

什么是动态面板？ 它包含多个“状态”，每个状态都可以是一个独立的画布，你可以通过交互来切换这些状态，从而实现页面切换、内容切换、弹窗等效果。

案例：制作一个 Tab 切换效果

目标： 页面上有三个 Tab（首页、产品、，点击不同的 Tab,下方的内容区域会相应改变。

步骤：

1. 准备元件：

   • 在画布上，创建三个“矩形”作为 Tab 按钮（首页、产品、。
   • 创建一个“动态面板”，命名为“内容面板”。
   • 面板”，在右侧“交互”面板下方，点击 “状态管理”。
   • 点击 “+” 号，添加三个状态，分别命名为 、、。
   • 在 状态的画布上，放入“首页”相关的内容（如文本、图片）。
   • 同样，在 和 状态中放入相应内容，此时画布上只会显示 的内容。

2. 设置交互：

   • 选中“首页”Tab 按钮。
   • 打开“交互”面板，新建交互：鼠标单击时 -> 设置面板状态 -> 动作选择 内容面板 -> 状态选择 -> 选择 “切换到状态”。
   • 用同样的方法，为“产品”和“ Tab 按钮设置交互，分别切换到 和 状态。

3. 预览效果：

   点击预览，你会发现点击不同的 Tab,下方的内容区域会平滑地切换了。

条件逻辑 - 让交互更智能

在设置交互动作时，你还可以添加“条件”,让交互只在特定情况下发生。

案例：登录验证

目标： 只有当用户名输入框中填写了“admin”时，点击登录按钮才能跳转，否则提示“用户名不能为空”。

步骤：

1. 在 登录页面 上，选中“登录”按钮。
2. 打开“交互”面板，新建交互：鼠标单击时 -> 打开链接 -> 欢迎页面。
3. 点击 “配置动作” 下方的 “新增条件”。
4. 在弹出的条件设置窗口中：
   • 选择 “显示条件”。
   • 第一个下拉菜单选择 “文本”。
   • 第二个下拉菜单选择 “等于”。
   • 第三个输入框输入 [[This.text]] (This 指代当前元件，即用户名输入框)。
   • 在后面的输入框中输入 admin。
   • 点击 “确定”。
5. 你会看到“打开链接”动作前面有个 If 图标，在 Else 部分（点击 Else 下方的 号），添加一个新动作：显示 -> 提示 (这是一个文本元件，提前画好并设置为隐藏)。
6. 预览效果：
   • 在用户名框中不输入内容，点击登录，会显示“用户名不能为空”的提示。
   • 输入 admin，点击登录,则会成功跳转。

第五部分：实用技巧与资源

快捷键（极大提升效率）

• Ctrl + S: 保存
• Ctrl + Z: 撤销
• Ctrl + Y: 重做
• Ctrl + D: 复制元件
• Ctrl + G: 组合元件
• Ctrl + Shift + G: 取消组合
• F5: 预览
• Delete: 删除元件
• Ctrl + 鼠标滚轮: 放大/缩小画布

推荐学习资源

虽然 6.5 版本老旧，但很多基础教程的原理是通用的,你可以搜索以下关键词：

• Axure 官方社区: 有很多官方教程和案例。
• Bilibili / YouTube: 搜索 “Axure 教程”、“Axure 交互原型”、“Axure 动态面板” 等,有大量免费视频教程。
• Axure China (非官方社区): 国内非常活跃的 Axure 学习和资源分享社区,有大量模板和教程。

Axure RP 6.5 虽然版本较旧，但其核心的 “拖拽元件 -> 设置事件 -> 添加动作” 的逻辑是所有版本共通的。

对于初学者,学习路径建议如下：

1. 熟悉界面： 了解各个面板的功能。
2. 掌握基础： 练习拖拽、编辑元件,管理页面。
3. 学会交互： 从最简单的 打开链接 开始,理解交互三要素。
4. 攻克动态面板： 这是 Axure 的核心，务必多加练习,掌握其状态切换逻辑。
5. 引入条件： 学习如何用条件让交互变得更智能、更真实。

多动手实践，尝试模仿你手机 App 或网站中的某个功能（比如一个下拉菜单、一个弹窗、一个选项卡）,很快你就能上手并爱上这个强大的工具！