導讀：我們在使用賬號登入一些系統或其他產品時，經常會遇到安全驗證，常見的大多是文字驗證、滑動拼圖驗證、數字驗證等。本篇文章將向大家詳細介紹一下如何繪製常見的滑動拼圖驗證，希望可以幫助到大家。
原型示例：https：//1grbma。axshare。com
一、繪製準備
首先，如下圖所示，我們首先要準備滑動拼圖驗證所需要的一些所需元件：
：底部驗證圖片一張
：底部驗證圖片部分拼塊
：拖動按鈕
：“驗證失敗”矩形文字
：“驗證成功”圖片+文字
二、互動設定
1、選擇“小拼圖”點選右鍵轉換成動態面板；選擇“拖動按鈕”點選右鍵轉換成動態面板。
2、如果想要拖動按鈕，設定按鈕和拼圖兩個動態面板隨著拖動而橫向移動，那麼移動就必須要在一定的區域範圍內。
如何計算區域範圍呢：區域範圍的開始位置是按鈕預設位置，也就是按鈕左邊的x座標值，區域範圍的結尾位置是按鈕右邊和大圖右邊的x座標一樣的位置。
咱們示例的原型中，按鈕左邊的x座標值為30，小拼圖左邊x左邊為30。（可根據實際需要設定引數）
底部大圖左邊的座標值x為20，圖片長度為374。（可根據實際需要設定引數）
由此咱們可以得出區域範圍的開始邊界為30，結尾邊界為394。
接著選中拖動按鈕，設定互動為【拖動時】-【移動】-【當前元件】-【跟隨水平拖動】
左側邊界設定為大於30，右側邊界設定為小於394。
再次新增新動作【移動】-【拼圖元件】-【跟隨水平拖動】
描述：拼圖的邊界範圍和按鈕的有一些小差別，因為這兩個動態面板大小不一樣，他們排列方式是z左側對齊，也就是小拼圖和按鈕的起始位置一致，按鈕右側要比小拼圖多一些，所以結束座標需要-10左右，此處引數可根據需要進行設定；
左側邊界設定為大於30，右側邊界設定為小於384。
接著當按鈕拖動結束時，需要判斷拼圖的座標是不是和陰影部分的座標重合；
我們可以拖一條輔助線與陰影座標重合，可以看到陰影座標x是236，也就是說當拼圖移動到座標x=236時，拼圖正確。
在畫圖我們允許有一些小的誤差，也就是說允許在陰影前後幾個座標內也是可以判斷成功的，在這裡我將用陰影前後10個座標的誤差來設定，那麼也就是拼圖的座標在226~246之間，就認為拼圖是正確的，否則，拼圖失敗。
接著我們再次選中拖動按鈕，對其進行互動【拖動結束時】-【設定情形1 this。x的值在226~246之間】-【顯示驗證成功】如下圖所示
接著我們對其新增情形2，對其進行互動【拖動結束時】-【設定情形this。x的值小於226或者大於246】-【顯示驗證失敗】如下圖所示
接著互動設定：
【拖動結束時】-【等待1500ms】-【開啟登入頁】
【驗證失敗時】-【等待1000ms】-【重新載入頁面】
【拖動時】-【隱藏驗證失敗】
到這裡，我們所有的步驟也就設定完畢了，若有描述不夠詳細的地方，可以在下方評論，本人看到後第一時間回覆你們，希望本篇教程可以幫助到你們。
本文由 @畫圖仔 原創釋出於人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Pexels，基於CC0協議。
