其實(shí)我寫這個(gè)文章的目的第一是為了強(qiáng)化自己的剛剛學(xué)習(xí)的技能，另一方面也是希望能得到大神們的指教（又一句廢話）。

“驗(yàn)證碼”是一種很常見(jiàn)的東西，在很多網(wǎng)站的登錄、注冊(cè)、下單等業(yè)務(wù)操作時(shí)都會(huì)用到驗(yàn)證碼。當(dāng)然，驗(yàn)證碼的形式也隨著互聯(lián)網(wǎng)、信息化的發(fā)展而變得多樣起來(lái)，從最初的輸入圖中的文字到運(yùn)算圖中的數(shù)字再到最近坑的很火的123XX看圖找物，樣式層出不窮的驗(yàn)證碼已經(jīng)成為一個(gè)網(wǎng)站別樣的“風(fēng)景”，當(dāng)然對(duì)于某一類的驗(yàn)證碼大家的評(píng)價(jià)也是褒貶不一。

我今天要跟大家分享的這一類驗(yàn)證碼是本人認(rèn)為見(jiàn)過(guò)的最好的一種，這個(gè)東東叫“極驗(yàn)”老實(shí)說(shuō)我第一次看到這個(gè)效果是在哪里實(shí)在記不得了，但是印象最深的一次是在“人人都是產(chǎn)品經(jīng)理”網(wǎng)站的注冊(cè)頁(yè)面（我不是網(wǎng)站的托），剛開(kāi)始只是覺(jué)得這個(gè)效果不錯(cuò)就去網(wǎng)上查了一下才知道這種驗(yàn)證碼叫“極驗(yàn)”，簡(jiǎn)單的說(shuō)就是通過(guò)拼湊一張美圖的某一塊來(lái)完成驗(yàn)證，說(shuō)的高大上一點(diǎn)叫動(dòng)態(tài)行為驗(yàn)證。

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

現(xiàn)在我就跟大家說(shuō)一下如何用Axure實(shí)現(xiàn)這種“極驗(yàn)”的效果，首先跟大家說(shuō)一下本人是用Axure7.0版本實(shí)現(xiàn)的效果，對(duì)于實(shí)現(xiàn)這種“極驗(yàn)”的效果本人認(rèn)為有三大難點(diǎn)需要攻破。

第一，實(shí)現(xiàn)下面按鈕和上面拼圖的聯(lián)動(dòng)；

第二，實(shí)現(xiàn)拼圖到對(duì)應(yīng)位置的驗(yàn)證事件；

第三，保證拼圖和按鈕移動(dòng)的范圍不能超出可移動(dòng)區(qū)域。

在介紹的過(guò)程之中我會(huì)跟大家說(shuō)明本人是如何克服這三個(gè)難點(diǎn)的。

首先要做的就是準(zhǔn)備素材，說(shuō)白了就是盜圖，你需要準(zhǔn)備三張半圖片，第一張是下面滑動(dòng)的按鈕；第二張是按鈕的滑動(dòng)區(qū)域；第三張是拼圖的完整圖片；當(dāng)然另外的半張就是你從第三張圖截下來(lái)那一部分的拼圖了。

素材準(zhǔn)備完畢后，先來(lái)實(shí)現(xiàn)拼圖和按鈕在水平方向聯(lián)動(dòng)的效果，將按鈕和拼圖塊放到指定的位置上，并且將其設(shè)置成兩個(gè)動(dòng)態(tài)面板（為啥不設(shè)置一個(gè)，因?yàn)樽罱K要拖動(dòng)的只是下面的按鈕，如果設(shè)置成一個(gè)動(dòng)態(tài)面板那么最終能拖動(dòng)的區(qū)域就不止按鈕一個(gè)區(qū)域了?。?/p>

為了保證兩個(gè)面板的聯(lián)動(dòng)效果好一些，在創(chuàng)建面板時(shí)盡量保證兩個(gè)面板的寬度是一致的。

創(chuàng)建完兩個(gè)面板之后現(xiàn)在需要做的是設(shè)置“聯(lián)動(dòng)事件”，選“按鈕面板”選中“拖動(dòng)動(dòng)態(tài)面板時(shí)”這個(gè)事件（感覺(jué)axure7.0里面的事件增加了很多）并且在新增動(dòng)作里選擇“移動(dòng)”這個(gè)動(dòng)作，在移動(dòng)這個(gè)動(dòng)作里選擇“拼圖面板”和“按鈕面板”，并且在配置動(dòng)作中選擇“沿X軸移動(dòng)”（因?yàn)槭瞧揭破磮D的效果），這樣就把兩個(gè)面板聯(lián)動(dòng)的效果設(shè)置完成了。

聯(lián)動(dòng)效果設(shè)置完成之后接下來(lái)是要設(shè)置實(shí)現(xiàn)區(qū)域驗(yàn)證效果的事件。

由于Axure這個(gè)軟件并沒(méi)有通過(guò)控件坐標(biāo)來(lái)判斷觸發(fā)的條件，因此我通過(guò)給自己定一個(gè)“邊界”的方法來(lái)實(shí)現(xiàn)驗(yàn)證，其實(shí)就是在拼圖的“驗(yàn)證區(qū)域”左右各加了一條線作為邊界，再通過(guò)動(dòng)態(tài)面板與兩條線接觸作為判斷條件來(lái)實(shí)現(xiàn)“校驗(yàn)”的效果，最后再把邊界線的顏色設(shè)置成與背景同色即可。

這個(gè)方法需要注意的一點(diǎn)就是一定要保證“拼圖面板”的寬度一定要等于兩條“邊界線”間的距離或者略微大一點(diǎn)也可以，因?yàn)橐ＷC在拖動(dòng)結(jié)束的時(shí)候面板能同時(shí)接觸到兩條“邊界線”。

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

最后為了保證“驗(yàn)證”效果正確，我增加了一個(gè)提示語(yǔ)面板（包括初始、驗(yàn)證通過(guò)、驗(yàn)證不通過(guò)是哪個(gè)狀態(tài)）用于顯示我的驗(yàn)證效果。具體的效果就是在拖動(dòng)結(jié)束時(shí)當(dāng)我的“驗(yàn)證”面板同時(shí)接觸到了兩條“邊界”線則顯示提示語(yǔ)面板的狀態(tài)為通過(guò)，否則為不通過(guò)。

就這樣我的驗(yàn)證效果實(shí)現(xiàn)完成了。

最后，由于我的滑動(dòng)效果是水平滑動(dòng)，因此會(huì)導(dǎo)致我的面板會(huì)超出圖片區(qū)域的效果，看著效果極其差，因此我需要在我的面板上設(shè)置一個(gè)邊界來(lái)控制一下

剛剛我提到由于Axure沒(méi)有通過(guò)坐標(biāo)驗(yàn)證的事件，因此我再次選擇“曲線救國(guó)”的方式實(shí)現(xiàn)“控制邊界”的效果，原理就是在按鈕面板滑動(dòng)區(qū)域的左右兩邊再畫兩條線作為邊界

這次選擇“按鈕面板”選擇“拖動(dòng)動(dòng)態(tài)面板時(shí)”添加用例并設(shè)置用例的條件，當(dāng)“按鈕面板”接觸到右邊界線時(shí)，設(shè)置動(dòng)作“移動(dòng)”動(dòng)態(tài)面板“按鈕面板”和“驗(yàn)證面板”絕對(duì)位置為面板緊挨右邊界時(shí)的坐標(biāo)偏左一個(gè)像素（太難描述了，舉個(gè)“栗子”吧，如果按鈕面板緊挨右邊界時(shí)的坐標(biāo)為（901,435）則絕對(duì)坐標(biāo)應(yīng)設(shè)為（900,435），同理左側(cè)邊界的坐標(biāo)就應(yīng)該是（902，435））

這里提醒大家一下設(shè)置左右邊界的用例一定要分開(kāi)設(shè)置（兩個(gè)用例）?；镜乃悸肪褪沁@樣的，最終調(diào)試完成后即可出現(xiàn)“極驗(yàn)”的效果。

本人技術(shù)比較糙，歡迎各位大神前來(lái)指教！最后強(qiáng)調(diào)一點(diǎn)就是這是本人發(fā)布的第一篇文章，拜托管理員大人高抬貴手（審批通過(guò)）,重要的事情說(shuō)兩遍！如果您是開(kāi)發(fā)的大神想找“極驗(yàn)”控件可以到http://www.geetest.com/這個(gè)網(wǎng)站上去找?。ㄕ?qǐng)不要叫我雷鋒，我只是勤勞的搬運(yùn)工）

作者：吾小夜（QQ：277300604），半年經(jīng)驗(yàn)的入門產(chǎn)品經(jīng)理！

本文由 @吾小夜 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。