Axure教程 | 常用交互效果的基本设置【续】

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

jiaohujiaocheng

继上篇《Axure教程 | 常用交互效果的基本设置》后,继续说一下关于axure原型设计工具的基础功能,让它成为你原型设计的利器。

点击这里查看在线演示。

第五个例子:获取当前时间——常用函数的使用

关于函数,没接触过开发的人员对此比较陌生,而且觉得是个令人头疼,感觉这东西好高深的样子,所以有的人可能做了很多原型,可能连函数都没使用过。

我们以获取当前时间为例,来说一下函数的使用,一般在给组件设置文本的时候会使用函数或变量的方法。拖一个矩形框设置成输入框的样子,命名为today,再拖一个矩形框设置作为按钮,设置一样按钮的交互样式:

获取当前时间

在单击获取按钮时,使用日期函数获取当前的时间

设置日期文本

按上图设置组件的文本内容,点击右边的fx图标,在弹出的编辑文字窗口中插入变量和函数:

设置日期字符串

文字编辑框中[[]]之间是变量或函数的名称,[[]]之外的内容是用来拼接的字符。

获取时间的函数是不带参数的,直接使用了系统的时间函数,我们再测试一下带参数的字符串截取函数,在界面上放一个文本框,命名zimu,里面输入abcdefg共7个字母,单击截取字符串按钮,获取字符串的第3个到第5个共3个字符,再赋值给上面的矩形框,这里需要使用局部变量的概念。局部变量设置为当前zimu的文本内容,我们需要截取它。字符串截取提供了两个函数,一个是从start位置开始的length个字符(substr函数),一个是从from位置开始到to位置结束之间的字符(substring函数),两个效果是一样的,只是不同的方法:

字符串截取函数

对于这个例子,我们可以用上面的函数这样截取:

[[LVAR1.substr(2,3)]]

或者

[[LVAR1.substring(2,5)]]

你可以在输入框里输入其它的一些字符来测试。

关于函数,我们重要要掌握字符串和日期两种类型的函数。

第六个例子:自定义单选框——动态面板和选中状态

单选框的实现方式我们至少可以通过两种方式实现,一是使用组件的交互样式来设置,通过设置选中的样式来表示,另一种方式就是通过使用动态面板的两个状态切换来表示单选,我们分别来试一下。

1)通过组件的交互样式设置

拖三个形状,修改形状为三个圆形,并设置边框为最粗,分别命名为r1,r2,r3,单选的效果是选中其中一个后,另外其它的要处于取消选择状态。先设置三个形状的选中样式:

设置单选按钮样式

加好样式后,给单选框添加单击事件,先把几个单选按钮设置为未选中状态,再设置当前单选按钮的状态为选中:

设置单选按钮事件

把这个单选按钮的事件复制到其它两个单选按钮的单击事件上,这样就可以了。

2)通过动态面板实现

我们再看看如何通过动态面板来实现,拖一个矩形,设置形状为圆形,同样设置好大小和边框,然后将它转换成动态面板,作为动态面板的第一个状态,也就是单选按钮的默认状态,再复制这个状态,修改里面的圆形按钮填充色和边框色。为每个按钮添加事件处理:

通过动态面板设置单选

事件描述:

  1. 设置三个动态面板的状态为状态1,即未选中状态
  2. 设置当前动态面板的状态为状态2,即选中状态。

就是通过单击事件让每个单选按钮的动态面板在两个状态间切换,两个状态代表未选中和选中。

第七个例子:倒计时——组件的隐藏/显示事件

以10秒倒计时为例,axure里并没有如何循环的直接方法,这里讨巧地使用组件的隐藏/显示的相互切换来循环处理数字。就是在隐藏事件里设置好数字后再显示组件,这样便会触发显示事件,然后再显示事件里接着再隐藏组件,这样又再次触发了隐藏事件,就达到了循环处理的效果,这是循环处理的常见方法。

拖两个矩形组件,一个用来显示倒计时(命名countdown),一个用来作隐藏和显示控制(命名control),初始值文本设置为10。

再添加个开始按钮,单击后开始计时。

选中control,分别添加隐藏和显示事件如下:

隐藏和显示事件

隐藏事件解释:

  1. 先等待1秒钟
  2. 获取control的文本,然后减去1,并重新赋值给contorl
  3. 设置倒计时countdown的文本等于control的文本(LVAR1为局部变量,指向control的文本)
  4. 显示control,这个会触发上面的显示事件

显示事件里立即隐藏了control,再次和隐藏事件,这样control上的文字会再次计算

最终你看到的效果就是数值每隔一秒不断再减1,这里如果要在到计时为0时停止,就需要再加上条件,可以在隐藏事件里判断一下,如果control上的文本不等于0时,才去隐藏,否则就不再隐藏control,这样就停止了:

隐藏和显示事件2

第八个例子:设置窗口位置——局部变量的使用

其实在前面几个例子里我们已经几次使用了局部变量,就是获取组件上的文本,见第七个例子的LVAR1,更高级一点,我们可以指定局部变量为某个组件对象,这样就可以设置组件对应的x,y属性,即组件的位置,或者组件的其它属性,达到操作组件的目的。

添加两个矩形框,改变一下大小,搞成一个窗口的样子,转换成动态面板,命名为win(因为是两个形状组成的对象,我们将它转换成动态面板便于设置它的整体位置),添加一个矩形,作为按钮,给按钮添加事件,我们要达到的效果是将这个win窗口移动到当前浏览器窗口的水平中间位置:

移动窗口位置

点击x输入框后面的fx,在弹出窗口中设置:

计算窗口位置

窗口位置计算:当前窗口大小,减去win动态面板的宽带,结果除以2就是当前窗口的中间位置了。点击“设置位置”后,滚动窗口到最上方,检查一下位置设置是否正确。

注意上面的局部变量LVAR1是从下拉框里选择的部件哦!

点击这里查看在线演示。

小结

以上介绍了axure里最基本的用法,这些基本的方法熟练后,足以满足常见的原型设计了,只要多想一想,加上学习一些产品、交互方面的知识(如果你有一些开发方面的经验就更好了),就会发现做原型其实挺简单。

 

本文由 @Axure原型设计工场 原创发布于人人都是产品经理 ,未经许可,禁止转载。

您的赞赏,是对我创作的最大鼓励。

评论( 1

登录后参与评论
  1. 作为一个用了axure多年的产品狗也放弃她了,现在有好的新工具好用多了
    比如mockplus、Principle等等。

    http://www.8kvv.com 上面特别全,建议看看
    :mrgreen: :eek: :roll: :mrgreen: :mad: :twisted: :shock:

    回复
加载中