編輯導(dǎo)讀：B端產(chǎn)品的登錄功能相比于C端，少了很多花里胡哨的交互性，更考慮的是安全性。那在設(shè)計(jì)B端產(chǎn)品登錄功能時(shí)該如何設(shè)計(jì)呢？本文作者對(duì)此展開了分析，與你分享。

一、B端產(chǎn)品登錄功能的重要性

相比較于C端產(chǎn)品，B端產(chǎn)品的登錄功能在設(shè)計(jì)上往往比較簡(jiǎn)單，不會(huì)涉及到第三方登錄、本地號(hào)碼一鍵登錄、用戶協(xié)議等功能點(diǎn)，也不用考慮炫酷的登錄交互，基本上就是在一個(gè)頁(yè)面擺放幾個(gè)輸入框、幾個(gè)操作按鈕即可。

但是功能簡(jiǎn)單不代表考慮的細(xì)節(jié)就少，由于B端產(chǎn)品面向的是企業(yè)用戶，系統(tǒng)中涉及到企業(yè)很多的重要數(shù)據(jù)，比如客戶數(shù)據(jù)、業(yè)務(wù)數(shù)據(jù)等，這些資料一旦被泄露可能會(huì)給企業(yè)造成非常大的損失。

因此，B端產(chǎn)品的登錄功能最主要考慮的是安全性，那么在設(shè)計(jì)B端產(chǎn)品登錄功能時(shí)該如何設(shè)計(jì)呢，今天我們就來討論下。

二、常見的B端產(chǎn)品登錄功能

常見的B端產(chǎn)品登錄功能主要有以下三種，我們分別來討論下每種登錄功能適合什么樣的產(chǎn)品：

輸入賬號(hào)——>輸入密碼——>登錄

該登錄功能對(duì)用戶而言操作簡(jiǎn)單，不需要輸入太多信息即可登錄，但是也正是因?yàn)椴僮骱?jiǎn)單，導(dǎo)致安全性就不是很高，因此該功能適用于對(duì)安全性要求不太高的B端產(chǎn)品，比如一些工具類產(chǎn)品。

輸入賬號(hào)——>輸入密碼——>驗(yàn)證碼——>登錄

該功能在上一種登錄的基礎(chǔ)上增加了驗(yàn)證碼，雖然只是增加了一個(gè)驗(yàn)證碼，但是卻在一定程度上保證了賬號(hào)登錄的安全性，而且在用戶體驗(yàn)上幾乎沒有增加困難度，因此該種登錄功能為目前B端產(chǎn)品最常用的登錄功能。

APP掃描二維碼/APP登錄確認(rèn)——>登錄

這種登錄需要用戶在登錄B端產(chǎn)品時(shí)配合APP使用，在用戶體驗(yàn)上可能不是非常便捷，但是安全性卻能得到一定保障，但是該種登錄方式有個(gè)前提條件就是需要B端產(chǎn)品有配套的APP，因此，該種登錄方式適合對(duì)安全性要求高且有配套APP的B端產(chǎn)品。

三、B端產(chǎn)品登錄功能的設(shè)計(jì)思路

通過以上介紹我們大致了解了B端產(chǎn)品不同登錄功能的特點(diǎn)及適用場(chǎng)景，那么我們?cè)撊绾芜x擇及設(shè)計(jì)B端產(chǎn)品的登錄功能呢？主要圍繞以下兩方面：

3.1 確定登錄功能主流程

任何功能設(shè)計(jì)都是先設(shè)計(jì)功能主干，再設(shè)計(jì)分支，登錄功能也不例外，登錄功能主流程基本上就是上面介紹那三種形式，咱們可以從那三種登錄形式中進(jìn)行選擇，也可以以此為基礎(chǔ)進(jìn)行拓展，在設(shè)計(jì)主流程時(shí)一定要結(jié)合自身產(chǎn)品的情況，比如銀行金融系統(tǒng)會(huì)涉及到很多重要客戶數(shù)據(jù)，因此對(duì)賬號(hào)安全要求非常高，那么就不能考慮第一種登錄方案了。

3.2 確定登錄功能的輔助功能

登錄功能主流程就是我們上面介紹的那三種，那么登錄功能的輔助功能是什么呢？是指賬號(hào)注冊(cè)、找回密碼、修改密碼、以及與登錄安全相關(guān)的輔助功能等，任何一個(gè)系統(tǒng)的登錄功能都不是獨(dú)立存在的，那么我們?cè)撊绾卧O(shè)計(jì)次要功能呢？

由于正常的用戶場(chǎng)景是用戶先有賬號(hào)然后再使用賬號(hào)，因此我們按照這個(gè)業(yè)務(wù)場(chǎng)景梳理每個(gè)環(huán)節(jié)都會(huì)涉及到哪些次要功能，首先肯定是注冊(cè)功能，B端產(chǎn)品是面向企業(yè)內(nèi)部用戶的，因此基本上不需要賬號(hào)注冊(cè)。但是也不絕對(duì)，比如SAAS產(chǎn)品為了方便用戶試用體驗(yàn)，也是需要有賬號(hào)注冊(cè)功能的，這個(gè)要根據(jù)自己產(chǎn)品需要設(shè)計(jì)即可。

其次就是找回密碼，該功能也是視情況考慮是否添加，如果對(duì)于用戶量不是很多，且用戶賬號(hào)一般由統(tǒng)一管理員進(jìn)行管理的話可以不用該功能，用戶忘記登錄密碼后可以直接聯(lián)系管理員進(jìn)行重置密碼，如果用戶量很大，且用戶也不能輕易聯(lián)系到管理員，那么這種情況就可以考慮加上找回密碼功能。

至于修改密碼功能這個(gè)不再介紹基本上都會(huì)有，最后就是一些與登錄安全相關(guān)的輔助功能，比如首次登錄強(qiáng)制修改初始密碼、登錄賬號(hào)更換登錄設(shè)備需要短信驗(yàn)證、每天限制登錄次數(shù)等，這些輔助功能具體要不要，要多少都要結(jié)合具體產(chǎn)品而言。

四、B端產(chǎn)品登錄功能注意事項(xiàng)

B端產(chǎn)品的登錄功能雖然是一個(gè)很小的功能點(diǎn)，但是其中有非常多的功能細(xì)節(jié)需要考慮到，主要包括以下幾點(diǎn)：

4.1 明確的提示反饋

在登錄B端產(chǎn)品時(shí)涉及到賬號(hào)、密碼、驗(yàn)證碼等內(nèi)容的輸入，在用戶提交登錄時(shí)要驗(yàn)證用戶賬號(hào)、密碼、驗(yàn)證碼輸入的準(zhǔn)確性，對(duì)于用戶不同的輸入情況要給出不同的提示內(nèi)容，而且不同情況下提示的方式以及提示內(nèi)容展示的地方也不同，但是無(wú)論用戶是因?yàn)槭裁床僮鲗?dǎo)致的失誤，在給用戶反饋時(shí)一定要讓用戶能明確自己的錯(cuò)誤，而不是讓用戶根據(jù)系統(tǒng)提示去猜測(cè)自己哪里出錯(cuò)了，這樣會(huì)導(dǎo)致用戶使用成本增加。

常見的部分情況及提示內(nèi)容如下：

4.2 友好的交互體驗(yàn)

比如賬號(hào)、密碼、驗(yàn)證碼等內(nèi)容未全部輸入時(shí)【登錄】按鈕置灰。

賬號(hào)、密碼輸入框輸入內(nèi)容后提供一鍵清空內(nèi)容按鈕，方便用戶重新輸入；

密碼輸入框輸入內(nèi)容后提供查看明文按鈕，方便用戶查看已輸入的密碼是否有誤；

賬號(hào)、密碼、驗(yàn)證碼輸入內(nèi)容錯(cuò)誤時(shí)在輸入框下方給出具體文字提示，方便用戶清楚自己哪里有錯(cuò)誤；

4.3 安全的輔助手段

前面也說了B端產(chǎn)品登錄功能最重要的要求就是安全登錄，因此在設(shè)計(jì)B端產(chǎn)品時(shí)一定要圍繞安全方面多考慮一些輔助手段。

比如賬號(hào)密碼多次輸入錯(cuò)誤時(shí)賬號(hào)鎖定一段時(shí)間、同一個(gè)賬號(hào)限制每天的登錄次數(shù)、首次登錄時(shí)強(qiáng)制修改初始密碼、更換登錄設(shè)備時(shí)需要短信驗(yàn)證、限制驗(yàn)證碼有效期、登錄狀態(tài)下長(zhǎng)時(shí)間未進(jìn)行操作登錄狀態(tài)失效、定時(shí)強(qiáng)制修改登錄密碼登錄等；

4.4 特殊的功能需求

因B端產(chǎn)品的目標(biāo)客戶是企業(yè)，不同企業(yè)對(duì)同一個(gè)功能的需求肯定也不一樣，尤其是SAAS化的B端產(chǎn)品，在設(shè)計(jì)登錄功能時(shí)要綜合考慮各種特殊的使用常見，以某公司產(chǎn)品為例，他們的產(chǎn)品服務(wù)了十幾家商戶，每?jī)扇疑虘魰?huì)有一個(gè)項(xiàng)目經(jīng)理負(fù)責(zé)日常對(duì)接，項(xiàng)目經(jīng)理在服務(wù)商戶時(shí)需要登錄系統(tǒng)，系統(tǒng)登錄賬號(hào)只能是手機(jī)號(hào)，且在登錄時(shí)是通過判斷手機(jī)號(hào)歸屬商戶然后登錄進(jìn)去后就是哪家商戶。

因此，為了能登錄進(jìn)入不同商戶系統(tǒng)，項(xiàng)目經(jīng)理需要為每家商戶找一個(gè)個(gè)不同的手機(jī)號(hào)注冊(cè)成他們的管理員，登錄不同的商戶系統(tǒng)時(shí)需要換不同的賬號(hào)，這就帶給項(xiàng)目經(jīng)理非常不好的使用體驗(yàn)，操作體驗(yàn)差還好，最主要的是后期項(xiàng)目經(jīng)理負(fù)責(zé)的商戶更多了，估計(jì)連注冊(cè)賬號(hào)的手機(jī)號(hào)都找不到了，為什么會(huì)出現(xiàn)這種情況呢，就是之前的產(chǎn)品經(jīng)理在設(shè)計(jì)登錄功能時(shí)沒有考慮到這個(gè)問題，如果在設(shè)計(jì)登錄功能時(shí)就考慮到會(huì)有該種情況的存在，然后在設(shè)計(jì)登錄功能時(shí)除了賬號(hào)密碼再額外增加一個(gè)登錄商戶選項(xiàng)是不是就可以解決該問題。

五、B端產(chǎn)品登錄功能需求文檔范文

5.1 功能概述

5.1.1 業(yè)務(wù)流程圖

5.1.2 功能架構(gòu)

5.2 功能說明

5.2.1 賬號(hào)登錄

5.2.1.1 業(yè)務(wù)流程

1. 用戶打開登錄網(wǎng)址進(jìn)入登錄頁(yè)面；
2. 輸入登錄賬號(hào)、密碼、驗(yàn)證碼進(jìn)行登錄；

5.2.1.2 頁(yè)面原型

5.2.1.3 邏輯說明

1. 賬號(hào)輸入框：輸入賬號(hào)后顯示清空操作按鈕，點(diǎn)擊清空按鈕清空已輸入的賬號(hào)；
2. 密碼輸入框：輸入密碼后顯示密碼明文查看按鈕及清空按鈕，鼠標(biāo)按下明文查看按鈕密碼明文展示，鼠標(biāo)松開后密文展示，點(diǎn)擊清空按鈕清空已輸入密碼；
3. 驗(yàn)證碼：驗(yàn)證碼為4位隨機(jī)的大寫英文字母，單擊驗(yàn)證碼展示區(qū)域刷新驗(yàn)證碼，驗(yàn)證碼有效期為60秒；
4. 所有輸入框獲取焦點(diǎn)時(shí)提示文字消失且邊框變?yōu)榫G色，失去焦點(diǎn)時(shí)恢復(fù)原狀；
5. 【登錄】按鈕：點(diǎn)擊【登錄】按鈕時(shí)依次校驗(yàn)登錄賬號(hào)、密碼、驗(yàn)證碼，若某一項(xiàng)校驗(yàn)出問題則在對(duì)應(yīng)輸入框下方紅字提醒用戶錯(cuò)誤原因，全部校驗(yàn)通過則成功登錄并進(jìn)入系統(tǒng)首頁(yè)；
6. 【找回密碼】按鈕：點(diǎn)擊【找回密碼】按鈕跳轉(zhuǎn)至找回密碼頁(yè)面；
7. 賬號(hào)首次成功登錄時(shí)彈窗提示賬號(hào)首次登錄時(shí)需修改初始密碼，點(diǎn)擊【確定】按鈕跳轉(zhuǎn)至修改初始密碼頁(yè)面，初始密碼修改后需要重新輸入賬號(hào)、密碼、驗(yàn)證碼進(jìn)行登錄；

5.2.2 重置初始密碼

5.2.2.1 業(yè)務(wù)流程

1. 用戶初次成功登錄賬號(hào)后彈窗提示用戶修改初始密碼；
2. 點(diǎn)擊彈窗的【確定】按鈕后頁(yè)面跳轉(zhuǎn)至重置初始密碼頁(yè)面；

5.2.2.2 頁(yè)面原型

5.2.2.3 業(yè)務(wù)邏輯

1. 新密碼輸入框：輸入密碼后顯示密碼明文查看按鈕及清空按鈕，鼠標(biāo)按下明文查看按鈕密碼明文展示，鼠標(biāo)松開后密文展示，點(diǎn)擊清空按鈕清空已輸入密碼；
2. 確認(rèn)密碼：輸入密碼后顯示密碼明文查看按鈕及清空按鈕，鼠標(biāo)按下明文查看按鈕密碼明文展示，鼠標(biāo)松開后密文展示，點(diǎn)擊清空按鈕清空已輸入密碼；
3. 驗(yàn)證碼：點(diǎn)擊【獲取驗(yàn)證碼】按鈕向登錄賬號(hào)綁定手機(jī)號(hào)發(fā)送6位隨機(jī)數(shù)字驗(yàn)證碼，驗(yàn)證碼已發(fā)送后【獲取驗(yàn)證碼】按鈕展示60秒倒計(jì)時(shí)，倒計(jì)時(shí)結(jié)束后恢復(fù)原狀，驗(yàn)證碼有效期為60秒；
4. 所有輸入框獲取焦點(diǎn)時(shí)提示文字消失且輸入框邊框變?yōu)榫G色，失去焦點(diǎn)時(shí)恢復(fù)原狀；
5. 【取消】按鈕：點(diǎn)擊【取消】按鈕取消修改初始密碼，返回至登錄頁(yè)面；
6. 【提交】按鈕：點(diǎn)擊【提交】按鈕依次校驗(yàn)密碼、驗(yàn)證碼，若某一項(xiàng)校驗(yàn)出問題則在對(duì)應(yīng)輸入框下方紅字提醒用戶錯(cuò)誤原因，全部校驗(yàn)通過則提示重置密碼成功，然后返回至登錄頁(yè)面；

5.2.3 找回密碼

5.2.3.1 業(yè)務(wù)流程

1. 用戶打開登錄網(wǎng)址進(jìn)入登錄頁(yè)面；
2. 忘記登錄密碼后在登錄頁(yè)面頁(yè)面點(diǎn)擊【找回密碼】按鈕進(jìn)入找回密碼頁(yè)面；

5.2.3.2 頁(yè)面原型

5.2.3.3 業(yè)務(wù)邏輯

1. 新密碼輸入框：輸入密碼后顯示密碼明文查看按鈕及清空按鈕，鼠標(biāo)按下明文查看按鈕密碼明文展示，鼠標(biāo)松開后密文展示，點(diǎn)擊清空按鈕清空已輸入密碼；
2. 確認(rèn)密碼：輸入密碼后顯示密碼明文查看按鈕及清空按鈕，鼠標(biāo)按下明文查看按鈕密碼明文展示，鼠標(biāo)松開后密文展示，點(diǎn)擊清空按鈕清空已輸入密碼；
3. 驗(yàn)證碼：點(diǎn)擊【獲取驗(yàn)證碼】按鈕向登錄賬號(hào)綁定手機(jī)號(hào)發(fā)送6位隨機(jī)數(shù)字驗(yàn)證碼，驗(yàn)證碼已發(fā)送后【獲取驗(yàn)證碼】按鈕展示60秒倒計(jì)時(shí)，倒計(jì)時(shí)結(jié)束后恢復(fù)原狀，驗(yàn)證碼有效期為60秒；
4. 所有輸入框獲取焦點(diǎn)時(shí)提示文字消失且輸入框邊框變?yōu)榫G色，失去焦點(diǎn)時(shí)恢復(fù)原狀；
5. 【取消】按鈕：點(diǎn)擊【取消】按鈕取消修改初始密碼，返回至登錄頁(yè)面；
6. 【提交】按鈕：點(diǎn)擊【提交】按鈕依次校驗(yàn)密碼、驗(yàn)證碼，若某一項(xiàng)校驗(yàn)出問題則在對(duì)應(yīng)輸入框下方紅字提醒用戶錯(cuò)誤原因，全部校驗(yàn)通過則提示重置密碼成功，然后返回至登錄頁(yè)面；

5.2.4 修改密碼

5.2.4.1 業(yè)務(wù)流程

1. 用戶成功登錄賬號(hào)；
2. 在我的頁(yè)面選擇修改密碼進(jìn)入修改密碼頁(yè)面；

5.2.4.2 頁(yè)面原型

5.2.4.3 業(yè)務(wù)邏輯

1. 原密碼輸入框：輸入密碼后顯示密碼明文查看按鈕及清空按鈕，鼠標(biāo)按下明文查看按鈕密碼明文展示，鼠標(biāo)松開后密文展示，點(diǎn)擊清空按鈕清空已輸入密碼；
2. 新密碼輸入框：輸入密碼后顯示密碼明文查看按鈕及清空按鈕，鼠標(biāo)按下明文查看按鈕密碼明文展示，鼠標(biāo)松開后密文展示，點(diǎn)擊清空按鈕清空已輸入密碼；
3. 確認(rèn)密碼：輸入密碼后顯示密碼明文查看按鈕及清空按鈕，鼠標(biāo)按下明文查看按鈕密碼明文展示，鼠標(biāo)松開后密文展示，點(diǎn)擊清空按鈕清空已輸入密碼；
4. 驗(yàn)證碼：點(diǎn)擊【獲取驗(yàn)證碼】按鈕向登錄賬號(hào)綁定手機(jī)號(hào)發(fā)送6位隨機(jī)數(shù)字驗(yàn)證碼，驗(yàn)證碼已發(fā)送后【獲取驗(yàn)證碼】按鈕展示60秒倒計(jì)時(shí)，倒計(jì)時(shí)結(jié)束后恢復(fù)原狀，驗(yàn)證碼有效期為60秒；
5. 所有輸入框獲取焦點(diǎn)時(shí)提示文字消失且輸入框邊框變?yōu)榫G色，失去焦點(diǎn)時(shí)恢復(fù)原狀；
6. 【取消】按鈕：點(diǎn)擊【取消】按鈕取消修改密碼，返回至我的頁(yè)面；
7. 【提交】按鈕：點(diǎn)擊【提交】按鈕依次校驗(yàn)密碼、驗(yàn)證碼，若某一項(xiàng)校驗(yàn)出問題則在對(duì)應(yīng)輸入框下方紅字提醒用戶錯(cuò)誤原因，全部校驗(yàn)通過則提示重置密碼成功；

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

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