導讀：我們在使用賬號登錄一些系統或其他產品時，經常會遇到安全驗證，常見的大多是文字驗證、滑動拼圖驗證、數字驗證等。本篇文章將向大家詳細介紹一下如何繪制常見的滑動拼圖驗證，希望可以幫助到大家。

原型示例：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協議。