本文将教大家如何用AXURE制作计数器(商品购件数的交互设计)
一、效果
预览地址:https://uf9ie1.axshare.com
二、功能
1、用户点击“+”号时数值加1
2、用户点击“-”号时数值减1
三、制作
-
数值
拖入一个矩形组件,其大小设置为164×38,在其上拖入一个文本框,命名为数值,设置默认数值为1,如图:
-
减号
拖入一个矩形组件,命名为减,设置大小为39×36,在其矩形中加入“—”标号,放置在数值的左侧,(减号可以用文本表示也可以用图片表示)如图:
-
加号
拖入一个矩形组件,命名为加,设置大小为39×36,在其矩形中加入“+”标号,放置在数值的右侧,(加号可以用文本表示也可以用图片表示)如图:
元件制作完毕
四、交互
1、减
“减“的鼠标点击时设置 文本标签【数值】的文本为[[LVAR1-1]];如图:
鼠标移入时设置选中状态为ture,如图:
鼠标移入出时设置选中状态为false,如图:
2、加
“加“的鼠标点击时设置 文本标签【数值】的文本为[[LVAR1+1]];如图:
鼠标移入时设置选中状态为ture,如图:
鼠标移入出时设置选中状态为false,如图:
3、数值
文本【数值】文本改变时,设置如图
获取焦点时设置选中状态为ture,如图:
失去焦点时设置选中状态为false,如图:
所有制作完毕