在產(chǎn)品的原型設(shè)計(jì)中，進(jìn)度條的意義是：

• 第一，在頁(yè)面載入中，給用戶的等待過(guò)程中增加少量的樂(lè)趣；在一個(gè)追求快的環(huán)境中，這是十分關(guān)鍵的要素，可以減少流失率。
• 第二，也是在告知用戶，網(wǎng)頁(yè)或者APP有沒(méi)有響應(yīng)了你的點(diǎn)擊？反饋給了用戶信息，而不是不是一張白紙，使用戶感到茫然。

而在Axure中，進(jìn)度條的設(shè)計(jì)，主要的掌握要素就是函數(shù)變量的使用。

拖入部件

如下圖所示，在Axture中拖入label標(biāo)簽、矩形框、動(dòng)態(tài)面板。此時(shí)一定要培養(yǎng)一個(gè)好習(xí)慣，給部件命名。一旦交互過(guò)程十分復(fù)雜時(shí)，不同的名稱將使得邏輯關(guān)系變得十分清楚。

交互設(shè)計(jì)

OnPageLoad:頁(yè)面載入時(shí)，改變動(dòng)態(tài)面板大?。⊿et Panel Size），調(diào)用fx函數(shù)，寬度設(shè)置為背景部件的寬度/100，高度為背景部件的高度。其次，將其移動(dòng)（Move）到背景部件的位置。

注意：to指的是絕對(duì)位置；by指的是相對(duì)位置。

函數(shù)說(shuō)明：

• widget.width? 部件的寬度
• widget.height? 部件的高度
• widget.x? 部件絕對(duì)位置的x坐標(biāo)
• widget.y? 部件絕對(duì)位置的y坐標(biāo)

OnResize：動(dòng)態(tài)面板大小改變時(shí)的觸發(fā)。

• 第一，設(shè)置百分比（Set Text on widget）?；舅枷胧莿?dòng)態(tài)面板的寬度占背景條的寬度的百分比就是我們想要的效果。但是在動(dòng)態(tài)面板大小改變的過(guò)程中，進(jìn)度條百分比的顯示會(huì)有小數(shù)的出現(xiàn)，這就需要用到Math.ceil()取整函數(shù)。
• 第二，設(shè)置動(dòng)態(tài)面板循環(huán)（Set Panel State）?；舅枷胪O(shè)置Banner輪播圖是一樣的道理。通過(guò)設(shè)置不同的面板顏色，會(huì)使得進(jìn)度條具有閃爍的效果。

注意：show panel if hidden。因?yàn)閯?dòng)態(tài)面板是處于隱藏的狀態(tài)，所以要勾選這一選項(xiàng)。

OnPanelStateChange：狀態(tài)面板狀態(tài)改變時(shí)觸發(fā)。如果動(dòng)態(tài)面板的寬度沒(méi)有達(dá)到背景條的寬度，即進(jìn)度條百度比小于100%時(shí)，那么動(dòng)態(tài)面板就要每隔56s增加背景條寬度的1%。選擇56s的依據(jù)是，電影的一幀是56s，比較符合人眼的視覺(jué)觀察。一旦進(jìn)度條的百分比=100%時(shí)，則彈出網(wǎng)頁(yè)。進(jìn)度條就停止增加，完成使命。

通過(guò)以上的設(shè)計(jì)，頁(yè)面載入時(shí)的進(jìn)度條就基本已經(jīng)完成了。

源文件下載：鏈接：http://pan.baidu.com/s/1qWGKToK 密碼：adx4

Axure頁(yè)面原型效果展示：http://sj8sjc.axshare.com/#c=2

本文由 @蝸牛PM?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。