網上關于12306圖片驗證碼的吐槽已經是鋪天蓋地，當然，現在的12306圖片驗證碼已經不像以前那么變態了。不過鵬哥心里一直有個心結，縱使它如何變態，我都想用Axure把它畫出來，沒辦法，鵬哥就好這口，終于經過幾個日夜的絞盡腦汁，原型出爐（可生成隨機圖片和關鍵字，可選擇圖片進行驗證），于是速速跟小伙伴們分享。

一、解析12306驗證碼

我們先來看一下12306網站上的圖片驗證碼樣式

由此我們可以提取出一些關鍵信息，以便于我們后面進行原型設計：

1. 隨機關鍵詞：如上圖中的“蠟燭”，一個或兩個隨機關鍵詞
2. 隨機圖片：一共有8張隨機圖片，當然圖片中必須包含可以和關鍵詞對應的圖片
3. 驗證：選擇圖片后，會驗證所選圖片是否與關鍵詞一致，同時是否選擇了所有的和關鍵詞對應的圖片
4. 刷新：驗證失敗后會自動刷新，刷新后會出現新的隨機關鍵詞和圖片；也可進行手動刷新

二、原型效果圖

三、原型設計思路

剛才我們提取到了12306驗證碼的一些必要元素，那么在原型設計的時候我們就要去實現那些功能。

1、生成隨機圖片和關鍵詞

1. 生成8張隨機圖片
2. 根據8張已生成的圖片生成關鍵詞，也就是在8張圖片中隨機挑選1~2個圖片對應的關鍵詞

2、圖片選擇和驗證

1. 在第一步生成隨機圖片和關鍵詞的時候我們已經知道了哪幾個圖片是和關鍵詞對應的，需要進行標記
2. 當選擇圖片的時候，把選擇的圖片進行標記，這時候可能是正確的標記或者錯誤的標記
3. 通過比較上述兩步中標記的值來判斷驗證碼的正確與錯誤

3、刷新驗證碼

通過對中繼器進行分頁，每刷新一次則顯示中繼器的下一頁，并且重新生成隨機圖片和關鍵詞，這一步需要中繼器中的項目數為8個整數倍

四、原型制作過程

1、生成隨機圖片

1）添加“中繼器”，設置中繼器中項目的列為“keyword”、“img”、“sortnum1”、“sortnum2”、“selected”，并對中繼器進行如下的設置

2）中繼器中放入“圖片”原件，并且為中繼器添加“每項加載時”用例，用于顯示產生的隨機圖片

3）在頁面上增加“頁面加載時”用例，該用例執行的時候向中繼器中插入16條數據，并且對中繼器進行排序

其中“sortnum1”和“sortnum2”給賦予隨機數，并且“sortnum1”用于中繼器項目的排序，這時候就得到了12306驗證碼的隨機圖片，如下圖：

2、生成關鍵詞

關鍵詞的生成放在隨機圖片生成的后面來實現，也就是先生成8張隨機圖片，然后再根據這8張圖片隨機抽選1-2個圖片對應的關鍵詞即可，那么問題就在于如何從這8張圖片中進行隨機抽取，這里用到的方法就是通過比較“sortnum1”和“sortnum2”的大小，當sortnum1>srotnum2的時候，我就把這個項目對應的圖片關鍵字提出取來，那么8張圖片，總共會對比8次，最終的結果可能是提取到0個關鍵詞，1個關鍵詞或2個及2個以上的關鍵詞。那么0個關鍵詞的情況我先不作處理，我處理2個及2個以上關鍵詞的情況，即我最多只提取2個關鍵詞，當第二個關鍵詞提取出來后，后面我就不再提取關鍵詞了。

1. 添加2個矩形框（keyword1和keyword2）
2. 在中繼器上增加“每項加載時”用例

• Case1：當sortnum1>sortnum2并且keyword1為空的時候，將圖片對應的keyword賦值給keyword1
• Case2：當sortnum1>sortnum2并且keyword1已經提取出來并且keyword2為空并且當前的keyword不等于keyword1，將圖片對應的keyword賦值給keyword2
• Case3：不提取keyword

通過以上3個Case就可以在每次加載的時候產生8個隨機圖片并且提取出0~2個關鍵詞，當提取不到關鍵詞的時候就刷新下吧，其實也可以通過增加一個Case來避免提取不到關鍵詞的情況，有興趣的小伙伴可以自行嘗試。

3、圖片選擇和取消選擇

1）圖片選擇和取消選擇，當點擊圖片的時候可以選擇圖片，再次點擊可以取消圖片選擇。在中繼器中的圖片上增加“點擊時”用例

• Case1：圖片的值為空時，點擊圖片為其賦值“√”
• Case2：圖片的值為“√”時，點擊圖片為其賦值空

2）另外，為了之后要進行的驗證碼校驗，我希望選擇一個正確的圖片時，為一個變量（YZ_12306_2）加1，取消選擇時，則為其減1；當選擇一個錯誤的圖片時，為一個變量（YZ_12306_3）加1，取消選擇時，則為其減1。

4、驗證所選圖片是否正確

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

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

1）更新正確圖片的“selected”值為1，這個動作加在一個按鈕上，添加“鼠標按下時”用例。

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

3）校驗YZ_12306_1是否等于YZ_12306_2并且YZ_12306_3是否等于0，這個動作我們在“鼠標松開時”執行，即在剛才的按鈕上增加“鼠標松開時”用例

• Case1：驗證成功
• Case2：驗證失敗并刷新

5、刷新二維碼

刷新的實現較為簡單，增加一個刷新按鈕，并為之添加“鼠標點擊時”用例，清空所有的變量值和中繼器的selected值，重新設置中繼器的sortnum1的值并添加排序，然后執行中繼器的“下一頁”動作即可

五、總結

以上就是12306圖片驗證碼的制作過程，表面看起來是“中繼器”的使用，但更多的還是事件邏輯的處理，其中的難點在于隨機圖片和關鍵詞的生成，以及校驗所選圖片是否正確的過程。小伙伴們如果對于12306驗證碼的實現有更好的思路，也歡迎分享與交流。

作者：RAEDME大鵬，微信：urmagic

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