数极客首页

如何利用Axure中继器,实现商品数量增减、价格总计效果

本文详细讲解:利用Axure中继器实现商品数量的增减,以及商品价格的总计的操作流程。

如何利用Axure中继器,实现商品数量增减、价格总计效果

一般在做购物车、预算表中都会涉及到商品数量的增减,与商品价格的合计。

那么,我们怎么通过中继器来实现这个效果呢?本文将详细讲解此类设计的交互用例。

首先看下效果:

如何利用Axure中继器,实现商品数量增减、价格总计效果

一、简要设计思路:

  1. 点击增加按钮
  2. 数量增加1
  3. 总计金额相对应增加商品单价

同理,

  1. 点击减少按钮
  2. 数量减少1
  3. 总计金额相对应减少商品单价

二、外部准备工作:

中继器,两个文本标签,一个文本标签写上预算;另一个文本标签取名为total用于显示金额。

如何利用Axure中继器,实现商品数量增减、价格总计效果

中继器内部制作准备:图片元件取名为tp,三个文本标签分别取名为mc、jg和sl,减号按钮,加号按钮。

如何利用Axure中继器,实现商品数量增减、价格总计效果

中继器交互用例设置:中继器添加三列分别为tp、mc、jg,然后添加数据。

如何利用Axure中继器,实现商品数量增减、价格总计效果

中继器每项加载时添加用例:每项加载时,设置文本jg的值等于函数¥[[Item.jg]]、文本mc的值等于函数[[Item.mc]]、设置图片tp的值等于函数[[Item.tp]]。

如何利用Axure中继器,实现商品数量增减、价格总计效果
如何利用Axure中继器,实现商品数量增减、价格总计效果
如何利用Axure中继器,实现商品数量增减、价格总计效果

中继器交互用例完成之后,最主要的就是,后面在加减号按钮上添加的交互。

加号按钮添加用例:当鼠标点击时添加用例

设置:

文本sl的值=函数[[LVAR1+1]]-局部变量函数LVAR1=元件sl的文字

如何利用Axure中继器,实现商品数量增减、价格总计效果

设置:

文本总价total的值=函数¥[[Target.text.slice(1)+Item.jg]]

(Target.text.slice(1):表示从第二个字符开始,截取当前交互所控制的total元件里面的文字字符)

如何利用Axure中继器,实现商品数量增减、价格总计效果

减号按钮添加用例:当鼠标点击时添加用例——添加条件sl>0

(不添加条件的话当你点击减号会出现负数)

  1. 设置文本sl的值=函数[[LVAR1-1]]-局部变量函数LVAR1=元件sl的文字(这一步就不上图片了,跟上面的加一样。只不过函数“[[LVAR1+1]]”里面的“+”变成了“-”)
  2. 设置文本总价total的值=函数¥[[Target.text.slice(1)-Item.jg]](这一步也是和上面的一样)
如何利用Axure中继器,实现商品数量增减、价格总计效果

设置到这里基本已经好了,大家预览一下看看。

如果还有什么问题可在评论区回复,我们一起讨论!

 

本文由 @zero 原创发布,未经许可,禁止转载

题图来自Unsplash,基于 CC0 协议

新一代大数据用户行为分析与数据智能平台:数极客(https://www.shujike.com),是支持无埋点、前端埋点、后端埋点、API导入四种混合数据采集方式,整合分析用户行为数据和业务数据,可以自动监测网站、APP、小程序等多种渠道推广效果分析,是增长黑客们必备的互联网数据分析软件。数极客支持实时多维分析、漏斗分析、留存分析、路径分析等十大数据分析方法以及APP数据分析网站统计网站分析小程序数据统计用户画像等应用场景,业内首创了六种提升转化率的数据分析模型,是数据分析软件领域首款应用定量分析与定性分析方法的数据分析产品

发表评论

评论已关闭。

相关文章