1310-6499-520
今天是:
站内搜索:  
您的当前位置:主页 > 知识博客 > 交互设计 >
联系我们

名称:九分网络科技

联系:13106499520

地址:福建省福州市仓山区金榕南路553号


扫一扫添加微信

利用原型工具实现电商类秒杀倒计时效果--九分科技

时间:2020-05-15   分类:交互设计    作者:网络   来源:网络整理   点击:181

利用原型工具实现电商类秒杀倒计时效果--九分科技

本文来自九分网络

如今各大电商网站或团购类网站都会出现秒杀倒计时、抢购倒计时的设计需求。那么在设计产品原型时我们该如何实现倒计时的效果了,下面我们来讲述分析该如何一步步的实现这样的效果。能够实现倒计时的原型效果或许有很多工具可以实现,文中讲述的以Axure工具为例实现交互效果。 内容采集来自9fen.net

首先我们分析下倒计时的时间表,通过分析我们可以观察出以下现象: 时间表由时钟、分钟、秒钟数字组成;秒钟数字每隔一秒逐步递减1,当秒钟递减到0时,分钟数减1,秒钟上的数字从59在逐步递减,如此循环下去 ;当分钟的数字为01时,1分钟后递减显示为59,此时时钟上的数字减1,如此循环下去;当时钟、分钟、秒钟上的数字为1位数时,前面均会自动补充1个0。

九分网络

思路分析:我们通过观察得知上面2和3的现象,即秒钟和分钟的数字显示是一个从59不断递减到0循环的过程,如此高频反复的递减规律我们很容易联想到Axure中动态面板的状态改变时事件来实现数字的循环变化;时钟、分钟、秒钟的数字改变可以利用文本改变时事件来控制数字的变化范围及规律。

九分网络

下面我们直接动手操作实现过程

www.9fen.net

第一步先准备好相关部件素材

拖动3个文本框至设计区域用来显示时钟、分钟、秒钟的数字并分别给部件命名,拖动3个Lable至数字的后面,分别输入时、分、秒,在时间数字表的千面拖动一个Lable,输入“剩余倒计时 ”文字内容;新增一个空的动态面板,并设置两个空状态,用来循环控制数字钟的变化。 内容采集来自9fen.net

第二步,设置交互用例

1、 设置页面载入时事件,用来控制动态面板的循环过程:点击页面载入时事件用例,新增动作中选择设置面板状态,配置动作中选中动态面板,状态中选择next,勾选从第一个到最后一个自动循环,循环间隔设置为1000毫秒即1秒,点击确定完成设置。 内容采集来自9fen.net

miaosha2

内容采集来自9fen.net

九分网络

页面加入时事件 本文来自九分网络

2、为动态面板设置状态改变时事件新增动作中选择设置文本,配置动作中选中秒钟文本,点击下方文本框右侧的fx,在弹出框中首先为秒钟的文本框设置一个局部变量LAVR1,接着在上方的插入变量中输入[[LVAR1-1]],此步即为实现秒钟文本自动减1。 九分网络

miaosha3

内容采集来自9fen.net

www.9fen.net

秒钟自动减1

www.9fen.net

miaosha4

copyright 9fen.net

本文来自九分网络

动态面板状态改变时事件

copyright 9fen.net

3、为秒钟文本框设置文本改变时事件新增用例,需要设置两个用例。用例:设置判断条件,如果当前部件的长度=1位数时,给秒钟文本配置动作,在秒钟文本前面加上数字0,在点击fx的弹出框中为秒钟文本设置局部变量,在上方的插入变量中输入定义好的局部变量[[LVAR1]],并在前面加上数字0,用例1设置完毕;用例2,如果当前秒钟部件=-1且分钟部件文字>0,则为分钟文本框配置动作设置自动减少一,秒钟文本框值设置为59,设置请参照下方截图

本文来自九分网络

miaosha5

copyright 9fen.net

copyright 9fen.net

用例1:秒钟1位前面加上0

本文来自九分网络

miaosha6 九分网络

copyright 9fen.net

用例2判断条件

copyright 9fen.net

miaosha7 copyright 9fen.net

copyright 9fen.net

用例2中的分钟设置 内容采集来自9fen.net

miaosha8 本文来自九分网络

本文来自九分网络

用例2的秒钟设置

copyright 9fen.net

4、为分钟文本框设置文本改变时事件,需要设置两个用例。用例1:设置判断条件,如果当前部件的长度=1位数时,给分钟文本配置动作,在分钟文本前面加上数字0,在点击fx的弹出框中为分钟文本设置局部变量,在上方的插入变量中输入定义好的局部变量[[LVAR1]],并在前面加上数字0,用例1设置完毕;用例2,如果当前分钟部件=00且时钟部件文字≠00,(注意分钟的数字是从01直接变为59,时钟的数字最小值为00,所以判断条件公式这样设置),则为时钟文本框配置动作设置自动减少一,分钟和秒钟文本框值设置为59,设置请参照下方截图。 九分网络

标签: 交互设计 电商 Axure 秒杀

郑重声明:本文版权归原作者所有,九分网络转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

----相关文章----