編輯導(dǎo)語：在很多時候，我們遇到登陸頁面是，總是會跳出一個驗證碼登錄，有時是輸入數(shù)字，有時是圖文登錄的形式；并且圖文登錄還分為很多方式，本文作者將介紹B站圖文登錄驗證的步驟，我們一起來了解一下。

你知道最常見的登錄驗證方式是什么嗎？

估計大家第一時間想到的是驗證碼，不錯，驗證碼的確是最常見也是最經(jīng)典的登錄驗證方式。

那么其他的登錄驗證方式，你知道有哪些呢？比如下面圖片中的這種方式（B站的圖文登錄驗證），你是否見過？

B站的圖文登錄驗證

大家可以看到，B站的圖文登錄驗證效果主要組成包括：

1）點擊文字時顯示排序號

2）點擊<確定>按鈕，判斷點擊順序是否正確：

• 順序錯誤時，提示驗證失敗，并刷新圖文重新驗證；
• 順序正確時，提示驗證成功。

那么本篇就來給大家講解一下，如何繪制B站的圖文登錄驗證效果（注：本篇教程屬于Axure 9 基本元件的復(fù)合應(yīng)用，適合1年左右的產(chǎn)品經(jīng)理，大牛請繞行）。

01 第一步：設(shè)置第一個點擊交互

為了節(jié)省時間，我們事先把圖文驗證界面繪制好了，包括驗證圖文（邊框、提示文字、驗證圖片、刷新按鈕、確認(rèn)按鈕）、點擊提示（圓形1和2）、驗證結(jié)果提示（驗證通過、驗證失敗）。

圖文驗證界面

首先拖入一個熱區(qū)，設(shè)置其大小為70×70，并拖動熱區(qū)至驗證圖片上，覆蓋在“轉(zhuǎn)”字上面；然后在右側(cè)工具欄的交互上，點擊新建交互，再依次點擊單擊時_顯示/隱藏_圓形1，將其設(shè)為顯示（默認(rèn)為顯示），并勾選置于頂層。

拖入熱區(qū)，設(shè)置大小為70×70，并拖到轉(zhuǎn)字上

點擊新建交互_單擊時_顯示/隱藏_圓形1，并勾選置于頂層

接著在交互“單擊時”中點擊+號（添加動作），依次點擊設(shè)置文本_圓形1，設(shè)置值為1。

點擊添加動作

依次點擊設(shè)置文本_圓形1，設(shè)置值為1。

這里交互的意思是，當(dāng)點擊“轉(zhuǎn)”字時，顯示點擊提示（圓形1）并置于頂層，排序號顯示為1。

02 第二步：設(shè)置多種情形的點擊交互

由于點擊順序有正確和錯誤兩種情況，上一步只是其中的一種情況，所以我們就要運用到交互中的情形。

運用情形設(shè)置多種交互

首先點擊啟用情形，在情形編輯彈窗中，點擊添加條件，然后點擊第一個下拉菜單，選擇元件可見，點擊第二個下拉菜單，選擇圓形2，點擊最后的下拉菜單，選擇假。

添加情形條件，設(shè)置為：if 元件可見于 圓形2 == 假

這里我們是，通過判斷圓形2是否顯示，來確定當(dāng)前熱區(qū)的點擊順序：

• 情形一，當(dāng)圓形2不顯示時，說明當(dāng)前熱區(qū)是第一個被點擊的，圓形1的排序號要顯示為1；
• 情形二，當(dāng)圓形2顯示時，說明當(dāng)前熱區(qū)是第二個被點擊的，圓形1的排序號應(yīng)該顯示為2。

所以我們接著來添加這第二種情形，點擊選中第一個情形，按Ctrl+C將其復(fù)制到剪貼板，再按Ctrl+V，將其復(fù)制多一份（交互是可以復(fù)制粘貼的）。

復(fù)制多一份情形

雙擊交互打開交互編輯器，在彈窗中再雙擊第二個情形打開情形編輯窗（或直接點擊第二個情形的情形條件）；在情形編輯窗中，修改情形名稱為情形2，點擊最后的下拉菜單，選擇真；再在交互編輯器上，點擊情形2中的設(shè)置文本的內(nèi)容，將值設(shè)為2（即設(shè)置圓形1的排序號為2）。

設(shè)置情形條件為：if 元件可見于 圓形2 == 真

設(shè)置圓形1的排序號為2

03 第三步：設(shè)置第二個點擊交互

第三步我們來設(shè)置第二個點擊的交互，第二個點擊交互與第一個大同小異，所以我們可以將前面的熱區(qū)，按Ctrl+鼠標(biāo)左鍵，拖拉復(fù)制多一份，用作第二個熱區(qū)，并將其拖至“面”字上面。

復(fù)制多一份熱區(qū)，拖至“面”字上

接著點擊選中第二個熱區(qū)，雙擊右側(cè)工具欄的交互，打開交互編輯器，再點擊情形1的情形條件，打開在情形編輯窗，然后點擊第二個下拉菜單，修改為圓形1。

打開第二熱區(qū)的情形1，修改第二個菜單為圓形1

再接著在交互編輯器中，點擊顯示隱藏的內(nèi)容，修改目標(biāo)為圓形2；然后點擊設(shè)置文本的內(nèi)容，修改目標(biāo)為圓形2。

修改顯示隱藏的目標(biāo)為圓形2

修改設(shè)置文本的目標(biāo)為圓形2

最后我們依照情形1的修改方法，來再修改情形2，即修改情形條件的目標(biāo)為圓形1、顯示隱藏的目標(biāo)為圓形2、設(shè)置文本的目標(biāo)為圓形2。

依照情形1來修改情形2

04 第四步：設(shè)置判斷交互

前面三步我們已經(jīng)完成了點擊交互的設(shè)置，接下來就要設(shè)置<確定>按鈕的判斷交互了。

首先點擊選中<確定>按鈕，在右側(cè)工具欄的交互上，依次點擊新建交互_單擊時_顯示隱藏_驗證通過，將其設(shè)為顯示（默認(rèn)為顯示），并勾選置于頂層。

選中<確定>按鈕，點擊新建交互

依次點擊單擊時_顯示隱藏_驗證通過，勾選置于頂層

05 第五步：設(shè)置多種情形的判斷交互

與點擊交互一樣，由于驗證提示有通過和失敗兩種情況，上一步只是其中的一種情況，所以我們繼續(xù)要運用到交互中的情形。

繼續(xù)使用情形

首先，在交互“單擊時”上點擊啟用情形，打開情形編輯窗，在彈窗中點擊添加條件，再點擊第二個下拉菜單，選擇圓形1，在最后一欄填上1；然后點擊+號再添加一行，再點擊第二個下拉菜單，選擇圓形2，在最后一欄填上2。

添加兩個情形條件

這里我們是，通過判斷圓形1和2的顯示文字（排序號），來確定驗證是否通過：

• 情形一，當(dāng)圓形1和2分別顯示1和2時，說明驗證通過；
• 情形二，當(dāng)圓形1和2分別顯示2和1時，說明驗證失敗。

所以我們接著添加這第二種情形，點擊選中第一個情形，按Ctrl+C將其復(fù)制到剪貼板，再按Ctrl+V，將其復(fù)制多一份。

復(fù)制多一份情形

接著點擊第二個情形的情形條件，打開情形編輯窗；在情形編輯窗中，修改情形名稱為情形2，第一行條件的最后一欄設(shè)為1，第二行條件的最后一欄設(shè)為2。

修改圓形的文本為1和2

再接著在交互“情形2”中，點擊顯示隱藏的內(nèi)容，將目標(biāo)設(shè)為驗證失敗。

修改顯示隱藏的目標(biāo)為驗證失敗

06 第六步：隱藏提示類元件

首先選中圓形和驗證提示，將其設(shè)為置于底層，并設(shè)為隱藏，然后將其拖到驗證界面上，底部對齊。

將圓形與驗證提示設(shè)為置于底層和隱藏，并拖至圖文上

07 結(jié)語

OK了，一個B站的圖文登錄驗證效果就繪制完成了；本篇主要運用的知識點是情形，大家學(xué)會了沒？

完成效果圖

作者：默林如斯；公眾號：默林如斯工作室

本文由 @默林如斯工作室 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議。