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

當用戶完成注冊之后，可以選擇性地提供額外的信息，而這些信息可能會給給用戶帶來更加定制化的用戶體驗。為了安全起見，絕大多數(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 的登錄/注冊界面就非常典型地勾勒出簡化后的重復布局是具有何等的迷惑性。

郵箱地址和用戶名

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

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

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

展現(xiàn)流程

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

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

動效

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

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

第三方登錄

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

顯示密碼

越來越多的網(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ī)律，讓用戶可以更好地與界面進行操作。反模式的存在，同樣可以引導用戶行為，但是引導的結(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é)最難兩全的問題。

原文地址：http://blogs.adobe.com/dreamweaver/2016/01/onboarding-and-designing-loginregistration-pages.html

譯者：陳子木

原文地址：http://www.uisdc.com/designing-login-registration-pages#