網(wǎng)上關(guān)于12306圖片驗(yàn)證碼的吐槽已經(jīng)是鋪天蓋地，當(dāng)然，現(xiàn)在的12306圖片驗(yàn)證碼已經(jīng)不像以前那么變態(tài)了。不過(guò)鵬哥心里一直有個(gè)心結(jié)，縱使它如何變態(tài)，我都想用Axure把它畫出來(lái)，沒(méi)辦法，鵬哥就好這口，終于經(jīng)過(guò)幾個(gè)日夜的絞盡腦汁，原型出爐（可生成隨機(jī)圖片和關(guān)鍵字，可選擇圖片進(jìn)行驗(yàn)證），于是速速跟小伙伴們分享。

一、解析12306驗(yàn)證碼

我們先來(lái)看一下12306網(wǎng)站上的圖片驗(yàn)證碼樣式

由此我們可以提取出一些關(guān)鍵信息，以便于我們后面進(jìn)行原型設(shè)計(jì)：

1. 隨機(jī)關(guān)鍵詞：如上圖中的“蠟燭”，一個(gè)或兩個(gè)隨機(jī)關(guān)鍵詞
2. 隨機(jī)圖片：一共有8張隨機(jī)圖片，當(dāng)然圖片中必須包含可以和關(guān)鍵詞對(duì)應(yīng)的圖片
3. 驗(yàn)證：選擇圖片后，會(huì)驗(yàn)證所選圖片是否與關(guān)鍵詞一致，同時(shí)是否選擇了所有的和關(guān)鍵詞對(duì)應(yīng)的圖片
4. 刷新：驗(yàn)證失敗后會(huì)自動(dòng)刷新，刷新后會(huì)出現(xiàn)新的隨機(jī)關(guān)鍵詞和圖片；也可進(jìn)行手動(dòng)刷新

二、原型效果圖

三、原型設(shè)計(jì)思路

剛才我們提取到了12306驗(yàn)證碼的一些必要元素，那么在原型設(shè)計(jì)的時(shí)候我們就要去實(shí)現(xiàn)那些功能。

1、生成隨機(jī)圖片和關(guān)鍵詞

1. 生成8張隨機(jī)圖片
2. 根據(jù)8張已生成的圖片生成關(guān)鍵詞，也就是在8張圖片中隨機(jī)挑選1~2個(gè)圖片對(duì)應(yīng)的關(guān)鍵詞

2、圖片選擇和驗(yàn)證

1. 在第一步生成隨機(jī)圖片和關(guān)鍵詞的時(shí)候我們已經(jīng)知道了哪幾個(gè)圖片是和關(guān)鍵詞對(duì)應(yīng)的，需要進(jìn)行標(biāo)記
2. 當(dāng)選擇圖片的時(shí)候，把選擇的圖片進(jìn)行標(biāo)記，這時(shí)候可能是正確的標(biāo)記或者錯(cuò)誤的標(biāo)記
3. 通過(guò)比較上述兩步中標(biāo)記的值來(lái)判斷驗(yàn)證碼的正確與錯(cuò)誤

3、刷新驗(yàn)證碼

通過(guò)對(duì)中繼器進(jìn)行分頁(yè)，每刷新一次則顯示中繼器的下一頁(yè)，并且重新生成隨機(jī)圖片和關(guān)鍵詞，這一步需要中繼器中的項(xiàng)目數(shù)為8個(gè)整數(shù)倍

四、原型制作過(guò)程

1、生成隨機(jī)圖片

1）添加“中繼器”，設(shè)置中繼器中項(xiàng)目的列為“keyword”、“img”、“sortnum1”、“sortnum2”、“selected”，并對(duì)中繼器進(jìn)行如下的設(shè)置

2）中繼器中放入“圖片”原件，并且為中繼器添加“每項(xiàng)加載時(shí)”用例，用于顯示產(chǎn)生的隨機(jī)圖片

3）在頁(yè)面上增加“頁(yè)面加載時(shí)”用例，該用例執(zhí)行的時(shí)候向中繼器中插入16條數(shù)據(jù)，并且對(duì)中繼器進(jìn)行排序

其中“sortnum1”和“sortnum2”給賦予隨機(jī)數(shù)，并且“sortnum1”用于中繼器項(xiàng)目的排序，這時(shí)候就得到了12306驗(yàn)證碼的隨機(jī)圖片，如下圖：

2、生成關(guān)鍵詞

關(guān)鍵詞的生成放在隨機(jī)圖片生成的后面來(lái)實(shí)現(xiàn)，也就是先生成8張隨機(jī)圖片，然后再根據(jù)這8張圖片隨機(jī)抽選1-2個(gè)圖片對(duì)應(yīng)的關(guān)鍵詞即可，那么問(wèn)題就在于如何從這8張圖片中進(jìn)行隨機(jī)抽取，這里用到的方法就是通過(guò)比較“sortnum1”和“sortnum2”的大小，當(dāng)sortnum1>srotnum2的時(shí)候，我就把這個(gè)項(xiàng)目對(duì)應(yīng)的圖片關(guān)鍵字提出取來(lái)，那么8張圖片，總共會(huì)對(duì)比8次，最終的結(jié)果可能是提取到0個(gè)關(guān)鍵詞，1個(gè)關(guān)鍵詞或2個(gè)及2個(gè)以上的關(guān)鍵詞。那么0個(gè)關(guān)鍵詞的情況我先不作處理，我處理2個(gè)及2個(gè)以上關(guān)鍵詞的情況，即我最多只提取2個(gè)關(guān)鍵詞，當(dāng)?shù)诙€(gè)關(guān)鍵詞提取出來(lái)后，后面我就不再提取關(guān)鍵詞了。

1. 添加2個(gè)矩形框（keyword1和keyword2）
2. 在中繼器上增加“每項(xiàng)加載時(shí)”用例

• Case1：當(dāng)sortnum1>sortnum2并且keyword1為空的時(shí)候，將圖片對(duì)應(yīng)的keyword賦值給keyword1
• Case2：當(dāng)sortnum1>sortnum2并且keyword1已經(jīng)提取出來(lái)并且keyword2為空并且當(dāng)前的keyword不等于keyword1，將圖片對(duì)應(yīng)的keyword賦值給keyword2
• Case3：不提取keyword

通過(guò)以上3個(gè)Case就可以在每次加載的時(shí)候產(chǎn)生8個(gè)隨機(jī)圖片并且提取出0~2個(gè)關(guān)鍵詞，當(dāng)提取不到關(guān)鍵詞的時(shí)候就刷新下吧，其實(shí)也可以通過(guò)增加一個(gè)Case來(lái)避免提取不到關(guān)鍵詞的情況，有興趣的小伙伴可以自行嘗試。

3、圖片選擇和取消選擇

1）圖片選擇和取消選擇，當(dāng)點(diǎn)擊圖片的時(shí)候可以選擇圖片，再次點(diǎn)擊可以取消圖片選擇。在中繼器中的圖片上增加“點(diǎn)擊時(shí)”用例

• Case1：圖片的值為空時(shí)，點(diǎn)擊圖片為其賦值“√”
• Case2：圖片的值為“√”時(shí)，點(diǎn)擊圖片為其賦值空

2）另外，為了之后要進(jìn)行的驗(yàn)證碼校驗(yàn)，我希望選擇一個(gè)正確的圖片時(shí)，為一個(gè)變量（YZ_12306_2）加1，取消選擇時(shí)，則為其減1；當(dāng)選擇一個(gè)錯(cuò)誤的圖片時(shí)，為一個(gè)變量（YZ_12306_3）加1，取消選擇時(shí)，則為其減1。

4、驗(yàn)證所選圖片是否正確

上一步我們得到了選擇正確的圖片的變量（YZ_12306_2）值和選擇錯(cuò)誤的圖片的變量（YZ_12306_3）值，如果YZ_12306_2的值等于驗(yàn)證碼初始化時(shí)候的正確圖片的數(shù)量，并且YZ_12306_3的值等于0，那么就可以保證驗(yàn)證成功，否則驗(yàn)證失敗。

獲取驗(yàn)證碼初始化時(shí)候正確圖片的數(shù)量，通過(guò)判斷每一張圖片的keyword是否包含在“keyword1”或“keyword2”中，如果包含在其中，我們則更新中繼器中“selected”的值為1，否則不更新；完成更新后，再將初始化的這8個(gè)圖片對(duì)應(yīng)的“selected”的值累加起來(lái)，則得到了驗(yàn)證碼初始化時(shí)候正確圖片的數(shù)量，并將其賦值給變量（YZ_12306_1）

1）更新正確圖片的“selected”值為1，這個(gè)動(dòng)作加在一個(gè)按鈕上，添加“鼠標(biāo)按下時(shí)”用例。

2）獲取驗(yàn)證碼初始時(shí)正確圖片的數(shù)量并賦值給變量（YZ_12306_1），由于在上一步中對(duì)中繼器中的項(xiàng)目進(jìn)行了更新，因此會(huì)重新出發(fā)中繼器的“項(xiàng)目加載時(shí)”用例，這時(shí)候我們只需要在之前寫好的用例的Case3上增加賦值動(dòng)作即可。

3）校驗(yàn)YZ_12306_1是否等于YZ_12306_2并且YZ_12306_3是否等于0，這個(gè)動(dòng)作我們?cè)凇笆髽?biāo)松開時(shí)”執(zhí)行，即在剛才的按鈕上增加“鼠標(biāo)松開時(shí)”用例

• Case1：驗(yàn)證成功
• Case2：驗(yàn)證失敗并刷新

5、刷新二維碼

刷新的實(shí)現(xiàn)較為簡(jiǎn)單，增加一個(gè)刷新按鈕，并為之添加“鼠標(biāo)點(diǎn)擊時(shí)”用例，清空所有的變量值和中繼器的selected值，重新設(shè)置中繼器的sortnum1的值并添加排序，然后執(zhí)行中繼器的“下一頁(yè)”動(dòng)作即可

五、總結(jié)

以上就是12306圖片驗(yàn)證碼的制作過(guò)程，表面看起來(lái)是“中繼器”的使用，但更多的還是事件邏輯的處理，其中的難點(diǎn)在于隨機(jī)圖片和關(guān)鍵詞的生成，以及校驗(yàn)所選圖片是否正確的過(guò)程。小伙伴們?nèi)绻麑?duì)于12306驗(yàn)證碼的實(shí)現(xiàn)有更好的思路，也歡迎分享與交流。

作者：RAEDME大鵬，微信：urmagic

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