一、交互概述
交互是Axure的显著特征
有了Axure这一神器，产品、设计、运营等非开发岗位的同学，不用写一行代码，只需要通过几步简单的配置，就能够实现前端工程师们平日里通过大量代码实现的交互和功能。Axure生成的Html文件之所以能够被称作为原型，而不仅仅是一个线框图或者是草图，就是因为其强大的交互基因，决定了它不是一款普通意义的界面设计工具。
交互是Axure中重要的构建模块，用来将静态的线框图转换为可交互的动态HTML文件。在Axure中，通过一个简洁的、带有指导提示的界面指令和逻辑指引就可以创建完整的交互，生成HTML原型时，Axure都会将这些交互转换为浏览器可识别的编码（JavaScript、HTML、CSS）。但是我们需要清楚的是，这些编码并不是产品级别的，不能作为真正的产品使用。它只是实现了前端的视觉交互，但背后需要的后台数据及相关服务，是无法提供给Axure使用的，这也是Axure最大的局限。
交互的定义
什么是交互？简单通俗的讲，就是谁在什么时候做了什么样的事情。这个主体谁其实就是对应原型的元件和页面；什么时候，狭义的理解是时间，在这里我们可以延伸理解为时机，对应原型中的事件；做了什么样的事情，这是一个动态变化的过程，在原型中对应着动作。根据交互的定义，我们可以看出交互是由元件、事件、动作这3个最基本的元素构成。
二、事件
Axure的事件可以分为自动触发的事件和手动触发的事件。
- 页面事件：是可以自动触发的，比如当浏览器加载页面时，滚动页面时。
- 元件事件：页面中元件的交互效果，都是人为手动触发，比如单击某个按钮。
01 页面交互
举例讲解
以页面载入时事件为例，向大家简单讲解页面事件的交互。
- 浏览器获取到一个加载页面的请求，可以是首次打开页面，也可以是从其他页面跳转过来。
- 页面首先检查是否有页面加载时交互，页面加载时事件是附加在页面上的。
- 如果存在“页面加载时”事件，浏览器首先会执行页面加载时的交互。
- 如果页面加载时包含交互条件，浏览器会根据逻辑条件，执行对应的动作；如果页面加载时不包含条件，那么浏览器将直接执行动作。
-
被请求加载的页面渲染完毕，页面载入时的交互执行完成。
页面交互说明.png
Axure 9.0页面交互事件
- 页面载入时：当页面启动加载时。
- 窗口尺寸改变时：当浏览器窗口大小改变时。
- 窗口向上滚动时：当浏览器窗口向上滚动时。
- 窗口向下滚动时：当浏览器窗口向下滚动时。
- 页面单击时：页面任意位置被鼠标点击时。
- 页面双击时：页面中任意位置被鼠标双击时。
- 页面鼠标右击时：页面中任意位置被鼠标双击时。
- 页面鼠标移动时：当鼠标在页面任意位置移动时。
- 页面按键按下时：当键盘上的按键被按下时。
- 页面按键松开时：当键盘的按键释放时。
- 自适应视图改变时：当自适应视图更改时。
02 元件交互
举例讲解
鼠标单击跳转就是最基本的元件交互事件，可以用于鼠标点击时，也可以用于移动设备上的手指点击时。我们以简书的主导航（发现/关注/消息）跳转为例，说明元件的交互过程。
- 点击关注，页面程序判断“关注”是否有鼠标单击事件。
- 假设有鼠标单击事件，首先检查事件中是否有逻辑条件，如果有逻辑条件，则按照条件执行对应动作；如果没有条件，则直接执行动作。
-
点击“关注"后，自动跳转到关注页面，交互执行完毕。
元件交互说明.png
Axure 9.0元件交互事件
- 单击时：当元件被点击时。
- 双击时：元件被鼠标双击时。
- 右击时：当元件被鼠标右键单击时。
- 按下时：当鼠标按下左键没有被释放时。
- 松开时：当元件被鼠标点击，这个事件由鼠标按键释放触发。
- 鼠标移动时：当光标在一个元件上移动时。
- 鼠标移入时：当光标移入元件范围时。
- 鼠标移出时：当光标移出元件范围时。
- 鼠标停放时：当光标在元件上方悬停时。
- 鼠标长按时：当鼠标按下超过2秒没有被释放时。
- 按键按下时：键盘上的按键被按下时。
- 按键松开时：当键盘上的按键弹起时。
- 移动时：当元件移动时，在页面中的坐标位发生了变化。
- 旋转时：当元件旋转时。
- 尺寸改变时：当元件宽度或高度发生改变时。
- 显示时：当元件通过交互动作显示时。
- 隐藏时：当元件通过交互动作隐藏时。
- 获取焦点时：当一个输入项获取焦点时。
- 失去焦点时：当一个输入项失去焦点时。
- 选中改变时：适用于下拉框，当下拉框被选中的项发生了改变时，通常作为事件的一个逻辑条件。
- 选中时：当复选框或单选按钮被选中时。
- 取消选中时：当复选框或单选按钮取消选中时。
- 载入时：当元件从一个页面的加载中载入时。
- 文字改变时：当单行文本框或多行文本框中的文字发生改变时。
- 状态改变时：当动态面板被设置了“设置面板状态”动作时。
- 拖动开始时：当一个拖动动作开始时。
- 拖动时：当一个动态面板正在被拖动时。
- 拖动结束时：当一个拖动动作结束时。
- 向左拖动结束时：当一个面板向左拖动结束时。
- 向右拖动结束时：当一个面板向右拖动结束时。
- 向上拖动结束时：当一个面板向上拖动结束时。
- 向下拖动结束时：当一个面板向下拖动结束时。
- 滚动时：当一个有滚动的面板上下滚动时。
- 向上滚动时：当一个有滚动的面板，向上滚动时。
- 向下滚动时：当一个有滚动的面板，向下滚动时。
Axure 9.0元件交互样式
- 鼠标悬停：当鼠标悬停在元件上时，元件的显示样式。
- 鼠标按下：当鼠标按下元件时，元件的显示样式。
- 选中：元件被选中时的显示样式。
- 禁用：元件被停止使用时的显示样式。
- 获取焦点：当光标聚焦在元件（如文本框）上的显示样式。
三、用例
01 举例讲解
用例是用户与应用网站或应用程序之间操作流程的抽象表达，每个用例可以封装成一个独立的路径。每个事件下可以有多个用例，当有多个用例存在时，需要为用例设置一些逻辑条件，执行不同的动作。下面我们以登录为例，讲解说明什么是用例。
- 在登陆界面，用户输入账号、密码，点击“登陆”按钮。
- 假设用户账号输入错误，点击登录按钮时，页面提示“账号不存在，请重新输入”。
-
假设用户密码错误，点击登录按钮时，页面提示“密码错误，请重新输入”。
通过这个交互案例，我们可以看出不同的条件下（账号错误或密码错误），点击“登录”按钮时，提示信息是不一样的。为了满足这两个不同的条件，我们就需要为“登录”按钮添加两个不同的用例。
用例说明.png
02 添加用例
在设计区域选中元件，在右侧交互面板中点击新建交互，我们会看到该元件可用的事件列表，点击其中的一个事件，点击右侧的用例图标或者直接选择想要添加的动作。
03 编辑用例
- 用例说明：点击事件名称右侧的用例图标，在事件名称下方可以编辑用例的名称，并添加用例的逻辑条件。事件的第一个用例，默认没有名称，需要我们手动添加名称。
- 插入动作：鼠标点击动作名称，开始添加动作，支持添加多个动作。当我们准备插入第二个动作时，点击用例下方的圆形十字架，开始插入更多动作。
-
配置动作：动作选择完毕后，我们还需要为动作进行一些规则或属性的配置。比如，我们添加的动作是打开链接，在动作配置中，需要添加链接页面并选择页面打开的方式（当前窗口、新窗口/新标签、弹出窗口和父级窗口），最后点击完成，动作配置完毕，整个用例添加完毕。
用例编辑.png
四、动作
动作是交互事件中最重要的部分，交互效果的外在表象是通过动作反应出来的。因此，了解每个动作的用法与含义，对学习交互来说是十分必要的。下面我们来看一下，Axure 9.0为我们提供了哪些动作，以及这些动作的含义是什么。
01 链接动作
- 打开链接：跳转到一个全新的页面，链接打开的方式又可以细分为：当前窗口、新窗口/新标签、弹出窗口、父级窗口。
- 关闭窗口：关闭当前页面或弹窗。
- 框架中打开链接：在内部框架中打开新页面。
- 滚动到元件：当页面的高度或宽度超出浏览器的显示范围时，可以用到这个功能。此动作，显示页面为当前页，并非跳转到新页面。在添加这个动作时，我们首先需要设定一个参照元件，设定了参照元件后，执行动作时，页面会自动滚动到选定的参考元件位置。
02 元件动作
- 显示/隐藏：显示或隐藏某一个元件。
- 设置面板状态：设置动态面板的显示状态，可以是明确的一个状态或者按变量指向的某一个状态；可以是按照某种规则显示的状态，比如自动切换上一个或下一个状态，支持循环切换；也可以直接停止状态的切换。
- 设置文本：可以设置文本的显示内容，显示格式可以为富文本。
- 设置图片：设置显示的图片，可以只本地导入的图片，也可以是根据变量确定显示的图片。
- 设置选中：设置元件的选中状态：选中/不选中/切换。
- 设置列表选中项：设置下拉列表与列表框的选中项。
- 启用/禁用：设置元件为可用的/不可用的。
- 移动：移动元件到指定坐标位置。
- 旋转：元件围绕特定的中心点，进行顺时针或逆时针旋转一定的角度。
- 设置尺寸：改变元件的宽度、高度。
- 置于顶层/底层：将元件置于页面元件的顶层/底层。
- 设置不透明：设置元件的不透明度，通常为一个百分比数据。
- 获取焦点：设置光标聚焦在表单元件上（如文本框）。
- 展开/收起树节点：展开树元件的节点/收起树元件的节点。
03 中继器动作
- 新增排序：根据查询结果对数据集中的项进行排序。
- 移除排序：移除所有排序。
- 添加筛选：根据查询条件筛选数据集中的项。
- 移除筛选：移除所有筛选。
- 设置当前显示页面：使用分页时，显示指定的页面。
- 设置每页项目数量：使用分页时，设置每页显示中继器项的数目。
- 添加行：添加一行数据到数据集。
- 标记行：选择数据集中的数据行。
- 取消标记：取消选择的数据行。
- 更新行：编辑数据集中选择的行。
- 删除行：删除选中的行。
04 其他动作
- 设置自适应视图：根据浏览器窗口的大小，自动调整元件的尺寸。
- 设置变量值：设置一个或多个变量作为元件的值，例如文本的内容可以设置为一个全局变量。
- 等待：延迟一段时间后，执行后面的动作，1秒=1000毫秒。
- 其他：在弹出窗口中显示文字描述。
如果你对Axure或原型设计有兴趣，希望系统性地学习Axure知识，掌握更多Axure使用技巧；或者希望通过临摹交互案例，进一步提升高保交互设计能力。请点击下方关注按钮，查看更多连载作品。
点击获取案例作品源文件
