網站設計分析：那些打動人的“注冊登錄”細節

　　Devils in the details

　　"魔鬼存在於細節中"，這句格言在設計中更是如此。相信很多人都知道在 Tumblr 有一個叫做 Littlebigdetails 的網站，專門記錄一些很多人可能不易覺察的界面交互細節。今天我們摘選了部分注冊與登錄表單例子。

　　對一個 Web 網站或移動應用來說，注冊和登錄是用戶接觸該產品的第一步，如果這一步的界面以及交互設計在一些細節上有新意的話，能夠讓用戶感到眼前一亮的話，可以大大提高產品的用戶轉化率。

　　注冊登錄兩不誤

　　1. 上圖為 Tumblr 注冊頁面，點擊 Start 在注冊的同時就登錄上去。下圖中舊版 Wunderlist 亦是如此。

　　2. 而另外一個比較另類的 Amazon 為了達到“讓注冊用戶易登錄，讓新用戶易注冊”的目的，將注冊用戶和新用戶合二為一，如下圖。

　　密碼安全提示

　　3. Geeklist 在注冊頁面輸入密碼的時候右側會提示破解該密碼需要的時間。

　　類似的還有 Tumblr 的注冊頁面以及 Twitter 注冊頁面，只不過將具體時間改為了條狀與顏色提示，紅色表示危險，綠色表示安全。

　　4. Gmail 登錄頁面輸入舊密碼會提示用戶上次更改密碼的時間。

　　5. Facebook 在密碼提示這一點上做得也不錯，不僅可以像 Google 那樣當輸入舊密碼會提示上次更改密碼的時間，還會將用戶名欄直接變成用戶的帳號基本信息，想借此給你一點提示。

　　動態效果/實時反饋

　　6. 在 Kickstart 的注冊頁面中，當用戶郵箱後綴輸入錯誤時(如將 Gmail 敲成 Gmaill 或 Gmaiil)它會給用戶實時糾正提示。

　　8. Quora 的登錄頁面輸入郵箱後會實時加載該郵箱對應的賬戶信息(用戶名及頭像)，提示用戶是否輸入正確。

　　9. Path 網頁版(舊版)上的注冊按鈕點擊後在跳轉過程會呈現一個笑臉，類似效果的還有 Cloudapp 的登錄頁面，下圖所示。

　　10. 樂高旗下的一款游戲 Lego Universe(已關閉)的登錄界面更是有趣，在用戶輸入密碼的時候下方的樂高機器人會從正常狀態(左側所示)變為捂住自己眼睛狀態，太有愛了。

　　除了上面這些外，還有很多常見的優秀細節體驗，如在注冊頁面填寫郵箱後自動獲取郵箱後綴前部分(一般為用戶昵稱或常用 ID)並自動填入下方用戶名欄，這裡就不一一列舉了。當然這裡還需要說明的就是，上面這些 littlebigdetails 只是讓注冊登錄表單體驗更加良好的加分項，而非全部。