起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識【Axure 教程】驗證碼，除了 12306，我還沒有服過誰（滑塊拖動篇）
在驗證方式中，比較簡單的一個是拖動滑塊進行驗證，本文作者分享了滑塊拖動驗證碼的設計教程，一起來看一下吧。
之前作者發過一系列高保真驗證碼的教程，本次帶來的是本系列的第5篇文章，分享滑塊拖動驗證碼的設計教程。
先看一下最終效果：
接下來分享這個驗證碼的設計教程。
一、用到的元件
首先在畫布中拖入兩個動態面板，分別命名為【滑塊】和【滑軌】，每個動態面板中均有兩個狀態：【默認】和【驗證成功】。
以下是兩個動態面板對應的兩個狀態內放置的內容
然后把滑塊放在滑軌上方，跟滑軌左對齊，界面就畫完了。
二、用到的變量
全局變量中添加 Drag_Ver_Result，用來記錄驗證的結果。
三、設計交互
首先給【滑塊】添加【拖動時】交互，拖動時，滑塊跟隨水平拖動，同時以【滑軌】的左右邊界作為【滑塊】移動的邊界，這樣滑塊就可以在滑軌內左右拖動。
接著再給【滑塊】添加【拖動結束時】的交互，也就是拖動滑塊松手之后的交互。這里需要判斷【滑塊】是否已經拖動到【滑軌】的最右側，如果是，表示驗證成功，將兩個動態面板都切換到【驗證成功】的狀態，并將變量 Drag_Ver_Result 設置為 True；如果不是，則將【滑塊】移動【回拖動前位置】。
這樣，這個滑塊拖動的驗證碼就完成了，這是驗證碼系列中做起來最簡單的一個。
其他驗證碼教程回顧：
【Axure 教程】驗證碼，除了 12306，我還沒有服過誰（圖形驗證篇）
【Axure 教程】驗證碼，除了 12306，我還沒有服過誰（數學運算篇）
【Axure 教程】驗證碼，除了 12306，我還沒有服過誰（文字點選篇）
【Axure 教程】驗證碼，除了 12306，我還沒有服過誰（滑動拼圖篇）
專欄作家
產品錦李，公眾號：產品錦李（ID：IMPM996），人人都是產品經理專欄作家。不務正業的產品經理和他的產品設計。
本文原創發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自Unsplash，基于CC0協議。
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
滑塊未拖到最右側，滑塊回不到原來的位置，是為啥
檢查一下是不是沒有添加【拖動結束時】將滑塊【移動】到【拖動前的位置】的事件
這個事件有添加
你可以把你做的原型發到我的郵箱中，我幫你看一下，郵箱：906069595@qq.com
親，這個原型可以共享嗎
https://www.axureshop.com/ys/2109684