2023年【Axure 基礎教程】沒想到你是這樣的進度條2.0

【Axure基礎教程】沒想到你是這樣的進度條2.0產品設計中隨處可見的進度條，還能夠被產品經理玩出什么花兒來，通過本篇文章告知你。

上次，我共享了《【Axure基礎教程】沒想到你是這樣的進度條》，介紹通過一個簡潔的進度條案例如何綜合應用Axure的各種特性，假如你已經遺忘了或者沒有看過，記得去回顧一下哦，不然這篇文章有些內容你可能不知道在說什么。

這次，我?guī)?.0的共享，主要是針對上次做的1.0，修復1個bug，優(yōu)化1個特性，新增2個新特性（會有新的學問點哦）。

一、1個bug

這是上次我們做的進度條效果：

可以看到，進度條拖拽到最左側的時候，百分比不是0.00%，消失這樣的問題是由于我們給進度條加了一個與游標相等的寬度，所以游標拖到最左端時，進度條也會有一個默認的寬度，就導致算出來的百分比結果不是0.00%：

那怎么辦，把這個寬度去掉嗎？但是去掉進度條又很難看，就像下面的效果，而且這樣也解決不了問題，由于拉到最右端的時候，進度條離填滿進度條容器還差一個游標的寬度距離，這樣算出來也不會是100.00%：

其實我在共享上一篇文章的時候已經發(fā)覺這個問題，而且當時就已經想好解決方案，但是由于篇幅太長，所以就分了一個2.0出來特地解決這個問題，其實要解決很簡潔，總共分兩步：

第一步，進度條不是+游標寬度，而是+1/2游標寬度，如下：

看看效果：

依舊不是我們要的效果，反倒連拉到最右端的百分比也不準了，但是可以發(fā)覺，現(xiàn)在游標移到最左端和最右端的時候，兩端的數(shù)值與期望值的差值是一樣的，都是6.62%，這個差值其實就是那1/2寬度造成的，想解決這個，就要靠其次步調整。

其次步：調整游標的活動邊界，最左端和最右端各自允很多活動1/2游標寬度：

再看看效果：

這次百分比效果是完善的，但是拉到最左端和最右端的時候，的確比較難看，不過沒關系，不是我偷懶，而是真實的產品設計中，不會像我這樣為了演示效果把進度條畫這么粗，給你看看一個真實的視頻網站進度條的效果：

可以看到，在實際設計時，進度條不會那么粗，剛開頭的時候，游標有一半是在視頻畫面外，但是這樣看起來也毫無違和感，所以我們這個bug應當可以算是解決了。

二、1個優(yōu)化

這個優(yōu)化，我想優(yōu)化的是百分比，下圖可以看出，在進度條剛載入的時候，已經有一個默認進度，但是百分比還是0.00%，需要拖動進度條百分比才會變，這里需要優(yōu)化的是當進度條載入的時候，百分比就要顯示精確?????的值了，除此之外，我還盼望這個百分比能跟隨游標，而不是固定在最右端，所以我們來動一下手吧。

跟隨的這個好做，還記得我們的游標是什么吧，是【動態(tài)面板】，我們只需要把這個百分比放到動態(tài)面板中去就可以，建議在【概要】中直接將百分比拖進動態(tài)面板，假如你是剪切粘貼進去，Axure會認為這是一個新元件，跟原來元件有關的交互都需要重新寫。

看看效果吧：

接下來只需要在百分比加載的時候，依據進度條實際位置計算正確的百分比就可以了，這里只需要在【載入時】設置百分比的文本，設置參數(shù)跟拖動游標時設置文本用一樣的參數(shù)即可：

刷新頁面看看，默認百分比也有了：

三、魔法手指

接下來要新增特性了，這個進度條目前只能通過拖動游標來掌握進度，但是現(xiàn)在幾乎全部的進度條都是支持點擊跳轉到對應的進度，接下來我們就來實現(xiàn)這個功能。

先給進度條容器添加點擊功能，點擊時讓游標移動到鼠標所在位置：

由于我們只需要水平移動，所以游標的y值還是保持不變，x值變?yōu)槭髽怂诘膞值，【Cursor.x】就是用來獵取鼠標所在位置的x值的，然后再減去1/2游標的寬度，這樣做的目的是當游標移到鼠標位置的時候，是剛好在鼠標的正中間，而不是鼠標右邊，來看看效果：

可以看到，點擊進度條容器的時候，效果是符合預期的，但是點擊已經走過的進度條卻沒有反應，這是由于已經走過的進度條蓋在了進度條容器上方，所以這里點擊不了，這里有兩種解決方案，第一種就是給已經走過的進度條也添加相同大事，另外一種，就是把已經走過的進度條放到進度條容器底下，然后再把進度條容器的填充色改成透亮?????即可：

接下來給游標添加大事，讓游標移動時，進度條能跟隨游標位置自行調整寬度，并且百分比能正確計算：

這里的大事直接從上方的拖動大事復制粘貼下來即可，改完后再來看看效果：

這個“魔法手指”的功能就完成了。

四、行星大碰撞

看到這里，你可能會懷疑我的精力是不是都拿來起名字了，是的，誰讓我不務正業(yè)呢，接下來要增加的這個功能，嚴格上來說不是通用進度條的特性，主要是在視頻網站用得比較多，比如當前觀看的視頻有哪些爆點或關鍵點，會在進度條上進行標記，當游標拖動到四周時，假如跟關鍵點離得足夠近，就會被“吸附”過去，這就是我們接下來要實現(xiàn)的功能，先給進度條添加所謂的爆點或關鍵點，為了便利演示，我給2個關鍵點命名為1和2：

然后給游標【拖動結束時】添加大事，假如發(fā)覺游標接觸到了某個關鍵點，就自動“吸附”過去：

怎么推斷游標接觸到關鍵點呢，在Axure推斷條件中有個【元件范圍】的【接觸】與【未接觸】推斷，可以用來推斷兩個元件是否有接觸，我們來看看效果吧：

這