您的位置: 首页 > 软件教程 > Axure交互案例:京东购物车数量选择器的步进器

Axure交互案例:京东购物车数量选择器的步进器

编辑:伢子
2024-01-12 11:16:23

京东购物车数量选择器的步进器是一个常见的用户界面组件,用于帮助用户方便地调整商品数量。该交互案例中,步进器通过两个按钮来实现商品数量的增减,同时提供了手动输入的方式。此设计不仅考虑了用户的操作习惯,还提供了直观的反馈效果,确保了用户购物体验的顺畅和便利。下面我们将详细介绍这一设计的优点和操作方式。

什么是步进器

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

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之间。如果有兴趣学习的同学,可以自己动手制作。

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

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