一、交互概述

交互是Axure的显著特征

有了Axure这一神器，产品、设计、运营等非开发岗位的同学，不用写一行代码，只需要通过几步简单的配置，就能够实现前端工程师们平日里通过大量代码实现的交互功能。Axure生成的Html文件之所以能够被称作为原型，而不仅仅是一个线框图或者是草图，就是因为其强大的交互基因，决定了它不是一款普通意义的界面设计工具。

交互是Axure中重要的构建模块，用来将静态的线框图转换为可交互的动态HTML文件。在Axure中，通过一个简洁的、带有指导提示的界面指令和逻辑指引就可以创建完整的交互，生成HTML原型时，Axure都会将这些交互转换为浏览器可识别的编码（JavaScript、HTML、CSS）。但是我们需要清楚的是，这些编码并不是产品级别的，不能作为真正的产品使用。它只是实现了前端的视觉交互，但背后需要的后台数据及相关服务，是无法提供给Axure使用的，这也是Axure最大的局限。

交互的定义

什么是交互？简单通俗的讲，就是谁在什么时候做了什么样的事情。这个主体谁其实就是对应原型的元件和页面；什么时候，狭义的理解是时间，在这里我们可以延伸理解为时机，对应原型中的事件；做了什么样的事情，这是一个动态变化的过程，在原型中对应着动作。根据交互的定义，我们可以看出交互是由元件、事件、动作这3个最基本的元素构成。

二、事件

Axure的事件可以分为自动触发的事件和手动触发的事件。

• 页面事件：是可以自动触发的，比如当浏览器加载页面时，滚动页面时。
• 元件事件：页面中元件的交互效果，由外在手动触发，比如单击某个按钮。

页面交互

以页面载入时事件为例，向大家简单讲解页面事件的交互。

1. 浏览器获取到一个加载页面的请求，可以是首次打开页面，也可以是从其他页面跳转过来。
2. 页面首先检查是否有页面加载时交互，页面加载时事件是附加在页面上的。
3. 如果存在“页面加载时”事件，浏览器首先会执行页面加载时的交互。
4. 如果页面加载时包含交互条件，浏览器会根据逻辑条件，执行对应的动作；如果页面加载时不包含条件，那么浏览器将直接执行动作。
5. 被请求加载的页面渲染完毕，页面载入时的交互执行完成。

页面交互说明

Axure 9.0页面交互事件

• 页面载入时：当页面启动加载时。
• 窗口尺寸改变时：当浏览器窗口大小改变时。
• 窗口向上滚动时：当浏览器窗口向上滚动时。
• 窗口向下滚动时：当浏览器窗口向下滚动时。
• 页面单击时：页面任意位置被鼠标点击时。
• 页面双击时：页面中任意位置被鼠标双击时。
• 页面鼠标右击时：页面中任意位置被鼠标双击时。
• 页面鼠标移动时：当鼠标在页面任意位置移动时。
• 页面按键按下时：当键盘上的按键被按下时。
• 页面按键松开时：当键盘的按键释放时。
• 自适应视图改变时：当自适应视图更改时。

元件交互

鼠标单击跳转就是最基本的元件交互事件，可以用于鼠标点击时，也可以用于移动设备上的手指点击时。我们以简书的主导航（发现/关注/消息）跳转为例，说明元件的交互过程。

1. 点击关注，页面程序判断“关注”是否有鼠标单击事件。
2. 假设有鼠标单击事件，首先检查事件中是否有逻辑条件，如果有逻辑条件，则按照条件执行对应动作；如果没有条件，则直接执行动作。
3. 点击“关注”后，自动跳转到关注页面，交互执行完毕。

元件交互说明

Axure 9.0元件交互事件

• 单击时：当元件被点击时。
• 双击时：元件被鼠标双击时。
• 右击时：当元件被鼠标右键单击时。
• 按下时：当鼠标按下左键没有被释放时。
• 松开时：当元件被鼠标点击，这个事件由鼠标按键释放触发。
• 鼠标移动时：当光标在一个元件上移动时。
• 鼠标移入时：当光标移入元件范围时。
• 鼠标移出时：当光标移出元件范围时。
• 鼠标停放时：当光标在元件上方悬停时。
• 鼠标长按时：当鼠标按下超过2秒没有被释放时。
• 按键按下时：键盘上的按键被按下时。
• 按键松开时：当键盘上的按键弹起时。
• 移动时：当元件移动时，在页面中的坐标位发生了变化。
• 旋转时：当元件旋转时。
• 尺寸改变时：当元件宽度或高度发生改变时。
• 显示时：当元件通过交互动作显示时。
• 隐藏时：当元件通过交互动作隐藏时。
• 获取焦点时：当一个输入项获取焦点时。
• 失去焦点时：当一个输入项失去焦点时。
• 选中改变时：适用于下拉框，当下拉框被选中的项发生了改变时，通常作为事件的一个逻辑条件。
• 选中时：当复选框或单选按钮被选中时。
• 取消选中时：当复选框或单选按钮取消选中时。
• 载入时：当元件从一个页面的加载中载入时。
• 文字改变时：当单行文本框或多行文本框中的文字发生改变时。
• 状态改变时：当动态面板被设置了“设置面板状态”动作时。
• 拖动开始时：当一个拖动动作开始时。
• 拖动时：当一个动态面板正在被拖动时。
• 拖动结束时：当一个拖动动作结束时。
• 向左拖动结束时：当一个面板向左拖动结束时。
• 向右拖动结束时：当一个面板向右拖动结束时。
• 向上拖动结束时：当一个面板向上拖动结束时。
• 向下拖动结束时：当一个面板向下拖动结束时。
• 滚动时：当一个有滚动的面板上下滚动时。
• 向上滚动时：当一个有滚动的面板，向上滚动时。
• 向下滚动时：当一个有滚动的面板，向下滚动时。

Axure 9.0元件交互样式

• 鼠标悬停：当鼠标悬停在元件上时，元件的显示样式。
• 鼠标按下：当鼠标按下元件时，元件的显示样式。
• 选中：元件被选中时的显示样式。
• 禁用：元件被停止使用时的显示样式。
• 获取焦点：当光标聚焦在元件（如文本框）上的显示样式。

三、用例

用例是用户与应用网站或应用程序之间操作流程的抽象表达，每个用例可以封装成一个独立的路径。每个事件下可以有多个用例，当有多个用例存在时，需要为用例设置一些逻辑条件，执行不同的动作。下面我们以登录为例，讲解说明什么是用例。

1. 在登陆界面，用户输入账号、密码，点击“登陆”按钮。
2. 假设用户账号输入错误，点击登录按钮时，页面提示“账号不存在，请重新输入”。
3. 假设用户密码错误，点击登录按钮时，页面提示“密码错误，请重新输入”。

通过这个交互案例，我们可以看出不同的条件下（账号错误或密码错误），点击“登录”按钮时，提示信息是不一样的。为了满足这两个不同的条件，我们就需要为“登录”按钮添加两个不同的用例。

用例说明

添加用例

在设计区域选中元件，在右侧交互面板中点击新建交互，我们会看到该元件可用的事件列表，点击其中的一个事件，点击右侧的用例图标或者直接选择想要添加的动作。

编辑用例

1. 用例说明：点击事件名称右侧的用例图标，在事件名称下方可以编辑用例的名称，并添加用例的逻辑条件。事件的第一个用例，默认没有名称，需要我们手动添加名称。

2. 插入动作：鼠标点击动作名称，开始添加动作，支持添加多个动作。当我们准备插入第二个动作时，点击用例下方的圆形十字架，开始插入更多动作。

3. 配置动作：动作选择完毕后，我们还需要为动作进行一些规则或属性的配置。比如，我们添加的动作是打开链接，在动作配置中，需要添加链接页面并选择页面打开的方式（当前窗口、新窗口/新标签、弹出窗口和父级窗口），最后点击完成，动作配置完毕，整个用例添加完毕。

编辑用例

四、动作

动作是交互事件中最重要的部分，交互效果的外在表象是通过动作反应出来的。因此，了解每个动作的用法与含义，对学习交互来说是十分必要的。下面我们来看一下，Axure 9.0为我们提供了哪些动作，以及这些动作的含义是什么。

链接动作

• 打开链接：跳转到一个全新的页面，链接打开的方式又可以细分为：当前窗口、新窗口/新标签、弹出窗口、父级窗口。
• 关闭窗口：关闭当前页面或弹窗。
• 框架中打开链接：在内部框架中打开新页面。
• 滚动到元件：当页面的高度或宽度超出浏览器的显示范围时，可以用到这个功能。此动作，显示页面为当前页，并非跳转到新页面。在添加这个动作时，我们首先需要设定一个参照元件，设定了参照元件后，执行动作时，页面会自动滚动到选定的参考元件位置。

元件动作

• 显示/隐藏：显示或隐藏某一个元件。
• 设置面板状态：设置动态面板的显示状态，可以是明确的一个状态或者按变量指向的某一个状态；可以是按照某种规则显示的状态，比如自动切换上一个或下一个状态，支持循环切换；也可以直接停止状态的切换。
• 设置文本：可以设置文本的显示内容，显示格式可以为富文本。
• 设置图片：设置显示的图片，可以只本地导入的图片，也可以是根据变量确定显示的图片。
• 设置选中：设置元件的选中状态：选中/不选中/切换。
• 设置列表选中项：设置下拉列表与列表框的选中项。
• 启用/禁用：设置元件为可用的/不可用的。
• 移动：移动元件到指定坐标位置。
• 旋转：元件围绕特定的中心点，进行顺时针或逆时针旋转一定的角度。
• 设置尺寸：改变元件的宽度、高度。
• 置于顶层/底层：将元件置于页面元件的顶层/底层。
• 设置不透明：设置元件的不透明度，通常为一个百分比数据。
• 获取焦点：设置光标聚焦在表单元件上（如文本框）。
• 展开/收起树节点：展开树元件的节点/收起树元件的节点。

中继器动作

• 新增排序：根据查询结果对数据集中的项进行排序。
• 移除排序：移除所有排序。
• 添加筛选：根据查询条件筛选数据集中的项。
• 移除筛选：移除所有筛选。
• 设置当前显示页面：使用分页时，显示指定的页面。
• 设置每页项目数量：使用分页时，设置每页显示中继器项的数目。
• 添加行：添加一行数据到数据集。
• 标记行：选择数据集中的数据行。
• 取消标记：取消选择的数据行。
• 更新行：编辑数据集中选择的行。
• 删除行：删除选中的行。

其他动作

• 设置自适应视图：根据浏览器窗口的大小，自动调整元件的尺寸。
• 设置变量值：设置一个或多个变量作为元件的值，例如文本的内容可以设置为一个全局变量。
• 等待：延迟一段时间后，执行后面的动作，1秒=1000毫秒。
• 其他：在弹出窗口中显示文字描述。