編輯導(dǎo)讀：自手機(jī)誕生至今，手機(jī)驗(yàn)證碼的設(shè)計(jì)形式越來越多，圖標(biāo)的、語序點(diǎn)選的、空間推理的等等樣式，讓用戶感覺新意的同時(shí)，也給設(shè)計(jì)者提出了難題：驗(yàn)證碼的設(shè)計(jì)，到底應(yīng)該怎么做才能更好的便利使用者呢？一起看看這篇文章吧，也許你會有新思路、新方向。

驗(yàn)證碼“作為人機(jī)交互界面經(jīng)常出現(xiàn)的元素，其本質(zhì)是為了防止用戶利用機(jī)器人程序自動(dòng)注冊、登錄、惡意投票、發(fā)送垃圾郵件、惡意嘗試密碼等登陸嘗試，保證網(wǎng)絡(luò)安全。”

我們平時(shí)在使用互聯(lián)網(wǎng)產(chǎn)品時(shí)會發(fā)現(xiàn)，對于企業(yè)來說，如何防止黑產(chǎn)惡意抓取企業(yè)數(shù)據(jù)資產(chǎn)，用戶隱私，和惡意攻擊等，網(wǎng)絡(luò)安全問題重中之重。

對于用戶來說，希望是極致用戶體驗(yàn)，不打擾，能快速完成任務(wù)。

因此需要在兩者間取得相對平衡，既兼顧企業(yè)網(wǎng)絡(luò)安全，又能給用戶極致體驗(yàn)。

本文是我在項(xiàng)目設(shè)計(jì)中總結(jié)幾種常用到驗(yàn)證碼。

我們?nèi)绾卧诋a(chǎn)品設(shè)計(jì)中恰當(dāng)?shù)倪\(yùn)用驗(yàn)證碼，讓用戶體驗(yàn)產(chǎn)品起來超級棒卻又能保證產(chǎn)品的安全。

希望能為設(shè)計(jì)師伙伴們提供一些啟發(fā)或幫助。

一、驗(yàn)證方式的分類

進(jìn)入移動(dòng)互聯(lián)網(wǎng)時(shí)代以來，驗(yàn)證碼的運(yùn)用場景越來越廣。

其驗(yàn)證方式可以大致歸為以下幾類：

1. 圖標(biāo)/圖片點(diǎn)選驗(yàn)證

圖標(biāo)/圖片行為驗(yàn)證可以保證非中文語言地區(qū)的用戶可以輕松識別。

高安全級別，用戶只需按照順序點(diǎn)擊圖中圖標(biāo)/圖片，即可完成安全驗(yàn)證。

但是如果選擇圖標(biāo)/圖片質(zhì)量不高或者只顯示一部分，就會無限增加用戶識別能力，體驗(yàn)就超級不好。

比如12306火車票網(wǎng)站圖片點(diǎn)選驗(yàn)證就被人唾罵。但是好處也多，那就是打擊了囤票的搶票軟件。

• 防御能力：4星；
• 用戶體驗(yàn)：2星。

2. 文字點(diǎn)選驗(yàn)證

和圖標(biāo)/圖片點(diǎn)選驗(yàn)證方式不同，文字點(diǎn)選驗(yàn)證在保證人的可識別性同時(shí)讓機(jī)器的識別難度呈指數(shù)型增長。

安全性比圖標(biāo)/圖片點(diǎn)選驗(yàn)證更高，用戶只需按照順序點(diǎn)擊圖中文字，即可完成安全驗(yàn)證。

對人比較友好，對機(jī)器不太友好。

• 防御能力：4星；
• 用戶體驗(yàn)：3星。

3. 語序點(diǎn)選驗(yàn)證

和文字點(diǎn)選驗(yàn)證方式不同，語序點(diǎn)選驗(yàn)證在保證人能識別范圍內(nèi)，并要求用戶按照正確的自然語義排序完成點(diǎn)選操作，讓機(jī)器的識別難度呈指數(shù)型增長。

也無形中給用戶增加認(rèn)知成本，比如文盲，對文字理解弱的人。

• 防御能力：4.5星；
• 用戶體驗(yàn)：2.5星。

4. 空間推理驗(yàn)證

和其他驗(yàn)證方式不同，空間推理驗(yàn)證同時(shí)需要用戶根據(jù)圖片的問題提示點(diǎn)選相應(yīng)的物體。

邏輯解題能力結(jié)合3D立體元素識別能力，對用戶來說認(rèn)知成本更高。

由于圖片空間形態(tài)的多樣性和復(fù)雜的問題，可以顯著的降低機(jī)器識別的概率，適用于高安全場景。

• 防御能力：4.5星；
• 用戶體驗(yàn)：2星。

5. 滑動(dòng)拼圖驗(yàn)證

滑動(dòng)拼圖驗(yàn)證的過程中會收集用戶拖動(dòng)滑塊的行為軌跡和用戶設(shè)備信息等多維度信息，實(shí)時(shí)分析這些信息來進(jìn)行人機(jī)識別。

對于用戶來說，流暢優(yōu)質(zhì)的用戶體驗(yàn)，僅需輕輕滑動(dòng)完成拼圖，即可完成安全驗(yàn)證。

還有重要一點(diǎn)，拼圖驗(yàn)證區(qū)域可以作為廣告宣傳或者其他用途，可增加收入。

• 防御能力：3星；
• 用戶體驗(yàn)：4星。

6. 智能組合驗(yàn)證

可根據(jù)用戶行為軌跡以及其他安全策略，判別用戶的風(fēng)險(xiǎn)程度，給用戶智能呈現(xiàn)對應(yīng)的驗(yàn)證形式。

可疑用戶根據(jù)疑似程度彈出不同難度的驗(yàn)證碼進(jìn)行二次驗(yàn)證，也有概率直接通過。

極致用戶體驗(yàn)，多維度收集環(huán)境信息，安全用戶只需輕點(diǎn)即可通過驗(yàn)證。但是風(fēng)險(xiǎn)也很大，需要非常高大數(shù)據(jù)支持。

• 防御能力：2星；
• 用戶體驗(yàn)：5星。

7. 輸入型驗(yàn)證

像純數(shù)字，純字母，數(shù)字加字母的靜態(tài)或動(dòng)態(tài)驗(yàn)證，由于此類的驗(yàn)證碼過于內(nèi)容簡單，對計(jì)算器程序來說，學(xué)習(xí)成本不高，很容易被破解，現(xiàn)在幾乎不用這種驗(yàn)證方式了。

現(xiàn)在部分還在使用是升級版輸入型驗(yàn)證，主要是扭曲變形的數(shù)字加字母的驗(yàn)證碼，這提高了難度，難以直接辨認(rèn)。

但是對于用戶體驗(yàn)來說，用戶體驗(yàn)度一般。

• 防御能力：1星；
• 用戶體驗(yàn)：3星，

8. 短信驗(yàn)證

對于短信驗(yàn)證，其實(shí)也可以歸類為輸入型驗(yàn)證，為什么會單獨(dú)分一類，主要是它跟輸入型還是有很大不同。

短信驗(yàn)證成本相對輸入型驗(yàn)證高，因?yàn)樾枰徺I短信，但安全型卻是指數(shù)型增長的，用戶體驗(yàn)來說非常不錯(cuò)。

• 防御能力：4星；
• 用戶體驗(yàn)：4星。

9. 指紋或刷臉驗(yàn)證

對于以上驗(yàn)證方式來說，指紋或刷臉驗(yàn)證成本會更高，因?yàn)樾枰鄳?yīng)的硬件軟件支持，投入大限制也高。

但是安全性也是最高的，極致用戶體驗(yàn)，只需要按下手指或者刷下臉就可以驗(yàn)證通過。

• 防御能力：5星；
• 用戶體驗(yàn)：5星。

上面列舉的這幾種驗(yàn)證方式，只是目前使用最廣泛和最常用的驗(yàn)證方式。

隨著科技發(fā)展，會出現(xiàn)越來越多不同的驗(yàn)證方式，給用戶帶來更加極致的用戶體驗(yàn)。

二、運(yùn)用場景的分類

隨著互聯(lián)網(wǎng)開啟，驗(yàn)證碼運(yùn)用場景也隨之而來。

其運(yùn)用場景可以大致歸為以下幾類：

1. 登錄注冊

驗(yàn)證碼適用于 App、Web 及小程序等用戶注冊場景，可以抵御自動(dòng)機(jī)惡意注冊（如利用注冊機(jī)批量注冊小號）。

同時(shí)可以有效阻止撞庫攻擊，從源頭進(jìn)行防護(hù)，保障正常用戶的注冊、登錄。

2. 活動(dòng)秒殺

羊毛黨頻繁刷取獎(jiǎng)勵(lì)，導(dǎo)致真實(shí)用戶無法獲取獎(jiǎng)勵(lì)，業(yè)務(wù)方運(yùn)營活動(dòng)效果下降、經(jīng)濟(jì)利益受損。

驗(yàn)證碼適用于搶購、秒殺、優(yōu)惠券等活動(dòng)場景，有效抵御爬蟲、自動(dòng)機(jī)刷取福利券，有效攔截刷單操作，讓羊毛黨空手而歸。

3. 點(diǎn)贊發(fā)帖

惡意用戶用小號在 UGC 社區(qū)惡意發(fā)帖、刷票，使運(yùn)營方無法獲得真實(shí)用戶反饋，影響活動(dòng)開展。

驗(yàn)證碼適用于論壇、投票等場景，有效抵御自動(dòng)機(jī)刷贊和水軍刷帖，解決廣告屠版、惡意灌水、刷票問題。

4. 數(shù)據(jù)保護(hù)

惡意爬蟲可爬取網(wǎng)站的內(nèi)容、數(shù)據(jù)，導(dǎo)致網(wǎng)頁的核心資源、機(jī)密信息被盜用和復(fù)制。

驗(yàn)證碼適用于公告欄、論壇等內(nèi)容網(wǎng)站，有效抵御爬蟲爬取網(wǎng)站內(nèi)容信息，防止自動(dòng)機(jī)、爬蟲盜取網(wǎng)頁內(nèi)容和數(shù)據(jù)。

除了以上常見的運(yùn)用場景，未來驗(yàn)證運(yùn)用的場景也會越來越多，也會越來越完善，既兼顧網(wǎng)絡(luò)安全，又有極致用戶體驗(yàn)。

三、顯示方式（交互方式）的分類

對于不同產(chǎn)品或者不同場景，其顯示方式（交互方式）可以大致歸為以下幾類：

1. 觸發(fā)式顯示

觸發(fā)式顯示就是鼠標(biāo)移入驗(yàn)證條后顯示驗(yàn)證拼圖，輕松接入，不影響網(wǎng)頁原有的排版和美觀。

特別是對于手機(jī)端寸土寸金的顯示內(nèi)容區(qū)域來說，這就顯得尤為重要，可以節(jié)省很多空間。

適用端：電腦端和手機(jī)端。

2. 嵌入式顯示

何為嵌入式顯示，就是點(diǎn)選驗(yàn)證區(qū)域直接完整嵌入網(wǎng)頁，清晰直觀，便于用戶使用和廣告宣傳，特別對于網(wǎng)站品牌宣傳，可以從驗(yàn)證碼下手。

但是對于手機(jī)端來說，因?yàn)樾枰暾@示驗(yàn)證區(qū)，這就尤為很占用空間，手機(jī)端不是很推薦使用這種顯示方式。

適用端：電腦端。

3. 彈出式顯示

彈出式的顯示，跟觸發(fā)式顯示有點(diǎn)像，但是彈出式顯示是綁定自有驗(yàn)證按鈕效果，與自有業(yè)務(wù)樣式完美融合。

而且會根據(jù)情況來是否需要驗(yàn)證彈窗，體驗(yàn)相對來說會更加友好，適用場景也更廣泛。

適用端：電腦端和手機(jī)端。

四、總結(jié)

① 涉及到產(chǎn)品的安全性，目前驗(yàn)證碼是最小成本來實(shí)現(xiàn)產(chǎn)品安全的手段之一；

② 在實(shí)際運(yùn)用中需要注意辨別產(chǎn)品安全跟驗(yàn)證碼之間關(guān)系，應(yīng)該根據(jù)產(chǎn)品的安全以及場景是否需要來選擇恰當(dāng)?shù)摹膀?yàn)證碼”；

③ 驗(yàn)證碼未來無論怎么變化多端，其目的都是為了網(wǎng)絡(luò)安全，其次才是用戶體驗(yàn)。在安全和體驗(yàn)上，這就需要我們設(shè)計(jì)師來找到他們平衡點(diǎn)。

下面是匯總的驗(yàn)證碼驗(yàn)證方式對比圖，希望能為設(shè)計(jì)師伙伴們在使用驗(yàn)證碼時(shí)提供一些啟發(fā)或幫助。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報(bào)下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)