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

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

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

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

登錄與注冊(cè)

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

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

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

郵箱地址和用戶名

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

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

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

展現(xiàn)流程

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

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

動(dòng)效

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

在 Readme.io 這個(gè)網(wǎng)站中，貓頭鷹會(huì)隨著操作而變化，當(dāng)用戶輸入密碼的時(shí)候，會(huì)非?？蓯?ài)地蓋住自己的眼睛。動(dòng)效和動(dòng)畫(huà)的加入讓頁(yè)面無(wú)形中加入了更多的互動(dòng)，顯得更加引人入勝了。同樣的，Shopify 在注冊(cè)界面中，會(huì)用彈出的標(biāo)簽動(dòng)效來(lái)幫助用戶了解下一個(gè)操作步驟。

第三方登錄

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

顯示密碼

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

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

提醒大寫(xiě)鎖定

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

避免反模式設(shè)計(jì)

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

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

去除驗(yàn)證碼

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

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

結(jié)語(yǔ)

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

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