環(huán)形進(jìn)度條的制作需要克服兩個(gè)點(diǎn)：第一，如何用Axure自帶的素材畫出進(jìn)度條，第二，如何使用交互實(shí)現(xiàn)進(jìn)度條讀取的效果。本案例將使用Axure RP 9示范制作進(jìn)度條的方法。

實(shí)現(xiàn)效果

• 點(diǎn)擊按鈕，按鈕出現(xiàn)大小縮放；
• 點(diǎn)擊按鈕，開始讀取進(jìn)度條；
• 讀取過程中，點(diǎn)擊按鈕無法再次點(diǎn)擊；
• 讀取過程中，模擬當(dāng)前讀取進(jìn)度百分比。

準(zhǔn)備工作

Step one

先來看看我們所需要的元件都有哪些：

如圖所示，我們需要的元件包括兩個(gè)半環(huán)形的進(jìn)度條，兩個(gè)半環(huán)形的進(jìn)度條底，一個(gè)細(xì)小的圓環(huán)當(dāng)做邊框，一個(gè)圓形，一個(gè)手型的控制按鈕，一個(gè)透明色無邊框的用于輸入百分比的輸入框。

Step two

我們來演示一個(gè)環(huán)形的繪制方法，相信學(xué)會(huì)一個(gè)，其他幾個(gè)也就可以自行了解了。

如我們看到的，我們選擇形狀，選擇兩個(gè)缺口的圓形，調(diào)整好大小，將缺口調(diào)整為180度，講個(gè)兩半圓重合，選中兩個(gè)半圓，點(diǎn)擊元件樣式中的“排除”按鈕。此時(shí)，兩個(gè)半圓就合并成一個(gè)環(huán)形了（這里除了排除按鈕外，還有其他三個(gè)按鈕，妙用多多，大家自行研究哦）

Step three

我們將元件如以下序列排序，擺放在一起，如圖：

交互步驟

Step one

添加一個(gè)全局變量Percent，默認(rèn)值為零。

Step two

為開始btn設(shè)置交互：

簡(jiǎn)單解釋一下，這里將鼠標(biāo)單擊分解為鼠標(biāo)按下和鼠標(biāo)釋放時(shí)兩步，鼠標(biāo)按下時(shí)設(shè)置了圖案大小縮放，以制造點(diǎn)擊效果；環(huán)形進(jìn)度條旋轉(zhuǎn)設(shè)置了角度，旋轉(zhuǎn)速度；在4號(hào)環(huán)形旋轉(zhuǎn)結(jié)束后，需將3號(hào)環(huán)形置底，這時(shí)候，1號(hào)進(jìn)度條才能進(jìn)入讀取狀態(tài)。

還有當(dāng)鼠標(biāo)按下的時(shí)候，設(shè)置百分比顯示框的文本為 [[Percent]] %，我們知道一開始就設(shè)置了全局變量Percent為0，那么這時(shí)候，百分比顯示框的值就為0 %。

當(dāng)鼠標(biāo)釋放的時(shí)候，設(shè)置開始btn的禁用和啟用，目的是做按鈕控制，作為產(chǎn)品經(jīng)理，我們?cè)谠O(shè)計(jì)產(chǎn)品的時(shí)候一定會(huì)考慮按鈕控制問題，每次點(diǎn)擊一個(gè)按鈕，在收到系統(tǒng)恢復(fù)的結(jié)果前是不能再次出發(fā)的，否則就是重復(fù)提交，作為一個(gè)嚴(yán)謹(jǐn)細(xì)心的PM，咳咳，所以在這里設(shè)置了按鈕控制！哈哈哈

Step three

我們?cè)谏线叺慕换ダ锩嬖O(shè)置了百分比顯示框，那么，此時(shí)數(shù)據(jù)就是0 %，如何讓百分比隨著進(jìn)度條的加載而變化呢？這時(shí)候就需要另一段交互了。

我們選中百分比顯示框，設(shè)置文字改變時(shí)，判斷全局變量Percent的值是否大于100，如果不是，就讓全局變量的值加1，等待一定的時(shí)間后，設(shè)置百分比顯示框的文本為[[percent]] %。此時(shí)，百分比顯示框的文本再次變化，于是又進(jìn)入判斷流程，這樣便形成了一個(gè)閉環(huán)，知道百分比為100的時(shí)候，停止循環(huán)。交互部分如圖所示：

總結(jié)

本案例中比較考驗(yàn)操作者對(duì)Axure的熟悉程度和思維邏輯，相信很多使用者很少會(huì)用到排除這個(gè)按鈕，因?yàn)樘[蔽了，而且日常很少用到。另外，利用文字改變時(shí)形成循環(huán)閉環(huán)，也蠻有意思的，大部分的初學(xué)者在使用變量的時(shí)候一般會(huì)設(shè)置多個(gè)隱藏文本框，用于記錄數(shù)據(jù)，以此來實(shí)現(xiàn)循環(huán)判斷，此處值得研究。

依然鄭重提醒大家，本教程只能用Axure RP 9 及以上版本打開，堅(jiān)持使用Axure RP 9的原因很簡(jiǎn)單，就是想與時(shí)俱進(jìn)，擁抱變化，適應(yīng)未來。

最后，原型下載鏈接：

https://pan.baidu.com/s/1_Dcn5QAXM0Gej67KlaJo0Q

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

題圖來自Unsplash，基于CC0協(xié)議