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

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

一、界面元件搭建（教程為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協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部