登錄註冊模塊（跨平台）
登錄註冊模塊（跨平台）
來自專欄四葉草
設計策略
軟體始終建立在硬體基礎之上，是硬體與用戶的介面，由硬體出發做跨平台的設計方法，是一個合理思路。
跨平台的意義
設立統一的設計體系，逐漸完善產品一致的設計語言，減少開發成本和用戶轉移平台使用和認知成本。並且以此為根基，逐漸拓展公司其他產品，達到多個產品一套語言的目標。參考學習 Google Material Design，無論桌面、Web、移動端一致性很高。
包含內容
登錄、註冊、忘記密碼/找回密碼、記住密碼
通用規則---快捷操作---桌面端---Web 端---移動端---總結
通用規則
判斷順序：賬戶 > 密碼 > 驗證碼，如果賬戶不存在則不需要判斷下一個，以此類推
判斷時間：游標線在下一個input里或者統一定為點擊 btn 後
提示：各項無論正確錯誤都應該給予提示，正確的信息?icon提示，錯誤信息??字提示，同時 input 框標紅。焦點在該 input 時，錯誤提示消失
賬戶：判斷格式正確---賬戶是否存在---提示輸?正確/賬戶不存在，提示註冊
- 手機號：規則限制11位數字，如有需求，可以 +86，地區代號
- 郵箱：規則郵箱格式***@***.***，為提高效率，可以在輸入時，自動下拉彈出常用的郵箱後綴，如 @qq.com,@http://163.com等
密碼
- 字元長度：限制字元的長度，如 6-12 位等，密碼太長用戶也記不住
- 臨界狀態 錯誤次數限制：錯誤次數過多則提示找回密碼，或者限制時間登錄（可選）
- 保存期限：用戶在某一時間段內密碼保存，超出則自動退出，需重新輸入（可選）
驗證碼
- 時間間隔：默認 60-90s，點擊發送後開始倒計時，期間 btn 不可點擊
- 重複發送：新驗證碼發送後，舊的不再生效
桌面端
密碼
- 記住密碼：公共電腦勿操作，默認不勾選，勾選的話則激活密碼保存期限
- ?性化提示：密碼怕輸錯怎麼辦（密碼框右側有眼睛，?標單擊不松顯示，鬆開就隱藏。參考 Win10 登錄）
- 找回密碼一般是郵箱和手機號找回，優先推薦郵箱找回，其次是手機號，避免手機不在工作狀態時，無法找回密碼
快捷操作
- Tab 下一個，Shift+Tab 上一個
- 按住 Shift 不松，則是大寫
- Enter 回車確認
- Capslock ??寫開啟關閉，input 附近有對應開啟關閉的提示（可選）
二維碼、第三方等其他方式
- 手動或定時刷新二維碼，提示二維碼過期，系統自動刷新
Web端
重桌面的，一般採用響應式布局，適應多種屏幕大小，其他和桌面端一樣，差別不大。
重移動的，大多數需要移動設備登錄 Web 端的都會打開產品的介紹頁，默認沒有登錄註冊，只能跳轉到應用商店下載使用。
移動端
賬號密碼
- 輸入：調用各自的鍵盤，鍵盤彈出時，盡量不遮擋輸入區域和登錄 btn
- 驗證碼可以提示自動輸入，Android 可以，iOS12 已經跟上節奏了，不再是查看驗證碼，然後手動輸入。
- 啟用指紋等登錄需要提示和授權
- Pad 端和手機一致，但是區別在於 Pad 端沒有 SIM 卡，所以找回密碼等盡量郵箱為主，保留手機接收驗證碼的入口。
更加現代的登錄流程
- 先輸?賬戶，判斷賬戶存在，新?戶則顯示註冊內容，??戶顯示輸?密碼，進?程序
- 流程：兩個??，兩次輸?，賬號通常?機號或郵箱---輸?對應內容---登錄成功
- 優點：簡潔現代，根據賬戶判斷，返回點擊次數增加
- 缺點：用戶有一定的認知成本，需要引導和學習
總結
桌面端、Web 端優勢在於鍵盤和滑鼠，雙手在鍵盤滑鼠之間來回移動的成本很高，所以在登錄註冊時應盡量避免這類情況，可以適當提示使用快捷鍵操作。
其次是減少調用移動端的次數，最糟糕的案例是微信登錄，如果不帶手機或者手機沒電、丟了等情況，桌面版無法登錄。（可能有潛在的強推移動端的想法，）對於桌面端、Web 端而言，移動端只是輔助手段，掃碼也是減少輸入，鍵盤輸入輸出還是主要方式。或許在將來可以實現，視網膜掃描、鍵盤上指紋登錄等，但是第三方能不能調用，還是系統廠商說了算。
登錄註冊如果要做細緻了，會稍微複雜一些。因為一些東西可能根本用不到，過於嚴謹的規則和邏輯會帶來較高的開發成本，雖說設計是做用戶體驗的，每個細節都很重要，但是對於一些量級比較小的產品來說，做的再多可能收益不大。有些東西可以不做，但是一定要知道這個情況，以便再將來某個時期做更好的方案。
推薦閱讀：
