滑動拼圖是互聯網一種新的驗證形式，被廣泛應用在各種網站的登錄、註冊、找回密碼。用戶可以不需要填寫複雜的驗證碼，而是用鼠標去拖動滑塊便能通過驗證。
下面為今日頭條的滑動拼圖驗證，接下來將為大家講解：
一、界面元件搭建（教程為axure 8）
首先，需要下面這些元件。熱區1和熱區2是用來校驗小圖的位置是否正確，作為左右的重合區間。
所有元件的初始位置如下：
二、交互事件實現
（1）選中動態面板【滑塊】，添加【拖動時】交互事件，勾選【當前元件】，設置為：水平移動，添加左右邊界。
詳細設置圖如下：
下圖為左邊界：
下圖為右邊界：300為背景矩形的寬度。
同理，勾選【小圖】，設置同樣的移動和左右邊界。
其次，增加【滑塊】移動時，【高亮】條的尺寸跟著變化。設置【高亮】矩形的寬度為：[[LVAR1.x-LVAR2.x]]，其中，LVAR1.x為【滑塊】的X軸座標值，LVAR2.x為【背景】的X軸座標值。
如下圖所示：
最後，需要添加【拖動結束時】的交互事件。即當【小圖】移動到與熱區1、熱區2重疊的時候，顯示驗證成功。
如下圖所示：
同理，否則，顯示【失敗】矩形，提示失敗。同時需要觸發【刷新】按鈕的【鼠標點擊事件】，後續會補充此交互事件。
詳細交互事件如下：
（2）接下來，需要添加刷新驗證碼的功能，初始元件的位置。
選中【刷新】按鈕，添加【鼠標單擊時】交互事件，隱藏【成功】矩形。移動【滑塊】和【小圖】到絕對位置，X軸設置為[[LVAR1.x]]，其中LVAR1.x為【背景】的的X軸座標值。同時，設置矩形【高亮】的尺寸為40*40，錨點為左邊。
三、注意事項
（1）熱區1和熱區2的位置和寬度，決定著小圖滑動驗證時的準確率。即與小圖重疊的概率。並且能保證，小圖能同時覆蓋到這兩個熱區。
（2）添加【滑塊】的右邊界：背景矩形的寬度300也可以替換為函數LVAR1.width。即為[[LVAR1.x-LVAR1.width]]。更加靈活應用。
四、效果展示
如有疑問，歡迎向我留言~
題圖來自Unsplash，基於CC0協議
閱讀更多 人人都是產品經理 的文章
