Axure RP Pro 7.0 完整教程
第一部分：入门基础
在开始之前，请确保你已经安装了 Axure RP 7.0。
认识 Axure RP 7.0 工作界面
打开 Axure，你会看到一个典型的桌面应用程序布局,主要由以下几个部分组成：
- 菜单栏: 包含文件、编辑、视图、布局、发布等所有命令。
- 工具栏: 提供常用操作的快捷按钮，如新建、保存、预览、撤销/重做等。
- 左侧面板: 这是 Axure 的核心，包含三个主要标签页：
- 页面: 管理你的所有线框图和流程图。
- 元件库: 存放所有可用的 UI 元件，分为“默认”、“图标”等。
- 母版: 用于创建可复用的组件，如页头、页脚、导航栏等。
- 中间画布: 你在这里绘制线框图和流程图。
- 右侧面板: 包含四个主要标签页：
- 交互: 设置元件的交互行为（如点击、悬停）。
- 注释: 为你的设计添加说明文字,方便团队沟通。
- 样式: 调整元件的颜色、边框、阴影、尺寸等。
- 大纲: 以树状结构显示页面和元件的层级关系,方便管理复杂页面。
核心概念：元件、交互、动态面板
理解这三个概念是掌握 Axure 的关键。
-
元件: 构建界面的基本单元，Axure 提供了丰富的默认元件（如按钮、文本框、图片、下拉列表等）,你也可以从外部导入或自己创建。
- 提示: 拖动元件的四个角可以调整大小，拖动中心可以移动位置，按住
Shift键拖动可以保持等比例缩放。
- 提示: 拖动元件的四个角可以调整大小，拖动中心可以移动位置，按住
-
交互: 定义用户操作（如鼠标点击、悬停、拖拽）后，界面发生的反应，这是 Axure 让原型“活”起来的核心。
- 一个完整的交互由三部分组成：
- 事件: 触发交互的动作（如
onClick,onMouseEnter）。 - 动作: 执行的操作（如
Open Link,Show Panel,Set Variable）。 - 目标: 动作作用的对象（如哪个页面、哪个面板）。
- 事件: 触发交互的动作（如
- 一个完整的交互由三部分组成：
-
动态面板: 这是 Axure 最强大的功能之一，它像一个可以切换内容的容器，可以包含多个“状态”，每个状态可以放置不同的元件和布局,常用于实现：
- 标签页切换
- 下拉菜单
- 弹出框
- 手风琴效果
- 页面切换动画
第二部分：常用功能详解
元件的高级用法
-
元件的样式与状态:
- 选中元件 -> 在右侧 样式 面板中，可以设置填充色、边框、圆角、阴影、透明度等。
- 交互状态: 在 交互 面板，可以设置元件在不同交互下的样式变化，设置一个按钮的
onMouseEnter事件，动作为Set Style，将其背景色变蓝,实现悬停效果。
-
元件的约束与对齐:
- 约束: 在 样式 面板的“尺寸”部分，可以设置元件在调整大小时，其内部内容的固定方式（如左上角固定、宽度固定等）。
- 对齐: 选中多个元件后，在顶部工具栏或右键菜单中，可以使用对齐工具（如水平居中、垂直居中、顶端对齐等）。
-
使用图标字体:
- Axure 7.0 默认不包含图标字体，但你可以通过 “文件” -> “库” -> “打开库” 导入第三方图标库（如 Font Awesome, Ionicons 的
.rplib文件）。 - 导入后,你就可以像使用普通文本一样使用这些图标了。
- Axure 7.0 默认不包含图标字体，但你可以通过 “文件” -> “库” -> “打开库” 导入第三方图标库（如 Font Awesome, Ionicons 的
交互与动画
这是原型的灵魂,我们通过几个经典案例来学习。
点击按钮，显示/隐藏内容
- 在画布上放置一个“按钮”元件和一个“矩形”元件。
- 选中“矩形”元件，在右侧面板将其命名为“隐藏内容”。
- 选中“按钮”元件，打开 交互 面板。
- 点击 新建交互 -> 选择 事件 为
onClick(鼠标单击)。 - 点击 添加动作 -> 选择 Show/Hide。
- 在 目标 中选择“隐藏内容”。
- 在 设置 中，选择 Toggle (切换),这样每次点击都会在显示和隐藏之间切换。
- 点击 确定，然后点击右上角的 预览 按钮查看效果。
实现标签页切换
- 从 元件库 拖入一个 动态面板 到画布上，命名为“标签内容”。
- 选中该动态面板，在右侧面板的 状态 中，点击 添加状态，创建三个状态，分别命名为“首页”、“产品”、“关于我们”。
- 在每个状态下，分别绘制对应的内容（在“首页”状态放“首页内容”文本）。
- 在动态面板上方，放置三个“按钮”元件，分别命名为“首页”、“产品”、“关于我们”。
- 选中“首页”按钮，打开 交互 面板。
- 事件：
onClick - 动作：
Set Panel State - 目标：选择“标签内容”
- 设置：选择状态为“首页”
- 事件：
- 同理，为“产品”和“关于我们”按钮设置相同的交互，只是目标状态分别为“产品”和“关于我们”。
- 预览效果，点击不同标签,内容区域会随之切换。
下拉菜单
- 放置一个 按钮 作为菜单标题（如“用户中心”）。
- 放置一个 动态面板，将其放在按钮下方，命名为“下拉菜单”。
- 在“下拉菜单”的状态中，放置几个“按钮”作为菜单项（如“我的资料”、“我的订单”、“退出登录”）。
- 默认情况下，设置“下拉菜单”为隐藏（在右侧面板的 样式 中，勾选“隐藏”）。
- 选中菜单标题按钮，设置交互：
- 事件：
onClick - 动作：
Toggle(显示/隐藏) -> 目标为“下拉菜单”。
- 事件：
- 为了点击页面其他地方也能关闭菜单，可以在 页面 级别（在左侧页面面板的空白处点击）设置交互：
- 事件：
onClick - 动作：
Hide-> 目标为“下拉菜单”。
- 事件：
母版
母版是提高设计效率和一致性的利器。
- 创建母版: 从左侧面板切换到 母版 标签页，点击 新建母版，然后将页头、页脚等常用元件拖入其中。
- 使用母版: 在 页面 或 母版 标签页，直接将创建好的母版拖入画布,画布上的母版实例会显示一个绿色的小箭头。
- 母版的实例与脱离:
- 实例: 当你修改母版时，所有使用了该母版的页面都会同步更新,这是默认状态。
- 脱离: 如果你只想修改某个页面上的母版，而不影响其他页面，可以右键点击该母版实例，选择 “脱离母版”，脱离后，它就变成了一个普通的元件组,修改不会影响母版本身。
第三部分：实战演练：制作一个简单的登录页面
让我们综合运用所学知识，创建一个带有点击切换功能的登录/注册页面。
-
页面结构:
- 创建一个 动态面板，命名为“登录注册面板”。
- 在其 状态 中，创建两个状态：“登录页”和“注册页”。
-
设计“登录页”状态:
- 放置一个标题：“用户登录”。
- 放置一个“文本框”用于输入用户名。
- 放置一个“文本框（密码）”用于输入密码。
- 放置一个“按钮”，命名为“登录”。
