什麼樣的登陸框纔算是優秀的？

　　作WEB前端的同窗知道，登陸框是一個網站的必須板塊，好的登陸框不光能實現簡單的登陸驗證功能，還能夠體現好的交互設計。從我本身的經驗和網上的一些資料，介紹下如何設計一套好的登陸框：

總的來講，一個好的登陸框應該考慮到如下幾點：

1. 基本功能
2. 輸入效率
3. 安全和圖靈驗證
4. 反饋和找回用戶名或密碼
5. 多帳戶
6. 設計風格

下面分別介紹 ———————————————————————————————————————————————————————————————————————————

1. 基本功能

通常來講，登陸框的功能不外乎這幾個功能：1.登陸驗證輸入。2.忘記密碼。3.記住賬號和密碼。4.多賬號登陸。5.註冊。基本的登陸功能，要在註冊時限制賬號和密碼的格式和長度，在登陸框處能夠不作具體驗證格式問題，能夠直接提交服務器驗證。忘記密碼能夠作成一個連接，到另外一個版面找回密碼；可選擇用郵箱或者手機驗證修改密碼（我比較傾向與郵箱驗證）。記住賬號和密碼，須要在腳本中設置cookies的生命時長。多賬號登陸，許多網站均可以多個賬號登陸，如人人網，新浪郵箱等，能夠用郵箱/手機/姓名/暱稱/做爲登陸賬號；另外也能夠從騰訊和新浪等公司獲得接口，用QQ和微博賬號驗證也是可行的。註冊功能通常比較突出的位置，連接到註冊界面。

　　2.輸入效率

　　現階段大多數用戶登陸均要求用戶使用傳統的鍵盤進行輸入，這裏就涉及一個問題–擊鍵效率或稱爲輸入效率。有許多解決輸入效率的方法，如，

使用統一帳戶，許多互聯網服務容許使用OpenID，新浪、騰訊、Facebook、twitter…等等，像知乎容許使用新浪微博的帳號登陸，這樣就減小了用戶進行註冊或登陸時的輸入成本。

記住用戶名及密碼，這樣可避免用戶下次再進行輸入，但用戶清空cookie或安全級別要求高的互聯網服務就悲劇了。

在輸入過程當中給予用戶幫助，例子：新浪微博使用郵箱作爲登陸名(如圖1)，用戶在輸入@ 後，將會出現輸入建議，輸入建議裏有經常使用郵箱的後綴以輔助輸入。

　　圖1

另外，還有一些細節，如，在用戶輸入完用戶名或密碼後，焦點從新切換回用戶名或密碼的輸入框，應該是全選已輸入內容呢仍是輸入焦點位於已輸入文字的後面?用戶名及密碼正確，僅驗證碼出錯的狀況下應該如何處理?

解決方案：使用OpenID，或使你的帳戶成爲OpenID(對於國內巨頭這是句廢話)，容許用戶記住帳戶及密碼(默認項給勾上)，給予用戶輸入輔助，記住用戶輸入過的歷史記錄(可別記密碼)並在適當的觸發條件下顯示出來。ps.以上僅爲部分，還須要區域Web端及移動端。

　　3.安全和圖靈驗證

　　郵箱、數字證書、密保卡、U盾等，對應不一樣的安全級別，各有利弊。（鄙人不懂安全，不班門弄斧）

驗證碼是登陸框中大有可爲的一環

只要有登陸框的網站就必定有圖靈驗證，也就是驗證碼，爲了防止機器攻擊的偉大發明。這個也是讓我但疼了無數次的功能。爲了判斷是否屬於正常登陸而非惡意的侵犯或騷擾，這對於真正的用戶來講，驗證碼沒有必要出現，因此僅在登陸時觸發某些條件再顯示驗證碼吧(像登陸錯 誤次數等)。難以識別的的驗證碼對於用戶來講是沉重的壓力，有的0和O難以區分、1和l難以區分，還有支付寶原來的字母O和數字0的問題，糟糕的驗證碼設計只會一次次將用戶阻 擋在服務以外。

（知乎上的這個真心看不懂）

　　如實在沒法繞過驗證碼這個環節，是否能夠考慮爲驗證碼增長一些實際意義，像reCAPTCHA: Stop Spam, Read Books 項目(已被google收購)，利用驗證碼技術來幫助典籍數字化的進行，這個計劃將由書本掃描下來沒法準確的被光學文字辨識技術(OCR)識別的文字顯示在驗證碼問題中，讓用戶在回答驗證碼時用人腦加以識別(如圖3)，一箭雙鵰。

(這驗證碼曾讓我想砸電腦 -_-’) （這個真心聽不懂～）

　　

PS. 其實中文的識別比英文要可貴多，爲何不鬧個漢字的OCR改進計劃呢?利用用戶輸入驗證碼的精度校訂漢字的OCR。

解決方案：主要是解決驗證碼的識別問題，像End the CAPTCHA Agony利用遊戲的方式進行驗證。或像SolveMedia(Engagement Advertising Technology)，在驗證碼內嵌入容易識別的廣告。國內已經有相似的公司作這樣的事情，相對於提供免費服務的網站來講，這樣作也無可厚非，如豆瓣能夠嘗試在驗證碼環節加入本身的FM pro廣告。以下圖

  　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

關於驗證碼部分，這個博客說的很詳細http://www.comingx.com/blog-html/2242.html

PS：也能夠用驗證碼限制註冊用戶，如德問網的驗證碼是一段代碼。（這個有點狠）

4.反饋和找回賬號密碼

這包括在用戶登陸過程當中所須要的各類反饋，如：

輸入框選中的反饋，明確用戶當前所在位置。

輸入過程當中的反饋，上面輸入效率及輸入模式中提到的點。

提交驗證過程反饋，給個loading效果讓用戶知道目前處於等待狀態，是否容許在提交過程當中取消登陸?

驗證出錯後的反饋，提示用戶哪一個環節出現了錯誤，密碼是保留仍是清空?

　　圖4

解決方案：明確登陸過程當中的各類反饋，並將這些反饋進行細化，使之具備意義，方便用戶理解。如，OSx 及 iCloud的登陸框在出錯後，都會抖動提示驗證出錯。恰當的動效在這裏獲得的很好的體現，抖動的效果與人類搖頭的效果一致。

如今應用及服務太多，並且大都須要用戶進行註冊，（最近總忘密碼，但再次疼了一下）用戶也不免會遺忘（使用統一的OpenID可解決很大一部分問題）。遺忘密碼可在登陸區域明顯的放置，也可採用一些巧妙的方式進行提示（圖6）。               

     圖6

解決方案：這裏提一下忘記密碼流程上須要注意的點吧，儘可能少使用安全問答，不安全，現階段我的信息在網上近乎透明；用戶遺忘密碼時不要強行給用戶設置一個新密碼；經過郵件讓用戶自行重置密碼；對於安全級別要求高的服務採用多種方式重置密碼，如，手機+郵件+U盾+人工等

　　5.多帳戶

　　某些應用及服務容許多帳戶，如桌面端的QQ、Chrome、Win操做系統等。涉及帳戶的選擇、登陸的時機等。舉個反例，Mac端的QQ，當用戶打開 Mac版QQ時，第一時間顯示的是單個帳戶，沒有明確提示用戶選擇其它帳戶或添加其它帳戶的入口，致使不少用戶只能在不斷試錯後才知道點擊頭像進行選擇 （圖5左）。ps.MacQQ打開後，默認焦點停留在QQ號碼輸入區域並全選，這是想鬧哪樣？若是用戶登陸過了，默認焦點應該在密碼輸入區域啊，反饋過也 沒見改進... -_-'圖5

解決方案：系統支持多帳戶，給出足夠明顯的提示，方便用戶切換帳戶（圖5右），並儘量以選擇代替輸入，成本較低，注意一下選擇帳戶後光標的默認位置（這裏可能還涉及記住密碼的問題）。

　　6.設計風格

鄙人不懂設計，很少發言。不過我的比較推薦極簡的設計風格。

幾個好的登陸框設計：

知乎登陸驗證

（豆瓣）

 

 

（icloud）

 

參考博客：http://www.comingx.com/blog-html/2242.html

　　　　　　http://www.woshipm.com/ucd/17812.html

參考了知乎MoonMonster的回答http://www.zhihu.com/question/19857723