Axure变量函数就那么简单

大家好！我是海哥。欢迎阅读学习《海哥交互行》精品课程。

 

本节课和大家一起分享axure的比较少用的一个部分变量与函数，为什么说是一个比较少用的一个部分呢?因为它是一个需要算法逻辑结构的，而针对于新设计师确实有一定难度的。那我们今天就以几个在工作中比较常用到的几个案例进行讲解。

常用的第一个是搜索结果，我们会把一个搜索的值传送的下一个页面。第二个是我们用在输入文字是，需要有文字输入提示，也就是计算字数。第三个是输入手机号，需要对位数分类。第四个就是控制跳转页面，我们需要选择一个种类通过系统判断以后，从而进入到该类型的一种操作。

变量与函数

在讲变量与函数我会通过一个案例来说明什么是变量，什么是函数的。

变量-通过下面这个界面来说，大家可以把变量理解为一个抽屉，而这个抽屉是通过英文名字来存放这些信息。比如歌手的名字，歌曲的title，歌词等，都是属于抽屉里面的东西，也就是数据。这种数据可以是字符串，也可以是英文字母。

函数-函数就比如我们需要播放音乐专辑的时候，底部的这些播放这些按钮等操作。而函数也是有名字的，和变量一样，最大的区别是函数有一个括符。有括符就代表是一个函数，这个函数里面有一个动作，或者操作指令，这些指令会加载一些变量的数据。

我们需要理解axure的变量，我们需要从两个维度去理解。第一个就是变量是自己带有的，也就是系统变量。还是我们自己定义的变量也就是自定义变量。还有一个维度就是任何一个页面都可以访问的也就是全局变量。还是只存在于当前页面访问的也就是局部变量。

系统变量

系统变量就是一个系统自带的变量，我们没有办法去改变这个变量。比如我们在案例所讲的那样，如何去获取浏览器高度与宽度等。对象-内置的物件，类似于Windows、Cursor、This、Target，特点就是首个字母大写。还有就是系统变量的属性，而属性就是物件的，一般来说我们用点号获取。

 

自定义变量

首先自定义变量可以分为“局部变量”、和全局变量。全局变量就是任何一个页面都可以访问的到的一个值。局部变量只针对于当前页面操作，而其它页面是无法访问的到。

 

 

变量名必须是字母数字，少于25个字符，并且不能包含空格。

 

 

函数

Axure中的函数是有括符的，设置函数参数时 字符串要用单引号括住，变量不需要。当然函数的使用种类也是特别的多，我就不每个去讲了，我会把所有的函数列出来，大家多关注我的公众号，会有详细的函数使用方法列表。

 

下面我会用三个案例来向大家介绍变量函数，第一个就是把一个搜索得值传送的下一个页面中，因为这是一种跨页面的方法，所以，会用到全局变量的方法。

首先我们在菜单栏中找到项目这个选项，在项目中找到全局变量。在这里我不太建议大家使用默认的状态变量，可以建一个属于自己针对性项目名称的变量，在这里我们命名google。我们如何去实现呢，我们需要一个整体的思路，首先我们点击搜索后，能够获取到搜索结果页面，并需要获取到输入文本的状态。当当鼠标点击搜索按钮时，设置变量值，需要把数值给到google。设置局部变量值，并插入变量函数参数如下所示。

还需要就是就是跳转页面了，需要设置跳转页面到搜索结果。

我们还需要为搜索结果页面设置变量。当页面加载时，设置文本，设置文本值，插入变量值。

最后预览一下效果。

 

第二个案例就是我们经常使用的文字输入框对文字多少的限制，当文字输入时，显示文字剩余的输入字数。在这里只存在两种交互方式，一种是输入文字，一种是文字字数发生变化。在文字剩余多少时，这里我们使用的文本输入框，去掉描边，并给与命名。需要我们到项目中去添加全局变量，并命名txtMum，这里更具自己喜欢的命名方式。 

 

接下来我们需要给上面的文本输入框文本改变时，需要给全局变量设置变量值。变量的数值参考如下图所示。

当输入文字的时候，底部的字数提示也会反生变化。我们还需要在文本改变时，设置文本，设置变量值为值，并插入变量[[txtNum]]。

最后我们需要修改一下文字改变时的状态,修改变量值为：你剩下：[[140-txtNum]]。

最后预览一下效果是否完成。

 

 

第三个案例也是我们比较实用的一个案例。通过选择性别，点击跳转到指定相关的页面，这里面需要用到条件判断等操作。

首先我们在这里需要把boy和girl两个按钮转化为动态面板，并命名，然后添加两个状态分别是myBoy，myGirl。并分别通过复制的方法修改两个状态的选中状态，然后为两个状态分别添加点击交互事件，鼠标单击时，设置动态面板状态,设置如下图所示。

 

因为需要跨页面操作，接下来我们需要给性别选择添加全局变量，命名为boyGirl。

分别设置单击时的全局变量。

上面我们已经设置完成变量和状态了。下面我们需要做点击下一步的页面跳转了，在这里我们需要运用到条件判断了。添加条件语句为：变量值  boyGirl==boy的时候，需要打开连接到男生页面，类似的方法给女孩页面也添加类似的条件语句。

最后预览一下效果是否完成。