網上諸多有關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 原創發佈於人人都是產品經理。未經許可,禁止轉載。