Axure 教程:APP购物车交互

产品小白专属,10周线上特训,测、练、实战,22位导师全程带班,11项求职服务,保障就业!了解一下

在做购物APP时,商品的增加、减少,以及点击增加或者减少时,商品总价的变化,今天这里来讲一下是怎么操作的~

在开始之前,我们先把购物APP的原型画出来,然后下面讲具体的操作流程(如下图)

一、元件命名

给画好的原型图中的各个元件进行命名,方便后边的交互操作,首先给商品001的第一个文本框命名,命名为num_01,商品002命名为num_02,商品003命名为num_03

然后给对象的商品价格命名,商品001的价格命名为rmb_01,商品002的价格命名为rmb_02,商品003的价格命名为rmb_03

总价格命名为all。

设置交互事件

为商品001的加号(加号上面增加了一个热区,增加点击范围,方便点击)元件上的热区添加用例,当[鼠标单击时],设置动作为[设置文本],配置动作勾选num_01(文本框),勾选文本之后,设置参数,局部变量用f来表示,目标值选择对应的第一个文本框num_01,则上面的变量函数为[[f+1]]。

为商品001的减号元件上的热区添加用例,当[鼠标单击时],设置动作为[设置文本],配置动作勾选num_01(文本框),勾选文本之后,设置参数,局部变量用f来表示,目标值选择对应的第一个文本框num_01,则上面的变量函数为[[f-1]]。这里跟加号有所区别的是,当商品数量减到1的时候,要有条件设置,大于1的时候可以往下减。

商品002和商品003跟商品001同样的设置。最后设置总价格,商品增加价格增加,商品减少时,价格减少。

为价格添加用例,当[载入时],设置动作为[设置文本],配置动作勾选all,设置函数(fx),商品的价格为,商品数量*商品价格。用a表示num_01,b表示rnb_01,则商品001的总价格就为a*b。以此类推,则商品的总价格就是:商品001总价+商品002的总价+商品003的总价,即a*b+c*d+e*f。

最后我们在设置,如果点击增加数量时,商品的总价格也是变化的,上面同样的方法设置商品001的加号减号,商品002的加号减号,商品003的减号减号,全都要设置一遍。

希望大家能够尝试多练习几次,几次尝试后就会理解其中的关键点,也希望大家能够养成一种习惯,在进行练习前对任务流程进行梳理,这样对理解逻辑更有帮助。

 

本文由 @葛园园 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

给作者打赏,鼓励TA抓紧创作!
4人打赏
评论
欢迎留言讨论~!
  1. hi,抱歉打扰了。
    :idea: 给大家推荐腾讯课堂&起点学院联合打造的6周Axure实战班,已有3000多位同学学习提升
    在Axure实战班,你可以学到最新最全的Axure9.0,更快做出Axure高保真,同时写出规范注释

    现在报名,认真学习,下个月做出高保真。点击此处了解&报名Axure实战班→http://996.pm/7Wr3m
    :!: 也可以加班主任微信:qidiancc520,QQ 1636629734详细了解喔

    回复