基本交互概述
时长:
指导老师:Axure官网
困难程度:容易
本文对原型交互进行简单概述,将学习如何创建页面链接和如何在一个交互中设置多个事件。这是关于在Axure RP构建交互两篇系列文章中的第一篇。
交互概述
在线框图原型中可以加入各种各样的页面交互,例如:基本页面链接、动态的“AJAX”交互行为、逻辑条件和数学函数。
原型交互设计的制作程度,取决于使用者和原型要达成的目的。有时可能只需要一个快速链接,但如果你要进行用户测试,就需要花费更多的时间让原型交互效果能够更接近最终应用。在制作更多的更复杂的交互效果之前,建议想一想这些效果是不是真的需要。当然,也有可能有时制作完整的交互效果只是因为喜欢。
事件
事件触发的交互。例如,点击,鼠标移动,拖拽等。不同的部件响应不同的事件。
下面的列表是Axure RP部件的所有事件:
OnClick: 当组件被点击时(除了动态面板以外的所有组件)
OnMouseEnter: 当鼠标移入组件时 (图片,文本面板,超链接,按钮形状和图片热区)
OnMouseOut: 当鼠标从组件移出时 (图片,文本面板,超链接,按钮形状和图片热区)
OnKeyUp: 当键盘在组件内被激活,开始输入时(文本框和文本编辑框)
OnFocus: 当因点击或光标移动,部件获取焦点时When a form widget get focus by clicking or tabbing in (文本框, 文本编辑框,下拉选单,列表框,复选框和单选按钮)
OnLostFocus: 当部件失去焦点时(文本框, 文本编辑框,下拉选单,列表框,复选框和单选按钮)
OnChange: 当下拉选单或列表框的某一选项被选中时
动态面板的特定事件:
OnMove,
OnShow,
OnHide,
OnPanelStateChange,
OnDragStart,
onDrag,
OnDragDrop。在高级动态面板教程中会详细介绍以上特定事件。
用例
用例是响应某个事件的可能性路径。例如,点击超链接,可能是由一个用例来打开某个页面。或者点击登录按钮,会有两个用例来响应点击事件。如果登陆成功,打开一个页面;如果登陆失败,则显示错误信息。在Axure RP中,这些用例可以在原型中做为选项,或是根据字段值定义逻辑条件来自动执行需要的用例。
动作
动作是某个用例上事件的响应行为。以超链接为例:点击超链接,在当前窗口打开一个页面。用例中的这个动作是:“在当前窗口打开链接”。
以下是动作列表:
链接:
在当前窗口中打开链接: 在当前窗口中打开一个页面或链接到外部的URL或文件
在新窗口中打开链接: 在新窗口中打开一个页面或链接到外部的URL或文件
在弹出窗口中打开链接: 在弹出窗口中打开一个页面或链接到外部的URL或文件. 能够设置弹出窗口的尺寸和属性
在父窗口中打开链接: 通常用于在弹出窗口中改变其父窗口的载入页面.
关闭当前窗口: 关闭当前窗口.
在内部框架中打开链接: 使用内部框架部件让页面在内部框架内加载。
在父框架中打开链接: 父框架中打开一个页面。用于在内嵌框架中加载一个页面。
动态面板:
设置面板状态为指定状态: 设置一个或多个动态面板的当前可见状态
显示面板: 显示一个或多个动态面板的内容
隐藏面板: 隐藏一个或多个动态面板的内容
切换面板可见性: 根据动态面板当前的可见性,显示或隐藏动态面板
移动面板: 将动态面板移动到指定位置,或是指定距离
将面板置于顶层: 将动态面板设置到页面的最顶层
将面板置于底层:将动态面板设置到页面的最底层
部件和变量:
设置变量/部件值: 设置一个或多个变量/部件值(例如:文本框的值)
滚动窗口到图片热区: 滚动页面位置到图片热区部件处。类似于一个锚或跳转链接。
启用部件: 设置表单元素为可用,如:下拉选单、文本框
禁用部件: 设置表单元素为不可用
设置部件为选中状态: 将部件样式设为选中或回到其默认样式。
设置部件获取焦点: 将光标焦点设置到表单部件上 (例如:文本框)
展开树节点: 展开树节点
折叠树节点: 折叠树节点
杂项:
等待时间(毫秒): 设置动作延迟
其它(在弹出窗口中显示文字描述): 在弹出窗口中显示动作的文字描述,如“发送电子邮件用户”
编辑交互用例
添加交互

线框图窗口中选择一个部件,在部件属性窗口的交互标签项中,将显示选中部件可设置的事件。
添加用例:选择一个事件,点击“添加用例”,或双击事件,打开用例编辑器。用例编辑器能够选择、配置用例需要执行的动作。
用例编辑器顶部(
第1步:描述用例),编辑用例的文字描述。如果事件中有多个用例且未设置逻辑条件,用例描述会在该原型事件被响应时显示出来。
点击左边的动作列表(
第2步:添加动作)中的动作,可以为用例添加一个或多个动作
选择的动作会显示在中间的组织动作中(
第3步:组织动作)。可以重复添加一个动作。动作会按顺序响应,例如:如果你在“在当前窗口中打开链接”动作后面添加了“设置变量/部件值”,浏览器会先链接到下一页后再设置变量值。
鼠标拖动动作或点击动作旁边的向下按钮(或右键动作)选择向上或向下移动动作,能够重新对动作进行排序。
选择第3步中的动作,在右边的配置动作(
第4步:配置动作)中配置动作属性。
当全部设置完成,点击确定。在部件属性窗口将显示己设置的用例和动作。
设置多个用例
当一个事件中有多个场景来响应事件或用例时,可在事件中定义用例条件,重复步骤来添加用例。在描述用例步骤描述场景,例如:点击按钮,可以设置两个用例,一个用例描述为“当登陆成功”,另一个用例描述为“当登陆失败”。在生成的原型中,点击按钮后会显示两个用例的描述,用户可以根据需要执行相关动作。
对用例进行合适的描述,能够帮助原型维护和更新时的有效沟通。当用户需要原型来执行需要的案例时,可以在用例中,根据保存在变量中的值或登陆原型的用户来设置登陆条件。在Conditional Logic文章中学习更多逻辑条件的内容。