1.4 交互基础_Axure RP7网站和APP原型制作从入门到精通-QQ阅读男生玄幻网

上QQ阅读APP看书，第一时间看更新

1.4 交互基础

本节将给大家讲解一些Axure中比较基础但非常实用的交互，可以让不懂代码的人制作出可交互的高保真用户体验原型。在Axure中创建交互包含以下4个构建模块：交互（Interactions）、事件（Events）、用例（Cases）和动作（Actions）。交互是由事件触发的，事件是用来执行动作的，这就是本章要重点讲解的4个主题。

客户对更好的用户体验的期望持续上升，很明显，我们正处在设计软件所带来的巨大变化中，加上响应式网页设计的广泛传播与移动APP的巨大需求，用户体验更是被推向浪尖。在国内且不论公司规模大小、甚至并不真正了解用户体验的意义，当需要制作网站或APP的时候都会提出“用户体验”这个词。

在项目中（尤其是响应式网站设计和APP设计），利益相关者越早参与进来充分沟通，工作效率与项目成功率越高。但是在项目早期仅仅靠带有很多文字注释的静态线框图是难以与利益相关者顺畅沟通的，因为他们难以想象出静态线框图实现出来的“响应式”是什么样子，或者他们会想象成其他任何样子，这就造成了巨大的理解差异。

使用Axure，设计师们可以快速制作高参与度的用户体验，并可以在目标设备上测试带有交互效果的线框图。本节将给大家介绍如何将静态线框图转换为动态，使用Axure制作简单但高效的交互。

交互（Interactions）是Axure中的构建模块，用来将静态线框图转换为可交互的HTML原型。在Axure中，通过一个简洁的、带有指导的界面选择指令和逻辑就可以创建交互，每次生成HTML原型，Axure都会将这些交互转换为浏览器可以识别的真正的编码（JavaScript、HTML、CSS）。但是请牢记：这些编码并不是产品级别的，并不能作为最终的产品使用。

每个交互都是由3个最基本的单元构成，这里为了便于大家理解，我们借用3个非常简单的词来讲解：什么时候（When）、在哪里（Where）和做什么（What）。

什么时候发生交互行为（When）？在Axure中对应When的术语是事件（Events），举几个例子。

●当页面加载时（其中页面加载时，就是事件）。

●当用户点击某按钮时（其中鼠标点击时，就是事件）。

●当文本输入框中的文字改变时（其中文字改变时，就是事件）。

在Axure界面右侧的部件交互面板中，你可以看到很多事件的列表，这些事件根据部件的不同而有所不同（并不是所有部件的事件都是相同的），在设计区域底部的页面交互面板中可以看到页面相关的事件。

在哪里找到这些交互（Where）？交互可以附加在任意部件上，如矩形部件、下拉列表和复选框等，也可以附加在页面上。要给部件创建交互，就到部件交互面板的选项中进行设置；要给页面创建交互，就到页面交互面板的选项中进行设置。在Axure中对应Where的术语是用例（Cases），一个事件中可以包含一个或者多个用例。

做什么（What）？在Axure中对应What的术语是动作（Actions），动作定义交互的结果，举几个例子。

●当页面加载时，第一次渲染页面时显示哪些内容（其中显示哪些内容，就是动作）。

●当用户点击某按钮时，就链接到其他某个页面（其中链接到某个页面，就是动作）。

●当文本输入框失去焦点时（光标从文本输入框中移出时），文本输入框可根据你设置的条件进行判断，并显示错误提示（其中显示错误提示就是动作）。

多用例（Multiple Cases）：有些情况下，一个事件中可能包含多个替代路径，要执行某个路径中的动作是由条件逻辑（Condition Logic）决定的，关于条件逻辑我会在后面的章节中给大家讲解。

1.4.1 事件（Events）

总体来说，Axure的交互是由以下两个类型的事件触发的。

●页面事件：是可以自动触发的，比如当浏览器中加载页面时，还有滚动时。

●部件事件：对页面中的部件进行直接交互，这些交互是由用户直接触发的，比如点击某个按钮。

页面事件，以页面载入时事件（OnPageLoad）为例，给大家详细描述一下，见图87。

图87

●浏览器获取到一个加载页面的请求（A），可以是首次打开页面，也可以是从其他页面链接过来的。

●页面首先检测是否有页面加载时交互，页面加载时事件（C）是附加在页面上的（B）。

●如果存在“页面加载时”事件，浏览器会首先执行页面加载时的交互。在后面的章节中，会给大家讲解不同页面间基于“页面载入时”事件的变量值的传递。

●如果页面载入时的交互包含条件（D），浏览器会根据逻辑来执行合适的动作（E / F）；如果页面载入时不包含条件，浏览器会直接执行动作（G）。

●被请求的页面渲染完毕（H），页面载入时的交互执行完毕（I）。

下面是Axure RP7中所有可用的页面事件。

●页面载入时（OnPageLoad）：当页面启动加载时。

●窗口改变大小时（OnWindowResize）：当浏览器窗口大小改变时。

●窗口滚动时（OnWindowScroll）：当浏览器窗口滚动时。

●鼠标单击时（OnClick）：页面中的任何部件被点击时（不含空白处）。

●鼠标双击时（OnDoubleClick）：当页面中的任何部件被双击时（不含空白处）。

●鼠标右键单击时（OnContextMenu）：当页面中的任何部件被鼠标右键点击时（不含空白处）。

●鼠标移动时（OnMouseMove）：当鼠标在页面任何位置移动时。

●按键按下时（OnKeyDown）：当键盘上的按键按下时。

●按键弹起时（OnKeyUp）：当键盘上的按键释放时。

●自适应视图更改时（OnAdaptiveViewChange）：当自适应视图更改时。

部件事件，如“鼠标点击时”（OnClick）就是最基本的触发事件，可以用于鼠标点击时，也可用于在移动设备上手指点击时，下面给大家描述一下部件事件的执行流程，见图88。

图88

●用户（A）对部件执行了交互动作，如鼠标点击，这个“鼠标点击时”事件是附加在部件（B）上的。

●不同的部件类型（如按钮、复选框和下拉列表等）拥有不同的交互响应（C）。比如，当用户点击一个按钮之前，鼠标移入该按钮的可见范围内，我们可以使用“鼠标移入时”（OnMouseEnter）事件改变这个按钮的样式。

●浏览器会检测这个部件的事件上是否添加了条件逻辑（D）。比如，你可能添加了当用户名输入框为空时就执行显示错误提示动作（G）；如果用户名输入框不为空，就执行动作（E / F）。

●如果没有条件，浏览器会直接执行附加在该部件上的动作（G）。

●根据事件中动作的不同，浏览器可能会在当前屏幕刷新或者加载其他页面（I）。

下面是AxureRP7中所有可用的部件事件

●鼠标单击时（OnClick）：当部件被点击。

●鼠标移入时（OnMouseEnter）：当光标移入部件范围。

●鼠标移出时（OnMouseOut）：当光标移出部件范围。

●鼠标双击时（OnDoubleClick）：当时鼠标双击时。

●鼠标右键单击时（OnContextMenu）：当鼠标右键点击时。

●鼠标按键按下时（OnMouseDown）：当鼠标按下且没有释放时。

●鼠标按键释放时（OnMouseUp）：当一个部件被鼠标点击，这个事件由鼠标按键释放触发。

●鼠标移动时（OnMouseMove）：当光标在一个部件上移动时。

●鼠标悬停超过2秒时（OnMouseHover）：当光标在一个部件上悬停超过2秒时。

●鼠标点击并保持超过2秒时（OnLongClick）：当一个部件被点击并且鼠标按键保持超过2秒时。

●按键按下时（OnKeyDown）：当键盘上的键按下时。

●按键弹起时（OnKeyUp）：当键盘上的键弹起时。

●移动（OnMove）：当面板移动时。

●显示（OnShow）：当面板通过交互动作显示时。

●隐藏（OnHide）：当面板通过交互动作隐藏时。

●获取焦点（OnFocus）：当一个表单获取焦点时。

●失去焦点时（OnLostFocus）：当一个部件失去焦点时。

●选项改变时（OnSelectionChange）：当一个下拉列表被选中时，这是条件的典型应用。

●选中状态改变时（OnCheckedChange）：当复选框或单选按钮被选中时。

●文字改变时（OnTextChange）：当单行文本框或多行文本框中的文字被添加或删除时。

●动态面板状态改变时（OnPanelStateChange）：当动态面板被设置了“设置面板状态”动作时。

●开始拖动时（OnDragStart）：当一个拖动动作开始时。

●正在拖动时（OnDrag）：当一个动态面板正在被拖动时。

●结束拖动时（OnDragDrop）：当一个拖动动作结束时。

●向左拖动结束时（OnSwipeLeft）：当一个面板向左拖动结束时。

●向右拖动结束时（OnSwipeRight）：当一个面板向右拖动结束时。

●载入时（OnLoad）：当动态面板从一个页面的加载中载入时。

●滚动时（OnScroll）：当一个有滚动栏的面板上下滚动时。

●改变大小时（OnResize）：当一个面板通过交互改变大小时。注意，如果动态面板属性中勾选了“调整大小以适合内容”，那么面板状态会自动调整大小。

1.4.2 用例（Cases）

通过图87和图88的模型，你应该已经对用例有所了解了。用例是用户与应用程序或网站之间交互流程的抽象表达，每个用例中可以封装一个独立的路径。通常情况下，我们让原型按主路径执行动作，但是为了响应用户的不同操作或其他一些条件，我们还需要制作可选路径来执行其他动作。举例来说，当用户点击超链接时，可能有一个打开新页面的用例。或者点击登录按钮时，可能有两个用例：如果登录成功就打开一个新页面，如果登录失败就显示提示错误信息。由此可见，使用Axure中的用例，可以用来给同一个任务创建不同的路径。

如果通过上面的描述依然对用例没有清晰的认识，下面这张图一定能帮你加深印象，见图89。

图89

用例通常用于以下两种方式。

●每个交互事件中只包含一个用例，用例中可以有一个或多个动作，不包含条件逻辑。

●每个交互事件中包含多个用例，每个用例中又包含一个或多个动作。包含条件逻辑或者手动选择需要执行的交互。

概括来讲，Axure中的用例基本上就是动作（Actions）的容器，可以帮助我们构建模拟原型中的替代途径。我们制作的原型保真度越高，用到的多用例交互也就越多。

添加用例（Adding Cases）：在设计区域中选中部件，在部件交互和注释面板中可以看到该部件可用的事件。要添加用例，可以双击选中的事件或者点击“新增用例”。在弹出的用例编辑器对话框中，你可以选择并设置你想要执行的动作。

用例编辑器（Case Editor）：

见图90，打开用例编辑器后，

图90

●第一步：用例说明。你可以编辑用例说明，这里的说明会显示在用例名称中。

●第二步：新增动作。点击鼠标新增动作，这里可以新增多个动作。

●第三步：组织动作。这里会显示你所添加的动作，每个动作都可以添加多次。动作是按自上至下顺序执行的。比如，你添加的设置变量值在 “打开新页面”之后，那么浏览器会先执行打开页面，然后再执行设置变量值的动作。这里的动作顺序是可以调整的，使用鼠标拖拽或者在点击每个动作右侧的小三角（右键点击也可以）选择蓝色小箭头，可以调整动作上移或下移。

●第四步：配置动作。选择动作后，可以对动作进行详细的设置。完成之后，点击“确定”按钮，用例和动作就会出现在部件交互和注释面板中了。

1.4.3 动作（Actions）

动作是由用例定义的对事件的响应。做个最简单的说明：点击按钮在当前页面打开窗口。这个用例中的动作是“在当前窗口打开页面”。

Axure RP7当前支持以下6组动作。

·链接 ·部件 ·动态面板

·变量 ·中继器 ·杂项

Tips

变量、自定义事件和中继器动作我们将在高级交互一章中给大家讲解。

下面是Axure RP7中所有可用的动作。

打开链接（Open Link）

●当前窗口（Current Window）：在当前窗口打开页面或外部链接。

●新窗口/新标签（New Window/Tab）：在新窗口或新标签中打开页面或外部链接。

●弹出窗口（Popup Window）：在弹出窗口中打开页面或外部链接，你可以定义弹出窗口的属性和位置。

●父窗口（Parent Window）：在父窗口中打开页面或外部链接。

●关闭窗口（Close Window）：关闭当前窗口。

●在内部框架中打开链接（Open Link in Inline Frame）：在内部框架中加载页面或外部链接。

●在父框架中打开链接（Open Link in Parent Frame）：在父框架中打开页面或外部链接，用于在内部框架中加载页面。

●滚动到部件（锚点链接）（Scroll to Widget ，Anchor Link）：滚动页面到部件位置。

部件（Widgets）

●显示（Show）：将隐藏的部件设置为显示（可见）。

●隐藏（Hide）：隐藏部件（不可见）。

●切换可见性（Toggle Visibility）：基于动态面板当前的可见性切换显示或隐藏。

●设置文本（Set Text）：改变部件上的文字。

●设置图片（Set Image）：改变图片。

●选中（Set Selected/Checked）：设置部件到其选中的状态。

●未选中（Not Selected）：设置部件到其未选中状态（默认状态）。

●切换选中（Toggle）：根据部件当前的选中状态切换选中/未选中。

●设置选定的列表项（Set Selected List Option）：设置下拉列表/列表选择框中的项为选中。

●启用（Enable）：设置部件为活动的/可选择的/默认的。

●禁用（Disable）：设置部件为禁用的/不可选择的。

●移动Move ：移动部件到特定坐标。

●置于顶层（Bring to Front）：将部件置于页面布局的顶层。

●置于底层（Send to Back）：将部件置于页面布局的底层。

●获取焦点（Set Focus on Widget）：设置光标聚焦在表单部件上（如文本输入框）。

●展开树节点（Expand Tree Node）：展开树部件的节点。

●收起树节点（Collapse Tree Node）：收起树部件的节点。

动态面板（Dynamic Panel）

●设置面板状态（Set Panel State）：显示动态面板指定的状态。

●设置面板尺寸（Set Panel Size）：改变动态面板的尺寸。

变量（Variables）

●设置变量值（Set Variable Value）：设置一个或多个变量或/和部件的值（例如，一个部件的文本值）。

中继器（Repeaters）

●新增排序（Add Sort）：使用查询对数据集中的项排序。

●移除排序（Remove Sort）：移除所有排序。

●新增过滤器（Add Filter）：使用查询过滤数据集中的项。

●移除过滤器（Remove Filter）：删除所有过滤器。

●设置当前页（SetCurrent Page）：使用分页时显示指定的页面。

●设置每页项目数（Set Items per Page）：使用分页时设置每页显示中继器项的数目。

数据集（Data Sets）

●新增行（Add Rows）：添加一行数据到数据集。

●标记行（Mark Rows）：选择数据集中的数据行。

●取消标记行（Unmark Rows）：取消选择数据行。

●更新行（Update Rows）：编辑数据集中选中的行。

●删除行（Delete Rows）：删除选中的行。

杂项（Miscellaneous）

●等待（Wait Time （ms））：按指定时间延迟动作，1秒=1000毫秒。

●其他（Other）：在弹出窗口中显示文字描述。

使用多个用例（Defining Multiple Cases）

有些情况下，一个事件会执行多个用例。要在事件上添加多个用例，重复添加即可。你可以使用用例说明来描述用例的使用场景。比如，当点击一个按钮时，你添加两个用例，一个用例描述是“如果登录成功”，另一个用例描述是“如果登录失败”。在生成的原型中，点击按钮会显示用例描述，可以选择执行哪一个。

良好的用例说明可以将条件流程清晰地表达出来，这样也利于维护和更新。如果想让原型将用例正确地表达出来，在用例中定义条件逻辑来表达基于存储在变量中的值，或用户在原型中输入的值。

1.4.4 交互基础案例

1. 导航菜单样式

在我们只做网站原型的项目中，最常见的用户体验效果就是通过全局导航菜单清晰地反应出当前用户是在哪个页面。在这个简单的小案例中，我们的目标是：当页面加载时，全局导航菜单的样式会发生改变，反映出当前是哪个页面。现在，我们就来趁热打铁，利用前面刚刚讲过的内容，实现我们想要的效果，可以这样描述。

●什么时候（When）：页面加载时。

●在哪里（Where）：全局导航菜单。

●做什么（What）：改变相应菜单的样式，反应当前所处的页面。

●条件逻辑（Condition Logic）：无。

在这个案例中，要实现“做什么”这一步，也就是改变相应的样式的实现方法不只一种。事实上，使用Axure制作大多数交互的方法都不只一种。随着你对Axure这款软件不断熟悉，你的思维会更加灵敏、缜密，也会逐渐掌握这些不同的实现方法。

因为我们目前还没有详细讲解母版的使用，所以这个案例就使用动态面板来扮演内容部分。根据上面的案例描述，在页面第一次加载时，显示的是首页，所以全局导航菜单中首页这个标签是被选中的（我们只需要给全局导航菜单的每一个标签添加选中时的交互样式即可）。当用户点击其他标签时，动态面板的状态转换至与标签相应的内容，并且设置当前点击的标签为选中状态，其他为未选中。详细流程如下，见图91。

图91

01 选择导航中的首页（B）；在部件属性面板中点击选中，在弹出的设置交互样式对话框中设置选中时的字体颜色，点击“确定”，见图92；给导航中的其他几个菜单重复这个操作。

图92

Tips

可以复制首页，然后改变文字内容即可，因为选中时的交互样式也会被复制到新的部件上。

02 当用户点击首页时：设置动态面板状态为Cakeshop-01 Homepage，见图93；设置首页选中为真（true），商店、博客、联系我们为假（false），养成良好的习惯，给该用例命名，见图94。

图93

图94

03 对其他标签进行相应的操作。在制作原型的过程中，经常要把之前做好的用例使用到其他部件上，这种情况下只需右键点击该用例，选择“复制”，然后选中目标部件，并右键点击相应的事件选择“粘贴”即可，你也可以使用常规的复制和粘贴快捷键（Ctrl+c， Ctrl+v）。需要注意的是，粘贴用例后要检查用例中的动作是否需要修改，避免造成错误。

04 现在，我们就来复制首页中刚刚写好的用例，见图95。然后，选择导航中的菜单部件，右键点击部件交互面板中的“鼠标点击时”事件，选择粘贴，见图96。