編輯導語：在很多時候，我們遇到登陸頁面是，總是會跳出一個驗證碼登入，有時是輸入數字，有時是圖文登入的形式；並且圖文登入還分為很多方式，本文作者將介紹B站圖文登入驗證的步驟，我們一起來了解一下。
你知道最常見的登入驗證方式是什麼嗎？
估計大家第一時間想到的是驗證碼，不錯，驗證碼的確是最常見也是最經典的登入驗證方式。
那麼其他的登入驗證方式，你知道有哪些呢？比如下面圖片中的這種方式（B站的圖文登入驗證），你是否見過？
B站的圖文登入驗證
大家可以看到，B站的圖文登入驗證效果主要組成包括：
1）點選文字時顯示排序號
2）點選<確定>按鈕，判斷點選順序是否正確：
- 順序錯誤時，提示驗證失敗，並重新整理圖文重新驗證；
- 順序正確時，提示驗證成功。
那麼本篇就來給大家講解一下，如何繪製B站的圖文登入驗證效果（注：本篇教程屬於Axure 9 基本元件的複合應用，適合1年左右的產品經理，大牛請繞行）。
01 第一步：設定第一個點選互動為了節省時間，我們事先把圖文驗證介面繪製好了，包括驗證圖文（邊框、提示文字、驗證圖片、重新整理按鈕、確認按鈕）、點選提示（圓形1和2）、驗證結果提示（驗證透過、驗證失敗）。
圖文驗證介面
首先拖入一個熱區，設定其大小為70×70，並拖動熱區至驗證圖片上，覆蓋在“轉”字上面；然後在右側工具欄的互動上，點選新建互動，再依次點選單擊時_顯示/隱藏_圓形1，將其設為顯示（預設為顯示），並勾選置於頂層。
拖入熱區，設定大小為70×70，並拖到轉字上
點選新建互動_單擊時_顯示/隱藏_圓形1，並勾選置於頂層
接著在互動“單擊時”中點選+號（新增動作），依次點選設定文字_圓形1，設定值為1。
點選新增動作
依次點選設定文字_圓形1，設定值為1。
這裡互動的意思是，當點選“轉”字時，顯示點選提示（圓形1）並置於頂層，排序號顯示為1。
02 第二步：設定多種情形的點選互動由於點選順序有正確和錯誤兩種情況，上一步只是其中的一種情況，所以我們就要運用到互動中的情形。
運用情形設定多種互動
首先點選啟用情形，在情形編輯彈窗中，點選新增條件，然後點選第一個下拉選單，選擇元件可見，點選第二個下拉選單，選擇圓形2，點選最後的下拉選單，選擇假。
新增情形條件，設定為：if 元件可見於 圓形2 == 假
這裡我們是，透過判斷圓形2是否顯示，來確定當前熱區的點選順序：
- 情形一，當圓形2不顯示時，說明當前熱區是第一個被點選的，圓形1的排序號要顯示為1；
- 情形二，當圓形2顯示時，說明當前熱區是第二個被點選的，圓形1的排序號應該顯示為2。
所以我們接著來新增這第二種情形，點選選中第一個情形，按Ctrl+C將其複製到剪貼簿，再按Ctrl+V，將其複製多一份（互動是可以複製貼上的）。
複製多一份情形
雙擊互動開啟互動編輯器，在彈窗中再雙擊第二個情形開啟情形編輯窗（或直接點選第二個情形的情形條件）；在情形編輯窗中，修改情形名稱為情形2，點選最後的下拉選單，選擇真；再在互動編輯器上，點選情形2中的設定文字的內容，將值設為2（即設定圓形1的排序號為2）。
設定情形條件為：if 元件可見於 圓形2 == 真
設定圓形1的排序號為2
03 第三步：設定第二個點選互動第三步我們來設定第二個點選的互動，第二個點選互動與第一個大同小異，所以我們可以將前面的熱區，按Ctrl+滑鼠左鍵，拖拉複製多一份，用作第二個熱區，並將其拖至“面”字上面。
複製多一份熱區，拖至“面”字上
接著點選選中第二個熱區，雙擊右側工具欄的互動，開啟互動編輯器，再點選情形1的情形條件，開啟在情形編輯窗，然後點選第二個下拉選單，修改為圓形1。
開啟第二熱區的情形1，修改第二個選單為圓形1
再接著在互動編輯器中，點選顯示隱藏的內容，修改目標為圓形2；然後點選設定文字的內容，修改目標為圓形2。
修改顯示隱藏的目標為圓形2
修改設定文字的目標為圓形2
最後我們依照情形1的修改方法，來再修改情形2，即修改情形條件的目標為圓形1、顯示隱藏的目標為圓形2、設定文字的目標為圓形2。
依照情形1來修改情形2
04 第四步：設定判斷互動前面三步我們已經完成了點選互動的設定，接下來就要設定<確定>按鈕的判斷互動了。
首先點選選中<確定>按鈕，在右側工具欄的互動上，依次點選新建互動_單擊時_顯示隱藏_驗證透過，將其設為顯示（預設為顯示），並勾選置於頂層。
選中<確定>按鈕，點選新建互動
依次點選單擊時_顯示隱藏_驗證透過，勾選置於頂層
05 第五步：設定多種情形的判斷互動與點選互動一樣，由於驗證提示有透過和失敗兩種情況，上一步只是其中的一種情況，所以我們繼續要運用到互動中的情形。
繼續使用情形
首先，在互動“單擊時”上點選啟用情形，開啟情形編輯窗，在彈窗中點選新增條件，再點選第二個下拉選單，選擇圓形1，在最後一欄填上1；然後點選+號再新增一行，再點選第二個下拉選單，選擇圓形2，在最後一欄填上2。
新增兩個情形條件
這裡我們是，透過判斷圓形1和2的顯示文字（排序號），來確定驗證是否透過：
- 情形一，當圓形1和2分別顯示1和2時，說明驗證透過；
- 情形二，當圓形1和2分別顯示2和1時，說明驗證失敗。
所以我們接著新增這第二種情形，點選選中第一個情形，按Ctrl+C將其複製到剪貼簿，再按Ctrl+V，將其複製多一份。
複製多一份情形
接著點選第二個情形的情形條件，開啟情形編輯窗；在情形編輯窗中，修改情形名稱為情形2，第一行條件的最後一欄設為1，第二行條件的最後一欄設為2。
修改圓形的文字為1和2
再接著在互動“情形2”中，點選顯示隱藏的內容，將目標設為驗證失敗。
修改顯示隱藏的目標為驗證失敗
06 第六步：隱藏提示類元件首先選中圓形和驗證提示，將其設為置於底層，並設為隱藏，然後將其拖到驗證介面上，底部對齊。
將圓形與驗證提示設為置於底層和隱藏，並拖至圖文上
07 結語OK了，一個B站的圖文登入驗證效果就繪製完成了；本篇主要運用的知識點是情形，大家學會了沒？
完成效果圖
作者：默林如斯；公眾號：默林如斯工作室
本文由 @默林如斯工作室 原創釋出於人人都是產品經理，未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議。