編輯導(dǎo)語：如今，很多企業(yè)在B端設(shè)計(jì)中投入較多，B端的產(chǎn)品以及需求在近幾年也變大；對于B端產(chǎn)品的設(shè)計(jì)，更注重功能以及用戶的使用感，所以在設(shè)計(jì)方面也會更注重功能的設(shè)計(jì)；本文作者分享了關(guān)于B端產(chǎn)品日記的注冊登錄功能設(shè)計(jì)，我們一起來看一下。

To B 平臺往往針對企業(yè)或者公司內(nèi)部員工，由于用戶量不大，對注冊登錄功能也就不太重視。

但是隨著平臺用戶量增長以及對安全性易用性要求的提高，注冊與登錄也是B端功能設(shè)計(jì)中重要的一環(huán)。

01 注冊

常見的注冊方式分兩種：郵箱注冊與手機(jī)號碼注冊，內(nèi)測或眾測階段還會在注冊時(shí)候提示輸入激活碼（邀請碼）.

存在同時(shí)利用郵箱與手機(jī)號進(jìn)行注冊的情況。對于用戶名，目前除去一些舊平臺之外，極少的平臺會在用戶注冊時(shí)候，提示用戶輸入用戶名。

一些擁有手機(jī)端以及自己移動平臺的pc端，會使用二維碼掃碼登錄的方式進(jìn)行登錄，而注冊操作通常在手機(jī)端已經(jīng)完成，或者相反；對于第三方登錄與注冊，在邏輯上我們理解為注冊后綁定的第三方賬號，達(dá)到快速登錄的目的，注冊本質(zhì)上沒有發(fā)生變化。

1. 郵箱注冊/登錄

郵箱注冊流程圖：

最常見的PC端注冊方法，至今國外的網(wǎng)站也是郵箱注冊居多本文描述了下面兩種普遍存在的郵箱注冊流程，區(qū)別在于驗(yàn)證的節(jié)點(diǎn)：

進(jìn)入郵箱激活即表示，激活郵件，激活郵件常用的有兩種：鏈接和數(shù)字驗(yàn)證碼兩種，如下圖：

toast提示：

注冊成功后流程：

2. 手機(jī)注冊

目前大部分APP都采用手機(jī)號為主要注冊登錄的方案，主要是因?yàn)槭謾C(jī)號本身的特性，手機(jī)號具有高滲透率、唯一性、真實(shí)性（實(shí)名認(rèn)證）、可聯(lián)絡(luò)性，手機(jī)號不僅可以確認(rèn)用戶身份，還可以在必要時(shí)聯(lián)系用戶、通過通訊錄導(dǎo)入社交關(guān)系等。國內(nèi)大多數(shù)PC網(wǎng)站，目前大部分也都是在使用手機(jī)號碼注冊。

手機(jī)號注冊的設(shè)計(jì)表現(xiàn)形式有兩種，分步注冊與非分步注冊。

數(shù)據(jù)顯示，分步注冊的每一步的用戶操作復(fù)雜度低，提高用戶專注程度，減少錯(cuò)誤率以及提高流程流暢度，但是也不排除部分網(wǎng)站需要用戶提供大量的注冊信息，這樣分步注冊會顯得繁雜冗余。

所以分步注冊最好控制在3步以內(nèi)，否則用戶會感覺操作復(fù)雜。

注冊分類思維導(dǎo)圖如下，測試了花瓣、ui中國、站酷、bilibili、人人都是產(chǎn)品經(jīng)理、京東、天貓等web網(wǎng)站發(fā)現(xiàn)前三種注冊方式都有，關(guān)于設(shè)置登錄名/昵稱、支付方式的注冊輸入項(xiàng)這里暫不提及。

手機(jī)注冊流程圖：

忽略“下一步顯示”或“觸發(fā)顯示”這些交互，“分步”和“非分步-全部顯示”流程相同，全部顯示中沒有驗(yàn)證安全碼而點(diǎn)擊”獲取短信驗(yàn)證碼”會報(bào)錯(cuò)，“非分步-全部顯示”同“分步”：

?toast提示：

toast提示應(yīng)該簡單明了，一般用于錯(cuò)誤發(fā)生時(shí)。

比如：輸入信息不完全、輸入錯(cuò)誤（登錄）、輸入不合法（注冊）、已注冊/未注冊（手機(jī)號）等，注冊操作中，最好能實(shí)時(shí)提醒，不要等到用戶輸入所有信息后，再提示錯(cuò)誤。

提示明細(xì)如下：

02 登錄

目前主流的登錄方式是短信登錄和第三方授權(quán)登錄，手機(jī)端和web端都有其特有登錄方式，手機(jī)端中的一鍵快速登錄、手勢密碼、指紋登錄，web端的二維碼登錄。

toast提示：

登錄操作有很多應(yīng)用會在點(diǎn)擊登錄button時(shí)才提示錯(cuò)誤信息，當(dāng)然個(gè)別諸如安全碼類的提示會第一時(shí)間反饋。下表中整理的提示信息登錄方式為密碼登錄、短信登錄。

切換登錄界面：

在測試中，發(fā)現(xiàn)有的平臺同時(shí)為用戶提供了兩種登錄界面：獨(dú)立界面和彈窗；獨(dú)立界面跳轉(zhuǎn)方式有兩種，本頁打開方式、新開窗口。

• 只提供一種：參考站酷，跳轉(zhuǎn)登錄注冊界面使用在本頁打開方式，登錄成功后自動跳轉(zhuǎn)到登錄操作前所瀏覽的界面。
• 提供兩種：視頻播放類平臺bilibili，在首頁觸發(fā)登錄時(shí)新開窗口打開獨(dú)立界面，在播放界面觸發(fā)登錄時(shí)打開彈

03 交互要點(diǎn)

1. 表單交互要點(diǎn)

注冊登錄過程中涉及的要素通常是五種，分別是手機(jī)號、郵箱、安全碼、短信驗(yàn)證碼、密碼，這些要素都有其作用和優(yōu)化方案。掌握并運(yùn)用得當(dāng)，會大大的節(jié)省用戶操作時(shí)間，提高賬戶的安全性和用戶體驗(yàn)。

2. 其它交互要點(diǎn)或概念剖析

輸入框提示：

輸入框提示語是必不可少的，措辭要簡潔，現(xiàn)在普遍做法是輸入框中提示，獲取焦點(diǎn)時(shí)提示消失，如果輸入項(xiàng)少，這種做法是可取的。

當(dāng)然最好是在輸入的過程中保留提示，如下圖3種方式。后兩種比較炫，每行輸入后，提示會上移顯示，其開發(fā)難度也會稍大。

簡單標(biāo)注補(bǔ)充說明：大多數(shù)用戶是產(chǎn)品小白，*表示必填項(xiàng)只有高段位用戶才理解。

因此，在設(shè)計(jì)表單界面過程中，選填項(xiàng)、必填項(xiàng)最好用文字標(biāo)注。簡短的操作說明也建議使用文字表述，圖標(biāo)隱藏說明文字雖然視覺效果好，但一定程度消耗了用戶體驗(yàn)。

一方面，圖標(biāo)類提示得點(diǎn)擊圖標(biāo)后才顯示，增加了用戶操作步驟；另一方面，圖標(biāo)也容易被用戶忽略。

短信驗(yàn)證碼：

系統(tǒng)下發(fā)的短信一般會設(shè)定有效期，有效期設(shè)定在5-10分鐘為宜，短信碼獲取間隔為1分鐘，短信碼若有必要，可設(shè)定一天下發(fā)次數(shù)驗(yàn)證，或者在有效期內(nèi)用戶多次點(diǎn)擊時(shí)下發(fā)相同驗(yàn)證碼。

這樣不僅可以節(jié)省成本（下發(fā)短信需要付費(fèi)），也不會因?yàn)橥瑫r(shí)受到多條短信而分不清。

安全碼：

驗(yàn)證碼目前主要有四種：滑動驗(yàn)證、按圖片提示選字、圖形驗(yàn)證碼、旋轉(zhuǎn)圖片；目的是為了確認(rèn)是人為注冊，防止軟件惡意注冊。圖片碼支持隨時(shí)刷新切換，不做次數(shù)限制。

驗(yàn)證順序說明：

發(fā)送短信驗(yàn)證碼之前用安全碼驗(yàn)證，通常有以下3種順序：

1. 先隱藏，點(diǎn)擊“發(fā)送短信驗(yàn)證碼”時(shí)顯示并驗(yàn)證，驗(yàn)證成功后，提示發(fā)送短信成功，或點(diǎn)擊“發(fā)送驗(yàn)證碼”獲取短信，此種安全碼多以彈窗顯示。如：左1—滑動驗(yàn)證（上）、左2-按提示選字或圖片；
2. 先顯示并隱藏短信驗(yàn)證碼行，驗(yàn)證通過后顯示“短信驗(yàn)證碼”輸入欄，如：左1—滑動驗(yàn)證（下）；
3. 顯示并驗(yàn)證，若未驗(yàn)證，點(diǎn)擊“發(fā)送短信驗(yàn)證碼”時(shí)提示“請輸入驗(yàn)證碼”，如左3，這種方式大型網(wǎng)站很少見了。

安全碼界面樣式：

彈窗類安全碼，看圖選圖/選字、滑動、旋轉(zhuǎn)安全碼這三種類型均有，觸發(fā)條件為點(diǎn)擊“發(fā)送短信驗(yàn)證碼”或者如下圖。

用戶協(xié)議：

用戶協(xié)議出現(xiàn)在注冊界面的情況居多，早期一般是默認(rèn)被選中狀態(tài)或是點(diǎn)擊注冊即視為同意協(xié)議條款。

但是支付寶新聞事件提醒我們，用戶協(xié)議最好是需要用戶自己去點(diǎn)擊確認(rèn)，現(xiàn)在很多應(yīng)用也開始這樣做，如下右圖，未勾選協(xié)議前，下一步按鈕不可點(diǎn)。

密碼眼睛開合：

出于使用場景考慮，比如：用戶在注冊時(shí)身邊有人，為了保護(hù)用戶的密碼隱私，可以在輸入密碼時(shí)關(guān)閉眼睛icon。開啟眼睛是為了讓用戶清楚的看見自己密碼，避免密碼輸入錯(cuò)誤。

一鍵刪除賬戶名/密碼：

這個(gè)功能是給用戶在注冊登錄頁面輸入有誤或是切換賬戶時(shí)使用，可以有效減少用戶點(diǎn)擊次數(shù)，提升用戶體驗(yàn)。

保留賬戶名數(shù)據(jù)：

如果用戶曾登錄過，可以保留用戶的賬戶名數(shù)據(jù)，這樣用戶重新登錄時(shí)只需輸入密碼或者驗(yàn)證碼即可。當(dāng)然，用戶如果想重新輸入賬戶名，一鍵刪除數(shù)據(jù)的功能就顯得很有必要，例如：QQ郵箱登錄。

多賬戶之間的登錄切換：

在登錄時(shí)可以選擇多個(gè)賬號，這個(gè)功能在to C端應(yīng)用比較少，一般是to B類應(yīng)用可能會用到，因?yàn)槠髽I(yè)可能會擁有多個(gè)賬號，這個(gè)功能就顯得很重要。

去除雞肋操作：

注冊登錄過程中，一些雞肋的操作會影響用戶體驗(yàn)，從而導(dǎo)致用戶流失，比方說密碼重復(fù)輸入，完善個(gè)人資料等。這些操作可以放在個(gè)人中心或是設(shè)置中讓用戶自行填寫，在注冊登錄頁面只保留必填的內(nèi)容。

本文由 @蘇木 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

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