Axure教程：進(jìn)度條的實(shí)現(xiàn)

20 評(píng)論 21714 瀏覽 54 收藏 5 分鐘

Axure的進(jìn)度條應(yīng)該如何實(shí)現(xiàn)呢？本文對(duì)每一個(gè)步驟進(jìn)行了講解。

1.需要注意的地方

（1）進(jìn)度條如何實(shí)現(xiàn)？

（2）進(jìn)度百分比如何實(shí)現(xiàn)？

2.元件準(zhǔn)備

從元件庫中拖動(dòng)一個(gè)矩形作為背景槽，命名為“background”大小設(shè)置為寬200*高20，一個(gè)按鈕作為開始按鈕，命名為“start”大小設(shè)置為寬100*高40，一個(gè)動(dòng)態(tài)面板作為進(jìn)度條，命名“panel”，為面板增加一個(gè)狀態(tài)“state2”，設(shè)置相同的背景色，大小設(shè)置為寬1*高20，一個(gè)文本標(biāo)簽，命名“text”。

3.交互

（1）當(dāng)我們鼠標(biāo)點(diǎn)擊“開始”，進(jìn)度條開始變化，所以我們要為“開始”按鈕添加“鼠標(biāo)點(diǎn)擊時(shí)”交互，設(shè)置“panel”尺寸，設(shè)置寬度為“background”寬度的1%，高度為“background”的高度。

這樣設(shè)置完之后我們打開瀏覽器預(yù)覽，點(diǎn)擊“開始”，發(fā)現(xiàn)動(dòng)態(tài)面板只發(fā)生了一點(diǎn)點(diǎn)變化，就是變成了“background”寬度的1%。

（2）進(jìn)度百分比實(shí)現(xiàn)，為動(dòng)態(tài)面板“尺寸改變時(shí)”添加交互，為“text”設(shè)置文本。

根據(jù)“ 進(jìn)度 = 進(jìn)度條的寬度 / 進(jìn)度槽的寬度 % ”，轉(zhuǎn)換成原型中的函數(shù)為：

[[ math.ceil ( 100 * LVAR1.width / LVAR2.width ) ]] %

math.ceil(x)函數(shù)為向上取整函數(shù)，返回大于或等于參數(shù)x，并且與之最接近的整數(shù)。

LVAR1.width是【進(jìn)度條】的寬度，LVAR2.width是【進(jìn)度槽】的寬度。兩者相除后乘以100，再向上取整后得到百分比數(shù)制的整數(shù)數(shù)值部分，再添加“%”號(hào)組成百分比數(shù)制的文本。

做完上述步驟，瀏覽器預(yù)覽，發(fā)現(xiàn)顯示進(jìn)度1%，進(jìn)度條和進(jìn)度百分比都沒有變化。

因?yàn)閯?dòng)態(tài)面板沒有變化，通過動(dòng)態(tài)面板的的狀態(tài)改變達(dá)到進(jìn)度條增長的效果，所以設(shè)置動(dòng)態(tài)面板為向后循環(huán)。

（3）為動(dòng)態(tài)面板“狀態(tài)改變時(shí)”，添加條件 ?if “[[LVAR1.width]]” < “[[LVAR2.width]]”，LVAR1.width是【進(jìn)度條】的寬度，LVAR2.width是【進(jìn)度槽】的寬度。

為動(dòng)態(tài)面板設(shè)置尺寸，寬度為[[LVAR1.width+LVAR2.width/100]]，高度為[[LVAR1.height]]，設(shè)置動(dòng)畫為線性，時(shí)間50ms。

做完上述步驟，再按F5預(yù)覽，發(fā)現(xiàn)已經(jīng)出現(xiàn)了我們需要的效果。

源文件附有拖動(dòng)顯示百分比，比較簡單，就不做詳述了，下載后自己去看。

原型預(yù)覽地址：https://i8v8py.axshare.com

源文件下載https://pan.baidu.com/s/1uhKZldBP6CYVlESdTDa6kQ ?密碼/tac6

 

本文由 @就這樣吧！ 原創(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
就這樣吧！
5篇作品 163954總閱讀量
04-218596 瀏覽
格式塔心理學(xué) | 設(shè)計(jì)師需要知道的設(shè)計(jì)原則！
09-121556 瀏覽
人在創(chuàng)業(yè)公司，怎么才能去大廠
07-184764 瀏覽
JTBD視角：優(yōu)化成果，而不是優(yōu)化產(chǎn)品
02-072527 瀏覽
當(dāng)年輕人“不再恐婚”，互聯(lián)網(wǎng)婚介卻迎來大衰退
08-309448 瀏覽
定位智能化設(shè)計(jì)：AIGC產(chǎn)品智能化設(shè)計(jì)原則
評(píng)論
評(píng)論請(qǐng)登錄

  1. 什么垃圾教程，邏輯混亂，語言跳躍

    來自北京 回復(fù)

  2. 你這太復(fù)雜了，直接動(dòng)態(tài)面板的設(shè)置尺寸就可以了

    來自廣東 回復(fù)

    1. 這種效果才好，直接幾個(gè)動(dòng)態(tài)面板的轉(zhuǎn)換效果真的太差了

      來自浙江 回復(fù)

  3. 你好，為什么要設(shè)置第二個(gè)動(dòng)態(tài)面板

    來自廣東 回復(fù)

  4. 為啥我做出來，跟你的一模一樣，但是愣是顯示加載到：101%，我無論調(diào)整哪里都是101，我看了你的一遍又一遍，結(jié)果你的就漲到100？這是為什么了？

    來自河南 回復(fù)

  5. 提取密碼改了么？

    來自上海 回復(fù)

  6. 最后的文本賦值，大于了100%，將Math.ceil(x)–向上取整 函數(shù)換成Math.floor(x)——向下取整 解決。

    來自湖南 回復(fù)

    1. 好的，我試了一下也可以，但是在設(shè)置進(jìn)度條狀態(tài)改變的時(shí)候，它的長度不會(huì)超過進(jìn)度槽的長度，所以它就不會(huì)超過100%，那么換不換函數(shù)應(yīng)該沒多大關(guān)系吧！不知道我這樣理解對(duì)不對(duì)，

      來自甘肅 回復(fù)

    2. 動(dòng)態(tài)面板基礎(chǔ)長度是1，無法設(shè)置為0，又最終的長度=面板初始長度+背景長度，故面板大于了背景長度。

      來自湖南 回復(fù)

    3. ?? ，有道理啊，但是這樣的話應(yīng)該不是100%,但是結(jié)果是100%，怎么說？我還沒理解

      來自甘肅 回復(fù)

    4. 我這邊的結(jié)果比例是101%。所以才提出了向下取整

      來自湖南 回復(fù)

    5. ?? 學(xué)習(xí)了，以后會(huì)注意這一點(diǎn)，謝謝提出

      來自甘肅 回復(fù)

  7. 代碼起了至關(guān)重要的作用～

    回復(fù)

    1. 多練習(xí)幾遍，掌握關(guān)鍵步驟，很多東西都是可以做出來的，我也是產(chǎn)品小白，有問題隨時(shí)交流，大家共同進(jìn)步

      來自甘肅 回復(fù)

  8. 我在最后預(yù)覽的時(shí)候，進(jìn)度條的加載會(huì)越來越慢，不知道為什么

    來自北京 回復(fù)

    1. 很神奇，我在本地預(yù)覽的時(shí)候會(huì)卡進(jìn)度條，但是publish之后用網(wǎng)址打開就不卡，可能是我電腦太垃圾了

      來自北京 回復(fù)

    2. 主要是這個(gè)服務(wù)器本身就卡，但是你下載之后，到本地應(yīng)該不卡

      來自甘肅 回復(fù)

  9. 哇，好厲害

    來自浙江 回復(fù)

    1. 沒有，我也是看了很多文章，總結(jié)出了適合自己，分享給大家，有問題還請(qǐng)指正。

      來自甘肅 回復(fù)

  10. 發(fā)布時(shí)沒有選擇拖動(dòng)顯示百分比頁面，這里重新生成了一下
    https://pxlcgt.axshare.com

    來自甘肅 回復(fù)