學習 Axure 其實很容易上手，不過要熟練應用 Axure，最重要的是學會綜合應用 Axure 的各種事件和屬性，本文作者通過進度條這個簡單的案例，講解如何綜合應用 Axure 的各種特性。

本文是一篇寫給剛學完 Axure 基礎的新手讀者，大佬請勿噴，主要為剛上手 Axure 的產品經理提供一種綜合應用的思路，所以本文我不是講解如何繪制出一個高保真的進度條，而是介紹通過什么組件的什么屬性來完成什么樣的功能的思路來介紹。

一、動態面板拖動事件

首先來繪制進度條的雛形，用【矩形】繪制出進度條的容器，用【圓形】繪制進度游標，然后右鍵將圓形【轉化為動態面板】

首先我們來完成的就是按住游標的時候可以進行左右拖動的功能，因為動態面板有一個拖動的事件，所以這也是要將游標轉化為動態面板的原因，接下來開始實操，操作如下：

注意，因為進度條一般都是水平拖動的，所以這里移動要選擇【跟隨水平拖動】，接下來我們預覽一下看看在瀏覽器中的效果：

拖動的效果實現了，但進度條的游標應該是在進度條內部拖動的，這里卻可以拖到進度條外部去，我們對游標的拖動事件稍微改造一下，給拖動的范圍加一個界限，我們可以看到，拖動的動作中，有個【添加界限】的功能：

點開的時候，發現可以給拖動的組件增加上下左右的邊界，這里我們應該是要給游標增加【左側】和【右側】的邊界，但關鍵是，邊界怎么來確定呢，我們來分析一下：

如上圖，如果我們要確保游標在進度條容器范圍內活動，就需要確保游標向左移動時，游標的 x 坐標不會超過進度條容器左邊的 x 值，向右移動時，不會超過進度條容器右邊的 x 值，左邊的 x 值好確定，實際上就是進度條容器的 x 值，從圖中我們可以看出，進度條容器的 x = 300，因此，我們左邊界就確定了；

右邊界沒法直接看出來，但是我們可以發現，右邊界的 x 坐標實際上就是左邊界的坐標+進度條容器的寬度，同樣，我們從圖中可以看到，進度條的寬度 w=300，因此，右邊界 = 左邊界x + 進度條容器寬度 w = 300 + 300 =600，左右邊界確定了，我們來設置一下：

再來看看效果：

效果對了。

二、函數表達式

目前這個進度條是簡陋而粗糙的，看起來也不直觀，一般進度條左側表示已經走完的進度，右側表示還剩余的進度，已經走完的進度一般會用一個填充色來表現，接下來我們來畫出這個效果：

這個就比剛剛那個看起來更加直觀，但目前這個進度條不會隨著游標的拖拽變化，因此，我們要給這個游標添加一個交互，讓游標左右拖動的時候，進度條能跟著游標變化，這里我們可以給游標【拖動時】添加一個事件，就是讓進度條尺寸跟著變化：

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

先解釋一下這個錨點，錨點的意思就是以哪個位置作為原點來進行縮放，比如圖中選擇左上角，就表示當圖形在進行縮放的時候，左上角的位置是固定的，不會隨著元件的縮放而變化，而我們在拖拽的時候，是需要左側固定，右側進行縮放的效果，所以這里的錨點應該是選擇左側中間的點。

再說說寬度和高度，我們這里是不需要改變進度條的高度的，所以高度這里我們按默認的20就可以，不用改；而寬度，由于游標是動態變化的，所以進度條的寬度 w 也應該是隨著動態變化，首先我們得知道進度條的寬度跟游標的關系：

通過上方圖片，我們很容易得出結論，進度條 x 是已知的，就是300，而游標是活動的，所以游標的 x 是活動的，因此，這里就需要用到函數表達式來表示游標 x，我們先點開寬度 w 旁邊的 fx：

就彈出了下面的彈窗：

這里的“119”是當前進度條的寬度，是固定的值，我們不需要，把它刪掉，然后點擊【插入變量或函數】，輸入 x：

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

可以看到自動添加了一個表達式，This 表達的就是當前元件，也就是游標，This.x表達的就是游標的 x，現在有了游標 x，我們還需要減去進度條的 x，也就是300：

保存后就設置好了，我們來看看效果：

效果是有了，但有沒有感覺這個進度條奇奇怪怪的，拉到最右邊的時候，進度條也沒有辦法填滿，中間還隔著一個游標：

所以我們可以對這個表達式再做一個優化，就是再加上當前游標的寬度，添加方法類似剛剛添加游標 x，添加完的設置如下：

這次我們再來看一下效果：

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

三、局部變量

雖然圖形看起來很直觀，但是卻始終沒有數字精確，接下來我們就來做個百分比顯示的功能，精準顯示當前進度條走了多少。先在進度條右側添加一個占位文本，待會用來顯示百分比：

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

完整的進度條寬度我們是能知道的，但已經走完的進度條寬度是動態的，我們怎么知道呢？是不是可以用我們上面講到的函數表達式來做呢？那就來試試，我們給百分比的占位文案【設置文本】，文本的值同樣采用函數表達式（fx）的方式：

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

保存后來看看效果：

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

我們看到，上述圖片下半部分有個【局部變量】的區域，我們點擊【添加局部變量】，發現它自動添加了一個 LVAR1 的變量：

由于我們是需要獲得進度條這個元件，所以第二個字段類型我們選擇【元件】，【目標】選擇進度條：

這個時候，我們可以理解為，LVAR1 就等同于進度條這個組件，這樣就好辦了，我們如果需要獲得進度條的寬度，就類似上述的 This.width 一樣，用 LVAR1.width 就可以了：

保存之后再來看看效果：

這下就對了，但是我們想要的是百分比，不是小數，我們只需要對上述的表達式做一個小小的優化即可，把獲得的數值乘以100，然后再加上%，注意，因為%是拼接上去，不參與數值的運算，所以要放在[[]]外面，%放在[[]]里面是一個錯誤的表達式，無法正確計算出結果：

再來看看效果：

看起來一切都很完美，但美中不足的是，在某些進度下，百分比的數值過長，如果我們只需要保留小數點后2位，可以怎么做呢？

Axure 中有一個函數，叫 toFixed(decimalPoints)，可以取某個小數的小數點后幾位，decimalPoints 表示要取的位數：

我們改一下表達式：

再看一下效果：

到這里，我們的進度條就畫完了，但是……

四、通用化設計

有時候我們的一些設計做起來復雜，但是通用性又很高，在很多設計作品中都能重復用到，我們希望在設計其他產品的時候，可以直接復制粘貼，做一些位置和尺寸的微調就能用，這就叫通用化設計，我們來看看我們剛剛做的進度條是否是通用化設計，我把進度條換了個位置，并拉長了進度條容器的長度，我們看一下效果：

這已經完全不能看了，拖動的時候游標亂飄，無法拖動到最左端和最右端，百分比計數也是完全不對的，等于說我們上面所做的設置都無效了，這其實是因為我們在做這個進度條的時候，很多的位置和尺寸的數值都是固定的，也就是說，這個進度條只有在特定位置和特定寬度下才能按照我們所設定的邏輯呈現，一旦位置或尺寸任意一個數值發生了變化，都可能導致原來的設計出現問題，那如何才能改成通用化設計呢？

實際上，一個元件要復用，在復用的時候最可能調整的，除了樣式，就是位置和尺寸，樣式不會影響功能的實現，剩下的就是位置和尺寸，如果要使一個元件在調整了位置和尺寸后還能正常使用，那么這個元件的位置和尺寸參數就要做成動態的，結合我們上面講到的局部變量，我們來對這個進度條做一個通用化的調整。

首先是拖動時候游標的邊界，上方的動圖可以看出，由于我們把游標邊界設為固定值，那么游標就只能在固定的區域內活動，我們要確保在改變位置和尺寸后，游標依然能夠正常識別進度條的真正邊界，就需要把這個邊界設成動態的。在前文中我們已經總結過，游標的左邊界=進度條容器的 x 值，右邊界=進度條容器 x + 進度條容器寬度 w，我們來把下方游標的左右邊界改成函數表達式：

下方是游標左邊界的函數表達式：

接著是游標右邊界的函數表達式：

保存之后我們看看游標的拖動是否正常：

這樣，游標的拖動就恢復成我們要的效果了，但是已經走完的進度條還是錯的，不會跟隨游標，我們也將進度條的參數改成函數表達式：

這里進度條的高度沒有影響到我們的設計，所以高度維持不變，我們對寬度進行改造，將進度條容器的 x 值換成動態的：

保存看看效果：

現在進度條正常了，但是百分比還是錯誤的，我們對百分比的函數表達式也做一個調整，將進度條容器的寬度也換成動態的：

再來看一下效果：

為了驗證這個進度條是不是可以真的可以通用化，我們再重新調整它的位置和尺寸看一下：

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