Axure9数字加减交互案例

数字加减交互效果在Axure案例中很常用，在移动端最常见的形式就是购买商品时选择添加数量，下面就按照移动端购买商品时添加或减少来做案例。

这是实际案例

             

    首先我们要实现的交互效果是当点击“+”时，文本框内数字加1，当点击“-”号时文本框内数字减1。

这里我们可以用三种方法来实现这个效果，每种方法都有不同的使用场景

第一种方法

打开Axure9新建一个文件需要的组件就是两个圆形，一个文本框。

设置圆形尺寸为30*30，两个圆形分别命名为加和减，文本尺寸为80*32，命名为数量。  

 

在文本框内输入数字0，可调整边距使文字居中

 

 选择Axure导航栏中项目列表中的全局变量，新增全局变量 num   默认值填为 0。

 

 然后设置圆形“加”的交互效果，选中圆形“加”新建交互>选择单击时>设置文本>选择原件为数量，点击fx设置变量值，清空原有的数据点击插入变量和函数，选择全局变量“num”点击确定。然后再添加动作设置变量值，选择变量“num”点击fx设置变量值，清空原有的数据点击插入变量和函数，选择全局变量“num”，手动在双括号内输入+1点击确认，在交互效果页面让设置变量值在设置文本前。

交互逻辑是当鼠标点击“加号”时，使文本框的内容等于全局变量“num”的值（之前默认全局变量的值为0）因为要让文本框的数值增加，所以还要设定变量“num”的值加1   [[num+1]] ，但是要先让变量“num”+1，再使变量“num” 赋值于文本框，所以交换两个交互效果的位置。

 

 

 同理可得点击“—”号时，使文本框的数值减1，可以根据“加号”的设置方法来设置“减号”。

演示效果 

但是还会出现一个问题就是当文本框内数值为0时，再点击“减号”会出现负数

 

这就需要添加判断条件， 判断当就是文本框的内容大于0时才能使文本框数值减1，因为文本框的数值是变量“num”赋予的所以选择变量值

这样完整的交互效果就完成了。但是这第一种方式存在一个弊端就是使用的全局变量，当把组件复制到其他的文件中使用时，如果没有设置全局变量，这个组件就没有效果，接下来看第二个方法。

第二种方法

第二种方法和第一种方法类似，刚才使用的是全局变量，现在我们使用局部变量，使用局部变量的好处是当我们在其他文件中使用这个组件时，直接粘贴复制就行效果不会丢失。

同样新建一个文件还设置跟“方法一”一样的原件两个圆形，一个文本框。这时我们点击加号新建交互>单击时>设置文本，选择数量文本框点击fx设置变量值，添加局部变量选择数量，再插入变量或函数选择局部变量[[LVAR1]]，在变量内设置+1 [[LVAR1+1]]。然后同理再设置“减号”的交互效果，再给减号设置判断条件。

 

这里判断条件值选择局部变量

第三种方法

第三种方法在第一种方法的基础上进行更改，把文本框取消掉换成文本标签，命名为文本，把文本标签内容改成0个，使数值后面增加单位。这时只需要把设置文本后面函数添加单位，只能添加到双括号外面。

 

 

 

以上是三种正确的案例如果是直接是使用第二种方法在函数外面增加单位，会出现错误，所以只能根据方法一进行更改，错误如下：

 

 

总结：案列的三种方法能实现Axure中增加或减少的效果