Axure RP 9 教程:環(huán)形進(jìn)度條

0 評(píng)論 9236 瀏覽 17 收藏 6 分鐘

環(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é)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒評(píng)論,等你發(fā)揮!