本文給大家講解一下如何在Axure中制作拖動滑塊解鎖的效果，一起來看看~

今天跟小伙伴們分享一個(gè)Axure很有趣的玩法，這個(gè)玩法可能比前面的稍微復(fù)雜一些。

我們在各大網(wǎng)站注冊新用戶的時(shí)候，可能會遇到需要輸入驗(yàn)證碼或者拖動滑塊解鎖才能進(jìn)入到下一步操作的場景。那么，今天我們就來一起看一下拖動滑塊解鎖的新技能在Axure中是如何實(shí)現(xiàn)的。

話不多說，還是按照我們以往的套路來講解。

下文將從3個(gè)方面來展開。

01 需求分析

首先先來看一下這個(gè)具體的需求是什么？

需求比較簡單：滑塊可以自左向右水平滑動，滑動過的地方顯示為綠色條塊；當(dāng)滑動到最右端的時(shí)候顯示驗(yàn)證通過，并啟用下一步的操作按鈕可以繼續(xù)進(jìn)行下一步操作。

從上面的描述，我們看到有2個(gè)關(guān)鍵點(diǎn)：一個(gè)是滑塊可以在一定范圍內(nèi)滑動；二是滑塊到達(dá)終點(diǎn)時(shí)會觸發(fā)文字顯示，按鈕啟用。當(dāng)然，這里最關(guān)鍵也最難實(shí)現(xiàn)的點(diǎn)是第一點(diǎn)。

那這個(gè)需求跟Axure怎么關(guān)聯(lián)起來呢？

沒錯(cuò)，仍然是動態(tài)面板。小伙伴們可能會說發(fā)現(xiàn)Axure動態(tài)面板還是很強(qiáng)大的呀！確實(shí)如此。

02 Axure關(guān)鍵點(diǎn)分析

這里的動態(tài)面板有2個(gè)，一個(gè)是滑塊，另一個(gè)是滑塊滑動范圍

1）先說滑塊滑動范圍用到的動態(tài)面板

因?yàn)榛瑝K滑動過的地方顯示為綠色，故需要設(shè)置2種動態(tài)面板來表示兩種顏色

這里需要特別注意，綠色狀態(tài)的x軸坐標(biāo)軸為負(fù)數(shù)，表示默認(rèn)是看不到

2）接著說滑塊動態(tài)面板

滑塊是有移動范圍限制的并且只能水平移動，其中范圍為上面1）動態(tài)面板范圍之內(nèi)，最右側(cè)的地方我們可以通過用熱區(qū)來表示

滑塊范圍

交互條件為鼠標(biāo)拖動時(shí)，范圍為小于等于熱區(qū)的x軸坐標(biāo)軸，滑塊也隨著移動

當(dāng)滑塊移至熱區(qū)的x軸坐標(biāo)軸時(shí)，則顯示驗(yàn)證通過字樣，并且啟用下一步操作按鈕

03 效果展示

最后，我們來看一下最終效果，網(wǎng)址為：https://1x2nvx.axshare.com

本文由 @翠baby 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議