驗證碼的方式有很多，對于滑塊驗證碼相信大家肯定不會陌生，今天我們一起來用Axure8.0來模拟做一個滑塊驗證碼。

預覽

暫缺，沒找到合适的轉換軟件。

一、元件準備

1、添加動态面闆三個，分别用來存放滾動的圓塊，驗證狀态和驗證碼的背景圖片，分别起名字叫“拖動圓球”，“狀态”和“驗證碼背景”。其中“驗證碼背景”動态面闆隐藏；

2、“拖動圓球”動态面闆中添加圖片；

3、“狀态”動态面闆設置三個狀态，分别是初始狀态、錯誤狀态和正确狀态；

4、添加一個矩形，起名叫“拖動限制”，用來限制“拖動圓球”的起始和終點坐标的；

5、添加一個文本标簽，在初始狀态時，用來提示用的，起名叫“初始提示内容”，并将文本标簽放到“拖動限制”上方；

6、在“驗證碼背景”動态面闆中放一個動态面闆，用來存放随機出現的圖案缺口，起名叫“滑塊标準”；

7、在“驗證碼背景”動态面闆中放一個矩形框，用來限制随機出現的圖案缺口的位置，起名字叫“邊界”

8、最後，再添加一個動态面闆，用來存放滑塊的，起名叫“滑塊”，初始是隐藏的；

9、注意：“滑塊标準”動态面闆和“滑塊”動态面闆中放的圖案大小和樣式必須一緻。

二、添加用例

用例很少，隻有在“拖動圓球”動态面闆上設置就可以了，具體設置如下：

1、首先，在鼠标移入“拖動圓球”動态面闆中時，需要顯示“驗證碼背景”動态面闆和“滑塊”動态面闆，并且需要随機出現“滑塊标準”動态面闆，且要控制其不會出現在“邊界”之外，而且為了便于“滑塊”出現，最好是限制“滑塊标準”動态面闆出現在“邊界”的右半部分。同時顯示“滑塊”動态面闆，并且設置“滑塊”動态面闆的x坐标為“拖動圓球”的x坐标，設置“滑塊”動态面闆的y坐标為“滑塊标準”動态面闆的y坐标；

這時會有兩種情況，一種是之前有過操作，且正确，另一種情況是初始狀态或者之前有過操作，但是錯誤了，那麼我們要根據“狀态”動态面闆的狀态判定；

（1）初始狀态或者之前有過操作，但是錯誤了，按照1步驟中的設置，如圖：

（2）操作正确，那麼隻需要顯示“驗證碼背景”動态面闆即可；

2、鼠标移出時，很簡單，隐藏掉“驗證碼背景”和“滑塊”動态面闆即可；

3、拖動“拖動圓球”動态面闆時，首先需要隐藏掉“初始提示内容”，然後讓“拖動圓球”跟随鼠标移動，同時讓“滑塊”動态面闆與“拖動圓球”動态面闆同步滑動；

4、拖動結束，判斷“滑塊”動态面闆與“滑塊标準”動态面闆的是否重合（因為很難做到完全重合才算正确，所以這裡設置了一定的誤差時，也會驗證通過），如果重合，那麼設置“狀态”動态面闆為驗證通過；如果不重合，那麼設置“狀态”動态面闆為驗證錯誤，并且将“拖動圓球”動态面闆還原到初始位置；

三、預覽

好了，預覽一下吧。

（題圖來自 攝圖網，基于 CC0 協議 ）

本文由 @無淚 原創發布于人人都是産品經理。未經許可，禁止轉載。