什么是步进器

当我们需要对数值进行小幅度调整时，我们就可以使用步进器。步进器最初流行于电商产品的设计，用于用户输入购买商品的数量，后来这一设计形式逐渐被广泛运用到互联网产品的设计当中。本节课，我们讲解如何使用Axure制作步进器的交互效果。

快速绘制元件线框图

下面这张图拆解了步进器的组成结构，步骤器元件由中间的文本输入框和两侧的加减号按钮组成。文本输入框用于显示当前的数值，两侧的加减号用来控制数值的递增或递减的变化。

分析完了步进器的结构，接下来我们可以利用Axure提供的系统元件库，快速完成线框图的准备工作。

数值显示：从系统元件库拖动文本框，设置填充色为灰色#F2F2F2，无边框，文本框中输入默认值1。

加减按钮：从系统的icon元件库找到加号与减号图标，如果你觉得这里的图标线条太粗，也可以从阿里妈妈的Iconfont图标库网站获取SVG图标素材，这里的图标支持自定义修改。在加减号图标的外围套上一个无边框矩形，分别将两个矩形与加减号图标各自设置为一个组合。矩形和图标就构成了控制数值变化的加减按钮。

观察分析交互效果

我们以京东购物车的步进器为例，仔细观察有以下几个交互现象

递增：每点击1次加号，数量加1递减：每点击1次减号，数量减1最小值：当数值为1时，减号按钮置灰，不能点击，数值不再减少最大值：当数值为10时，加号按钮置灰，不能点击，数值不再增加（这里假设商品限购数量为10）分享交互制作的思路与方法

01 有上限的递增

如何实现点击加号按钮实现数值的递增效果？选中加号按钮（这里是一个组合），添加鼠标单击事件，添加“设置文本”动作，动作的对象为中间的文本输入框，文本框的值自动+1，可以利用函数表达式[[Target.text+1]]实现递增+1的效果。变量Target.text为目标元件的文本，即文本框的数值。交互设置如下。

刚才我们分析了数值的递增是有上限的，所以还需要为加号按钮的单击事件添加一个前提条件，即当数值＜10时，方可执行递增+1的动作。加号按钮的完整交互配置如下图所示。

02 有下限的递减

有了刚才递增制作的经验，制作递减效果也就不难了。选中减号按钮，添加鼠标单击事件，添加“设置文本”动作，动作对象为中间的文本框，文本框的数值自动-1，可以利用函数表达式[[Target.text-1]]实现递减-1的效果。变量Target.text为目标元件的文本数值，即文本框的数值。交互设置如下。

同样递减也有一个最低值的限制，当数值为1时，就不能继续减少了。为减号按钮的鼠标单击事件添加一个前提条件，当文本框的数值＞2时，方可执行递减的动作。减号按钮完整的交互配置如下图所示。

03 增减按钮的启用与禁用

到这里，数值的递增、递减效果总算实现了，但似乎和京东相比较，从操作过程当中的效果来看，还有一些差距。我们在仔观察一遍京东步进器的完整交互，我们发现当数值达到最大值或最小值时，对应的加号和减号按钮都变灰了，从视觉上来看变灰是一种不可点击的禁用状态。所以，我们还需要为加号、减号按钮设置一个禁用状态。选中加号、减号图标，鼠标右键单击，选择“交互样式”命令，找到禁用样式设置面板，禁用时设置填充色为#D7D7D7。禁用样式的设置如下图所示。

按钮什么时候禁用，取决于数值是否达到了上限或下限。所以交互事件的对象为中间的文本框，为显示数值的文本框添加“文本改变时”事件，为第一个情形添加条件，当文本框≤1时，执行动作禁用减少按钮；添加第二个情形，当文本框＞1时，启用减少按钮。通过这两个情形，控制了减号按钮的启用与禁用。

接着，我们利用相同的方法实现加号按钮的启用与禁用。为刚才的“文本改变”事件添加第三个情形，添加情形条件，如果文本框≥10，执行动作禁用加号按钮；添加第4个情形，如果文本框＜10，执行动作启用加号按钮。

需要引起注意的是，需要将情形2和情形4切换为否则的逻辑关系，即情形1和情形2位一组如果/否则的关系；情形3和情形4为一组如果/否则的关系。显示数值的文本框的完整交互如下图所示。

好了，到这里步进器的交互配置已经完成，可以点击预览按钮，验证你的学习成果。

小结

步进器的实现效果其实很简单，只要找到递增和递减的方法。利用[[Target.text-1]]、[[Target.text+1]]这两个函数表达式就可以轻松实现数值的递减和递增。接下来，我们在交互配置的过程中，要根据当前文本框的数值，来掌握什么时候执行递减、递增的动作。增加和减少按钮的禁用、启用时机，也是通过文本框的数值控制的。

下面给大家留一个思考题，如何实现通过两侧加减按钮，实现数值自动-0.01，数值自动+0.01，数值的变化范围在0.01~1之间。如果有兴趣学习的同学，可以自己动手制作。

完成以下操作，可以免费获取案例源文件

1.关注本头条号《Axure原型设计》

2.转发本节课内容

3.发送私信 【步进器】

如果您想系统化的学习Axure原型设计，不妨关注下面的专栏，购买学习本专栏不仅可以获得课程案例源文件，更有免费的PC组件库、App组件库赠送。