提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
本节课和大家一起分享axure的比较少用的一个部分变量与函数
大家好!我是海哥。欢迎阅读学习《海哥交互行》精品课程。
本节课和大家一起分享axure的比较少用的一个部分变量与函数,为什么说是一个比较少用的一个部分呢?因为它是一个需要算法逻辑结构的,而针对于新设计师确实有一定难度的。那我们今天就以几个在工作中比较常用到的几个案例进行讲解。
常用的第一个是搜索结果,我们会把一个搜索的值传送的下一个页面。第二个是我们用在输入文字是,需要有文字输入提示,也就是计算字数。第三个是输入手机号,需要对位数分类。第四个就是控制跳转页面,我们需要选择一个种类通过系统判断以后,从而进入到该类型的一种操作。
变量与函数
在讲变量与函数我会通过一个案例来说明什么是变量,什么是函数的。
变量-通过下面这个界面来说,大家可以把变量理解为一个抽屉,而这个抽屉是通过英文名字来存放这些信息。比如歌手的名字,歌曲的title,歌词等,都是属于抽屉里面的东西,也就是数据。这种数据可以是字符串,也可以是英文字母。
函数-函数就比如我们需要播放音乐专辑的时候,底部的这些播放这些按钮等操作。而函数也是有名字的,和变量一样,最大的区别是函数有一个括符。有括符就代表是一个函数,这个函数里面有一个动作,或者操作指令,这些指令会加载一些变量的数据。
我们需要理解axure的变量,我们需要从两个维度去理解。第一个就是变量是自己带有的,也就是系统变量。还是我们自己定义的变量也就是自定义变量。还有一个维度就是任何一个页面都可以访问的也就是全局变量。还是只存在于当前页面访问的也就是局部变量。
系统变量
系统变量就是一个系统自带的变量,我们没有办法去改变这个变量。比如我们在案例所讲的那样,如何去获取浏览器高度与宽度等。对象-内置的物件,类似于Windows、Cursor、This、Target,特点就是首个字母大写。还有就是系统变量的属性,而属性就是物件的,一般来说我们用点号获取。
自定义变量
首先自定义变量可以分为“局部变量”、和全局变量。全局变量就是任何一个页面都可以访问的到的一个值。局部变量只针对于当前页面操作,而其它页面是无法访问的到。
变量名必须是字母数字,少于25个字符,并且不能包含空格。
函数
Axure中的函数是有括符的,设置函数参数时 字符串要用单引号括住,变量不需要。当然函数的使用种类也是特别的多,我就不每个去讲了,我会把所有的函数列出来,大家多关注我的公众号,会有详细的函数使用方法列表。
下面我会用三个案例来向大家介绍变量函数,第一个就是把一个搜索得值传送的下一个页面中,因为这是一种跨页面的方法,所以,会用到全局变量的方法。
首先我们在菜单栏中找到项目这个选项,在项目中找到全局变量。在这里我不太建议大家使用默认的状态变量,可以建一个属于自己针对性项目名称的变量,在这里我们命名google。我们如何去实现呢,我们需要一个整体的思路,首先我们点击搜索后,能够获取到搜索结果页面,并需要获取到输入文本的状态。当当鼠标点击搜索按钮时,设置变量值,需要把数值给到google。设置局部变量值,并插入变量函数参数如下所示。
还需要就是就是跳转页面了,需要设置跳转页面到搜索结果。
我们还需要为搜索结果页面设置变量。当页面加载时,设置文本,设置文本值,插入变量值。
最后预览一下效果。
第二个案例就是我们经常使用的文字输入框对文字多少的限制,当文字输入时,显示文字剩余的输入字数。在这里只存在两种交互方式,一种是输入文字,一种是文字字数发生变化。在文字剩余多少时,这里我们使用的文本输入框,去掉描边,并给与命名。需要我们到项目中去添加全局变量,并命名txtMum,这里更具自己喜欢的命名方式。
接下来我们需要给上面的文本输入框文本改变时,需要给全局变量设置变量值。变量的数值参考如下图所示。
当输入文字的时候,底部的字数提示也会反生变化。我们还需要在文本改变时,设置文本,设置变量值为值,并插入变量[[txtNum]]。
最后我们需要修改一下文字改变时的状态,修改变量值为:你剩下:[[140-txtNum]]。
最后预览一下效果是否完成。
第三个案例也是我们比较实用的一个案例。通过选择性别,点击跳转到指定相关的页面,这里面需要用到条件判断等操作。
首先我们在这里需要把boy和girl两个按钮转化为动态面板,并命名,然后添加两个状态分别是myBoy,myGirl。并分别通过复制的方法修改两个状态的选中状态,然后为两个状态分别添加点击交互事件,鼠标单击时,设置动态面板状态,设置如下图所示。
因为需要跨页面操作,接下来我们需要给性别选择添加全局变量,命名为boyGirl。
分别设置单击时的全局变量。
上面我们已经设置完成变量和状态了。下面我们需要做点击下一步的页面跳转了,在这里我们需要运用到条件判断了。添加条件语句为:变量值 boyGirl==boy的时候,需要打开连接到男生页面,类似的方法给女孩页面也添加类似的条件语句。
最后预览一下效果是否完成。
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册