如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

如何為網(wǎng)站設(shè)計用戶登錄流程是一個老生常談的話題。隨著時代的發(fā)展，新用戶注冊、登錄到真正加入一個網(wǎng)站的過程一直在變化，從簡單的信息填寫發(fā)展到全面的注冊方式，再從系統(tǒng)的注冊回歸簡約直觀的登錄體驗，新用戶的登錄流程經(jīng)歷了一個迂回的變遷過程?，F(xiàn)如今，絕大多數(shù)的網(wǎng)站已經(jīng)放棄了復(fù)雜、繁復(fù)的注冊流程，將用戶可能會遭遇障礙、引起用戶反感和煩躁的部分去除，盡可能簡單的讓用戶完成注冊和登錄流程。

當用戶完成注冊之后，可以選擇性地提供額外的信息，而這些信息可能會給給用戶帶來更加定制化的用戶體驗。為了安全起見，絕大多數(shù)的網(wǎng)站還是提供了郵箱驗證甚至電話驗證的環(huán)節(jié)，甚至提供備用安全郵箱的驗證機制。

總而言之，在今天我們來審視網(wǎng)站的新用戶注冊登錄流程，這是一套系統(tǒng)、完善且具備完整約定俗成規(guī)則的設(shè)計環(huán)節(jié)。

登錄與注冊

隨著注冊流程的優(yōu)化和簡化，登錄界面和注冊界面現(xiàn)在很容易被混淆。造成這種混淆的原因不止是簡化。首先許多網(wǎng)站會選擇將登錄和注冊界面設(shè)計地非常相似，甚至將其直接容納到同一個界面當中去。許多用戶不經(jīng)意間在一個網(wǎng)站注冊過好幾個帳號的事情，并不鮮見。

問題不僅僅存在于流程上。在中文中，“登錄”和“注冊”兩個詞在視覺上有很明顯的差異，但是英文中，“Sign Up”和“Sign In”也是很容易引起混淆的。

所以，為了讓用戶不再有不必要的混淆，最好是設(shè)計不同的界面，并進行差異化的視覺和內(nèi)容的設(shè)計，確保用戶不會誤判。在這里說說反例，AxureShare 的登錄/注冊界面就非常典型地勾勒出簡化后的重復(fù)布局是具有何等的迷惑性。

郵箱地址和用戶名

在注冊環(huán)節(jié)，還有一個特別值得注意的問題就是用戶名和注冊郵箱的問題。當用戶注冊時候，最好不要讓用戶去創(chuàng)建獨特的用戶名，并且以此用作登錄服務(wù)的唯一憑證。絕大多數(shù)的用戶會有至少2個郵箱——一個用作工作，一個用作私人用（在中國許多人可能只有一個郵箱，QQ郵箱……）。所以，最好的方式是讓用戶使用郵箱登錄，注冊用戶可以在登錄之后修改信息，增加輔助郵箱，可以添加用戶名。

另外，在移動端發(fā)展迅猛的今天，讓用戶使用手機號登錄也是非常不錯的方案。首先手機號具有獨特性，作為登錄帳號擁有便捷性和易于記憶的特征，作為常用的帳號存在，更易于用戶使用。

值得一提的是，手機號還符合目前流行的兩步驗證安全機制，系統(tǒng)可以更加便捷地為用戶發(fā)送驗證碼。

展現(xiàn)流程

進度條是用戶界面中最重要的存在之一，它為用戶呈現(xiàn)進度，設(shè)定目標，并將信息反饋給用戶。進度條讓用戶可以清晰地了解他已經(jīng)完成多少，還有多少有待完成。也正是有了進度條，復(fù)雜的加入環(huán)節(jié)才得以分割、簡化，并且顯得更加清晰。

LinkedIn 在這方面做的相當突出，它將用戶信息的完成度完全量化，激勵用戶不斷添加內(nèi)容完善個人信息。

動效

動效是目前最常用也最實用的元素之一。使用動效來告訴用戶如何填寫表單，將動效和行為召喚按鈕等設(shè)計結(jié)合到一起，可以讓用戶明白下一步的操作流程。

在 Readme.io 這個網(wǎng)站中，貓頭鷹會隨著操作而變化，當用戶輸入密碼的時候，會非常可愛地蓋住自己的眼睛。動效和動畫的加入讓頁面無形中加入了更多的互動，顯得更加引人入勝了。同樣的，Shopify 在注冊界面中，會用彈出的標簽動效來幫助用戶了解下一個操作步驟。

第三方登錄

雖然并不是每個用戶都會使用第三方的帳號（微博、微信、Facebook、Twitter、LinkedIn等）來注冊/登錄網(wǎng)站服務(wù)，但是預(yù)留第三方帳號登錄的選項是很有必要——這樣的登錄方式更加便捷。

顯示密碼

越來越多的網(wǎng)站和APP的注冊流程中，密碼不再是輸入兩次，這樣的情景下，注冊時密碼輸入錯誤幾乎是致命的，所以為用戶提供密碼顯示可以有效的避免這個問題。要知道，目前許多注冊都是在移動端上完成的，拇指在屏幕上輸入密碼比在鍵盤上輸入的失誤率更高。

超過82%的人有忘記網(wǎng)站登錄密碼的經(jīng)歷，隨著網(wǎng)站、APP和各類服務(wù)的增長，這個數(shù)字只會增加不會減少。

提醒大寫鎖定

當用戶輸入密碼的時候，提醒他們鍵盤是否有大寫鎖定，也是值得注意的點。為用戶提供文本提醒或者視覺提醒都有助于避免多次輸入錯誤，降低用戶瀏覽受挫機率。大多數(shù)的瀏覽器已經(jīng)集成了大寫鎖定提醒，所以這個問題只要稍加注意就可以看到。不過，用戶在屬于密碼的時候注意力大都集中在輸入的內(nèi)容上，所以大寫鎖定提醒必須優(yōu)雅又醒目。

避免反模式設(shè)計

設(shè)計模式的存在，順應(yīng)用戶的習慣和交互的規(guī)律，讓用戶可以更好地與界面進行操作。反模式的存在，同樣可以引導(dǎo)用戶行為，但是引導(dǎo)的結(jié)果往往不可控或者無法達成目標。常見的反模式設(shè)計并不少：

·用戶輸入信息失誤的時候報錯，然后刪除所有輸入的而內(nèi)容
·當用戶已經(jīng)擁有帳號的時候，依然允許用戶使用該用戶進行注冊
·為用戶添加了看似可點擊但是實則無法點擊的標簽
·限制用戶輸入字段長度但是完全不給予提醒

去除驗證碼

移除驗證碼可以有效的提高轉(zhuǎn)化率。雖然驗證碼可以很好的避免注冊機，但是驗證碼對于用戶而言的挫折更多，12306 堪稱反人類的驗證碼就是個很好的反例。據(jù)統(tǒng)計，有38%的用戶會在第一次輸入驗證碼的時候輸錯，15%的用戶會一直輸錯，而這類用戶通常在第五次輸錯之后徹底放棄注冊。

REDDIT 就徹底移除了注冊環(huán)節(jié)的驗證碼，去除之后網(wǎng)站的新用戶注冊率同比增長8%。當然，反注冊機和機器人還是很有必要的，如果情況比較嚴重可以選擇比較人性化的驗證機制來規(guī)避。

結(jié)語

想要提升新用戶注冊的轉(zhuǎn)化率，絕大多數(shù)要應(yīng)對的用戶體驗的問題，了解用戶的痛點，除了要考慮傳統(tǒng)的桌面端用戶的問題，還要應(yīng)對移動端用戶的新需求。在好體驗和安全性之間把握好平衡點，這也是新用戶注冊環(huán)節(jié)最難兩全的問題。

藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)