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

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

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

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

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

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

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

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

頁面加入時事件

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

秒鐘自動減1

動態(tài)面板狀態(tài)改變時事件

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

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

用例2判斷條件

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

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

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

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

用例2的判斷條件

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

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

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

判斷條件設(shè)置

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

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

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

作者：努力拼搏的80后

來源：簡書

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

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