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

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

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

（戲談驗(yàn)證碼）

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

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

1、注冊

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

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

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

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

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

（1）同頁面顯示

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

（京東注冊頁）

（2）不同頁面顯示

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

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

（3）彈窗式圖形驗(yàn)證

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

圖形驗(yàn)證作為短信驗(yàn)證的觸發(fā)點(diǎn)的設(shè)計是符合邏輯的。

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

2、登錄

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

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

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

（登錄）

3、重置密碼

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

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

（重置密碼）

4、結(jié)論

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

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

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

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

作者：Fino（點(diǎn)融黑幫），UX部門交互設(shè)計師一枚。

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