Axure高级互动设计1——示范: 登入的逻辑判断
以旅游网站的企划 (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」视窗中，您可以使用下拉选单建立如下的逻辑判断：
当您在设定时，下方的Descritpion区块会自动产生逻辑判断的描述：
If text on widget Username Field equals “UserXper”
and text on widget Password Field equals “12345”
（如果「Username Field」输入的是“UserXper”，而且「Password Field」输入的是“12345”）。
4) 选择Action：按下「Condition Builder」视窗的【OK】钮，回到「Interaction Case Properties」，再选择当符合这个逻辑判断时，所要执行的动作。比如：导回网站首页、显示招呼语，登入的文字连结变为登出。
当您设定了Case的逻辑判断，您会发现 Interactions窗格中的Case名称后面会自动加入一个以“If” 开头的逻辑判断描述。同时，这个Case的图示会变成绿色，强调这个 Case使用了逻辑判断。
Axure RP Interactions De.ion
最后，实际完成的Prototype互动设计如下图动画：
如果您想要进一步了解这个示范内容的详细设定，请下载：Axure RP Prototype范例-旅游网站RP档1M bytes (下载后请解压缩)。
没有评论▼