進度條的定義及使用條件
進度條用于展示操作的當前進度。在操作需要較長時間才能完成時，為用戶顯示該操作的當前進度和狀態(tài)。當一個操作會打斷當前界面，或者需要在后臺運行，且耗時可能超過 2 秒時；當需要顯示一個操作完成的百分比時。在這樣的情況下，使用進度條。
快速繪制線框圖
下面這張圖拆解分析了進度條的結構，進度條線框圖主要有背景、進度條和進度組成。進度達到100%的時候會變成一個對勾圖標。
下面我們來繪制線框圖部分。
背景：從系統(tǒng)元件庫拖動一個矩形，調整矩形的尺寸，為矩形填充顏色，顏色填充為#F2F2F2，設置無邊框，將矩形的四個角調整為圓角。
進度條：復制背景，設置填充色為橙色，色值為#FF9900，將進度條和背景進行對齊。
進度：拖動一個文本標簽至背景右側，用來顯示進度，默認為0%。添加一個對勾圖標覆蓋在進度條的上方，對勾圖標填充色為#FF9900，默認隱藏對勾圖標。
分析交互效果
通過觀察，不難發(fā)現(xiàn)進度條有以下幾個交互效果：
隨著時間的推移，進度條逐漸變長；
進度隨著進度條變長而逐漸遞增；
進度條延長至背景的長度時，停止延長；
當進度條長度等于背景長度時，進度為100%，同時進度也變成了一個對勾圖標。
制作交互原型
01 進度條的加載
進度條的長度變化是一個循序漸進的過程，并不是一蹴而就的。我們可以通過動態(tài)面板的狀態(tài)循環(huán)來達到進度條長度的不斷增長。所以，這個時候，我們需要添加一個動態(tài)面板來輔助我們實現(xiàn)這樣的效果。我們將這個輔助的動態(tài)面板稱之為控制器，掌控著進度條的變化節(jié)奏。我們需要為這個控制器再添加一個狀態(tài)，至少保證有兩個狀態(tài)來實現(xiàn)動態(tài)面板狀態(tài)的循環(huán)切換。
在正式配置交互之前，我們還需要將進度條轉換為動態(tài)面板，設置默認長度為1。設置完之后，與背景進行左對齊，?？吭诒尘暗淖髠?。大家可能會有一個疑問，為什么要將進度條設置為動態(tài)面板了？因為后面需要通過進度條尺寸變化來控制著進度顯示的變化，眾多元件當中，只有動態(tài)面板具有“尺寸改變”事件，故而需要將進度條轉換為動態(tài)面板。
既然由輔助控制器動態(tài)面板的狀態(tài)切換來達到控制進度條的長度，那么如何實現(xiàn)動態(tài)面板狀態(tài)的循環(huán)切換呢？這個時候，我們可以為頁面添加一個“載入時”事件，載入時，設置輔助控制器動態(tài)面板循環(huán)切換狀態(tài)，設置循環(huán)間隔為0.1秒，交互設置如下圖所示。我們也可以通過為其它任何一個元件添加載入事件實現(xiàn)同樣的效果。
接下來再為輔助控制器添加“狀態(tài)改變時”事件，設置進度條的尺寸，進度條高度不變，寬度等于當前寬度+背景寬度的百分之一，即進度條寬度以1%速度保持勻速增長。我們知道進度條的寬度不能超過背景的寬度，所以，在這里需要為該事件添加一個前提條件，即當進度條寬度小于等于背景寬度時，執(zhí)行剛才設置的尺寸變化動作。
添加第二個情形，即除了第一個情形之外的情況，則應停止動態(tài)面板的狀態(tài)切換，隱藏進度，顯示對勾圖標。這種情況，一般為進度條加載完成。關于輔助控制器的交互配置如下圖所示。
上圖中的變量Target代表進度條，變量LVAR1代表背景。完成交互配置，記得將控制器動態(tài)面板進行隱藏，控制器并不是交互原型的一部分，只是輔助我們實現(xiàn)交互動畫的工具。
02 進度的動態(tài)變化
進度的變化由進度條的尺寸變化所決定，所以，我們需要為進度條動態(tài)面板添加“尺寸改變時”事件。當進度條的尺寸發(fā)生變化時，進度的文本值=進度條的寬度/背景寬度*100%，轉換成 Axure的函數(shù)表達式為[[This.width/LVAR1.width*100]]%，其中變量this代表進度條,變量LVAR1代表背景。進度的值為整數(shù)，不會出現(xiàn)小數(shù)位，為了避免計算結果出現(xiàn)小數(shù)位的情況，我們需要對剛才的百分比數(shù)值進行向下取整，向下取整函數(shù)為Math.floor（x）。最終，表達進度值的函數(shù)表達式為[[Math.floor(This.width/LVAR1.width*100)]]%。交互配置如下圖所示。
好了，關于進度條交互原型的配置已經(jīng)完成，點擊預覽按鈕，驗證下我們的勞動成果吧。
小結
進度條的交互動畫實現(xiàn)起來其實很簡單，總的說來，只要掌握以下3點：
通過頁面或某個元件的載入事件，控制輔助動態(tài)面板的狀態(tài)切換；
通過輔助動態(tài)面板的狀態(tài)改變，掌控進度條尺寸的變化節(jié)奏；
利用進度條尺寸改變的時機，重新計算進度數(shù)值。
按照以下操作，可獲取案例源文件
1.關注 本賬號《Axure原型設計》
2.點贊 本節(jié)課內容
3.發(fā)送簡信 關鍵字【進度條】
【Axure原型設計】專注分享Axure基礎教程、交互案例以及經(jīng)驗技巧，并不定期贈送各種資源福利，包含：系統(tǒng)組件庫、頁面模板、實戰(zhàn)案例等。
