登錄框歷久彌新，用戶每日必觸，設計師卻常視為墨守成規的控件——兩個輸入框加一按鈕。若問「登錄框還能如何改進」，多半換來沉默。正如《一代宗師》拳理：「寧可一思進，莫在一思停」，思進方有所為，互聯網產品更是如此。

解決以下任一問題的登錄框，皆為優秀（文末附推薦樣式）：

1. 輸入效率：降低用戶輸入成本

• 統一賬戶（OpenID）：接入新浪、騰訊、Facebook、Twitter 等，如知乎支援微博登錄，免除註冊輸入。
• 記住賬號密碼：預設勾選，避免二次輸入；惟清除 Cookie 或高安全服務受限。
• 輸入輔助建議：如新浪微博以郵箱為登錄名，輸入 @ 後彈出常用郵箱後綴：

細節：焦點回切時全選還是定位末尾？僅驗證碼錯誤時密碼保留還是清空？

方案：採用 OpenID、允許記住賬號密碼（預設勾選）、提供輸入輔助、記住歷史記錄（不含密碼）並在適當時機顯示。需區分 Web 端與移動端。

2. 輸入模式：消除中英/大小寫盲區

用戶能否明確當前輸入法模式？密碼輸入時 Caps Lock 狀態是否可見？若期望輸入英文卻處中文模式，需刪除錯誤字符再切換，增加操作步驟。非可見密碼下 Caps Lock 開關直接決定登錄成敗：

方案：密碼區顯示 Caps Lock 狀態（用戶名通常不區分大小寫可省略）；考慮優雅的明文顯示密碼選項。

3. 驗證碼：從阻礙轉化為價值

常規驗證碼讓用戶痛苦，對真實用戶本無必要。僅在觸發條件（如連續錯誤）時顯示。難辨驗證碼（I/l、O/0）屢屢阻擋用戶。若無法繞過，可賦予實際意義：如 reCAPTCHA 利用驗證碼協助典籍數位化：

方案：遊戲化驗證、嵌入易識別廣告（如 SolveMedia），國內已有類似服務，豆瓣可嘗試在驗證碼植入 FM Pro 廣告。

4. 反饋機制：讓等待與錯誤可感可知

• 輸入框聚焦狀態明確位置
• 輸入過程即時輔助
• 提交驗證 Loading 效果，允許取消
• 錯誤定位：哪個環節出錯？密碼保留或清空？

方案：細化各階段反饋，賦予意義。OS X / iCloud 登錄失敗以抖動提示，動效呼應人類搖頭否定語義，體驗極佳。

5. 多賬戶切換：明顯入口，以選代輸

桌面端 QQ、Chrome、Win 等支援多賬戶。反面教材：Mac QQ 啟動默認單賬戶，無明顯切換入口，用戶需試錯發現點擊頭像才能切換；且默認焦點停留賬號欄並全選，已登錄用戶焦點應在密碼欄：

方案：給出明顯切換提示，以選擇代替輸入，注意切換後光標默認位置與記住密碼邏輯配合。

6. 忘記密碼：流程人性化，拒絕安全問答

方案：少用安全問答（個資近乎透明）；不強制重設新密碼；郵件自助重置；高安全服務採多因子（手機+郵件+U盾+人工）。

7. 無障礙：照顧 20% 潛在用戶

研究顯示約 20% 人口有殘障。中國盲人 600-700 萬，佔全球 18%，低視力 1200 萬。網銀驗證碼曾被指歧視盲人引發聯名抗議。參考 WebAIM 無障礙指南。

方案：堅持可用性設計：語音輸入/識別、臉部/手勢識別、語音驗證碼等。

8. 安全性：分級防護，移動端為鑰

數位憑證、密保卡、U盾對應不同安全等級。記住密碼功能的 Cookie 設計需謹慎。底層技術非設計師主導，個人傾向利用移動設備解決安全問題。

筆者偏好的創新登錄方式

二維碼掃碼登錄

幾乎規避上述大多數問題，手機驗證免輸入、無密碼遺忘煩惱，安全性有保障。挑戰：成本、需掃碼功能、多端聯動、特定操作流程（打開 APP → 進入功能），可帶動移動端日活：

特定交互方式（如 Bump）

手機重力感應偵測「碰撞」，上傳地理位置與時間，服務端配對建立通訊。可用於登錄但安全性較弱，採用需改良。