Axure高级互动设计1—设定逻辑条件‹‹ dboy~小真の365天

设定逻辑条件
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的高级互动设计技巧,却一定要有清楚的逻辑观念。否则,不只造成网站开发工作上的困扰,更严重的还会造成糟糕的网站使用者经验。只有清楚的逻辑观念,才能带来准确合理的互动设计

如果您不想学这些高级互动设计技巧,{jd1}无损于您利用 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透过三个不同的功能视窗,来协助使用者设定变数以及逻辑判断,这些功能视窗包括:

* (互动设计)
* (互动状况设定器)
* 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只会执行{dy}个标示为”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)


( 暂无评分,邀请您{dy}个打分哦 )


郑重声明:资讯 【Axure高级互动设计1—设定逻辑条件‹‹ dboy~小真の365天】由 发布,版权归原作者及其所在单位,其原创性以及文中陈述文字和内容未经(企业库qiyeku.com)证实,请读者仅作参考,并请自行核实相关内容。若本文有侵犯到您的版权, 请你提供相关证明及申请并与我们联系(qiyeku # qq.com)或【在线投诉】,我们审核后将会尽快处理。
—— 相关资讯 ——