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

組件意義

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

用戶：

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

平臺：

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

組件內(nèi)容

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

1. 賬號+密碼

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

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

2. CA?認(rèn)證

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

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

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

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

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

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

1. 驗(yàn)證碼

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

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

2. 忘記密碼

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

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

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

3. 密碼明暗文

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

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

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

4. 結(jié)果反饋

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

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

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

6. 記住密碼

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

7. 清空賬號信息

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

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

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

1. 要求提示清晰

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

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

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

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

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

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

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

3. 搭配清空輸入框按鈕

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

4. 信息顯示格式

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

5. 品牌宣傳

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

總結(jié)

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

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

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

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

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