Axure初级交互设计.doc

1. 交互(Interaction)
Interactions窗格是用来定义Widget在Wireframe中的交互表现方式，交互表现的方式包含简单的连结到Rich Internet Application (RIA)的复杂行为，而且这些交互表现都可以在Prototype中执行。

触发事件(Event)、假设条件(Case)、动作型态(Action)
在Axure RP中的交互设计是由触发事件(Event)、假设条件(Case)与动作型态(Action)所组成。
当使用者对网页进行某些人机介面的操作时，就会对网页触发一个事件(Event)。
每一个触发事件都可以有一或多个假设条件(Case)，例如，一个按钮的OnClick 触发事件可以有两个假设条件：其中一个导引至某个网页，另一个则导引至另一个网页 。
而每一个假设条件(Case)又可以执行一或多个动作型态(Action)，举例来说：「Open Link in Current Window」的动作就是一个基本连结。
触发事件(Event)
目前Axure RP 5支持的人机介面触发事件，及相对应的触发事件(Event)名称如下：
· 以鼠标点击 – OnClick
· 鼠标的指针移动到对象之上 – OnMouseEnter
· 鼠标的指针移动出对象之外 – OnMouseOut
· 鼠标的指针进入文字输入状态 – OnFocus
· 鼠标的指针离开文字输入状态 – OnLostFocus
· 敲键盘 – OnKeyUp
· 浏览器加载网页 – OnPageLoad
大多数的对象，只具备最常见的三种触发事件(Event) – OnClick、OnMouseEnter 与OnMouseOut。
某些特定的Widget的可触发事件有些不同：
· Button对象只有OnClick。
· Radio Button，CheckBox 这2种对象则具有OnFocus / OnLostFocus 触发事件。
· Text Field，Text Area这2种对象则具备 OnKeyUp / OnFocus / OnLostFocus 触发事件。
· Droplist，List Box这2种对象则具备 OnChange / OnFocus / OnLostFocus 触发事件。
· 网页加载浏览器时，则有 OnPageLoad触发事件。(请参考5. 网页层级的交互: OnPageLoad)
您不需要硬背上述的对象及对应的Event，在Axure RP的操作介面上，您只要点选对象，就可以查看Interaction窗格所显示的对应Event。

2. 定义基本连结
下列步骤说明如何新增一个基本连结到Button Widget。
加入基本连结最快的方法就是按一下Interactions窗格中的「Quick Link」，弹出Sitemap窗格的网页清单后，你可以为选定的对象(Widget)指定连结到哪一个网页。
如果不是透过Quick Link的话，那么请按照下列步骤(对照下图) 进行交互的设定。
步骤一：指定对象
于画布中放置一个Button Widget并选取它。
步骤二：新增假设条件(Add Case)
在 Interactions窗格中选择OnClick ，并点选「Add Case」 (或在OnClick上连续按鼠标左键两下)以增加一个假设条件(Case)到按钮的OnClick触发事件，这时会出现「Interaction Case Properties」对话窗，您可以在此处选择想要执行的动作。
步骤三：选择动作型态(Select Action)
在Interaction Case Properties对话窗的Step 2. Select Actions，勾选「Open Link in Current Window」这个动作型态。
步骤四：编辑实际动作(Edit Action Description)
按一下Interaction Case Properties对话窗的下方，step 3 的』Link』 ，并选择实际执行动作时要开启的网页。

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

除了基本连结之外，Axure RP还提供了许多的动作型态，这些动作都可以在任何触发事件的假设条件中被执行。
你可以同时指定一种/多种动作型态(Action)之后，接着定义实际动作(Action Description)，这样子才能完成展现在Prototype上的一个/多个实际动作。
以下是 Axure RP 5.0版所提供的动作型态 (Action)：
1. Open link in Current Window
开启网页
2. Open link in Popup Window
开启网页在Popup窗口
3. Open link in Parent Window
开启网页在Parent窗口
4. Close Current Window
关闭目前窗口
5. Open link in Frame
开启网页在inline frame中
6. Set Panel state(s) to State(s)
指定某个Dynamic Panel的显示状态
7. Show Panel(s)
显示Dynamic Panel
8. Hide Panel(s)
隐藏Dynamic Panel
9. Toggle Visibitdty for Panel(s)
切换Dynamic Panel显示或隐藏
10. Move Panel(s)
移动Dynamic Panel
11. Set Variable and Widget value(s) equal to Value(s)
设定变量或Widget 的值
12. Open link in Parent Frame
开启网页在上层内嵌框架中
13. Scroll to Image Map Region
卷动画面到Image Map的位置
14. Enable Widget(s)
把Widgets变成可用状态
15. Disable Widget(s)
把Widgets变成变成不可用状态
16. Wait Time(s)
动作之前先等候(毫秒)
17. Other
以文字说明来描述实际动作

4. 多重假设条件(Multiple Cases)
一个触发事件(Event)可以加入多个假设条件(Multiple Cases)，以进行不同条件判断的差异化流程或交互表现。
举例来说，您可以在一个按钮的OnClick触发事件中加入两个假设条件，第一个假设条件 Case 1 命名为 “If Yes』，选择这个假设条件时会开启第一页；第二个假设条件 Case 2 命名为 『If No』，选择这个假设条件时会开启第二页。
当按纽在Prototype中被按下时，会显示出这两个条件的说明(『If Yes』 与』If No』)，此时点选其中一个条件的说明，就会执行该条件所关连的动作。
使用条件说明可以有效沟通条件流程，但是，如果需要建立一个高亲合力的Prototype，则必需在条件中定义条件逻辑，根据在窗体Widget中输入的值或变量值来执行动作，这个主题将会在第六章高级交互设计做深入的说明。

5. 网页层级的交互: OnPageLoad
Axure RP支持一个网页层级的触发事件(Event)-OnPageLoad，这个触发事件发生在Prototype载入网页时。
OnPageLoad 交互必须在Page Notes 窗格的Interactions 窗格中定义，加入假设条件的方式与在Widget中相同。
OnPageLoad 触发事件(Event)会在OnPageLoad Event的介绍中做深入的说明。

6. 秘技(Quick Tips)
秘技一. 快速连结(Quick Link)
选择 Widget ，然后按一下Interactions 窗格中的「Quick Link」并选择目标网页，可以快速地在Widget中加入一个基本连结。
秘技二. 连结外部实际网址或网页
你可以让prototype的hyperlink动作去连结到外部的实际网址或网页。
如果使用Axure RP 5.0版
在「Link Properties」对话框中指定网页连结的时候，勾选「Link to an external url or file」选项，然后在「Hyperlink」字段指定一个外部实际网址的URL。
如果使用Axure RP 4.6版
在「Link Properties」对话框中指定网页连结的时候，取消勾选「Link to a page in this design」选项，然后在「Hyperlink」字段指定一个外部实际网址的URL。
秘技三. 重复应用类似的交互设计
如果你要进行一连串类似的交互设定，可以在Interaction窗格上，对着某个Case按鼠标右键选择』Copy』的动作，然后到你想加上交互设定的另一个Case，以鼠标右键选』Paste』动作，然后再修改这个新的交互设定。如此一来，就可以更快速的完成对象的交互设定。

(版权声明：欢迎引用及复制Axure RP 中文教学内容，必须注明出处为悠识数位顾问有限公司及原始文章网址 UserX)