起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識【Axure教程】：滑動拼圖驗證登錄
導讀：我們在使用賬號登錄一些系統或其他產品時，經常會遇到安全驗證，常見的大多是文字驗證、滑動拼圖驗證、數字驗證等。本篇文章將向大家詳細介紹一下如何繪制常見的滑動拼圖驗證，希望可以幫助到大家。
原型示例：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協議。
可以再根據拖動到驗證正確的時間來再做變化嗎
為啥我移動了沒顯示后面的提示語 怎么做判斷呀 是我后面那個拖動結束時的情形寫錯了嘛
可能是拖動結束時的情形寫錯了，判斷一下是否顯示驗證成功或驗證失敗
那個判斷我和你標注的是一樣的呀 除了位置 為啥我移動結束后它就沒反應 不會 顯示那些
有一個驗證成功和驗證失敗的兩個頁面，我做了拖動結束時顯示，不清楚你有沒有做這個頁面呢
有呀，是不是我判斷條件寫錯了。 方便加個聯系方式嗎 大佬
V：i-Cap-xxxx31J
哇哦~長知識了，以前還好奇來著，現在可算知道了。
握爪
哈哈哈哈一直都很好奇這個拼圖驗證是怎么做的，今天終于知道了
握爪