學(xué)習(xí) Axure 其實(shí)很容易上手，不過(guò)要熟練應(yīng)用 Axure，最重要的是學(xué)會(huì)綜合應(yīng)用 Axure 的各種事件和屬性，本文作者通過(guò)進(jìn)度條這個(gè)簡(jiǎn)單的案例，講解如何綜合應(yīng)用 Axure 的各種特性。

本文是一篇寫給剛學(xué)完 Axure 基礎(chǔ)的新手讀者，大佬請(qǐng)勿噴，主要為剛上手 Axure 的產(chǎn)品經(jīng)理提供一種綜合應(yīng)用的思路，所以本文我不是講解如何繪制出一個(gè)高保真的進(jìn)度條，而是介紹通過(guò)什么組件的什么屬性來(lái)完成什么樣的功能的思路來(lái)介紹。

一、動(dòng)態(tài)面板拖動(dòng)事件

首先來(lái)繪制進(jìn)度條的雛形，用【矩形】繪制出進(jìn)度條的容器，用【圓形】繪制進(jìn)度游標(biāo)，然后右鍵將圓形【轉(zhuǎn)化為動(dòng)態(tài)面板】

首先我們來(lái)完成的就是按住游標(biāo)的時(shí)候可以進(jìn)行左右拖動(dòng)的功能，因?yàn)閯?dòng)態(tài)面板有一個(gè)拖動(dòng)的事件，所以這也是要將游標(biāo)轉(zhuǎn)化為動(dòng)態(tài)面板的原因，接下來(lái)開始實(shí)操，操作如下：

注意，因?yàn)檫M(jìn)度條一般都是水平拖動(dòng)的，所以這里移動(dòng)要選擇【跟隨水平拖動(dòng)】，接下來(lái)我們預(yù)覽一下看看在瀏覽器中的效果：

拖動(dòng)的效果實(shí)現(xiàn)了，但進(jìn)度條的游標(biāo)應(yīng)該是在進(jìn)度條內(nèi)部拖動(dòng)的，這里卻可以拖到進(jìn)度條外部去，我們對(duì)游標(biāo)的拖動(dòng)事件稍微改造一下，給拖動(dòng)的范圍加一個(gè)界限，我們可以看到，拖動(dòng)的動(dòng)作中，有個(gè)【添加界限】的功能：

點(diǎn)開的時(shí)候，發(fā)現(xiàn)可以給拖動(dòng)的組件增加上下左右的邊界，這里我們應(yīng)該是要給游標(biāo)增加【左側(cè)】和【右側(cè)】的邊界，但關(guān)鍵是，邊界怎么來(lái)確定呢，我們來(lái)分析一下：

如上圖，如果我們要確保游標(biāo)在進(jìn)度條容器范圍內(nèi)活動(dòng)，就需要確保游標(biāo)向左移動(dòng)時(shí)，游標(biāo)的 x 坐標(biāo)不會(huì)超過(guò)進(jìn)度條容器左邊的 x 值，向右移動(dòng)時(shí)，不會(huì)超過(guò)進(jìn)度條容器右邊的 x 值，左邊的 x 值好確定，實(shí)際上就是進(jìn)度條容器的 x 值，從圖中我們可以看出，進(jìn)度條容器的 x = 300，因此，我們左邊界就確定了；

右邊界沒法直接看出來(lái)，但是我們可以發(fā)現(xiàn)，右邊界的 x 坐標(biāo)實(shí)際上就是左邊界的坐標(biāo)+進(jìn)度條容器的寬度，同樣，我們從圖中可以看到，進(jìn)度條的寬度 w=300，因此，右邊界 = 左邊界x + 進(jìn)度條容器寬度 w = 300 + 300 =600，左右邊界確定了，我們來(lái)設(shè)置一下：

再來(lái)看看效果：

效果對(duì)了。

二、函數(shù)表達(dá)式

目前這個(gè)進(jìn)度條是簡(jiǎn)陋而粗糙的，看起來(lái)也不直觀，一般進(jìn)度條左側(cè)表示已經(jīng)走完的進(jìn)度，右側(cè)表示還剩余的進(jìn)度，已經(jīng)走完的進(jìn)度一般會(huì)用一個(gè)填充色來(lái)表現(xiàn)，接下來(lái)我們來(lái)畫出這個(gè)效果：

這個(gè)就比剛剛那個(gè)看起來(lái)更加直觀，但目前這個(gè)進(jìn)度條不會(huì)隨著游標(biāo)的拖拽變化，因此，我們要給這個(gè)游標(biāo)添加一個(gè)交互，讓游標(biāo)左右拖動(dòng)的時(shí)候，進(jìn)度條能跟著游標(biāo)變化，這里我們可以給游標(biāo)【拖動(dòng)時(shí)】添加一個(gè)事件，就是讓進(jìn)度條尺寸跟著變化：

如上圖可以看到，設(shè)置尺寸要求我們給定兩個(gè)參數(shù)，分別是元件的寬度 w 和 高度 h，以及設(shè)置錨點(diǎn)。

先解釋一下這個(gè)錨點(diǎn)，錨點(diǎn)的意思就是以哪個(gè)位置作為原點(diǎn)來(lái)進(jìn)行縮放，比如圖中選擇左上角，就表示當(dāng)圖形在進(jìn)行縮放的時(shí)候，左上角的位置是固定的，不會(huì)隨著元件的縮放而變化，而我們?cè)谕献У臅r(shí)候，是需要左側(cè)固定，右側(cè)進(jìn)行縮放的效果，所以這里的錨點(diǎn)應(yīng)該是選擇左側(cè)中間的點(diǎn)。

再說(shuō)說(shuō)寬度和高度，我們這里是不需要改變進(jìn)度條的高度的，所以高度這里我們按默認(rèn)的20就可以，不用改；而寬度，由于游標(biāo)是動(dòng)態(tài)變化的，所以進(jìn)度條的寬度 w 也應(yīng)該是隨著動(dòng)態(tài)變化，首先我們得知道進(jìn)度條的寬度跟游標(biāo)的關(guān)系：

通過(guò)上方圖片，我們很容易得出結(jié)論，進(jìn)度條 x 是已知的，就是300，而游標(biāo)是活動(dòng)的，所以游標(biāo)的 x 是活動(dòng)的，因此，這里就需要用到函數(shù)表達(dá)式來(lái)表示游標(biāo) x，我們先點(diǎn)開寬度 w 旁邊的 fx：

就彈出了下面的彈窗：

這里的“119”是當(dāng)前進(jìn)度條的寬度，是固定的值，我們不需要，把它刪掉，然后點(diǎn)擊【插入變量或函數(shù)】，輸入 x：

我們是需要獲取元件的 x，所以點(diǎn)擊【元件】分類下的 x：

可以看到自動(dòng)添加了一個(gè)表達(dá)式，This 表達(dá)的就是當(dāng)前元件，也就是游標(biāo)，This.x表達(dá)的就是游標(biāo)的 x，現(xiàn)在有了游標(biāo) x，我們還需要減去進(jìn)度條的 x，也就是300：

保存后就設(shè)置好了，我們來(lái)看看效果：

效果是有了，但有沒有感覺這個(gè)進(jìn)度條奇奇怪怪的，拉到最右邊的時(shí)候，進(jìn)度條也沒有辦法填滿，中間還隔著一個(gè)游標(biāo)：

所以我們可以對(duì)這個(gè)表達(dá)式再做一個(gè)優(yōu)化，就是再加上當(dāng)前游標(biāo)的寬度，添加方法類似剛剛添加游標(biāo) x，添加完的設(shè)置如下：

這次我們?cè)賮?lái)看一下效果：

怎么樣，是不是你想象中的完美樣子？

三、局部變量

雖然圖形看起來(lái)很直觀，但是卻始終沒有數(shù)字精確，接下來(lái)我們就來(lái)做個(gè)百分比顯示的功能，精準(zhǔn)顯示當(dāng)前進(jìn)度條走了多少。先在進(jìn)度條右側(cè)添加一個(gè)占位文本，待會(huì)用來(lái)顯示百分比：

進(jìn)度條百分比好算，就是拿已經(jīng)走完的進(jìn)度條的寬度 / 完整的進(jìn)度條容器的寬度 * 100%就可以了，

完整的進(jìn)度條寬度我們是能知道的，但已經(jīng)走完的進(jìn)度條寬度是動(dòng)態(tài)的，我們?cè)趺粗滥?？是不是可以用我們上面講到的函數(shù)表達(dá)式來(lái)做呢？那就來(lái)試試，我們給百分比的占位文案【設(shè)置文本】，文本的值同樣采用函數(shù)表達(dá)式（fx）的方式：

我們先用上面相同的方法添加寬度，然后除以完整進(jìn)度條的寬度300：

保存后來(lái)看看效果：

可以看到，拖動(dòng)的時(shí)候，文字確實(shí)變了，但是這個(gè)數(shù)值明顯跟實(shí)際進(jìn)度不一樣，而且數(shù)值是固定的，并不會(huì)隨著進(jìn)度條的拖動(dòng)而變化，我們來(lái)分析一下原因：剛剛我們講過(guò)，This 指代的是當(dāng)前元件，我們是在游標(biāo)里面的拖動(dòng)事件中設(shè)置的，所以 This 指代的就是游標(biāo)，因此上述圖片實(shí)現(xiàn)的效果是用游標(biāo)的寬度/300，得出來(lái)的顯然不是我們要的結(jié)果，那我們這里要怎么獲得已走過(guò)的進(jìn)度條的寬度呢，這就涉及到另外一個(gè)概念叫【局部變量】了。

我們看到，上述圖片下半部分有個(gè)【局部變量】的區(qū)域，我們點(diǎn)擊【添加局部變量】，發(fā)現(xiàn)它自動(dòng)添加了一個(gè) LVAR1 的變量：

由于我們是需要獲得進(jìn)度條這個(gè)元件，所以第二個(gè)字段類型我們選擇【元件】，【目標(biāo)】選擇進(jìn)度條：

這個(gè)時(shí)候，我們可以理解為，LVAR1 就等同于進(jìn)度條這個(gè)組件，這樣就好辦了，我們?nèi)绻枰@得進(jìn)度條的寬度，就類似上述的 This.width 一樣，用 LVAR1.width 就可以了：

保存之后再來(lái)看看效果：

這下就對(duì)了，但是我們想要的是百分比，不是小數(shù)，我們只需要對(duì)上述的表達(dá)式做一個(gè)小小的優(yōu)化即可，把獲得的數(shù)值乘以100，然后再加上%，注意，因?yàn)?是拼接上去，不參與數(shù)值的運(yùn)算，所以要放在[[]]外面，%放在[[]]里面是一個(gè)錯(cuò)誤的表達(dá)式，無(wú)法正確計(jì)算出結(jié)果：

再來(lái)看看效果：

看起來(lái)一切都很完美，但美中不足的是，在某些進(jìn)度下，百分比的數(shù)值過(guò)長(zhǎng)，如果我們只需要保留小數(shù)點(diǎn)后2位，可以怎么做呢？

Axure 中有一個(gè)函數(shù)，叫 toFixed(decimalPoints)，可以取某個(gè)小數(shù)的小數(shù)點(diǎn)后幾位，decimalPoints 表示要取的位數(shù)：

我們改一下表達(dá)式：

再看一下效果：

到這里，我們的進(jìn)度條就畫完了，但是……

四、通用化設(shè)計(jì)

有時(shí)候我們的一些設(shè)計(jì)做起來(lái)復(fù)雜，但是通用性又很高，在很多設(shè)計(jì)作品中都能重復(fù)用到，我們希望在設(shè)計(jì)其他產(chǎn)品的時(shí)候，可以直接復(fù)制粘貼，做一些位置和尺寸的微調(diào)就能用，這就叫通用化設(shè)計(jì)，我們來(lái)看看我們剛剛做的進(jìn)度條是否是通用化設(shè)計(jì)，我把進(jìn)度條換了個(gè)位置，并拉長(zhǎng)了進(jìn)度條容器的長(zhǎng)度，我們看一下效果：

這已經(jīng)完全不能看了，拖動(dòng)的時(shí)候游標(biāo)亂飄，無(wú)法拖動(dòng)到最左端和最右端，百分比計(jì)數(shù)也是完全不對(duì)的，等于說(shuō)我們上面所做的設(shè)置都無(wú)效了，這其實(shí)是因?yàn)槲覀冊(cè)谧鲞@個(gè)進(jìn)度條的時(shí)候，很多的位置和尺寸的數(shù)值都是固定的，也就是說(shuō)，這個(gè)進(jìn)度條只有在特定位置和特定寬度下才能按照我們所設(shè)定的邏輯呈現(xiàn)，一旦位置或尺寸任意一個(gè)數(shù)值發(fā)生了變化，都可能導(dǎo)致原來(lái)的設(shè)計(jì)出現(xiàn)問(wèn)題，那如何才能改成通用化設(shè)計(jì)呢？

實(shí)際上，一個(gè)元件要復(fù)用，在復(fù)用的時(shí)候最可能調(diào)整的，除了樣式，就是位置和尺寸，樣式不會(huì)影響功能的實(shí)現(xiàn)，剩下的就是位置和尺寸，如果要使一個(gè)元件在調(diào)整了位置和尺寸后還能正常使用，那么這個(gè)元件的位置和尺寸參數(shù)就要做成動(dòng)態(tài)的，結(jié)合我們上面講到的局部變量，我們來(lái)對(duì)這個(gè)進(jìn)度條做一個(gè)通用化的調(diào)整。

首先是拖動(dòng)時(shí)候游標(biāo)的邊界，上方的動(dòng)圖可以看出，由于我們把游標(biāo)邊界設(shè)為固定值，那么游標(biāo)就只能在固定的區(qū)域內(nèi)活動(dòng)，我們要確保在改變位置和尺寸后，游標(biāo)依然能夠正常識(shí)別進(jìn)度條的真正邊界，就需要把這個(gè)邊界設(shè)成動(dòng)態(tài)的。在前文中我們已經(jīng)總結(jié)過(guò)，游標(biāo)的左邊界=進(jìn)度條容器的 x 值，右邊界=進(jìn)度條容器 x + 進(jìn)度條容器寬度 w，我們來(lái)把下方游標(biāo)的左右邊界改成函數(shù)表達(dá)式：

下方是游標(biāo)左邊界的函數(shù)表達(dá)式：

接著是游標(biāo)右邊界的函數(shù)表達(dá)式：

保存之后我們看看游標(biāo)的拖動(dòng)是否正常：

這樣，游標(biāo)的拖動(dòng)就恢復(fù)成我們要的效果了，但是已經(jīng)走完的進(jìn)度條還是錯(cuò)的，不會(huì)跟隨游標(biāo)，我們也將進(jìn)度條的參數(shù)改成函數(shù)表達(dá)式：

這里進(jìn)度條的高度沒有影響到我們的設(shè)計(jì)，所以高度維持不變，我們對(duì)寬度進(jìn)行改造，將進(jìn)度條容器的 x 值換成動(dòng)態(tài)的：

保存看看效果：

現(xiàn)在進(jìn)度條正常了，但是百分比還是錯(cuò)誤的，我們對(duì)百分比的函數(shù)表達(dá)式也做一個(gè)調(diào)整，將進(jìn)度條容器的寬度也換成動(dòng)態(tài)的：

再來(lái)看一下效果：

為了驗(yàn)證這個(gè)進(jìn)度條是不是可以真的可以通用化，我們?cè)僦匦抡{(diào)整它的位置和尺寸看一下：

可以看到，這個(gè)進(jìn)度條依舊是正常的，這樣我們就完成了進(jìn)度條的通用化設(shè)計(jì)，這才是我真正想分享給你的通用化進(jìn)度條設(shè)計(jì)，各位讀者如果有看不明白的地方歡迎在評(píng)論區(qū)留言指出。