在绘制电商原型或官网原型,通常会涉及到总价的计算。可以利用Axure的中继器+文本框+函数来实现,以下以一个Saas软件根据购买时间来计价的例子来讲解,实际效果如图:
![%title插图%num Axure中继器根据购买时长计算总价](http://upload-images.jianshu.io/upload_images/5900316-3f4344da9a2475f5.gif?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)
绘制步骤:
1.绘制静态原型图
绘制价格文本,并备注为“价格”标签,如图所示
![%title插图%num Axure中继器根据购买时长计算总价](http://upload-images.jianshu.io/upload_images/5900316-f66fd84ba185a804.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)
放置中继器,备注为“天数”标签;放置文本输入框
![%title插图%num Axure中继器根据购买时长计算总价](http://upload-images.jianshu.io/upload_images/5900316-3fbbeff65505d32c.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)
2.文本框数据录入到中继器存储
事件1:给文本框设置动态交互事件,当文本框中的数据变化后更新中继器中的列
![%title插图%num Axure中继器根据购买时长计算总价](http://upload-images.jianshu.io/upload_images/5900316-49aec337436fb4ac.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)
,通过临时变量将文本框中的参数传递到中继器中
![%title插图%num Axure中继器根据购买时长计算总价](http://upload-images.jianshu.io/upload_images/5900316-d23bceb19b49cbd7.png?imageMogr2/auto-orient/strip|imageView2/2/w/1084/format/webp)
事件3:当中继器加载时,将中继器中item.Column0中的数值传递到文本框的静态文本上,有点像临时缓存数据,否则数据仍是一开始初始化的值
![%title插图%num Axure中继器根据购买时长计算总价](http://upload-images.jianshu.io/upload_images/5900316-87db159e2a64a3aa.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)
3.将中继器中的事件参数结合计算公式赋值到“价格”标签
通过事件:引入价格计算公式,根据购买时长计算总价,如图所示
![%title插图%num Axure中继器根据购买时长计算总价](http://upload-images.jianshu.io/upload_images/5900316-d77e54f5375de41d.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)
本文来自蔬香四溢,本文观点不代表 PmTemple 立场,转载请联系原作者。原文链接: