2021-9-17 資深UI設計者
編輯導讀：自手機誕生至今，手機驗證碼的設計形式越來越多，圖標的、語序點選的、空間推理的等等樣式，讓用戶感覺新意的同時，也給設計者提出了難題：驗證碼的設計，到底應該怎么做才能更好的便利使用者呢？一起看看這篇文章吧，也許你會有新思路、新方向。
驗證碼“作為人機交互界面經常出現的元素，其本質是為了防止用戶利用機器人程序自動注冊、登錄、惡意投票、發送垃圾郵件、惡意嘗試密碼等登陸嘗試，保證網絡安全?！?
我們平時在使用互聯網產品時會發現，對于企業來說，如何防止黑產惡意抓取企業數據資產，用戶隱私，和惡意攻擊等，網絡安全問題重中之重。
對于用戶來說，希望是極致用戶體驗，不打擾，能快速完成任務。
因此需要在兩者間取得相對平衡，既兼顧企業網絡安全，又能給用戶極致體驗。
本文是我在項目設計中總結幾種常用到驗證碼。
我們如何在產品設計中恰當的運用驗證碼，讓用戶體驗產品起來超級棒卻又能保證產品的安全。
希望能為設計師伙伴們提供一些啟發或幫助。
進入移動互聯網時代以來，驗證碼的運用場景越來越廣。
其驗證方式可以大致歸為以下幾類：
圖標/圖片行為驗證可以保證非中文語言地區的用戶可以輕松識別。
高安全級別，用戶只需按照順序點擊圖中圖標/圖片，即可完成安全驗證。
但是如果選擇圖標/圖片質量不高或者只顯示一部分，就會無限增加用戶識別能力，體驗就超級不好。
比如12306火車票網站圖片點選驗證就被人唾罵。但是好處也多，那就是打擊了囤票的搶票軟件。
和圖標/圖片點選驗證方式不同，文字點選驗證在保證人的可識別性同時讓機器的識別難度呈指數型增長。
安全性比圖標/圖片點選驗證更高，用戶只需按照順序點擊圖中文字，即可完成安全驗證。
對人比較友好，對機器不太友好。
和文字點選驗證方式不同，語序點選驗證在保證人能識別范圍內，并要求用戶按照正確的自然語義排序完成點選操作，讓機器的識別難度呈指數型增長。
也無形中給用戶增加認知成本，比如文盲，對文字理解弱的人。
和其他驗證方式不同，空間推理驗證同時需要用戶根據圖片的問題提示點選相應的物體。
邏輯解題能力結合3D立體元素識別能力，對用戶來說認知成本更高。
由于圖片空間形態的多樣性和復雜的問題，可以顯著的降低機器識別的概率，適用于高安全場景。
滑動拼圖驗證的過程中會收集用戶拖動滑塊的行為軌跡和用戶設備信息等多維度信息，實時分析這些信息來進行人機識別。
對于用戶來說，流暢優質的用戶體驗，僅需輕輕滑動完成拼圖，即可完成安全驗證。
還有重要一點，拼圖驗證區域可以作為廣告宣傳或者其他用途，可增加收入。
可根據用戶行為軌跡以及其他安全策略，判別用戶的風險程度，給用戶智能呈現對應的驗證形式。
可疑用戶根據疑似程度彈出不同難度的驗證碼進行二次驗證，也有概率直接通過。
極致用戶體驗，多維度收集環境信息，安全用戶只需輕點即可通過驗證。但是風險也很大，需要非常高大數據支持。
像純數字，純字母，數字加字母的靜態或動態驗證，由于此類的驗證碼過于內容簡單，對計算器程序來說，學習成本不高，很容易被破解，現在幾乎不用這種驗證方式了。
現在部分還在使用是升級版輸入型驗證，主要是扭曲變形的數字加字母的驗證碼，這提高了難度，難以直接辨認。
但是對于用戶體驗來說，用戶體驗度一般。
8. 短信驗證
對于短信驗證，其實也可以歸類為輸入型驗證，為什么會單獨分一類，主要是它跟輸入型還是有很大不同。
短信驗證成本相對輸入型驗證高，因為需要購買短信，但安全型卻是指數型增長的，用戶體驗來說非常不錯。
9. 指紋或刷臉驗證
對于以上驗證方式來說，指紋或刷臉驗證成本會更高，因為需要相應的硬件軟件支持，投入大限制也高。
但是安全性也是最高的，極致用戶體驗，只需要按下手指或者刷下臉就可以驗證通過。
上面列舉的這幾種驗證方式，只是目前使用最廣泛和最常用的驗證方式。
隨著科技發展，會出現越來越多不同的驗證方式，給用戶帶來更加極致的用戶體驗。
隨著互聯網開啟，驗證碼運用場景也隨之而來。
其運用場景可以大致歸為以下幾類：
驗證碼適用于 App、Web 及小程序等用戶注冊場景，可以抵御自動機惡意注冊（如利用注冊機批量注冊小號）。
同時可以有效阻止撞庫攻擊，從源頭進行防護，保障正常用戶的注冊、登錄。
羊毛黨頻繁刷取獎勵，導致真實用戶無法獲取獎勵，業務方運營活動效果下降、經濟利益受損。
驗證碼適用于搶購、秒殺、優惠券等活動場景，有效抵御爬蟲、自動機刷取福利券，有效攔截刷單操作，讓羊毛黨空手而歸。
惡意用戶用小號在 UGC 社區惡意發帖、刷票，使運營方無法獲得真實用戶反饋，影響活動開展。
驗證碼適用于論壇、投票等場景，有效抵御自動機刷贊和水軍刷帖，解決廣告屠版、惡意灌水、刷票問題。
惡意爬蟲可爬取網站的內容、數據，導致網頁的核心資源、機密信息被盜用和復制。
驗證碼適用于公告欄、論壇等內容網站，有效抵御爬蟲爬取網站內容信息，防止自動機、爬蟲盜取網頁內容和數據。
除了以上常見的運用場景，未來驗證運用的場景也會越來越多，也會越來越完善，既兼顧網絡安全，又有極致用戶體驗。
對于不同產品或者不同場景，其顯示方式（交互方式）可以大致歸為以下幾類：
觸發式顯示就是鼠標移入驗證條后顯示驗證拼圖，輕松接入，不影響網頁原有的排版和美觀。
特別是對于手機端寸土寸金的顯示內容區域來說，這就顯得尤為重要，可以節省很多空間。
適用端：電腦端和手機端。
何為嵌入式顯示，就是點選驗證區域直接完整嵌入網頁，清晰直觀，便于用戶使用和廣告宣傳，特別對于網站品牌宣傳，可以從驗證碼下手。
但是對于手機端來說，因為需要完整顯示驗證區，這就尤為很占用空間，手機端不是很推薦使用這種顯示方式。
適用端：電腦端。
彈出式的顯示，跟觸發式顯示有點像，但是彈出式顯示是綁定自有驗證按鈕效果，與自有業務樣式完美融合。
而且會根據情況來是否需要驗證彈窗，體驗相對來說會更加友好，適用場景也更廣泛。
適用端：電腦端和手機端。
① 涉及到產品的安全性，目前驗證碼是最小成本來實現產品安全的手段之一；
② 在實際運用中需要注意辨別產品安全跟驗證碼之間關系，應該根據產品的安全以及場景是否需要來選擇恰當的“驗證碼”；
③ 驗證碼未來無論怎么變化多端，其目的都是為了網絡安全，其次才是用戶體驗。在安全和體驗上，這就需要我們設計師來找到他們平衡點。
下面是匯總的驗證碼驗證方式對比圖，希望能為設計師伙伴們在使用驗證碼時提供一些啟發或幫助。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務