Aure 9.0 基础教程：学好这篇交互知识，你也可以做出高保真

2019-09-24 23:11:00

一、交互概述

交互是Axure的显著特征

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

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

交互的定义

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

二、事件

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

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

页面交互

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

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

Axure 9.0原型教程：学好这篇交互知识，你也可以做出高保真

页面交互说明

Axure 9.0页面交互事件

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

元件交互

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

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

Axure 9.0原型教程：学好这篇交互知识，你也可以做出高保真

元件交互说明

Axure 9.0元件交互事件

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

Axure 9.0元件交互样式

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

三、用例

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

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

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

Axure 9.0原型教程：学好这篇交互知识，你也可以做出高保真

用例说明

添加用例

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

编辑用例

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

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

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

Axure 9.0原型教程：学好这篇交互知识，你也可以做出高保真

编辑用例

四、动作

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

链接动作

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

元件动作

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