Axure RP 7.0 超详细教程：从入门到精通

第一部分：入门篇 - 认识 Axure 与基础操作

目标： 了解 Axure 是什么，熟悉软件界面,掌握最基本的元件操作和页面管理。

第一章：Axure 是什么？为什么选择它？

• Axure 的定义： Axure (发音：Ack-sure) RP 是一款专业的快速原型设计工具，RP 代表 "Rapid Prototyping"（快速原型）。
• 核心功能：
  1. 线框图: 绘制低保真原型，专注于结构、布局和流程。
  2. 流程图: 清晰地展示产品的用户流程和信息架构。
  3. 交互原型: 通过添加链接、动态面板、条件等，创建可点击、可交互的高保真原型,模拟真实产品的用户体验。
  4. 说明与注释: 为每个元件和页面添加详细的说明，方便开发、设计和产品团队沟通。
• 为什么选择 Axure？
  • 高保真交互： 能实现复杂的交互逻辑,远超普通工具。
  • 快速迭代： 修改成本低,能快速响应需求变化。
  • 有效沟通： 一份可交互的原型胜过千言万语,减少沟通成本。
  • 需求文档： 可自动生成 Word 或 HTML 格式的需求文档。

第二章：熟悉 Axure 7.0 工作界面

启动 Axure 后,你会看到四个主要区域：

1. 顶部菜单栏: 包含所有命令，如文件、编辑、视图、发布等。
2. 左侧面板:
   • Sitemap (站点地图): 管理所有页面和子页面,类似文件夹结构。
   • Libraries (元件库): 存放所有可拖拽的 UI 元件（如按钮、文本框、图片等）。
3. 中间画布区: 你进行设计和绘制原型的主区域。
4. 右侧面板:
   • Pages (页面): 快速切换和管理页面。
   • Outline (大纲): 显示当前页面中所有元件的层级结构。
   • Interactions & Notes (交互与注释): 这是 Axure 的核心！ 在这里为元件添加交互逻辑和注释说明。

第三章：基础操作 - 元件与页面

页面管理 (在左侧 Sitemap 面板操作)

• 添加页面: 右键点击 Sitemap -> Add Page。
• 添加子页面: 右键点击某个页面 -> Add Child Page,用于创建多级导航或流程分支。
• 重命名/删除: 右键点击页面进行操作。

元件操作 (核心中的核心)

• 添加元件: 从左侧 Libraries 中拖拽元件到画布上，常用库包括 Basic (基本)、Form (表单)、Menu (菜单) 等。
• 选择与移动: 单击选中元件,拖动即可移动。
• 编辑元件内容:
  • 文本框: 双击输入文字。
  • 按钮: 双击修改按钮文字。
  • 图片: 双击，选择 Load Local Image... 导入本地图片。
• 调整大小: 选中元件,拖动四个角或四条边上的控制点。
• 格式化文本: 选中文本元件，顶部会出现一个简单的文本工具栏，可设置字体、大小、颜色、对齐方式等。
• 改变样式: 选中元件，右侧 Interactions & Notes 面板上方会显示样式选项，可设置填充色、边框、阴影等。
• 元件状态:
  • 选中元件 -> 右键 -> Edit Disabled/Selected/Rollover State，这可以创建不同状态下的样式，例如按钮的默认、悬停、点击、禁用效果。

第二部分：进阶篇 - 交互与动态面板

目标： 掌握 Axure 的灵魂——交互,学会制作动态效果和页面跳转。

第四章：交互基础 - 三要素

一个完整的交互由三部分组成：

1. 事件: 什么时候触发这个动作？
   • onClick (点击时)
   • onMouseEnter (鼠标悬停时)
   • onMouseLeave (鼠标离开时)
   • onPageLoad (页面加载时)
2. 动作: 触发后执行什么操作？
   • Open Link (打开链接)
   • Show/Hide (显示/隐藏元件)
   • Move (移动元件)
   • Set Panel State (设置动态面板状态)
3. 目标: 对哪个元件执行这个动作？

交互添加流程： 选中元件 -> 点击右侧面板的 'New Interaction' -> 选择一个事件 -> 选择一个动作 -> 配置动作的参数。

第五章：动态面板 - 实现复杂交互的关键

动态面板是 Axure 最强大的功能，它可以像一个容器一样，包含多个“状态”，每个状态可以有不同的内容和布局，常用于制作：选项卡、弹窗、轮播图、手风琴菜单等。

创建和编辑动态面板

• 从 Libraries 中拖拽一个 Dynamic Panel 到画布上。
• 在右侧面板中，你可以看到 Panels 选项卡。
• 点击 Add New State 可以添加新的状态（如 State1, State2）。
• 双击某个状态，进入该状态的编辑画布，可以像普通页面一样拖入元件、绘制内容。

动态面板常用交互

• Set Panel State (设置面板状态):
  • 用途: 点击一个按钮,切换面板的显示内容。
  • 示例: 制作选项卡。
    1. 创建一个动态面板，命名为 "TabContent"，添加两个状态："Content1" 和 "Content2"。
    2. 在 "Content1" 状态里放内容A，在 "Content2" 状态里放内容B。
    3. 画布上放置两个按钮："Tab1" 和 "Tab2"。
    4. 选中 "Tab1" 按钮，添加交互: onClick -> Set Panel State -> 选择 "TabContent" 面板 -> State: Content1 -> Animate: No Animation (或选择淡入淡出等效果)。
    5. 同样，为 "Tab2" 添加交互，设置面板状态为 "Content2"。
• Show/Hide (显示/隐藏):
  • 用途: 控制动态面板的显示和隐藏,常用于制作弹窗。
  • 示例: 制作一个登录弹窗。
    1. 创建一个动态面板，覆盖整个画布，默认设置为 Hidden (隐藏)。
    2. 进入其唯一状态,绘制一个居中的登录框。
    3. 画布上放置一个 "登录" 按钮。
    4. 选中 "登录" 按钮，添加交互: onClick -> Show -> 选择该动态面板 -> Animate: Fade (淡入效果)。
    5. 在登录框的 "关闭" 按钮上，添加交互: onClick -> Hide -> 选择该动态面板。

第六章：常用交互案例

页面跳转与链接

• Open Link in Current Window: 在当前窗口打开新页面,适用于页面内的导航链接。
• Open Link in New Window: 在新标签页打开链接。
• Open Link in Parent Window: 在父框架（如有）中打开链接。
• 操作: 选中一个按钮或图片 -> onClick -> Open Link -> 选择目标页面。

条件逻辑 - 让交互更智能 在添加动作时，点击 Cases，可以设置条件,让交互在不同情况下执行不同操作。

• 示例: 只有当用户输入了用户名，登录按钮才可点击。
  1. 创建一个文本框 Username，一个按钮 LoginBtn。
  2. 选中 LoginBtn，添加交互: onClick -> Enable/Disable -> 选择 LoginBtn 本身。
  3. 点击 New Case，设置条件: If text on 'Username' is not empty ('Username' 上的文本不为空)。
  4. 在这个 Case 下，将动作设置为 Enable (启用)。
  5. 点击 Else，在默认情况下，将动作设置为 Disable (禁用)。

复选框 和 单选按钮 的使用

• 从 Form 库中拖出。
• 选中它们，在右侧面板可以设置 Selected (选中) 状态的样式。
• 通过交互可以控制它们的 Set selected (设置选中/未选中) 状态。

第三部分：高级篇 - 母版、变量与数据

目标： 学习如何提高设计效率,实现更复杂的逻辑和数据模拟。

第七章：母版 - 一处修改，处处生效

母版相当于一个可复用的组件，当你要在多个页面使用相同的头部、导航栏或页脚时,母版是最佳选择。

• 创建母版: 从左侧面板底部点击 Master -> New Master，或直接从画布上选中一组元件，右键 -> Convert to Master。
• 编辑母版: 双击左侧面板中的母版名称进行编辑。
• 添加母版到页面: 从左侧面板将母版拖拽到画布上。
• 母版实例: 画布上的母版是一个“实例”，右键点击实例，可以选择：
  • Edit Master: 修改母版本身,所有实例都会更新。
  • Edit Instance: 仅修改当前这个实例,断开与母版的关联。
  • Set Masters as Default: 将母版设置为默认状态,方便拖拽。

第八章：变量 - 存储和传递数据

变量是 Axure 中用于存储数据的容器,可以实现数据的动态更新和传递。

• 创建变量: 点击顶部菜单 Project -> Open Global Variables,在这里可以创建全局变量。
• 设置变量值:
  • 交互中设置: 在交互动作中，选择 Set variable value,选择变量并设置值。
  • 示例: 制作一个计数器。
    1. 创建一个全局变量 counter，初始值为 0。
    2. 画布上放一个文本框显示数字，一个 "+1" 按钮。
    3. 选中文本框，在右侧面板设置其文本: [[counter]]。[[ ]] 是 Axure 的变量/函数引用符号。
    4. 选中 "+1" 按钮，添加交互: onClick -> Set variable value -> variable: counter -> value: [[counter + 1]]。
• 变量应用:
  • 搜索结果页: 在搜索框输入关键词，点击搜索，将关键词存入变量，在结果页显示 "‘[[keyword]]’的搜索结果"。
  • 用户信息页: 登录成功后，将用户名存入变量，在个人中心页显示 "欢迎，[[username]]"。

第九章：其他高级功能

• repeater ( repeater): 功能最强大的元件，用于创建列表和表格，并能对列表项进行增删改查操作,是制作数据密集型界面的利器。
• 自适应视图: 为不同尺寸的屏幕（如手机、平板、桌面）设计不同的布局,在画布右侧可以切换和设置。
• 中继器 的数据设置: 双击 repeater 元件，可以像操作 Excel 一样编辑其数据源，每个列代表一个字段,每行代表一个列表项。

第四部分：输出与分享

目标： 学会如何将原型分享给他人或导出文档。

第十章：原型发布与分享

1. 生成 HTML 原型:

   • 点击顶部菜单 Publish -> Generate HTML File...。
   • 选择一个本地文件夹，Axure 会生成一个 index.html 文件和一堆资源文件。
   • 重要: 将整个文件夹（而不仅仅是 index.html）发送给他人,或上传到服务器才能正常查看所有交互。

2. Axure Cloud (在线分享):

   • 注册一个 Axure Cloud 账户。
   • 点击 Publish -> Axure Cloud,登录后直接上传。
   • 上传成功后会生成一个链接，可以分享给任何人在线查看,支持评论和协作。

第十一章：生成需求文档

• 点击顶部菜单 Generate -> Specification...。
• 选择要包含的页面和元件。
• 选择输出格式（Word 或 HTML）。
• Axure 会自动为你生成一份包含所有页面截图、元件注释和交互说明的文档。

学习建议与资源

1. 多动手，少看教程： 理论知识看一遍后，一定要亲自跟着做一遍,尝试模仿你手机App或网页的某个功能。
2. 从简单开始： 先从制作一个静态页面开始，然后是页面跳转，再是选项卡,最后是弹窗和复杂表单。
3. 善用官方资源： Axure 官网有非常详细的 官方文档 和 视频教程,是最好的学习资料。
4. 社区与模板：
   • AxureShare: 官方社区，可以下载大量优秀的免费/付费模板,研究别人的交互实现。
   • 优设网、站酷等国内设计社区： 也有很多 Axure 的教程和资源分享。
5. 刻意练习：
   • 挑战 1: 制作一个带选项卡和搜索功能的个人主页。
   • 挑战 2: 制作一个电商的商品详情页，包含图片轮播、数量选择、加入购物车弹窗。
   • 挑战 3: 制作一个带登录/注册功能的流程原型。

这份教程为你搭建了 Axure 7.0 的学习框架，祝你学习愉快，早日成为 Axure 高手！