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