網頁設計中的的驗證碼漫談_網頁設計教程

推薦：簡單的設計
什么是簡單？很多時候我們把簡單和簡潔混淆成一個概念，以為簡單就是使用盡量少的視覺元素。其實不然。簡潔和簡單關注的角度不同。簡潔強調的是“潔”，是干凈；而簡單強調的是“單”，是不復雜、容易—容易獲

驗證碼(CAPTCHA)是“Completely Automated Public Turing test to tell Computers and HumansApart”(全自動區分計算機和人類的圖靈測試)的縮寫，是一種區分用戶是計算機和人的公共全自動程序。
<摘自百度百科>
不知道你是否有過本文標題那樣的想法?
在填寫了一長串表單，最后還有一個驗證碼在等著你，就好像100米賽跑到就差10米時候，卻發現前面有個柵欄要跨的感覺。

驗證碼現如今存在于互聯網的各個角落，提交有驗證碼，回復有驗證碼，注冊有驗證碼，綁定有驗證碼，修改有驗證碼，付費還有驗證碼。

從安全角度來說，驗證碼無疑是一個好方法，可以防止一些惡意程序的操作，但在界面設計師們絞盡腦汁想減少用戶操作步驟來說，是無法避免但又不起決定性操作的一步，據統計人們平均停留在驗證碼的時間超過5.5秒，有的網站的安全防范特別高，驗證碼的信息是隨機大小寫+隨機數字+隨機干擾圖形的混合，如下圖：

整個背景圖案都快跟字符融合到一起了，肉眼識別都困難，更不用說機器，或者鼠標只要離開驗證碼框，驗證碼就自動刷新，這無疑大大增加了用戶停留時間。

有時候就是這短短的幾秒，大腦經過思考過程很容易會改變當前的決定，如果這是一個注冊流程，很可能網站又失去了一個用戶，如果這是一個付費流程，可能網站失去了一筆交易。這肯定不是我們的初衷。

但在各種黑客手段層出不窮的今天，網站又不得不使用驗證碼來保證用戶的操作安全，那么我們能不能將驗證碼這一步做的沒那么麻煩?

目前大多數網站還是使用的內容和交互比較復雜的驗證碼，不過也有網站他們正在做一些改變。設想下如果驗證碼都是一個隨機英文單詞+隨機干擾背景，如下圖：

這樣，用戶在只輸出的幾個字母，目前主流的輸入法自帶的聯想字詞，就自動顯示出來，簡單的選擇下就可以了，還不容易出錯。個人感覺比較適合定義為小清新/文青的網站，用單詞做驗證碼，雖然只是一個小細節，但還是保持了網站整體風格，當然如果遇到使用一些少數不帶聯想字詞輸入法的用戶可能會慢些。

還有些辦法比較適合中國地區使用，如上圖用隨機漢字和隨機干擾背景，這個雖然也要耗費時間，但在中國地區來說，中文至少比英文識別速度更快，盲打的速度也高。如果將驗證碼中文設定為隨機成語，配合輸入法的聯想功能，這樣也能更方便一些。

還有一種方法，適用于填寫內容很長的表單。將驗證碼的位置做一些變化，將它放在關鍵填寫內容之后，或者放在靠前明顯位置，這樣用戶一上來就將這步不必要，又不得不做的一步做完了，后面時間就專心填寫自己所需內容，對提高效率也有一定幫助，當然個人建議驗證碼內容不要過于繁雜，刷新機制不要太嚴格，不然用戶在第一步就遇到障礙更不用說耐心填寫后面內容了。

目前很多設計團隊都不斷在對驗證碼的呈現方式做優化，說明大家都意識到驗證碼的作用和定位。所以個人認為，界面設計既然是對人機交互，操作界面的整體設計，那么除了在注重外表美觀，色彩風格的同時，更要注重用戶習慣，在不脫離當前主流設計的情況下，將操作簡捷最大化，記憶負擔最小化。

分享：頁面構建和js前端不得不說的那點事兒
作為微博的頁面構建工程師，主要職責就是利用htmlcss，高質量的完成靜態頁面的制作，保證項目的按時完成。而頁面需要的js效果則交給下游的js前端工程師去做。在微博，這兩個崗位是分開的。但在大家的思維定勢里可能覺得這兩個崗位應由一個人來完成最好，畢竟，頁面構建