最近在做關于驗證碼的項目的時候，從交互的角度梳理了產(chǎn)品各個平臺驗證碼的應用場景。在一個產(chǎn)品中，會有多個設計師分工協(xié)作，不同的設計師做設計迭代。由于驗證碼在整體設計中太容易被忽略，它在每個場景的顯示邏輯可能不盡相同。下面，我們就來聊一聊不同應用場景下的驗證碼。

說到驗證碼，我們一定會想到12306！12306是驗證碼網(wǎng)紅屆的鼻祖扛把子，可以說12306讓驗證碼成為全民娛樂（tu cao）的一種方式。

既然大家覺得驗證碼是種糟糕的用戶體驗，為什么我們在設計過程中還是不能缺少它的存在呢？

（戲談驗證碼）

簡而言之，驗證碼的存在是為了驗證注冊的用戶是計算機還是人，許多網(wǎng)絡惡意攻擊都是惡意的機器程序所導致，驗證碼能夠有效的防止惡意破解密碼、刷票、論壇灌水，防止某個黑客對某一個特定注冊用戶用特定程序暴力破解方式進行不斷的登陸嘗試。

驗證碼通過人可以識別而機器無法識別這樣的邏輯來設計，無論它以什么形式出現(xiàn)，設置驗證碼機制都是個必要的門檻。下面總結一下驗證碼在產(chǎn)品中出現(xiàn)的場景和交互流程。

1、注冊

我們通常見到驗證碼是在注冊登錄場景，注冊時出現(xiàn)在注冊流程里。

過去，大多數(shù)的網(wǎng)站注冊頁面往往選擇一頁填寫完所有信息，在主流程中不需要綁定手機號，一鍵即可提交注冊。這種注冊方式在老式的論壇很常見。

（某游戲開發(fā)者論壇注冊頁）

當綁定手機號在注冊流程里時，下面一定會跟隨短信驗證環(huán)節(jié)。這個時候圖形驗證碼和短信驗證同時存在的設計就有幾種情況了。

首先可以確定的是圖形驗證和短信驗證之間有邏輯相關性，他們之間的相關性一般體現(xiàn)在如下三種設計中：

（1）同頁面顯示

圖形驗證碼放置在手機驗證碼之前，通過圖形驗證碼后才可觸發(fā)手機驗證碼的獲取。

（京東注冊頁）

（2）不同頁面顯示

這種情況發(fā)生在注冊本身就是分頁分步驟進行的，如下圖：

圖形驗證會跟在輸入用戶名之后，一般在第一步出現(xiàn)，在點擊下一步后會到達短信驗證界面。從用戶體驗上來講，運用分步設計引導性更強，一般用在需要輸入多種信息的時候，用戶會有比較清晰的邏輯，并且對何時完成有一個預判。這個時候，圖形驗證的結果就影響了用戶能否順利進入下一步短信驗證。

（3）彈窗式圖形驗證

這種交互邏輯是用戶輸入合規(guī)手機號時，點擊獲取短信驗證碼，會彈出圖形驗證請求，驗證成功后彈窗消失，系統(tǒng)給用戶發(fā)出驗證短信。在這個邏輯里，圖形驗證就作為發(fā)送短信的觸發(fā)條件。

圖形驗證作為短信驗證的觸發(fā)點的設計是符合邏輯的。

在圍觀群眾看到圖形驗證的時候，他們不能了解到這種驗證方式與其他信息是否存在內(nèi)在聯(lián)系，認為圖形驗證對于注冊過程來說是一種累贅，但是我們在圖形驗證之后加入短信觸發(fā)的功能，它就成為一種既有實際功效而同時具有簡便操作的東西了。

2、登錄

圖形驗證碼在登錄時有兩種出現(xiàn)情況：

一種是用戶第一次登陸的時候就存在，作為順利登錄的必要填寫內(nèi)容。但是這種情況對用戶體驗而言不太友好，用戶本身對于登錄的預期并不包含輸入驗證碼這一環(huán)節(jié)。把圖形驗證碼加到登陸頁面上，這相當于多了這樣一個“門檻”，如果驗證碼很難識別，用戶會趁早的拋棄你的應用，尋求更好體驗的平臺。

另一種情況是目前大部分產(chǎn)品采用的設計，在用戶輸入用戶名或登錄密碼錯誤超過設定次數(shù)時，圖形驗證碼出現(xiàn)。這種設計的內(nèi)在邏輯是用戶輸入錯誤多次，我們會判斷是否是機器人在測試數(shù)字密碼，這時候我們就用圖形驗證來擋掉機器的攻擊。

（登錄）

3、重置密碼

用戶在登錄頁面時會有“忘記密碼”的入口，在重設密碼流程里也需要輸入驗證碼。

首先重置流程里要求輸入已注冊用戶郵箱或手機號并驗證圖片驗證碼，之后在進入找回流程。這里圖形驗證碼可視作后續(xù)步驟的觸發(fā)，二者存在順序關聯(lián)性。

（重置密碼）

4、結論

梳理圖形驗證碼的交互場景，是為了在設計時能做出充分考慮，而不是隨意放置。

設計不統(tǒng)一最大的問題是不符合用戶心理預期。圖形驗證碼其實并不像綁定手機的短信驗證那么具有連貫性，它可以單獨存在也可以上下關聯(lián)，但無論何種設計都應該一致。如果同一個頁面上驗證碼有時出現(xiàn)，有時不出現(xiàn)，會讓經(jīng)常使用產(chǎn)品的用戶沒有一個統(tǒng)一的體驗。這種小的困擾能避免還是要避免的。

（設計不統(tǒng)一）

整個產(chǎn)品的交互應該是具有統(tǒng)一性的，包括頁面跳轉細節(jié)。除了樣式選擇外，驗證碼的顯示邏輯當然也需要統(tǒng)一。到底和短信驗證碼是怎樣的邏輯關系，這個邏輯需要從始至終。許多設計師容易忽略這一點，驗證碼出現(xiàn)的時機千奇百怪，這樣同樣會給用戶造成一定困擾。

作者：Fino（點融黑幫），UX部門交互設計師一枚。

本文由@點融黑幫（ID：DianrongMafia）原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉載。