網上諸多有關Axure進度條制作的方法，但是步驟實在是太跳躍，很不容易搞明白。因此，筆者在這里總結一下Axure進度條制作的方法。

下面示例在Axure7中操作，但是在Axure8里步驟也是一樣的，建議更新至Axure8，因為其具有不少便利的新功能。

一、最簡陋的進度條：用于說明原理

1、新建一個矩形，命名為“進度框”；

2、新建一個矩形，讓它和之前的矩形大小一樣，并重疊，填充黃色，命名為“進度條”；

3、對“進度條”右鍵，選擇“轉換成動態面板”，命名為“動態條”，設置寬度為1（因不能設置成0）；

4、因進度條一般在頁面載入時顯示，所以選擇“動態條”的載入時–設置面板尺寸–勾選“動態條”，按下圖順序設置寬度，點擊fx–在彈出的界面添加局部變量–設置函數–確認，最后不要忘記勾選動畫為線性，用時可以隨意設置，這里設為5000毫秒；

LVAR1表示“進度框”這個部件，[[LVAR1.width]]則表示“進度框”的寬度。

5、最后點擊發布-預覽，便可以欣賞你剛剛完成的進度條了。

二、為進度條添加數字，更好地顯示進度

1、進度條做好后，在進度條居中位置添加一個Label，設置文字居中顯示，命名為“進度數字”；

2、對“進度數字”右鍵，選擇“轉換成動態面板”，命名為“動態數字”，隱藏；

3、對“動態數字”做以下操作，載入時–顯示–動態數字；

4、對“動態數字”做下圖操作，更多事件–顯示–設置文本–進度數字–設置局部變量–設置函數–確認；

函數為：

[[Math.floor(LVAR2.width/LVAR1.width*100)]]%

原理為：

進度數字%=動態條的寬度/進度框的寬度*100%

其中Math.floor（X）表示對括號里的X取整。

做完前面4步，會發現顯示數字是不會隨進度條變化的，因此還需要設置數字顯示的自循環。

5、還是在剛才的用例1里依次添加，等待0秒-隱藏This-顯示This；

6、最后，點發布–預覽，就可以看到帶數字的進度條了。

三、各類進度條

拋開UI設計不談，市面上大多數進度條的運行原理都是差不多的。

只要掌握了以上進度條以及數字添加的原理后，就可以舉一反三，設計出形式各樣的進度條。

下面是我用Axure做的幾款進度條：

為達到旋轉等效果，我將Axure7更新至了Axure8。

1、直線型進度條

通過Axure8的“”移動“樣式，可以設置文字+水滴隨著進度條而移動。

2、圓形進度條

用Axure8實現圓形進度條的方法有很多，下面說我自己的思路。

（1）通過Axure8的形狀變換，制作一下5個組件，將其重疊成同一個圓環，“左動”、“右動”代表進度條，“z”、“y”代表用于遮擋的部分，“b”代表背景圓環，上下順序如下圖：

部件上下順序

（2）頁面交互–頁面載入時–對“左動”進行設置–等待2000秒–隱藏“z”–對“右動”進行設置；

對 “左動” 的設置

對 “右動” 的設置

（3）前2步做完，進度條的部分就完成了，下面制作數字的顯示，添加Label，命名為“數字”，設置好文字的樣式，轉換成動態面板，隱藏；

（4）設置文字的自循環，首先在動態面板的載入時–顯示動態面板+數字；

（5）實際上進度條的載入分為了兩段，其中間有一個事件就是“z”隱藏，于是便利用“z”作為條件來區分計算“數字”，在動態面板的顯示時–case1–設置條件為 if 元件可見 z ==true –設置文本（這里使用的函數是 [[Math.floor(LVAR1.rotation/360*100)]]% ；LVAR1代表元件“左動”）–等待0秒–隱藏this–顯示this；

（6）case2–設置條件為 if 元件可見 z ==false –設置文本（這里使用的函數是 [[Math.floor((LVAR1.rotation+180)/360*100)]]% ；LVAR1代表元件“右動”）–等待0秒–隱藏this–顯示this；

（7）發布–預覽，就大功告成了。

3、文字型進度條

四、小結

進度條的制作在Axure里應該算是比較簡單的，只要理解了基本的原理，就能變換出各種不同樣式的進度條。

快發揮你的想象，制作屬于你的進度條吧╮(￣▽￣”)╭

本文由 @SaberX?原創發布于人人都是產品經理。未經許可，禁止轉載。