Axure中继器用法:实现商品数量增减、价格总计效果

2020-04-1421:25:32原型设计Comments2,648 views字数 707阅读模式

做购物车、预算表中都会涉及到商品数量的增减,与商品价格的合计。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18142.html

那么,我们怎么通过中继器来实现这个效果呢?本文将详细讲解此类设计的交互用例。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18142.html

首先看下效果:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18142.html

Axure中继器用法:实现商品数量增减、价格总计效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18142.html

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

同理,文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18142.html

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

中继器,两个文本标签,一个文本标签写上预算;另一个文本标签取名为total用于显示金额。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18142.html

Axure中继器用法:实现商品数量增减、价格总计效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18142.html

中继器内部制作准备:图片元件取名为tp,三个文本标签分别取名为mc、jg和sl,减号按钮,加号按钮。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18142.html

Axure中继器用法:实现商品数量增减、价格总计效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18142.html

中继器交互用例设置:中继器添加三列分别为tp、mc、jg,然后添加数据。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18142.html

Axure中继器用法:实现商品数量增减、价格总计效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18142.html

中继器每项加载时添加用例:每项加载时,设置文本jg的值等于函数¥[[]]、文本mc的值等于函数[[]]、设置图片tp的值等于函数[[]]。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18142.html

Axure中继器用法:实现商品数量增减、价格总计效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18142.html

Axure中继器用法:实现商品数量增减、价格总计效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18142.html

Axure中继器用法:实现商品数量增减、价格总计效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18142.html

中继器交互用例完成之后,最主要的就是,后面在加减号按钮上添加的交互。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18142.html

加号按钮添加用例:当鼠标点击时添加用例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18142.html

设置:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18142.html

文本sl的值=函数[[LVAR1+1]]-局部变量函数LVAR1=元件sl的文字文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18142.html

Axure中继器用法:实现商品数量增减、价格总计效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18142.html

设置:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18142.html

文本总价total的值=函数¥[[(1)+]]文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18142.html

((1):表示从第二个字符开始,截取当前交互所控制的total元件里面的文字字符)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18142.html

Axure中继器用法:实现商品数量增减、价格总计效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18142.html

减号按钮添加用例:当鼠标点击时添加用例——添加条件sl>0文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18142.html

(不添加条件的话当你点击减号会出现负数)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18142.html

  1. 设置文本sl的值=函数[[LVAR1-1]]-局部变量函数LVAR1=元件sl的文字(这一步就不上图片了,跟上面的加一样。只不过函数“[[LVAR1+1]]”里面的“+”变成了“-”)
  2. 设置文本总价total的值=函数¥[[(1)-]](这一步也是和上面的一样)

Axure中继器用法:实现商品数量增减、价格总计效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18142.html

设置到这里基本已经好了,大家预览一下看看。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18142.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/yuanxing/18142.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定