Axure交互案例:京东购物车的步进器

什么是步进器

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


京东购物车

快速绘制元件线框图

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


拆解步进器的结构

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

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

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

观察分析交互效果

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

递增:每点击1次加号,数量加1

递减:每点击1次减号,数量减1

最小值:当数值为1时,减号按钮置灰,不能点击,数值不再减少

最大值:当数值为10时,加号按钮置灰,不能点击,数值不再增加(这里假设商品限购数量为10)

分享交互制作的思路与方法

01 有上限的递增

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

数值递增+1

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

增加按钮的交互

02 有下限的递减

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

数值递减-1

同样递减也有一个最低值的限制,当数值为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原型设计】专注分享Axure基础教程、交互案例以及经验技巧,并不定期赠送各种资源福利,包含:系统组件库、页面模板、实战案例等。

推荐阅读更多精彩内容

  • 并非所有事情,都能如人所愿; 也不是所有的爱,都能两情相悦。 我给予的等待你视而不见,你期望的自然不是必然。 感情...
    小陀弥阅读 127评论 0 1
  • 文:月光圆明 过分的福报如过分的营养,自己其实是消化不了的。不但消化不了,而且还有一天一定会给自己...
    普天禅光阅读 70评论 0 1
  • 第三天 终改了那篇作文,高考同名作文,改得头有点大,只能说稍稍理顺,让例子证明论点,让气息稍稍流畅一点,但我...
    秋鸿_cc11阅读 76评论 4 2
  • 1、感恩孩子他爸带领去理发 2、感恩林老师陪伴孩子的成长 3、感恩美芳姐送锅 4、感恩鲜花带给我爱的感觉 5、感恩...
    静和瑜伽阅读 37评论 0 0