恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
Axure变量函数就那么简单
0.0°
2018-05-23 原创文章 教程 举报 2825 12 4 1

本节课和大家一起分享axure的比较少用的一个部分变量与函数

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



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


Image title


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



变量与函数

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

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

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


Image title


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


Image title


系统变量

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


自定义变量

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



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



函数


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


Image title


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


Image title

Image title


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


Image title


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


Image title


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


Image title


最后预览一下效果。




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

Image title

Image title


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


Image title


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


Image title


Image title


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


Image title


Image title


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




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


Image title


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


Image title


Image title


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


Image title


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


Image title


Image title


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


Image title


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



更新:2018-05-23

收藏

12人已收藏

Hi海哥

15年人机交互经验,前华为部门设计负责人,5年创业经验

  • 37

    作品

  • 2207

    粉丝

  • 0

    关注

  • 别让我思考,让产品更易用,记住这“321法宝”
  • 2019年汽车HMI仪表交互汇集(PDF下载)
  • 5G路上,你了解HMI了吗?
  • Adobe PS里的10个交互设计原则
相关标签
教程

    猜你喜欢

      2018-05-23 原创文章 教程 举报 2825 12 4 1

      Axure变量函数就那么简单

      0.0°

      你确定要举报Axure变量函数就那么简单

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年05月23日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      4
      12
      1

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录