其實我寫這個文章的目的第一是為了強化自己的剛剛學習的技能，另一方面也是希望能得到大神們的指教（又一句廢話）。

“驗證碼”是一種很常見的東西，在很多網站的登錄、注冊、下單等業務操作時都會用到驗證碼。當然，驗證碼的形式也隨著互聯網、信息化的發展而變得多樣起來，從最初的輸入圖中的文字到運算圖中的數字再到最近坑的很火的123XX看圖找物，樣式層出不窮的驗證碼已經成為一個網站別樣的“風景”，當然對于某一類的驗證碼大家的評價也是褒貶不一。

我今天要跟大家分享的這一類驗證碼是本人認為見過的最好的一種，這個東東叫“極驗”老實說我第一次看到這個效果是在哪里實在記不得了，但是印象最深的一次是在“人人都是產品經理”網站的注冊頁面（我不是網站的托），剛開始只是覺得這個效果不錯就去網上查了一下才知道這種驗證碼叫“極驗”，簡單的說就是通過拼湊一張美圖的某一塊來完成驗證，說的高大上一點叫動態行為驗證。

我個人喜歡它的一條很重要的原因就是他的安全性很高（問過我們開發的高手），而且在網站趨近與扁平化效果的年代，“極驗”的驗證方式很好的融入了扁平化的風格，簡單的操作完成復雜的安全驗證業務，符合大眾化操作風格，提高用戶的體驗度。當然有好處就一定也有弊端，這樣的控件想必會存在兼容性的問題，當然在加載頁面的時候也會影響一定的效率，對于登錄區域設計偏小的網站這樣的驗證方式會占據一定的空間。

現在我就跟大家說一下如何用Axure實現這種“極驗”的效果，首先跟大家說一下本人是用Axure7.0版本實現的效果，對于實現這種“極驗”的效果本人認為有三大難點需要攻破。

第一，實現下面按鈕和上面拼圖的聯動；

第二，實現拼圖到對應位置的驗證事件；

第三，保證拼圖和按鈕移動的范圍不能超出可移動區域。

在介紹的過程之中我會跟大家說明本人是如何克服這三個難點的。

首先要做的就是準備素材，說白了就是盜圖，你需要準備三張半圖片，第一張是下面滑動的按鈕；第二張是按鈕的滑動區域；第三張是拼圖的完整圖片；當然另外的半張就是你從第三張圖截下來那一部分的拼圖了。

素材準備完畢后，先來實現拼圖和按鈕在水平方向聯動的效果，將按鈕和拼圖塊放到指定的位置上，并且將其設置成兩個動態面板（為啥不設置一個，因為最終要拖動的只是下面的按鈕，如果設置成一個動態面板那么最終能拖動的區域就不止按鈕一個區域了?。?/p>

為了保證兩個面板的聯動效果好一些，在創建面板時盡量保證兩個面板的寬度是一致的。

創建完兩個面板之后現在需要做的是設置“聯動事件”，選“按鈕面板”選中“拖動動態面板時”這個事件（感覺axure7.0里面的事件增加了很多）并且在新增動作里選擇“移動”這個動作，在移動這個動作里選擇“拼圖面板”和“按鈕面板”，并且在配置動作中選擇“沿X軸移動”（因為是平移拼圖的效果），這樣就把兩個面板聯動的效果設置完成了。

聯動效果設置完成之后接下來是要設置實現區域驗證效果的事件。

由于Axure這個軟件并沒有通過控件坐標來判斷觸發的條件，因此我通過給自己定一個“邊界”的方法來實現驗證，其實就是在拼圖的“驗證區域”左右各加了一條線作為邊界，再通過動態面板與兩條線接觸作為判斷條件來實現“校驗”的效果，最后再把邊界線的顏色設置成與背景同色即可。

這個方法需要注意的一點就是一定要保證“拼圖面板”的寬度一定要等于兩條“邊界線”間的距離或者略微大一點也可以，因為要保證在拖動結束的時候面板能同時接觸到兩條“邊界線”。

具體的操作步驟是先回到外面再次選中“按鈕面板”這次是要選中“結束拖動動態面板時”這個事件選擇添加用例，在添加用例時增加判斷條件，條件里設置“驗證面板”同時接觸到（驗證事件叫部件范圍）兩條邊界線（控件）。

最后為了保證“驗證”效果正確，我增加了一個提示語面板（包括初始、驗證通過、驗證不通過是哪個狀態）用于顯示我的驗證效果。具體的效果就是在拖動結束時當我的“驗證”面板同時接觸到了兩條“邊界”線則顯示提示語面板的狀態為通過，否則為不通過。

就這樣我的驗證效果實現完成了。

最后，由于我的滑動效果是水平滑動，因此會導致我的面板會超出圖片區域的效果，看著效果極其差，因此我需要在我的面板上設置一個邊界來控制一下

剛剛我提到由于Axure沒有通過坐標驗證的事件，因此我再次選擇“曲線救國”的方式實現“控制邊界”的效果，原理就是在按鈕面板滑動區域的左右兩邊再畫兩條線作為邊界

這次選擇“按鈕面板”選擇“拖動動態面板時”添加用例并設置用例的條件，當“按鈕面板”接觸到右邊界線時，設置動作“移動”動態面板“按鈕面板”和“驗證面板”絕對位置為面板緊挨右邊界時的坐標偏左一個像素（太難描述了，舉個“栗子”吧，如果按鈕面板緊挨右邊界時的坐標為（901,435）則絕對坐標應設為（900,435），同理左側邊界的坐標就應該是（902，435））

這里提醒大家一下設置左右邊界的用例一定要分開設置（兩個用例）?；镜乃悸肪褪沁@樣的，最終調試完成后即可出現“極驗”的效果。

本人技術比較糙，歡迎各位大神前來指教！最后強調一點就是這是本人發布的第一篇文章，拜托管理員大人高抬貴手（審批通過）,重要的事情說兩遍！如果您是開發的大神想找“極驗”控件可以到http://www.geetest.com/這個網站上去找?。ㄕ埐灰形依卒h，我只是勤勞的搬運工）

作者：吾小夜（QQ：277300604），半年經驗的入門產品經理！

本文由 @吾小夜 原創發布于人人都是產品經理。未經許可，禁止轉載。