AxureRP教程–使用条件判断

AxureRP在设计交互效果的时候,提供了条件判断的功能,即根据不同的条件要求完成不同的交互效果,但AxureRP的条件判断并不需要通过写代码来实现,全部都可以通过手动设置的方式完成,浅显易懂,降低了学习的门槛。

条件判断应用的地方很多,需要在不同的情况下展示不同效果的地方都会用到,前面所举的例子当中也用到了一些条件判断。条件判断的设置是在交互事件窗口的第一步编辑条件中的条件设置框当中设置的,如下图所示,可以按与(即and 所有)或(即or 任意)两种模式,可以判断变量的值,变量值的长度,组件中的文本,组件值的长度,面板状态,面板可见状态的变化,可见AxureRP对条件的支持还是比较丰富的,把一些常用的判断几乎全部囊括进来了。

下面举例说明条件判断的使用。最常见到的就是登陆时候的用户名密码判断,第一个例子就是模拟用户登陆时的验证过程,用户输入正确的用户名和密码时提示验证通过,只要其中有一项输入错误就提示需要重新输入验证。

界面设计比较简单,设置一个最普通的界面,需要注意的是用户名和密码输入框默认设置的带提示的,这就需要设置一个OnFocus事件来使输入状态下清空的功能,这里其实就用到条件判断了,判断当前输入框的内容是否等于提示信息,若相等则清空。另外单行文本框还有一个加密显示功能,在右键菜单—编辑文本框—遮罩文本(密码输入)设置,这样在输入密码的时候就会全部显示成点,这里为了方便提示,没用使用这个功能。最后在下面加一个提示文本块,用来提示是否验证通过。

界面设置好后,设置登录按钮的OnClick事件,判断如果用户名密码正确则提示验证通过,在设置的时候选择组件中的文本等于值的形式,这里用户名为admin,密码为123456,用户名密码分开判断,需要两条记录,点后面的加号就可以新增一条记录,减号则删除一条记录。另外还需要给提示文本块赋值,即提示信息。

第2个例子是模仿开心网的发表观点功能,玩过开心网的朋友都知道,开心网的提供了观点发表功能,每发表一条观点,就会在观点区添加一个显示块,第2个例子就是模拟实现这个效果,当然没有法有那么好的效果,只是一种实现方式,如下图所示:

实现原理是这样,在上方预先放置几个文本块,然后将下方评论输入框里的内容显示到文本块中,这里文本块是编了序号的,对应到评论提交的次序,因此还需要有一个变量来控制提交次数,即做计数用,提交成功三次后,三个文本块内都已显示提交的内容,此时再提交的时候就需要提示已超过次数,并在3秒后刷新页面,这样原来的数据就被清空了,可以重新填写。

需要注意的就是中间变量计数器的判断,根据计数的多少来判断是否可以再次提交,且在显示内容的过程中也利用变量来传递值,因此这个例子是变量和条件判断都同时使用了,这两者基本上会成对出现,很多地方都会应用到变量,而变量也会经常用于做条件判断。

这里还需要说明的是,一般条件判断有IF….ELSE和IF…ELSE IF….ELSE这样两种形式,AxureRP是没有后面的ELSE的,因此需要在前面将大部分条件考虑充分,一个事件里面需要有多个判断条件时,AxureRP默认会将它们认为是一个条件组合,也即IF…ELSE IF….ELSE的模式,可以手动更改为IF….ELSE的模式,那就是在条件在右击,在菜单上选择变更为IF或者变更为ELSE IF。

示例在AxureRP5.5版本下调试通过

点此查看演示

点此下载源文件



无觅相关文章插件,快速提升流量

评论已关闭!