不論客戶端是PC端還是移動(dòng)端，不管系統(tǒng)業(yè)務(wù)涉及政務(wù)、電商還是教育，登錄注冊(cè)都是系統(tǒng)不可少的組件。當(dāng)然，對(duì)外宣傳門戶、信息品牌網(wǎng)站除外（信息型產(chǎn)品，較少涉及個(gè)人業(yè)務(wù)需要登錄驗(yàn)證）。本文筆者將為大家講述：To B產(chǎn)品的登陸注冊(cè)組件的內(nèi)容形式、元素設(shè)計(jì)。

組件意義

登錄注冊(cè)組件，幾乎是每個(gè)系統(tǒng)的必備組件。而這組件有什么意義？將從用戶、平臺(tái)兩個(gè)角度來分析。

用戶：

• 授權(quán)給予信任，在用戶登錄到平臺(tái)的動(dòng)作時(shí)，相當(dāng)于將自己身份信息授權(quán)于平臺(tái)使用，是對(duì)平臺(tái)一種信任的體現(xiàn)。
• 產(chǎn)出工作內(nèi)容，部分業(yè)務(wù)系統(tǒng)（如政務(wù)審批系統(tǒng)、電商管理平臺(tái)等）是將部分工作線上化，產(chǎn)出個(gè)人相關(guān)工作內(nèi)容與結(jié)果（如審批意見、物品管理清單等），又或用戶產(chǎn)品UGC內(nèi)容。
• 建立個(gè)人品牌，登錄即是對(duì)個(gè)人身份的映射，登錄后用戶的角色、身份、信息、創(chuàng)造的內(nèi)容即可建立個(gè)人品牌。
• ……

平臺(tái)：

• 驗(yàn)證用戶身份，平臺(tái)業(yè)務(wù)往往涉及用戶隱私、涉密等不便對(duì)外公開的內(nèi)容，此時(shí)便需通過登錄對(duì)訪問用戶進(jìn)行身份驗(yàn)證。
• 獲取用戶信息，在用戶授權(quán)后，平臺(tái)可獲取用戶身份信息，運(yùn)用在業(yè)務(wù)系統(tǒng)上。
• 個(gè)性化推薦，在用戶授權(quán)登錄后，可對(duì)用戶進(jìn)行標(biāo)簽化，針對(duì)用戶喜好、身份進(jìn)行個(gè)性化推薦。
• …….

組件內(nèi)容

登錄注冊(cè)組件的內(nèi)容形式有好幾種，這里只列舉 toB 常見幾種方式：

1. 賬號(hào)+密碼

“賬號(hào)+密碼”方式是最常見的登錄方式，其中，賬號(hào)也包括好幾種形式：

• 用戶名：每個(gè)用戶都有自身唯一標(biāo)識(shí)的用戶編碼與用戶名（一般由英文或英文+數(shù)字組成），這也是后臺(tái)系統(tǒng)常見的方式。
• 手機(jī)號(hào)碼：考慮方便消息通知、召回用戶等運(yùn)營手段，很多系統(tǒng)使用手機(jī)號(hào)碼來進(jìn)行注冊(cè)新用戶。
• 郵箱號(hào)：如上，考慮方便消息通知、召回用戶等運(yùn)營手段，部分系統(tǒng)使用郵箱來進(jìn)行注冊(cè)新用戶；又或企業(yè)內(nèi)部可采用企業(yè)郵箱方式做通訊工作。
• 業(yè)務(wù)身份碼：部分系統(tǒng)的用戶擁有著自身唯一的業(yè)務(wù)碼，如企業(yè)用戶的社會(huì)統(tǒng)一信用代碼、公民的身份證號(hào)碼、執(zhí)法人員的執(zhí)法證件號(hào)碼。

2. CA?認(rèn)證

部分系統(tǒng)對(duì)信息安全性、涉密性要求較高（如政務(wù)領(lǐng)域），則可采取 CA 電子認(rèn)證服務(wù)，通過驗(yàn)證數(shù)字證書信息來實(shí)現(xiàn)驗(yàn)證用戶身份，從而進(jìn)行登錄。

3. 人臉識(shí)別、指紋認(rèn)真

部分系統(tǒng)有用戶人臉信息庫、指紋信息庫，采取人臉識(shí)別、指紋認(rèn)證等智能登錄方式。

組件設(shè)計(jì)

登錄注冊(cè)組件的設(shè)計(jì)，可因業(yè)務(wù)不同、需求不同，而選取不同設(shè)計(jì)方式、內(nèi)容。

這里列舉幾種常見的相關(guān)設(shè)計(jì)：（注：并非每個(gè)登錄注冊(cè)組件都要包含所有設(shè)計(jì)，看場(chǎng)景看需求）

1. 驗(yàn)證碼

驗(yàn)證碼是驗(yàn)證當(dāng)前操作是人為還是機(jī)器行為的方式。登錄注冊(cè)組件上，防止對(duì)密碼進(jìn)行暴力破解。

表現(xiàn)形式：有幾種，“數(shù)字、字母、中文的組合”、圖片辨別、滑塊、手機(jī)短信、手機(jī)語音等形式。

2. 忘記密碼

忘記密碼是為丟失或忘記密碼的用戶提供找回密碼的方式。一般流程是 “驗(yàn)證身份 – 設(shè)置新密碼” 。

驗(yàn)證身份的方式有幾種，常見有：手機(jī)驗(yàn)證碼、郵箱驗(yàn)證、安全問題驗(yàn)證、人工客服找回或重置。

不同場(chǎng)景需求，選擇的驗(yàn)證身份方式會(huì)不同。需注意，研究表明近80%的用戶有忘記密碼的經(jīng)理，故密碼重置是個(gè)常見需求，需多關(guān)注用戶體驗(yàn)。

3. 密碼明暗文

密碼明暗文，是指登錄注冊(cè)組件中隱藏 / 顯示密碼。

為滿足高安全性，系統(tǒng)會(huì)在用戶注冊(cè)時(shí)，要求用戶設(shè)置的密碼強(qiáng)度較高，密碼組成要求的復(fù)雜度也高。

該場(chǎng)景下，密碼明文可方便用戶在設(shè)置密碼時(shí)輸入不符時(shí)，一眼定位問題。而在用戶登錄時(shí)，不論是手動(dòng)輸入密碼，或自動(dòng)記住密碼，密碼暗文都可從保密性、隱私性給用戶良好的體驗(yàn)。

4. 結(jié)果反饋

登錄注冊(cè)組件的流程不復(fù)雜，但清晰的操作結(jié)果反饋，可以讓用戶體驗(yàn)更好。

5. 賬號(hào)綁定設(shè)備

在安全性要求高的系統(tǒng)上，移動(dòng)端的登錄注冊(cè)設(shè)計(jì)組件上，可設(shè)計(jì)賬號(hào)綁定設(shè)備的方式，限制用戶賬號(hào)在多臺(tái)設(shè)備上登錄。實(shí)現(xiàn)方式可通過用戶在第一次登錄時(shí)綁定設(shè)備號(hào)，往后登錄都校驗(yàn)設(shè)備號(hào)是否符合。變更設(shè)備可申請(qǐng)管理平臺(tái)取消綁定。

6. 記住密碼

記住密碼是在用戶登錄后將用戶賬號(hào)密碼信息存儲(chǔ)，方便下次登錄時(shí)免輸入。部分系統(tǒng)設(shè)計(jì)是會(huì)將記住密碼與自動(dòng)登錄并在一起，而下次登錄時(shí)直接實(shí)現(xiàn)自動(dòng)登錄。但該設(shè)計(jì)在安全性要求高的系統(tǒng)上，需要再考慮。

7. 清空賬號(hào)信息

清空賬號(hào)信息是用戶抹去該設(shè)備記錄的賬號(hào)密碼信息。該設(shè)計(jì)需在有記住密碼設(shè)計(jì)的前提下。但在 toB 的產(chǎn)品系統(tǒng)上，考慮安全性設(shè)計(jì)上，也考慮業(yè)務(wù)用戶只持有一個(gè)賬號(hào)的設(shè)計(jì)上，該設(shè)計(jì)使用場(chǎng)景很少。

組件體驗(yàn)細(xì)節(jié)

良好的細(xì)節(jié)，更好的體驗(yàn)。在此記錄一些組件體驗(yàn)細(xì)節(jié)注意點(diǎn)：

1. 要求提示清晰

登錄注冊(cè)組件中，尤其在注冊(cè)環(huán)節(jié)，用戶需按規(guī)定填寫個(gè)人信息。填寫信息越多，用戶耐心越低，信息填寫規(guī)則、格式要求更要清晰到位。

盡量避免用戶不知情況下，屢次出錯(cuò)而被要求多次重錄，挑戰(zhàn)用戶耐心。如：標(biāo)明信息必填項(xiàng)、提示密碼規(guī)則、顯示密碼強(qiáng)度、注冊(cè)流程提示（注冊(cè)環(huán)節(jié)復(fù)雜的設(shè)計(jì)）

而若有條件限制，也在相應(yīng)位置需要標(biāo)明清楚條件。如：錯(cuò)誤密碼5次鎖住設(shè)備、限制一天只可輸錯(cuò)5次密碼。

2. 要求操作結(jié)果及時(shí)反饋

部分輸入框可考慮實(shí)時(shí)數(shù)據(jù)校驗(yàn)反饋，移動(dòng)端可通過定制鍵盤類型來規(guī)避部分問題出現(xiàn)。如：賬號(hào)形式是手機(jī)號(hào)碼，PC端可實(shí)時(shí)校驗(yàn)是否符合手機(jī)號(hào)碼格式，移動(dòng)端可定制該輸入框的鍵盤為數(shù)字鍵盤。

操作結(jié)果反饋清晰，成功失敗的視覺效果區(qū)別明顯，文字描述要簡(jiǎn)潔易懂。信息項(xiàng)多時(shí)，問題點(diǎn)鮮明標(biāo)出，光標(biāo)定位于問題處，方便迅速定位。

根據(jù)信息項(xiàng)類型，提供便捷操作。如：賬號(hào)為郵箱格式，可提供自動(dòng)補(bǔ)全郵箱后綴。

3. 搭配清空輸入框按鈕

搭配清空按鈕，在輸入框有內(nèi)容時(shí)顯示，方便一鍵清空輸入框。

4. 信息顯示格式

信息項(xiàng)可根據(jù)需要找到適合的顯示格式。如：賬號(hào)為手機(jī)號(hào)碼，則輸入框可采用用戶熟悉的 334 格式。密碼則根據(jù)場(chǎng)景定初始化為明暗文，附上切換按鈕。

5. 品牌宣傳

登錄注冊(cè)組件，業(yè)務(wù)清晰，內(nèi)容元素簡(jiǎn)單，可在背景圖上做品牌宣傳。

總結(jié)

登錄注冊(cè)組件，是個(gè)基礎(chǔ)組件。在 toB、toC的不同產(chǎn)品上，內(nèi)容形式、元素設(shè)計(jì)上會(huì)有所不同。好比 toC 產(chǎn)品上會(huì)有第三方賬號(hào)注冊(cè)登錄的方式，而 toB 則有 ca 數(shù)字證書認(rèn)證方式。本文是個(gè)人在 toB 上的總結(jié)，故暫未考慮 toC 方面。

toB 部分產(chǎn)品中，用戶賬號(hào)來源于用戶管理，由管理員在管理平臺(tái)上初始化賬號(hào)并分配角色、權(quán)限。部分業(yè)務(wù)復(fù)雜龐大的系統(tǒng)，還會(huì)涉及統(tǒng)一用戶、統(tǒng)一認(rèn)證等。等晚些有時(shí)間一并梳理，故本文雖說登錄注冊(cè)組件，但涉及登錄的內(nèi)容篇幅較大。

個(gè)人經(jīng)驗(yàn)輸出，若有建議或問題，歡迎提出，謝謝。

本文由 @Cherie 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議