Axure高级互动设计1—设定逻辑条件

设定逻辑条件
1. 认识Condition (逻辑判断)
2. 认识Condition Builder (逻辑判断编辑器)
3. 用Condition Builder建立逻辑判断
4. 秘技(Quick Tips)

1. 认识Condition (逻辑判断)
虽然可以用文字来描述Prototype操作的动线或互动方式,但有的时候,您还是会需要一个更逼真(High Fidelity)、更互动、更有亲和力的Prototype 。比如,当您在操作Prototype,模拟会员登入帐号,如果能在按下登入按钮时,直接显示登入成功或失败的讯息。是不是比您口头解说或文字描述,还要来得清楚明白呢?
在Axure RP的互动设计中,「逻辑判断」是最有挑战性,但是也最有趣的一件事情。因为当您在设计网站Prototype时,可以不用寻求程式设计师或Flash设计师的协助,就可以独立完成您想要表达的互动效果。
清楚的逻辑观念胜过互动设计技巧
学习Axure RP的条件逻辑设计之前,您必须先知道一个重要的观念:
成为称职的网站企划人员,不一定要学会Axure RP的高级互动设计技巧,却一定要有清楚的逻辑观念。否则,不只造成网站开发工作上的困扰,更严重的还会造成糟糕的网站使用者经验。只有清楚的逻辑观念,才能带来准确合理的互动设计

如果您不想学这些高级互动设计技巧,绝对无损于您利用 Axure RP进行网站企划及Prototype 设计。换言之,即使您学会Axure RP的高级互动设计,但是您的逻辑观念如果不清楚,仍然无法成为一位优秀的网站企划。
要是您希望将Prototype拿来进行 Usability Test,或者在各种沟通讨论会议上,让大家更充分理解操作的互动效果,那么透过Axure RP提供的逻辑判断设定,可以让Prototype更进一步接近真实完成的网站介面与动线。
物件值(Value of Widget) / 变数值(Value of Variable)
接下来,您要学习使用变数值/物件值,这两种类型的数值应用于逻辑判断:

a. 物件值(Value of Widget) - 使用Widget本身的值来进行逻辑判断,有4种不同的数值可供应用:
* Checkbox或Radio Button的核取状态
* Droplist 或 Listbox的选取值
* Text Field或Text Area中的文字
* Text Field或Text Area的文字的长度
b. 变数值(Value of Variable) - 使用自定变数的值来进行逻辑判断,有2种:
* value of variable - 自定变数的值
* length of variable value - 自定变数值的长度
附带补充,Axure RP本身存在一个全域预设变数(Global Default Variable) - OnLoadVariable,除此之外,变数名称可以自订,最多可以有25个自订变数。您可以透过主选单Wireframe > Manage Variables来检视并编辑所有的自订变数。

您可以在Prototype设计里,将物件值及变数值的逻辑判断加入互动设计,在操作Prototype时,将会根据Web Form Widget所输入的数值,或是变数的值来进行判断。比如,当使用者登入帐号时,自动检查输入的帐号或密码,登入成功则导到欢迎页面,登入失败则显示错误讯息。
表单型态的物件 (Web Form Widgets)
由于逻辑判断牵涉到不同物件值的判断,因此经常与表单型态的物件结合运用。 Axure RP的表单型态的物件(Web Form Widgets) 如下图。

Axure Web Form Widget 表單型態的物件

2. 认识Condition Builder (逻辑判断编辑器)
如果您具有程式设计的基础,要学习 Axure RP的变数或逻辑判断,一点都不困难。毕竟Axure RP不是程式开发工具,并没有太多的程式语言要学习。
为了让没有程式设计基础的 Axure RP使用者也可以设计逻辑判断,因此Axure RP透过三个不同的功能视窗,来协助使用者设定变数以及逻辑判断,这些功能视窗包括:

Annotation and Interactions (互动设计)
Interaction Case Properties (互动状况设定器)
* Condition Builder (逻辑判断编辑器)
这三个功能视窗的关连及开启顺序如下图:
为了让没有程式设计基础的Axure RP使用者也可以设计逻辑判断,因此Axure RP透过三个不同的功能视窗,来协助使用者设定变数以及逻辑判断,这些功能视窗包括:

Axure RP: Annotation and Interactions 互動設計窗格 - Interaction Case  Properties (互動狀況設定器)- Condition Builder (邏輯判斷編輯器)

其中,Annotation and Interactions,以及,Interaction Case Properties,这二个视窗在学习初级互动设计就使用到了。只有Condition Builder对话窗对于学习高级互动设计的人是陌生的,我们就来认识一下这个特殊的功能。
Condition Builder逻辑判断编辑器的操作介面
Condition Builder是用来设定逻辑判断的工具,只要透过下拉选单及一些按键,就可以完成一长串复杂的逻辑判断叙述,不需记忆,也不用自行撰写逻辑判断程式。
您可以在Interactions Case Properties视窗的右上角,点一下Add Condition (或Edit Condition)的文字连结,就会开启「Condition Builder」视窗。
在「Condition Builder」视窗中,可以建立一行或多行的逻辑判断,只要按下右方的「 」钮,就可以增加一行,按下「-」钮,则会移除一行。
如果所有的逻辑判断都必须满足, 可以在「Satisfy」下拉选单中选择「Satisfy all of the following」,就会以”and”来连结各个逻辑判断;若是选择「any」,则会以”or ” 来连结。

Axure Condition Builder視窗

在逻辑判断中,检查值共有六种型态:
* check state of - Checkbox或Radio Button Widget的核取状态
* selected option of - Droplist 或Listbox Widget的选取值
* value of variable - 自定变数的值
* length of variable value - 自定变数值的长度
* text on widget - 输入在Text Field或Text Area中的文字
* length of widget value - 输入在Text Field或Text Area中的文字长度
3. 以Condition Builder建立逻辑判断
您可以自行建立一个Case的逻辑判断,比如:
If text on Widget 帐号栏位equals ‘guest’ and text on Widget 密码栏位equals ‘12345′ “
(如果「帐号栏位」输入的是’guest’,而且「密码栏位」输入的是“12345”)
这个逻辑判断将会在您操作Prototype时,自动判断是否要执行Case所指定的动作。
完成逻辑判断的设定之后,按下【OK】钮回到「Interaction Case Properties」视窗,就能指定当符合这个Case的逻辑判断时,要执行哪些动作。
注意:当您增加Case的逻辑判断,Interactions窗格中的Case名称后面会自动加入一个以“If” 开头的逻辑判断描述。同时,这个Case的图示会变成绿色,强调这个 Case使用了逻辑判断。

Axure Interaction .Click Conditional Logic 條件判斷的設定

一旦在 Case中定义了逻辑判断,同一个触发事件的其他Case名称后面,也会自动加入以“Else If” 开头的逻辑判断描述。如果这些Case没有另外设定逻辑判断的话,那么就会直接标示“Else If True”。
在预设的情况下,Prototype只会执行第一个标示为”True” 的Case。

Axure Interaction .Click Conditional Logic 條件判斷ElseIf的設定

在Interactions 窗格中的案例上按下右键并选择「Change to IF」,可以将“Else If” 改为“If” ,这么做将可允许在多个状况同时成立的情况下执行多个动作。
4. 秘技 Quick Tips
秘技 1. 为Widget命名:
为逻辑判断使用到的Widget命名,可以方便在建立逻辑判断时做识别。想要替Widget命名的话,只要选择Widget 并在Annotations & Interactions 窗格中的「Label」栏位输入名称就可以了。
秘技 2. 绘制流程图:
逻辑判断和流程可以设计得十分复杂,建立一个流程图 (Flowchart)可以帮助您组织与传达使用者可能涉及的各种动线。
(版权声明:欢迎引用及复制Axure RP 中文教学内容,必须注明出处为悠识数位顾问有限公司及原始文章网址UserXper.com)

你可能还会喜欢以下内容


为什么不留下您的观点?分享创造价值!您说呢?
想要有个性的头像, 到gravatar这里申请!

Google Reader Twitter Flickr Picasa Web Albums 豆瓣 校内网 Friendfeed Friendfeed 5G Feedsky