第三节:交互设计(Interactions):轻轻松松学会Axure-【产品经理必备教程】

1.交互(Interaction)

注释与交互面板中的交互窗格是用来定义组件在主操作区中的交互表现方式,交互表现的方式包含简单的连结到Rich Internet Application (RIA)的复杂行为,而且这些交互表现都可以在原型中执行。

触发事件(Event)、假设条件(Case)、动作型态(Action)

在Axure RP中的交互设计是由触发事件、假设条件与动作型态所组成。用户对网页进行某些人机界面的操作时,就会对网页或某个特定的对象(如组件)触发一个事件(Event)。每一个触发事件都可以有一个或多个假设条件(Case),例如,一个按钮的OnClick 触发事件可以有两个假设条件:其中一个链接至某个网页,另一个则链接至另一个网页。而每一个假设条件(Case)又可以执行一个或多个动作型态(Action),举例来说:在当前窗口打开链接的动作就是一个基本事件。

触发事件(Event):目前Axure RP支持的人机界面触发事件,及相对应的触发事件如下:

以鼠标点击 – OnClick
鼠标的指针移动到对象之上 – OnMouseEnter
鼠标的指针移动出对象之外 – OnMouseOut
鼠标的指针进入文字输入状态 – OnFocus
鼠标的指针离开文字输入状态 – OnLostFocus
选项值变化—OnChange
敲键盘 – OnKeyUp
加载页面 – OnPageLoad
大多数的对象,只具备最常见的三种触发事件: OnClick、OnMouseEnter 与OnMouseOut。某些特定的组件可触发事件有些不同:

按钮组件只有OnClick。
单选框和复选框则具有OnFocus / OnLostFocus 触发事件。
单行文本框和多行文本框则有 OnKeyUp / OnFocus / OnLostFocus 触发事件。
下拉列表框和列表框则有 OnChange / OnFocus / OnLostFocus 触发事件。
页面加载时则只有 OnPageLoad触发事件。
2.定义基本链接
AxureRP1
上图就是在OnClick事件下添加了两个建设条件,条件1的动作型态是关闭当前窗口,条件2的动作型态是生效某个组件。一般添加一个完整的事件需要如下几个步骤

步骤一:指定对象,如选中一个按钮组件。触发事件都是依赖与组件的,不需要去记住每个组件都有什么事件可触发,组件添加后就自动带出该组件所支持的触发事件了。

步骤二:选择触发事件,在左侧的交互窗格中选择需要使用的触发事件,如选择OnClick。

步骤三:点击“添加事件”新增假设条件,这时会出现交互事件属性对话窗,可以在此处设置动作执行的条件以及选择想要执行的动作,假设条件可以设置多个,按顺序执行,每个条件都需要选择执行的动作。

步骤四:选择动作型态,在交互事件属性对话窗的第二步—选择动作,勾选所需要的动作型态,第一步是描述假设条件,也可以添加动作执行的条件,不是必选的;第三步是描述动作的,会自动带出内容。

步骤五:编辑实际选择好的动作,在交互事件属性窗口下方,即第三步的编辑窗口处,并选择实际执行动作时要达到的效果即可。
AxureRP2

3.动作型态(Action)及实际动作(Action Description)

Axure RP提供了许多的动作型态,这些动作都可以在任何触发事件的假设条件中被执行。可以同时指定一种/多种动作型态之后,接着定义实际动作,这样子才能完成展现在原型上的一个/多个实际动作。以下是 Axure RP 5.5版所提供的动作型态:

  1. Open link in Current Window 在当前窗口打开链接
  2. Open link in Popup Window 在弹出窗口打开链接
  3. Open link in Parent Window 在父窗口打开链接
  4. Close Current Window 关闭当前窗口
  5. Open link in Frame 在框架中打开链接
  6. Set Panel state(s) to State(s) 设置动态面板的状态转换
  7. Show Panel(s) 显示动态面板
  8. Hide Panel(s) 隐藏动态面板
  9. Toggle Visibitdty for Panel(s) 切换动态面板的可见属性
  10. Move Panel(s) 移动动态面板
  11. Bring Panel to Front 将动态面板置前
  12. Set Variable and Widget value(s) equal to Value(s) 设定变量或组件的值
  13. Open link in Parent Frame 在父框架中打开链接
  14. Scroll to Image Map Region 滚动到图片映射区域
  15. Enable Widget(s) 启用组件
  16. Disable Widget(s) 禁用组件
  17. Wait Time(s) 等待时间(毫秒)
  18. Expand Tree Node 展开树节点
  19. Collapse Tree Node 折叠树节点
  20. Other 以文字说明来描述实际动作

4.多重假设条件

前面说过一个触发事件可以加入多个假设条件,以进行不同条件判断的差异化流程或交互表现。举例来说,可以在一个按钮的OnClick触发事件中加入两个假设条件,第一个假设条件 Case 1 命名为 “If Yes”,选择这个假设条件时会开启第一页;第二个假设条件 Case 2 命名为 “If No”,选择这个假设条件时会开启第二页。当按纽在原型中被按下时,会显示出这两个条件的说明(If Yes与If No),此时点选其中一个条件的说明,就会执行该条件所关联的动作。使用条件说明可以有效展示条件流程,但是,如果需要建立一个高亲合力的原型,则必需在条件中定义条件逻辑,根据在组件中输入的值或变量值来执行动作。

5.页面的交互: OnPageLoad

Axure RP支持一个页面级的触发事件-OnPageLoad,这个触发事件发生在页面载入时。

OnPageLoad交互必须在页面注释与交互面板的交互窗格中定义,使用方式与在组件的相同。