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

網(wǎng)上一查驗證碼，出來的相關(guān)詞都是“反人類”，尤其是“反人類”的新高度12306的驗證碼。 

圖1 12306驗證碼

驗證碼的存在如此反用戶體驗，為什么還是不能缺少的呢？簡而言之，就是為了證明你是個人而不是機(jī)器，我們所知的許多網(wǎng)絡(luò)惡意攻擊都是機(jī)器惡意刷導(dǎo)致的，為了安全就必須設(shè)個門檻將機(jī)器拒之門外。驗證碼通過人可以識別而機(jī)器無法識別這樣的邏輯來設(shè)計，無論它以什么形式出現(xiàn)，都是個必要的門檻。下面總結(jié)一下驗證碼在產(chǎn)品中出現(xiàn)的場景和交互流程。

一、注冊

我們通常見到它的場景是注冊登錄場景，注冊時會出現(xiàn)在一般注冊流程里。

大多數(shù)網(wǎng)站注冊頁面選擇一頁填寫完所有信息，一鍵提交注冊完成。在綁定手機(jī)號不在主流程內(nèi)時，驗證碼多數(shù)情況出現(xiàn)在最后一步填寫內(nèi)容。這在老式的論壇很常見。

圖2 某游戲開發(fā)者論壇注冊頁

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

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

A 在同頁面顯示。圖形驗證碼放置在手機(jī)驗證碼之前，獲取手機(jī)驗證碼需要正確驗證圖形驗證碼才可觸發(fā)。 

圖3 京東網(wǎng)站注冊頁

B 在不同頁面顯示。這種情況發(fā)生在注冊本身就是分頁分步驟進(jìn)行的。如下圖：

圖4

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

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

圖形驗證作為短信驗證的觸發(fā)點(diǎn)的設(shè)計是符合邏輯的。因為本身驗證“一個人是人”和“這個人是你”是有承接關(guān)系的。如果不先驗證我是人，驗證我是我又有什么用呢？另外圖形驗證總是被詬病是不明真相的群眾在看到它時，并沒有發(fā)現(xiàn)它的出現(xiàn)和其他信息有什么內(nèi)在聯(lián)系，覺得沒用而累贅。而一旦變成了短信觸發(fā)時，用戶就會認(rèn)為它是有作用的。

二、登錄

圖形驗證碼在登錄時有兩種出現(xiàn)情況。一種是一開始就存在，作為順利登錄的必要填寫內(nèi)容。然而這種情況對用戶不太友好，因為用戶本身對于登錄的預(yù)期并不包含輸入驗證碼這一環(huán)節(jié)，多了這樣一個“門檻”，尤其是驗證碼過于難識別時，就會給用戶造成不好的體驗。

另一種情況就是大部分產(chǎn)品采用的設(shè)計，在用戶輸入用戶名或登錄密碼錯誤超過設(shè)定次數(shù)時，驗證碼出現(xiàn)。這種設(shè)計的內(nèi)在邏輯是用戶輸入錯誤多次很有可能是機(jī)器人在試數(shù)字，所以出現(xiàn)圖形驗證來擋掉機(jī)器的攻擊。這種邏輯就很容易讓用戶理解。

圖5 豆瓣登錄輸錯密碼后需要輸驗證碼

三、重置密碼

用戶在登錄頁面時會有“忘記密碼”的入口（或者“無法登錄？”）。重設(shè)密碼流程里也需要輸入驗證碼。首先會要求輸入已注冊用戶郵箱或手機(jī)號并驗證圖片驗證碼，之后才能進(jìn)入找回流程。這里驗證圖形驗證碼也可視作后續(xù)步驟的觸發(fā)，二者存在關(guān)聯(lián)性。

圖6 微博找回密碼

結(jié)論：

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

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

圖7 設(shè)計不統(tǒng)一

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

Via: dianrong