怎麼樣的登錄框才是優秀的？

12-26

這次回答嘗試分成兩個部分，喜歡看短回答的，看完下面幾行就夠了！喜歡看長文的請欣然的越過我是條梗 ^_^

for 短回答：
解決以下任何一個問題的登錄框是我都認為是優秀登錄框：

輸入效率問題
輸入模式問題
圖靈驗證問題
反饋
多賬戶問題
遺忘用戶名或密碼
Accessibility
安全問題

......

個人認為的優秀登錄樣式，參考長文最後部分。

========為什麼偏偏我是條梗========
for 長文：

登錄框存在已久，對於用戶來說是必定每天接觸，對於設計師來說也是一個墨守陳規的控制項，兩個框加個按鍵，如果猛然抓個設計師問「你覺得登錄框還有哪些可以改進的點」，得到的回答應該是長時間的沉默，當然也包括我。「寧可一思進，莫在一思停」，這是一代宗師里的拳理，同樣也是做人做事的道理，思進方可有所為，一思一念間高下已分，體現在互聯網應用及服務應該就更為深刻了。

扯回主題，現階段常見登錄框需要解決的問題：

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

使用統一賬戶，許多互聯網服務允許使用OpenID，新浪、騰訊、Facebook、twitter...等等，像知乎允許使用新浪微博的賬號登錄，這樣就減少了用戶進行註冊或登錄時的輸入成本。
記住用戶名及密碼，這樣可避免用戶下次再進行輸入，但用戶清空cookie或安全級別要求高的互聯網服務就悲劇了。
在輸入過程中給予用戶幫助，例子：新浪微博使用郵箱做為登錄名（圖1），用戶在輸入@ 後，將會出現輸入建議，輸入建議里有常用郵箱的後綴以輔助輸入。

圖1

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

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

2. 輸入模式問題，在輸入用戶名時，用戶是否能夠明確自己處於中文模式或英文模式？輸入密碼時，能否明確Caps Lock處於哪種狀態？輸入模式到目前為至一直是個令人討厭的問題，或者你感覺不到，認為在輸入錯誤後僅僅需要按幾次退格就可以修正這個錯誤，假設用戶在期望輸入英文時恰好正處在中文輸入模式里，那用戶需要執行的操作就多了，先刪除已輸入的錯誤字元，再執行Crl+空格，或者用滑鼠切換至英文模式。另，非可見密碼狀態下Caps Lock的開關影響到整個登錄操作的成敗（圖2）

圖2

解決方案：中英文輸入模式最終需要輸入法來進行解決，可惜現階段沒有哪款PC端輸入法考慮到輸入模式對用戶的影響並加以解決。登錄框內可採用類似圖2在密碼區域增加Caps Lock狀態提示，一般無需特別對用戶名輸入區域增加Caps Lock提示，因大部分用戶名對大小寫不敏感。另，可考慮優雅的明文顯示密碼，如在「移動應用中註冊新用戶及用戶登錄的時候，密碼應不應該顯示為明文？」一文中所描述。

3. 圖靈驗證問題，現常規的驗證碼也是讓我無限蛋痛的問題之一，為了判斷是否屬於正常登錄而非惡意的侵犯或騷擾，這對於真正的用戶來說，驗證碼沒有必要出現，所以僅在登錄時觸發某些條件再顯示驗證碼吧。難以識別的的驗證碼對於用戶來說是沉重的壓力，像I和l的識別難度，還有支付寶原來的字母O和數字0的問題，無奈設置的驗證碼一次次將用戶阻擋在服務之外。

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

圖3（不過這驗證碼曾讓我想砸電腦 -_-"）

PS. 其實中文的識別比英文要難得多，為什麼不鬧個漢字的OCR改進計劃呢？利用用戶輸入驗證碼的精度校正漢字的OCR。

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

4. 反饋，這包括在用戶登錄過程中所需要的各種反饋，如：

輸入框選中的反饋，明確用戶當前所在位置。
輸入過程中的反饋，上面輸入效率及輸入模式中提到的點。
提交驗證過程反饋，給個loading效果讓用戶知道目前處於等待狀態，是否允許在提交過程中取消登錄？
驗證出錯後的反饋，提示用戶哪個環節出現了錯誤，密碼是保留還是清空？

圖4

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

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

圖5

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

6. 遺忘密碼問題，這也是因為各種應用及服務太多，而且大都需要用戶進行註冊，用戶也難免會遺忘（使用統一的OpenID可解決很大一部分問題）。遺忘密碼可在登錄區域明顯的放置，也可採用一些巧妙的方式進行提示（圖6）。

圖6

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

7. Accessibility，登錄區域是否滿足了無障礙性的需求？用戶名及密碼的輸入是否有其它的方式？驗證碼的設計是否合理？大部份的研究指出，大概有20%的人口有某種程度的殘障，當然並不是所有殘障人士都有讓他們使用互聯網困難的殘疾，可是在人口比例上還是很重要的。

中國是全世界盲人最多的國家之一，眼部疾病在中國也是一個主要的公共衛生問題。中國約有盲人600-700萬，佔世界盲人總數的18%，另有雙眼低視力患者1200萬。我國盲人數量早已超過諸如丹麥、芬蘭、挪威等國家的人口數。

網銀登錄驗證碼被指歧視盲人 493人聯名要求糾正http://www.chinanews.com/sh/2012/07-03/4003005.shtml

有興趣可到這裡詳細了解：WebAIM: Introduction to Web Accessibility

解決方案：堅持可用性設計理念，利用現有技術及交互手段：語音輸入；語音識別；臉部識別；手勢識別；語音驗證（File:中文語音Captcha.ogg）等等......

8. 安全問題，數字證書、密保卡、U盾等，對應不同的安全級別，各有利弊。另，登錄區域記住密碼功能，cookie需要著重設計。該層面很多涉及底層技術，設計人員在這裡就不胡說八道了。個人傾向於利用移動設備解決安全問題。

上面啰嗦了一大堆，下面說說自己比較喜歡的登錄方式：

1. 利用二維碼掃描登錄，幾乎規避了上面大部分問題，並在安全性上有一定的保證，使用用戶的手機進行驗證，不需要用戶的額外輸入，也不存在密碼或遺忘密碼問題。當然也存在一些其它的問題，如，成本，用戶移動設備需要支持掃描功能，需要移動端與Web端或桌面端相結合，登錄時需要執行某些特定操作，打開APP，進入某功能等（這也可帶動移動端APP的日活，玩笑）。

https://login.weixin.qq.com/l/Es48heeri7CW4Y (二維碼自動識別)

圖7

2. 利用特定的交互方式，像Bump連接Web端（圖8），通過手機的重力感應感知到「bump」，然後將地理位置與碰撞時間等信息上傳到伺服器，伺服器根據最接近的時間點和地點判斷出手機或者電腦的IP地址，為它們建立通信配對。雖然也可用來進行用戶登錄，但安全性較差，真要採用這種方式，可就要改進一下相關的流程。

圖8

以上當然無法完全替代傳統登錄方式，但可做為補充及增益。
歡迎補全！謝謝

1 在合適的時候出現。至少登錄過就應該不出現，不搶視覺焦點
2 時間短，包含幾個方面，用戶輸入的少，tab順序，回車響應，但很多大網站不注意的一個細節是用戶在切換輸入法，這個對於用戶來說比較麻煩，特別是在輸入驗證碼的時候，這個問題在百度統計的登錄界面顯示得特別不友好。http://tongji.baidu.com/hm-web/welcome/login?castk=LTE%3D（用戶名是中文，tab到密碼框式默認屏蔽輸入法，但到了輸入法界面就成了純英文，但當前輸入法還是中文）。驗證碼的容易辨別，經常看到不少驗證碼，後台不做智能處理，一定要讓用戶肉眼來區分O和0，1和l，這些都是讓用戶最容易輸入錯誤的，都應該在後台屏蔽，允許用戶輸錯o和0.
3 安全性，使用https，使用驗證碼，如果能和谷歌一樣，自動檢測危險，必要時才加入驗證碼是最好不過。
4 不要和老版新浪一樣，一個禮拜沒有登錄訪問你的頁面的時候就變成註冊引導框了，明明是用戶想登錄，卻跳轉來註冊界面。
5 多種登錄方式，支持大部分聯合登錄，登錄相關鏈接都出來，比如找密碼，註冊，登錄幾次不成功後的提示
6 登錄成功後跳轉到該去的地方。特別是有些網站記錄的是referror，導致用戶還需要交互一次。比如購物車頁面去結算提示登錄，登錄完又跳到購物車頁面了，這就是問題，用戶還要點一次。

所有人都知道這是登錄框
能最短時間完成登錄
未登錄的用戶很容易發現登錄框

對於驗證錯誤的賬號和密碼建議設置保留，這樣用戶可以對比輸入錯誤的信息加以改正，因為用戶在進行登錄時並沒有刻意記憶輸入的信息。

剛好這段時間都在留意登陸框，湊個熱鬧。
關於登錄框或者註冊表單，對於產品來說是很重要的入口，我覺得就只有一個原則——快！
如何做到快，就在於方便易用，用各種手段減少用戶操作步驟和心理、視覺等負擔。
還要做到不能打斷用戶正在處理的任務，否則……就像@向翔所說的新浪，你讓我登陸，彈窗可以嗎？浮層可以嗎？毫無徵兆直接轉到登陸頁不讓我繼續看微博，這也就算了，幹嘛還給我牛龜那麼大的註冊表單，而登陸縮在一邊。

還有幾個關於良好的註冊表單和登陸框必需具備的要素：

布局：需要有良好的視覺引導，儘可能簡單，讓用戶專註，畢竟填表單是比較費神的
容錯：我忘記密碼了，可以通過用戶名、郵箱、手機號等多種獨立方式取回，很久之前我忘記新浪賬號了，它先提示我輸入用戶名，再讓我輸入郵箱，我記得其中一樣還用問你要？
提示(註冊表單)：密碼字元要求，表單內容的要求（該填郵箱你就提示我填寫郵箱），別填完才說我錯了
反饋：某些要讀取大量數據的登錄操作，在用戶等待的過程中要給予點擊響應和進度提示等反饋。
節省步驟(註冊表單)：自識別用戶是否已註冊，給予醒目的情感化提示；二次輸入確認密碼那個步驟其實可以省略了
產品口號(註冊表單)：轉化率和回訪率的「激勵「語句
安全保障(註冊表單)：減少用戶的疑慮，提供「不會出售用戶信息」等安全提示，不過這些在國內都是浮雲

舉幾個關於「快」的例子，這些產品例子裡面，諸如視覺引導、產品口號和社交池之類的細節都非常到位：
金山快盤
前幾天偶然發現了金山快盤的登錄很威武：
由於在別人電腦上需要下載文案，時間緊迫，我看都沒看就在網頁版快盤的註冊表單里填寫郵箱，按TAB鍵切換到「輸入密碼」框，發現表單自動識別我的郵箱為已註冊用戶，註冊表單自動切換為登陸表單，填寫完密碼移開滑鼠焦點後，竟然還自動登陸了……從頭到尾我除了輸入和移開滑鼠，沒做過其他動作。
可能我孤陋寡聞，但確實是目前為止我見過最牛逼的。

FluidUI
在任務頁面，登陸按鈕彈出浮層讓你填寫登陸框，不需轉向其他頁面；賬戶框裡面有例子提示讓你填郵箱而不是用戶名（但是視覺太重了，我差點以為自己填寫了這個郵箱）；填寫完後，自動識別為已註冊用戶並更感按鈕語句為」Welcome Back-Sign In"

UXPin
UXPin的註冊表單，我剛填完郵箱，將焦點移動到密碼框，它就是識別到我曾經註冊過了，並很nice的給我一個反問提示。但是它提示完之後，我找了半天才發現登陸連接在右上角。

Podio
只需要填寫郵箱就可以使用基本功能，後續的郵箱驗證步驟就在用戶更改設置或者有空登陸郵箱的時候去弄，並不打斷或者阻礙用戶的流暢使用；重點提示你使用工作郵箱來註冊（關乎podio的工作機理）；安全提示；社交註冊等等。另外一個大樣式的表單:「Good
Decision」的視覺刺激；右下角的社交池；唯一怪怪的就是「Your work email address」旁邊那個星號——只有1個框就不需要"必填項目"提示，並且你要解釋這個星號是關於什麼的

Hunie
這個，我只是很喜歡他的風格

吐槽一下Google的
我點擊了登陸，可能是因為半扁平化的按鈕風格，我老花了所以看不到它有任何被點擊的反饋，iOS的網路菊花也沒出現，等了半天都沒登陸進去，開了VP恩也不行，我究竟點擊了沒有？

騰訊除了QQ之外的任何一個騰訊頁面登錄框，理由

90%以上的用戶不需要輸入帳號和密碼

請拍磚~

推薦看看這個 http://www.douban.com/note/173949975/

登陸為何要」框「，明顯是拿」技術模型「去映射」心理模型「，而且在天天談用戶體驗的今天還沒有根本性改變。你可知為何app如此好用，就是因為app默認記住了N多的用戶名與密碼，掃清了用戶與產品的第一道門檻。

這就如同開門要拿著鑰匙找鎖眼，試問誰明白鎖芯是如何工作的？為何要使用如此不人性化的東西。你可以聯想，你xxoo的時候，實際是」憑感覺「找洞洞，而你老婆也知道在」它「裡面的那個東東，是否」匹配「。

所以最好的登陸方式，應該是「設備主動識別人」，
目前來講我覺得比價好的是ibm的指紋識別系統。

稍微拉了下各位的回答. 談論的登錄框都是傳統的一賬戶一密碼.而且內容基本上是ui設計,我來揣度下登錄元素的未來的發展. 嗚哈~

我覺得很快,傳統的登錄方式就會過時了.當然不排除商業利益擬制用戶安全利益這樣的情況發展.

還有很多種有意思的,更方便的登錄方式.而且改變了賬戶密碼這樣的格式.

說起來,現在的賬戶大多數郵箱,幾年前至少不是這樣.會變成這樣是服務商的商業誘導,對用戶的安全,隱私沒有好處.很淺顯易見.

我介紹3種不需要賬戶或者密碼的安全的登錄方式,改變的不僅僅是登錄框.

1.強複雜度零衝突零猜測賬戶名. (登錄就是一個這個)本質就是一個長的,複雜的,別人猜不到的字元串.
比如:Dde2#Ref!^39k4Tdf5!1*(2fRL1Dwf2#f41akE. 就要這個字元串就可以登錄.不需要密碼.優點是不需要密碼,不涉及隱私.減少登錄要素.缺點是怎麼記住這個呢.不人性化.

2.圖片密碼登錄. 其實可以是不需要賬戶的,看windows 8的圖片密碼.

就像手機上的軌跡解鎖一樣.但比它更文藝,更人性.而且安全級別高.如果要更高的安全性,你可以設置更多的點.3.手機上的軌跡解鎖.不說了.簡單,安全性低.沒有識別身份信息的作用.

不用裝密碼插件，能讓我一次登錄上去的都是優秀的登錄框。否則再漂亮再花哨也是白搭。

別讓我看到那個該死的登錄框，最近對這類東西深惡痛絕

補充幾點
1.支持一鍵清除大寫狀態的提示如下圖

2.管你什麼閱讀習慣登陸頁只做登陸頁啥也不要放了彈出浮層也不錯總之登陸頁的焦點只有一個要想焦點只有一個就是除了登陸功能別的都不放

3.郵箱≠用戶名什麼方式登陸就提示什麼有幾種方式就提示幾種不要多也不要少
多次聽到"郵箱就是用戶名"這樣的傻缺想法下面這個金山詞霸登陸頁使用郵箱登陸可前面提示卻是用戶名一段時間沒用後再登陸的時候第一反應八成是輸入用戶名

4.如果使用郵箱登陸的話還是把輸入框做大點吧附送個人最喜歡的登陸設計哈哈

簡約，方便登錄！

簡潔，焦點明確，功能不要多

界面簡潔
提示要友好(不管是錯誤信息還是其他提示信息)，不要跳轉到別的頁面再顯示提示語，然後又跳轉回來之類的
方便用戶，用戶只管輸入用戶名密碼，要像出入門刷卡一樣簡單

最近剛裝了IE10，其對於標準的用戶名密碼框做了如下調整：
1.輸入用戶名後，輸入框末尾出現一個「×」，點擊可以快速刪除已輸入字元；
2.輸入密碼後，輸入框末尾出現一個眼睛狀圖標，點住不放時會將輸入的密碼明文顯示，鬆開滑鼠後恢復「·」顯示。電腦不在身邊，網上找圖示意（IE10的密碼可視重輸密碼更方便）：

1.在需要的時候才輸入驗證碼。
2.有戶註冊引導功能。
3.有忘記密碼引導功能。
4.tab 鍵可以切換輸入框，enter鍵可以提交表單。
5.輸入錯誤提示信息引導。
6.不走非主流線路。

任何登陸模式下都需要填寫驗證碼，是我認為最糟糕的登錄框

我只要求能用tab換行，不用我再去用滑鼠點下一行。

用戶要能明顯感知到那是登錄框（焦點集中）
操作細節貼心（自動關聯、易錯驗證碼過濾等）
傳達出品牌形象（顏色、風格與網站形象一致）