作為產(chǎn)品設(shè)計(jì)中隨處可見的進(jìn)度條，還能夠有什么花樣呢？本文作者在上篇進(jìn)度條教程文章的基礎(chǔ)上，修復(fù)了1個(gè)bug，優(yōu)化了1個(gè)特性，新增了2個(gè)新特性，一起來看一下吧。

產(chǎn)品設(shè)計(jì)中隨處可見的進(jìn)度條，還能夠被產(chǎn)品經(jīng)理玩出什么花兒來，作者通過本篇文章告訴你。

上次，我分享了《【Axure 基礎(chǔ)教程】沒想到你是這樣的進(jìn)度條》，介紹通過一個(gè)簡(jiǎn)單的進(jìn)度條案例如何綜合應(yīng)用 Axure 的各種特性，如果你已經(jīng)忘記了或者沒有看過，記得去回顧一下哦，不然這篇文章有些內(nèi)容你可能不知道在說什么。

這次，我?guī)?.0的分享，主要是針對(duì)上次做的1.0，修復(fù)1個(gè) bug，優(yōu)化1個(gè)特性，新增2個(gè)新特性（會(huì)有新的知識(shí)點(diǎn)哦）。

一、1個(gè)bug

這是上次我們做的進(jìn)度條效果：

可以看到，進(jìn)度條拖拽到最左側(cè)的時(shí)候，百分比不是0.00%，出現(xiàn)這樣的問題是因?yàn)槲覀兘o進(jìn)度條加了一個(gè)與游標(biāo)相等的寬度，所以游標(biāo)拖到最左端時(shí)，進(jìn)度條也會(huì)有一個(gè)默認(rèn)的寬度，就導(dǎo)致算出來的百分比結(jié)果不是0.00%：

那怎么辦，把這個(gè)寬度去掉嗎？但是去掉進(jìn)度條又很難看，就像下面的效果，而且這樣也解決不了問題，因?yàn)槔阶钣叶说臅r(shí)候，進(jìn)度條離填滿進(jìn)度條容器還差一個(gè)游標(biāo)的寬度距離，這樣算出來也不會(huì)是100.00%：

其實(shí)我在分享上一篇文章的時(shí)候已經(jīng)發(fā)現(xiàn)這個(gè)問題，而且當(dāng)時(shí)就已經(jīng)想好解決方案，但是因?yàn)槠L(zhǎng)，所以就分了一個(gè)2.0出來專門解決這個(gè)問題，其實(shí)要解決很簡(jiǎn)單，總共分兩步：

第一步，進(jìn)度條不是+游標(biāo)寬度，而是+1/2游標(biāo)寬度，如下：

看看效果：

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

第二步：調(diào)整游標(biāo)的活動(dòng)邊界，最左端和最右端各自允許多活動(dòng)1/2游標(biāo)寬度：

再看看效果：

這次百分比效果是完美的，但是拉到最左端和最右端的時(shí)候，確實(shí)比較難看，不過沒關(guān)系，不是我偷懶，而是真實(shí)的產(chǎn)品設(shè)計(jì)中，不會(huì)像我這樣為了演示效果把進(jìn)度條畫這么粗，給你看看一個(gè)真實(shí)的視頻網(wǎng)站進(jìn)度條的效果：

可以看到，在實(shí)際設(shè)計(jì)時(shí)，進(jìn)度條不會(huì)那么粗，剛開始的時(shí)候，游標(biāo)有一半是在視頻畫面外，但是這樣看起來也毫無(wú)違和感，所以我們這個(gè) bug 應(yīng)該可以算是解決了。

二、1個(gè)優(yōu)化

這個(gè)優(yōu)化，我想優(yōu)化的是百分比，下圖可以看出，在進(jìn)度條剛載入的時(shí)候，已經(jīng)有一個(gè)默認(rèn)進(jìn)度，但是百分比還是0.00%，需要拖動(dòng)進(jìn)度條百分比才會(huì)變，這里需要優(yōu)化的是當(dāng)進(jìn)度條載入的時(shí)候，百分比就要顯示準(zhǔn)確的值了，除此之外，我還希望這個(gè)百分比能跟隨游標(biāo)，而不是固定在最右端，所以我們來動(dòng)一下手吧。

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

看看效果吧：

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

刷新頁(yè)面看看，默認(rèn)百分比也有了：

三、魔法手指

接下來要新增特性了，這個(gè)進(jìn)度條目前只能通過拖動(dòng)游標(biāo)來控制進(jìn)度，但是現(xiàn)在幾乎所有的進(jìn)度條都是支持點(diǎn)擊跳轉(zhuǎn)到對(duì)應(yīng)的進(jìn)度，接下來我們就來實(shí)現(xiàn)這個(gè)功能。

先給進(jìn)度條容器添加點(diǎn)擊功能，點(diǎn)擊時(shí)讓游標(biāo)移動(dòng)到鼠標(biāo)所在位置：

因?yàn)槲覀冎恍枰揭苿?dòng)，所以游標(biāo)的 y 值還是保持不變，x 值變?yōu)槭髽?biāo)所在的 x 值，【Cursor.x】就是用來獲取鼠標(biāo)所在位置的 x 值的，然后再減去1/2游標(biāo)的寬度，這樣做的目的是當(dāng)游標(biāo)移到鼠標(biāo)位置的時(shí)候，是剛好在鼠標(biāo)的正中間，而不是鼠標(biāo)右邊，來看看效果：

可以看到，點(diǎn)擊進(jìn)度條容器的時(shí)候，效果是符合預(yù)期的，但是點(diǎn)擊已經(jīng)走過的進(jìn)度條卻沒有反應(yīng)，這是因?yàn)橐呀?jīng)走過的進(jìn)度條蓋在了進(jìn)度條容器上方，所以這里點(diǎn)擊不了，這里有兩種解決方案，第一種就是給已經(jīng)走過的進(jìn)度條也添加相同事件，另外一種，就是把已經(jīng)走過的進(jìn)度條放到進(jìn)度條容器底下，然后再把進(jìn)度條容器的填充色改成透明即可：

接下來給游標(biāo)添加事件，讓游標(biāo)移動(dòng)時(shí)，進(jìn)度條能跟隨游標(biāo)位置自行調(diào)整寬度，并且百分比能正確計(jì)算：

這里的事件直接從上方的拖動(dòng)事件復(fù)制粘貼下來即可，改完后再來看看效果：

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

四、行星大碰撞

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

然后給游標(biāo)【拖動(dòng)結(jié)束時(shí)】添加事件，如果發(fā)現(xiàn)游標(biāo)接觸到了某個(gè)關(guān)鍵點(diǎn)，就自動(dòng)“吸附”過去：

怎么判斷游標(biāo)接觸到關(guān)鍵點(diǎn)呢，在 Axure 判斷條件中有個(gè)【元件范圍】的【接觸】與【未接觸】判斷，可以用來判斷兩個(gè)元件是否有接觸，我們來看看效果吧：

這樣還不夠完美，最后我們需要給兩個(gè)關(guān)鍵點(diǎn)添加點(diǎn)擊事件，點(diǎn)擊的時(shí)候，直接將游標(biāo)定位到關(guān)鍵點(diǎn)：

來看看最后的效果吧：

至此，進(jìn)度條的所有分享教程就結(jié)束了，如果該教程對(duì)你有用，請(qǐng)幫忙點(diǎn)個(gè)“收藏”或“喜歡”，感謝閱讀！