起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Axure教程：拖動滑塊解鎖效果
本文給大家講解一下如何在Axure中制作拖動滑塊解鎖的效果，一起來看看~
今天跟小伙伴們分享一個Axure很有趣的玩法，這個玩法可能比前面的稍微復雜一些。
我們在各大網站注冊新用戶的時候，可能會遇到需要輸入驗證碼或者拖動滑塊解鎖才能進入到下一步操作的場景。那么，今天我們就來一起看一下拖動滑塊解鎖的新技能在Axure中是如何實現的。
話不多說，還是按照我們以往的套路來講解。
下文將從3個方面來展開。
01 需求分析
首先先來看一下這個具體的需求是什么？
需求比較簡單：滑塊可以自左向右水平滑動，滑動過的地方顯示為綠色條塊；當滑動到最右端的時候顯示驗證通過，并啟用下一步的操作按鈕可以繼續進行下一步操作。
從上面的描述，我們看到有2個關鍵點：一個是滑塊可以在一定范圍內滑動；二是滑塊到達終點時會觸發文字顯示，按鈕啟用。當然，這里最關鍵也最難實現的點是第一點。
那這個需求跟Axure怎么關聯起來呢？
沒錯，仍然是動態面板。小伙伴們可能會說發現Axure動態面板還是很強大的呀！確實如此。
02 Axure關鍵點分析
這里的動態面板有2個，一個是滑塊，另一個是滑塊滑動范圍
1）先說滑塊滑動范圍用到的動態面板
因為滑塊滑動過的地方顯示為綠色，故需要設置2種動態面板來表示兩種顏色
這里需要特別注意，綠色狀態的x軸坐標軸為負數，表示默認是看不到
2）接著說滑塊動態面板
滑塊是有移動范圍限制的并且只能水平移動，其中范圍為上面1）動態面板范圍之內，最右側的地方我們可以通過用熱區來表示
滑塊范圍
交互條件為鼠標拖動時，范圍為小于等于熱區的x軸坐標軸，滑塊也隨著移動
當滑塊移至熱區的x軸坐標軸時，則顯示驗證通過字樣，并且啟用下一步操作按鈕
03 效果展示
最后，我們來看一下最終效果，網址為：https://1x2nvx.axshare.com
本文由 @翠baby 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
能分享一下原型嗎？
看不懂啊