Axure RP 7.0 全方位入门教程
第一部分：准备工作与基础认知
什么是 Axure RP？
（图片来源网络，侵删）
- 定义：Axure RP 是一款专业的快速原型设计工具，它的核心功能是绘制线框图、流程图、设计高保真交互原型，并可以生成可点击、可交互的 HTML 原型。
- 核心价值：
- 沟通利器：将抽象的想法和需求，通过可视化的原型清晰地传达给产品经理、设计师、开发工程师等团队成员。
- 验证想法：在投入开发成本前，通过原型模拟真实用户操作流程,提前发现逻辑问题和体验缺陷。
- 高效迭代：可以快速修改和迭代设计方案,大大提高产品设计的效率。
Axure 7.0 的安装与界面介绍
-
安装：从 Axure 官网下载 7.0 版本安装包,根据提示完成安装即可。
-
界面初识：启动 Axure 后,你会看到以下几个核心区域：
- 顶部菜单栏：包含文件、编辑、视图、布局、格式、发布、团队、帮助等所有功能。
- 左侧面板：
- 页面：管理你所有的原型页面和子流程页面,类似于一个文件管理器。
- masters (元件库)：存放可复用的组件，如按钮、导航栏、输入框等,这是提高效率的关键。
- 注释：为页面或元件添加说明、需求、逻辑注释,方便团队协作。
- 中间画布：你的主要设计区域，在这里拖拽元件、绘制线框图。
- 右侧面板：
- 交互：设置元件的交互行为（如点击、悬停时发生什么），这是 Axure 的灵魂所在。
- 样式：设置元件的外观，如字体、颜色、边框、阴影等。
- 交互说明：显示当前选中元件的交互动作列表。
第二部分：核心功能入门
页面与元件
（图片来源网络，侵删）
- 新建页面：在左侧“页面”面板中，点击 号新建页面，可以创建子页面,用来组织复杂的流程。
- 元件：Axure 的基本构建块。
- 从元件库拖拽：从左侧
masters面板拖动元件到画布上。 - 常用元件：
- 基本元件：矩形、圆形、线条、文本标签等。
- 表单元件：文本框、文本域、下拉列表、复选框、单选按钮等。
- 菜单/表格元件：水平菜单、垂直菜单、表格、树等。
- 标记元件：用于注释的矩形、圆形等。
- 从元件库拖拽：从左侧
- 操作元件：
- 选择：单击或使用
Ctrl+ 点击进行多选。 - 移动：拖拽元件。
- 调整大小：拖拽元件四角的控制点。
- 编辑文本：双击元件输入文字。
- 改变样式：选中元件后，在右侧“样式”面板中修改。
- 选择：单击或使用
布局与对齐
- 使用辅助线：从标尺处拖出辅助线,帮助对齐元件。
- 对齐工具：选中多个元件后，顶部菜单栏会出现“对齐”工具（如左对齐、水平居中、垂直分布等）,让布局更整洁。
样式与动态面板
- 样式：在右侧“样式”面板中，可以统一设置元件的：
- 文字：字体、大小、颜色、粗细、对齐方式。
- 形状：填充颜色、边框颜色、边框宽度、圆角、阴影。
- 动态面板：这是 Axure 最强大的元件之一，相当于一个“可交互的容器”。
- 作用切换、显示/隐藏、制作多状态界面（如登录/注册切换、选项卡）。
- 操作：
- 从
masters中拖一个“动态面板”到画布。 - 在右侧“样式”面板，点击“状态”选项卡，可以添加、删除、重命名面板状态。
- 每个状态都可以像普通画布一样放置不同的元件和内容。
- 从
第三部分：交互逻辑实现（核心）
交互是原型的生命线，通过“事件-动作”来驱动原型。
三要素：事件、动作、目标
- 事件：触发交互的条件。
单击、鼠标悬停、页面载入时、文本改变时等。 - 动作：事件触发后执行的操作。
打开链接、显示/隐藏、移动元件、设置文本等。 - 目标：动作作用的对象。
当前元件、另一个元件、动态面板的状态等。
创建交互的步骤
- 选中元件：首先在画布上选中你想要添加交互的元件（例如一个按钮）。
- 打开交互面板：在右侧点击“交互”面板。
- 新建交互：点击
+ 新建交互。 - 设置事件：在弹出的窗口中选择一个事件（
单击时）。 - 添加动作：
- 在
交互说明区域，点击+ 添加动作。 - 选择一个动作（
显示/隐藏）。 - 在下方的配置区选择目标（
登录面板这个动态面板）。 - 选择
显示或隐藏。
- 在
- 保存并预览：点击右上角的
预览按钮,在浏览器中测试你的交互是否生效。
常用交互与动作详解
| 动作 | 说明 | 示例 |
|---|---|---|
| 显示/隐藏 | 控制元件或动态面板状态的可见性。 | 点击“登录”按钮，显示“登录面板”，隐藏“注册面板”。 |
| 设置文本 | 动态地改变元件中的文字内容。 | 在搜索框输入关键词，点击搜索后，在结果区域显示“正在搜索：[关键词]”。 |
| 打开链接 | 在当前窗口或新窗口打开一个页面或外部链接。 | 点击 Logo，返回首页。 |
| 移动 | 将元件移动到指定位置或坐标。 | 制作一个拖拽排序的列表。 |
| 设置选中 | 设置单选按钮、复选框或列表项的选中状态。 | 点击“全选”按钮，将所有复选框设为选中状态。 |
| 载入图片 | 动态改变图片元件的图片源。 | 点击缩略图，在主图区域显示大图。 |
| 交互式教程 | 一步步引导用户操作，适合制作新手指引。 | 首次登录时，高亮并引导用户完成关键操作。 |
条件逻辑
很多交互不是非黑即白的,需要满足特定条件才执行。
- 如何添加条件：在添加动作后，点击
配置动作旁边的 或+ 添加条件。 - 示例：一个“提交”按钮，只有当用户名和密码都不为空时才能点击。
- 选中“提交”按钮。
- 添加交互
单击时->显示/隐藏-> 显示一个错误提示。 - 点击
+ 添加条件。 - 设置条件：
文本框 "用户名" 的值 == "" 或 文本框 "密码" 的值 == ""。 - 执行“显示错误提示”的动作。
- 否则：执行“跳转到成功页面”的动作。
第四部分：高级功能与技巧
母版
- 定义：可复用的组件，当你需要在多个页面重复使用同一个布局（如页头、页脚、导航栏）时,使用母版可以极大提高效率。
- 创建与使用：
- 在左侧
masters面板，点击+ 新建母版。 - 像在画布上一样设计你的母版内容（例如一个 Logo 和导航链接）。
- 在页面中，直接从
masters面板拖动母版到画布即可。
- 在左侧
- 优势：修改母版后,所有使用了该母版的页面都会自动更新。
中继器
- 定义：Axure 最强大的数据驱动元件，可以看作是“动态列表”，它可以根据一组数据,自动生成多个重复的列表项。
- 应用场景：制作商品列表、用户列表、评论列表等任何需要重复展示的数据。
- 基本操作：
- 从
masters拖一个“中继器”到画布。 - 双击中继器进入“交互数据”编辑模式，设置你的数据集（如列名：商品名、价格）。
- 在中继器的“Item”项中,设计单个列表项的布局。
- 设置好数据后,中继器会自动根据数据生成多个列表项。
- 可以通过交互动作（如
设置列表排序、添加/删除行）来动态改变中继器的内容。
- 从
自定义变量
- 定义：在原型中存储和传递数据的容器,类似于编程中的变量。
- 使用场景：
- 记录用户的输入（如搜索词）。
- 计算数值（如购物车总价）。
- 作为判断条件的依据。
- 操作：
- 创建：在“页面”或“交互”面板中，右键选择
新建变量。 - 赋值：使用
设置文本动作，将元件的值赋给变量（[[变量名]] = [[This.text]]）。 - 使用：在其他地方引用变量，格式为
[[变量名]]，在显示结果时，使用搜索结果：[[SearchKeyword]]。
- 创建：在“页面”或“交互”面板中，右键选择
第五部分：生成与分享
生成 HTML 原型
- 点击顶部菜单栏的
发布->生成 HTML 文件...。 - 在弹出的窗口中，你可以选择：
- 生成的页面：选择要发布的页面。
- 文件夹：选择一个本地文件夹来存放生成的文件。
- 点击
生成，Axure 会在指定文件夹生成一个index.html文件和一系列其他文件。
分享原型
- 本地分享：将生成的整个文件夹压缩，通过邮件、网盘等方式发送给他人，接收者解压后，用浏览器打开
index.html即可查看。 - Axure Share (云服务)：
- 点击
发布->Axure Share...。 - 登录或注册 Axure Share 账户。
- 上传你的
.rp文件。 - Axure 会自动生成一个在线链接，你可以将此链接分享给任何人，他们无需安装 Axure 即可在浏览器中查看和交互。
- 点击
第六部分：学习路径与资源推荐
- 动手实践：找一个小型应用（如一个简单的登录注册页面、一个产品详情页），模仿它的流程，自己动手用 Axure 做一遍,这是最快的学习方式。
- 从模仿到创造：熟练后，尝试将你手机上的 App 或你喜欢的网站做成 Axure 原型。
- 学习资源：
- 官方文档：最权威、最准确。
- 视频教程：B站、YouTube 上有大量 Axure 教程，搜索“Axure 入门”、“Axure 交互教程”等关键词。
- 社区与博客：关注一些 Axure 高手和设计社区,学习他们的技巧和案例。
Axure 7.0 是一个功能强大的工具，不要害怕复杂，从基础元件和简单交互开始，逐步掌握动态面板、母版和中继器，你就能制作出非常专业和有说服力的产品原型了,祝你学习愉快！
