滑動拼圖是互聯網一種新的驗證形式，被廣泛應用在各種網站的登錄、注冊、找回密碼。用戶可以不需要填寫復雜的驗證碼，而是用鼠標去拖動滑塊便能通過驗證。

下面為今日頭條的滑動拼圖驗證，接下來將為大家講解：

一、界面元件搭建（教程為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]]。更加靈活應用。

四、效果展示

如有疑問，歡迎向我留言~

作者：火星人～艾斯，公眾號：艾斯的Axure峽谷

本文由 @火星人～艾斯 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議