Axure初中高级交互实例

连结。

在逻辑判断中，检查值共有六种型态：

* 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使用了逻辑判断。

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

在预设的情况下，Prototype只会执行第一个标示为”True” 的Case。

在Interactions 窗格中的案例上按下右键并选择「Change to IF」，可以将“Else If” 改为“If” ，这么做将可允许在多个状况同时成立的情况下执行多个动作。 4. 秘技 Quick Tips 秘技 1. 为Widget命名：

为逻辑判断使用到的Widget命名，可以方便在建立逻辑判断时做识别。想要替Widget命名的话，只要选择Widget 并在Annotations & Interactions 窗格中的「Label」栏位输入名称就可以了。 秘技 2. 绘制流程图：

逻辑判断和流程可以设计得十分复杂，建立一个流程图 (Flowchart)可以帮助您组织与传达使用者可能涉及的各种动线。

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

Axure高级互动设计2——示范: 登入的逻辑判断

逻辑判断示范

以旅游网站的企划 (http://userxper.com/blog/archives/36 ) 为例，说明「会员登入页面」如何应用Condition Builder建立逻辑判断。

这个会员登入要做到的功能是：如果登入成功（即帐号、密码输入正确），则导回首页，并显示招呼讯息。如果登入失败（即帐号、密码输入不正确），则出现错误讯息。

来到旅游网站Prototype的「范例2-进阶版首页」，点一下”登入”按钮，就进入会员登入的页面。设计以下两种登入的操作状况： 状况1 输入错误的密码：出现登入错误的讯息。

状况2 输入正确的密码：登入成功之后，立即导回首页，并显示招呼讯息，同时将登入的文字连结变成登出。

您可以用Axure RP绘制流程图(如下图)，来解释这个功能设计的逻辑判断。

接下来，开始设计页面的操作互动：

1) Widget命名：针对操作相关的栏位、按钮、动态面板，在Interactions窗格的Label一一填入名称，以利后续的设定识别。

2) 新增Case：针对”登入”这个Button Widget，在Interactions窗格中新增OnClick (点击时触发) 的Case，并在「Interaction Case Properties」视窗中点一下「Add Condition?」连结。

3) 设定Condition：在开启的「Condition Builder」视窗中，您可以使用下拉选单建立如下的逻辑判断：