如今各大電商類(lèi)網(wǎng)站或團(tuán)購(gòu)類(lèi)網(wǎng)站都會(huì)出現(xiàn)秒殺倒計(jì)時(shí)、搶購(gòu)倒計(jì)時(shí)的設(shè)計(jì)需求。那么在設(shè)計(jì)產(chǎn)品原型時(shí)我們?cè)撊绾螌?shí)現(xiàn)倒計(jì)時(shí)的效果了，下面我們來(lái)講述分析該如何一步步的實(shí)現(xiàn)這樣的效果。能夠?qū)崿F(xiàn)倒計(jì)時(shí)的原型效果或許有很多工具可以實(shí)現(xiàn)，文中講述的以Axure工具為例實(shí)現(xiàn)交互效果。

首先我們分析下倒計(jì)時(shí)的時(shí)間表，通過(guò)分析我們可以觀察出以下現(xiàn)象： 時(shí)間表由時(shí)鐘、分鐘、秒鐘數(shù)字組成；秒鐘數(shù)字每隔一秒逐步遞減1，當(dāng)秒鐘遞減到0時(shí)，分鐘數(shù)減1，秒鐘上的數(shù)字從59在逐步遞減，如此循環(huán)下去 ；當(dāng)分鐘的數(shù)字為01時(shí)，1分鐘后遞減顯示為59，此時(shí)時(shí)鐘上的數(shù)字減1，如此循環(huán)下去；當(dāng)時(shí)鐘、分鐘、秒鐘上的數(shù)字為1位數(shù)時(shí)，前面均會(huì)自動(dòng)補(bǔ)充1個(gè)0。

思路分析：我們通過(guò)觀察得知上面2和3的現(xiàn)象，即秒鐘和分鐘的數(shù)字顯示是一個(gè)從59不斷遞減到0循環(huán)的過(guò)程，如此高頻反復(fù)的遞減規(guī)律我們很容易聯(lián)想到Axure中動(dòng)態(tài)面板的狀態(tài)改變時(shí)事件來(lái)實(shí)現(xiàn)數(shù)字的循環(huán)變化；時(shí)鐘、分鐘、秒鐘的數(shù)字改變可以利用文本改變時(shí)事件來(lái)控制數(shù)字的變化范圍及規(guī)律。

下面我們直接動(dòng)手操作實(shí)現(xiàn)過(guò)程

第一步先準(zhǔn)備好相關(guān)部件素材

拖動(dòng)3個(gè)文本框至設(shè)計(jì)區(qū)域用來(lái)顯示時(shí)鐘、分鐘、秒鐘的數(shù)字并分別給部件命名，拖動(dòng)3個(gè)Lable至數(shù)字的后面，分別輸入時(shí)、分、秒，在時(shí)間數(shù)字表的千面拖動(dòng)一個(gè)Lable,輸入“剩余倒計(jì)時(shí) ”文字內(nèi)容；新增一個(gè)空的動(dòng)態(tài)面板，并設(shè)置兩個(gè)空狀態(tài)，用來(lái)循環(huán)控制數(shù)字鐘的變化。

第二步，設(shè)置交互用例

1、 設(shè)置頁(yè)面載入時(shí)事件，用來(lái)控制動(dòng)態(tài)面板的循環(huán)過(guò)程：點(diǎn)擊頁(yè)面載入時(shí)事件用例，新增動(dòng)作中選擇設(shè)置面板狀態(tài)，配置動(dòng)作中選中動(dòng)態(tài)面板，狀態(tài)中選擇next，勾選從第一個(gè)到最后一個(gè)自動(dòng)循環(huán)，循環(huán)間隔設(shè)置為1000毫秒即1秒，點(diǎn)擊確定完成設(shè)置。

頁(yè)面加入時(shí)事件

2、為動(dòng)態(tài)面板設(shè)置狀態(tài)改變時(shí)事件新增動(dòng)作中選擇設(shè)置文本，配置動(dòng)作中選中秒鐘文本，點(diǎn)擊下方文本框右側(cè)的fx，在彈出框中首先為秒鐘的文本框設(shè)置一個(gè)局部變量LAVR1,接著在上方的插入變量中輸入[[LVAR1-1]],此步即為實(shí)現(xiàn)秒鐘文本自動(dòng)減1。

秒鐘自動(dòng)減1

動(dòng)態(tài)面板狀態(tài)改變時(shí)事件

3、為秒鐘文本框設(shè)置文本改變時(shí)事件新增用例，需要設(shè)置兩個(gè)用例。用例：設(shè)置判斷條件，如果當(dāng)前部件的長(zhǎng)度=1位數(shù)時(shí)，給秒鐘文本配置動(dòng)作，在秒鐘文本前面加上數(shù)字0，在點(diǎn)擊fx的彈出框中為秒鐘文本設(shè)置局部變量，在上方的插入變量中輸入定義好的局部變量[[LVAR1]],并在前面加上數(shù)字0，用例1設(shè)置完畢；用例2，如果當(dāng)前秒鐘部件=-1且分鐘部件文字>0，則為分鐘文本框配置動(dòng)作設(shè)置自動(dòng)減少一，秒鐘文本框值設(shè)置為59，設(shè)置請(qǐng)參照下方截圖

用例1：秒鐘1位前面加上0

用例2判斷條件

用例2中的分鐘設(shè)置

用例2的秒鐘設(shè)置

4、為分鐘文本框設(shè)置文本改變時(shí)事件，需要設(shè)置兩個(gè)用例。用例1：設(shè)置判斷條件，如果當(dāng)前部件的長(zhǎng)度=1位數(shù)時(shí)，給分鐘文本配置動(dòng)作，在分鐘文本前面加上數(shù)字0，在點(diǎn)擊fx的彈出框中為分鐘文本設(shè)置局部變量，在上方的插入變量中輸入定義好的局部變量[[LVAR1]],并在前面加上數(shù)字0，用例1設(shè)置完畢；用例2，如果當(dāng)前分鐘部件=00且時(shí)鐘部件文字≠00，（注意分鐘的數(shù)字是從01直接變?yōu)?9，時(shí)鐘的數(shù)字最小值為00，所以判斷條件公式這樣設(shè)置），則為時(shí)鐘文本框配置動(dòng)作設(shè)置自動(dòng)減少一，分鐘和秒鐘文本框值設(shè)置為59，設(shè)置請(qǐng)參照下方截圖。

用例1中的分鐘設(shè)置

用例2的判斷條件

用例2中的時(shí)鐘設(shè)置，自動(dòng)減1

用例2中的分鐘和秒鐘設(shè)置

5、為時(shí)鐘文本框設(shè)置文本改變時(shí)事件，設(shè)置判斷條件，如果當(dāng)前部件（時(shí)鐘文本框）長(zhǎng)度=1，則則配置動(dòng)作中為時(shí)鐘文本框前面加上0，配置如下圖所示。

判斷條件設(shè)置

先設(shè)置為局部變量，在補(bǔ)充前綴數(shù)字0

至此所有交互用例設(shè)置完畢，點(diǎn)擊F5預(yù)覽下測(cè)試效果，我們會(huì)看到一個(gè)真實(shí)的倒計(jì)時(shí)效果出現(xiàn)了。當(dāng)然為了美觀也可以為時(shí)鐘、分鐘、秒鐘文本框設(shè)置填充顏色。為了有興趣的朋友更方便的學(xué)習(xí)，大家可以從下面的地址中獲取源文件，如有相關(guān)問(wèn)題，歡迎隨時(shí)提出討論。

鏈接：http://share.weiyun.com/d6edcc91ad30b0a6a7e7d02079005e47 （密碼：zrij）

作者：努力拼搏的80后

來(lái)源：簡(jiǎn)書(shū)

鏈接：http://www.jianshu.com/p/10aa1335ffdc#

本文由 @努力拼搏的80后 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。