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

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

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

拖入部件

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

交互設計

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

注意：to指的是絕對位置；by指的是相對位置。

函數(shù)說明：

• widget.width? 部件的寬度
• widget.height? 部件的高度
• widget.x? 部件絕對位置的x坐標
• widget.y? 部件絕對位置的y坐標

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

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

注意：show panel if hidden。因為動態(tài)面板是處于隱藏的狀態(tài)，所以要勾選這一選項。

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

通過以上的設計，頁面載入時的進度條就基本已經(jīng)完成了。

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

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

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