AxureRP教程–使用变量

AxureRP提供了自定义变量的功能,在设计过程中,可以借助一些变量来达到某些交互效果,也可以借助变量来做判断条件,使交互效果更加多样化。变量一般应用在需要记录某些动作的执行状态、页面显示状态或简单的计数功能,经常会用到的就是第一种,记录动作的执行状态,用来做标记,以使其他事件能够获取当前动作的执行结果。

变量能够被赋值,当然也能够被读取,且是公用的,不受页面不同的限制,使用过程当中设置会比较简单,需要注意的一是变量的命名,若是只有一个变量,当然不需要管,用默认的名称即可,但当变量多了的时候,好的命名就显得相当重要;二是需要记住变量的各个值所对应的结果或状态,不能搞混淆,特别也是变量比较多的时候,因此在有一个适当的名称后,还需尽量能使变量的赋值简单、容易记且统一,如都用1表示true,0表示false。下面介绍变量在实际设计当中的应用。

变量在交互事件属性里面设置,在第一步当中点编辑条件,下拉选择变量的值,系统默认会有一个名为OnLoadValiable的变量,可以自定义新增,这里是条件编辑页面,可以设置很多复杂的逻辑判断。交互事件里面也有一个与变量有关的动作,就是:设置变量和组件值的变化值,就是给变量或者组件赋值的操作,可以是赋常量,也可以是赋变量。下面会介绍两种变量的简单应用。

?

示例一演示变量的赋值传递操作。在页面上添加一个单行文本框,以及两个按钮,两个文本块组件。单行文本框作为输入载体,命名为“输入框”,一个文本块做说明,提示用户该输入什么,一个文本块什么都不写,空白的放在页面上,命名为“显示区”;一个按钮做提交操作,功能是若文本框里面没有内容,提交时提示用户需要输入,若文本框里有内容,则将内容显示在下方,且文本框内容不清空,一个按钮做重填控制,功能是清空文本框里面填写的内容。

这里涉及到了两个组件的值传递的过程,在没有用程序实现之前,需要有一个载体来记录这个值,这里就需要用到变量。用一个变量先记录文本框里的输入值,再将其传递给文本块。这里的特殊性在于是两个不同类型的组件之间传递参数,若都是单行文本框,就可以不用变量而直接传递,这种情况这里就不演示了,可以自己尝试一下,设置方法是一样的。

?

设置主要集中于提交按钮的OnClick事件,需要判断变量是否为空,这里就用系统提供的默认变量。在交互事件属性设置里,首先第一步设置判断条件,判断变量OnLoadValiable的值是否为空,然后第2步选择设置变量和组件值的变化值这个动作,若变量为空,在条件设置框里给文本块“显示区”赋值,显示“请输入显示信息”。若变量不为空,则将文本框的值传递给变量,再由变量传递给“显示区”,且让文本框记住刚输入的值,设置交互窗口代码如下:

?

示例二演示变量赋值后用来做动作判断的,即某个动作完成之后会给变量赋一个特定的值,然后用这个特定值来判断动作是否完成。前面说过变量是公用的,不受页面限制,因此特别适用于不同页面间的交互设计。

主要功能是通过用三个按钮来控制在另一个页面上的动态面板的不同状态显示,按钮单击事件会给变量赋值,然后动态面板所在页面加载的时候会判断变量的当前值来默认显示特定的状态页面,变量赋值过程与上面一个例子类似,这里动态面板所在页面是用OnPageLoad事件来做的。

变量的应用范围比较广,很多的较为复杂的交互效果可能都会用到变量,因此变量也丰富了交互效果的设计,这里只是提供简单例子做说明,后续还有会有例子会用到变量。

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

点此查看演示

点此下载源文件



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

“AxureRP教程–使用变量”9 条评论

初学者 | 2011-07-23 02:48 |
commenter

感觉这个还是比较难以掌握,要多练习才行了

commenter

😛 正是需要深入的地方哈,谢谢分享!

commenter

变量和逻辑判断,有点难呀。还在学习中

什么玩意 | 2012-08-1 16:27 |
commenter

太难了,希望LZ详细解释一下。对于初学者来说完全看不懂!

commenter

你觉得哪里不太懂需要更加详细的解释?

shadowdada | 2012-09-22 21:23 |
commenter

示例2求图。。。。

[…] 关于变量的使用,前面已经有写过三篇教程,从不同的方面和使用场景做了说明,分别是《AxureRP教程—使用变量》,《AxureRP教程—变量运算》,《AxureRP教程—变量和函数详解》。但还是有很多朋友反馈变量这部分比较难以理解,其实如果学过编程的话,使用起来会顺手很多,所以大学里的计算机基础要扎实啊。这里就再总结一下,从应用的角度来概述一下AxureRP中变量的功能。 […]

Suerb | 2012-09-28 20:41 |
commenter

图可以清晰点吗…

sandsjj | 2012-10-16 11:33 |
commenter

我觉得这个例子当中,重点应该是“若变量不为空,则将文本框的值传递给变量,再由变量传递给’显示区’”。这块对于变量的应用,比较难想到。刚开始做的时候,我就在想,怎么让“显示区”的值等于“输入区”的值,原来要应用变量!!