使用者註冊/登入模組實踐

前言

最近負責的網站專案正式進入開發階段，首先面臨的當然就是使用者登入模組的設計與實現了。說起來自己雖然不是第一次進行類似模組的開發，但這次作為專案的負責人，突然就感覺有必要對以後交付的產品進行一次深度打磨，畢竟產品就是我們最好的名片嘛，哈哈，以後吃飯喝粥就靠它了。那麼問題來了，一個設計美觀大方，功能完善，使用者體驗舒適的登入模組究竟是如何實現的呢？我用兩個小時蒐集了一些資訊，這一搜，卻還真搜出了個三四五六，且聽我細細道來。

需求分析

一個操作繁瑣，設計糟糕的使用者註冊模組，往往是我們在將訪客轉化為註冊使用者過程中最不希望見到的東西首先，我們們來理一理，一個完整的使用者註冊/登入模組究竟需要哪些功能。

使用者資訊表格 (User Sign-Up Form)

使用者資訊表格是網站收集使用者資訊的最重要的入口，從使用者訪問網站開始直至整個使用者行為的結束，80%以上的資訊都來自使用者初次註冊時所填的表單，因此在設計該表單時，我們必須從需求上釐清資訊的必要性，也即是，什麼資訊在後續業務中至關重要，必須要求使用者填寫（有些應用會考慮通過後續激勵來誘導使用者新增資訊，但顯然在註冊時完成這一步驟更加簡單），以及什麼資訊可以暫時忽略，等等。常見的使用者資訊包括:

使用者名稱

郵箱

手機號碼

密碼

密碼確認

手機驗證碼確認

等， 對於英文網站，First Name 和 Last Name 也是常見的必填選項。下面是一箇中規中矩的註冊頁面，考慮到業務需求，該頁面特別地將資訊進行了分類，並通過圖示區分開來。它的設計上則是採用簡單的淺背景色+樸素的灰/藍色，很多JQuery 模板外掛都以這種形式出現。

再來看看谷歌的註冊頁，純白背景加無邊框的Material Design設計顯然清爽了許多，我們可以看到頁面兩邊進行了刻意的留白，通過左邊的 Icon 和 Banner 填補視覺上的空缺，整個頁面看起來簡潔大方。但不得不吐槽的一點是，谷歌娘要求填寫的資訊實在太多了，而且驗證機制也不夠人性化，果然大公司就是不一樣 :P。

講完註冊我們們再講講登入，登入表格嘛，大家都知道，一個使用者名稱/郵箱/手機，一個密碼，一個驗證碼，完事兒，但真有那麼簡單嘛？細心的朋友們可能會發現，由於現在大多數流行的APP都提供本地儲存，使用者開啟APP之後很少需要重複登入。那麼顯然，當一個使用者被引導到註冊頁的時候，很可能是他第一次使用這個應用，因而作為產品的設計者，我們則應把使用者對頁面佈局的不熟悉而出現誤填操作的情況考慮進去，對登入頁和註冊頁進行明顯的區分。以下是一個典型的反例：

同樣的佈局，配色，乃至圖示，不仔細點看還真容易點錯，所謂不良使用者體驗就是這麼出來的。

接下來我們們再講講登入資訊的反饋，當使用者登入失敗時，我們有必要返回相應的原因，從而推動使用者進行進一步操作。 簡單來說就是，當使用者誤填使用者名稱時，要及時通知“該使用者名稱不存在”，或者“該使用者已被鎖定”，而當密碼輸入錯誤時，則應提示“使用者名稱與密碼不匹配”等等。更進一步地，當提示框彈出時，我們還可以在其中加入對應操作的連結，引導使用者點選跳轉進行相應處理。

郵件啟用 （Email Activation）

在現代應用中，郵件啟用與繫結已經成為非常普遍的場景了，甚至不少應用直接使用郵箱作為唯一使用者名稱，那麼在這方面我們可以做些什麼樣的改進呢？

首先，避免使用者的重複輸入。

很多應用喜歡在郵件欄下方新增一個確認郵件的輸入框，這種做法本意是好的，希望藉此避免使用者誤填資訊，但實際上[有研究 ]發現，使用者在遇到此類文字框時，更加傾向於使用密碼管理器或是複製黏貼解決問題，因此在現代應用設計中，我們應儘量避免無意義的內容，只保留一個文字框即可。

從使用者體驗的角度出發，文字框周圍應提供足夠的提示資訊。

啟用郵件是否已經傳送？傳送地址是什麼？使用者最慢需要多長時間才能收到郵件？這些都是我們可以考慮加入提示的內容，下圖為一個簡單的郵件提示效果。

手機簡訊驗證 （SNS）

簡訊驗證與郵件驗證的設計十分類似，一個比較好的優化是，允許使用者指定簡訊的傳送目的國家和地區，從而實現相應的號碼錶單驗證。微信這點上做的很好，丟個例子，在此不加贅述。

人機測試（CAPTCHAS）

人機測試的種類可謂五花八門了，但核心的需求卻是相同的，那就是防止使用者惡意註冊。

一個優秀的人機測試設計，是能在不影響使用者體驗的基礎上，給使用者帶來一定樂趣。這裡羅列幾種常見的人機測試手段：

1.文字識別類

給出一段機器處理後的文字，以聲音或圖片的形式傳遞到客戶端，只有當使用者輸入成功匹配資訊內容時才算通過。這種型別人機測試有一點需要注意，在設計驗證時儘量給使用者提供多種形式的接收手段，圖片，聲音，簡訊等等，從而確保驗證同樣適用於一些患有認知性疾病或者視力/肢體障礙的使用者。

2.問答類

這一類人機測試主要以問答為主，常見的有數學題，成語題，填字遊戲等等。

3.互動類

人機測試中比較有趣的自然要屬互動類了，設計師往往會在網頁上設計一兩個微遊戲，使用者通過滑鼠/螢幕操作達成目標，從而通過驗證。常見的互動類人機驗證有拖滑塊，連連看等等。

在實踐中，大家可以根據網頁風格和自身需求進行相應選擇。

第三方登入

第三方登入是在常規登入基礎上的一種延伸手段，同時也方便網站獲取使用者的個人資訊，因此往往被許多網站採用。常見的第三方登入介面有微信，QQ，網易郵箱，新浪微博，facebook, gmail等等，需要注意的是第三方登入最好能同時出現在登入頁和註冊頁，方便使用者隨時進行選擇。