網(wǎng)上諸多有關(guān)Axure進(jìn)度條制作的方法，但是步驟實(shí)在是太跳躍，很不容易搞明白。因此，筆者在這里總結(jié)一下Axure進(jìn)度條制作的方法。

下面示例在Axure7中操作，但是在Axure8里步驟也是一樣的，建議更新至Axure8，因?yàn)槠渚哂胁簧俦憷男鹿δ堋?/p>

一、最簡(jiǎn)陋的進(jìn)度條：用于說(shuō)明原理

1、新建一個(gè)矩形，命名為“進(jìn)度框”；

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

3、對(duì)“進(jìn)度條”右鍵，選擇“轉(zhuǎn)換成動(dòng)態(tài)面板”，命名為“動(dòng)態(tài)條”，設(shè)置寬度為1（因不能設(shè)置成0）；

4、因進(jìn)度條一般在頁(yè)面載入時(shí)顯示，所以選擇“動(dòng)態(tài)條”的載入時(shí)–設(shè)置面板尺寸–勾選“動(dòng)態(tài)條”，按下圖順序設(shè)置寬度，點(diǎn)擊fx–在彈出的界面添加局部變量–設(shè)置函數(shù)–確認(rèn)，最后不要忘記勾選動(dòng)畫為線性，用時(shí)可以隨意設(shè)置，這里設(shè)為5000毫秒；

LVAR1表示“進(jìn)度框”這個(gè)部件，[[LVAR1.width]]則表示“進(jìn)度框”的寬度。

5、最后點(diǎn)擊發(fā)布-預(yù)覽，便可以欣賞你剛剛完成的進(jìn)度條了。

二、為進(jìn)度條添加數(shù)字，更好地顯示進(jìn)度

1、進(jìn)度條做好后，在進(jìn)度條居中位置添加一個(gè)Label，設(shè)置文字居中顯示，命名為“進(jìn)度數(shù)字”；

2、對(duì)“進(jìn)度數(shù)字”右鍵，選擇“轉(zhuǎn)換成動(dòng)態(tài)面板”，命名為“動(dòng)態(tài)數(shù)字”，隱藏；

3、對(duì)“動(dòng)態(tài)數(shù)字”做以下操作，載入時(shí)–顯示–動(dòng)態(tài)數(shù)字；

4、對(duì)“動(dòng)態(tài)數(shù)字”做下圖操作，更多事件–顯示–設(shè)置文本–進(jìn)度數(shù)字–設(shè)置局部變量–設(shè)置函數(shù)–確認(rèn)；

函數(shù)為：

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

原理為：

進(jìn)度數(shù)字%=動(dòng)態(tài)條的寬度/進(jìn)度框的寬度*100%

其中Math.floor（X）表示對(duì)括號(hào)里的X取整。

做完前面4步，會(huì)發(fā)現(xiàn)顯示數(shù)字是不會(huì)隨進(jìn)度條變化的，因此還需要設(shè)置數(shù)字顯示的自循環(huán)。

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

6、最后，點(diǎn)發(fā)布–預(yù)覽，就可以看到帶數(shù)字的進(jìn)度條了。

三、各類進(jìn)度條

拋開UI設(shè)計(jì)不談，市面上大多數(shù)進(jìn)度條的運(yùn)行原理都是差不多的。

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

下面是我用Axure做的幾款進(jìn)度條：

為達(dá)到旋轉(zhuǎn)等效果，我將Axure7更新至了Axure8。

1、直線型進(jìn)度條

通過(guò)Axure8的“”移動(dòng)“樣式，可以設(shè)置文字+水滴隨著進(jìn)度條而移動(dòng)。

2、圓形進(jìn)度條

用Axure8實(shí)現(xiàn)圓形進(jìn)度條的方法有很多，下面說(shuō)我自己的思路。

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

部件上下順序

（2）頁(yè)面交互–頁(yè)面載入時(shí)–對(duì)“左動(dòng)”進(jìn)行設(shè)置–等待2000秒–隱藏“z”–對(duì)“右動(dòng)”進(jìn)行設(shè)置；

對(duì) “左動(dòng)” 的設(shè)置

對(duì) “右動(dòng)” 的設(shè)置

（3）前2步做完，進(jìn)度條的部分就完成了，下面制作數(shù)字的顯示，添加Label，命名為“數(shù)字”，設(shè)置好文字的樣式，轉(zhuǎn)換成動(dòng)態(tài)面板，隱藏；

（4）設(shè)置文字的自循環(huán)，首先在動(dòng)態(tài)面板的載入時(shí)–顯示動(dòng)態(tài)面板+數(shù)字；

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

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

（7）發(fā)布–預(yù)覽，就大功告成了。

3、文字型進(jìn)度條

四、小結(jié)

進(jìn)度條的制作在Axure里應(yīng)該算是比較簡(jiǎn)單的，只要理解了基本的原理，就能變換出各種不同樣式的進(jìn)度條。

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

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