B端產品登錄功能詳解(附需求文檔范文)

7 評論 26470 瀏覽 302 收藏 18 分鐘

編輯導讀:B端產品的登錄功能相比于C端,少了很多花里胡哨的交互性,更考慮的是安全性。那在設計B端產品登錄功能時該如何設計呢?本文作者對此展開了分析,與你分享。

一、B端產品登錄功能的重要性

相比較于C端產品,B端產品的登錄功能在設計上往往比較簡單,不會涉及到第三方登錄、本地號碼一鍵登錄、用戶協議等功能點,也不用考慮炫酷的登錄交互,基本上就是在一個頁面擺放幾個輸入框、幾個操作按鈕即可。

但是功能簡單不代表考慮的細節就少,由于B端產品面向的是企業用戶,系統中涉及到企業很多的重要數據,比如客戶數據、業務數據等,這些資料一旦被泄露可能會給企業造成非常大的損失。

因此,B端產品的登錄功能最主要考慮的是安全性,那么在設計B端產品登錄功能時該如何設計呢,今天我們就來討論下。

二、常見的B端產品登錄功能

常見的B端產品登錄功能主要有以下三種,我們分別來討論下每種登錄功能適合什么樣的產品:

輸入賬號——>輸入密碼——>登錄

該登錄功能對用戶而言操作簡單,不需要輸入太多信息即可登錄,但是也正是因為操作簡單,導致安全性就不是很高,因此該功能適用于對安全性要求不太高的B端產品,比如一些工具類產品。

輸入賬號——>輸入密碼——>驗證碼——>登錄

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

APP掃描二維碼/APP登錄確認——>登錄

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

三、B端產品登錄功能的設計思路

通過以上介紹我們大致了解了B端產品不同登錄功能的特點及適用場景,那么我們該如何選擇及設計B端產品的登錄功能呢?主要圍繞以下兩方面:

3.1 確定登錄功能主流程

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

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

登錄功能主流程就是我們上面介紹的那三種,那么登錄功能的輔助功能是什么呢?是指賬號注冊、找回密碼、修改密碼、以及與登錄安全相關的輔助功能等,任何一個系統的登錄功能都不是獨立存在的,那么我們該如何設計次要功能呢?

由于正常的用戶場景是用戶先有賬號然后再使用賬號,因此我們按照這個業務場景梳理每個環節都會涉及到哪些次要功能,首先肯定是注冊功能,B端產品是面向企業內部用戶的,因此基本上不需要賬號注冊。但是也不絕對,比如SAAS產品為了方便用戶試用體驗,也是需要有賬號注冊功能的,這個要根據自己產品需要設計即可。

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

至于修改密碼功能這個不再介紹基本上都會有,最后就是一些與登錄安全相關的輔助功能,比如首次登錄強制修改初始密碼、登錄賬號更換登錄設備需要短信驗證、每天限制登錄次數等,這些輔助功能具體要不要,要多少都要結合具體產品而言。

四、B端產品登錄功能注意事項

B端產品的登錄功能雖然是一個很小的功能點,但是其中有非常多的功能細節需要考慮到,主要包括以下幾點:

4.1 明確的提示反饋

在登錄B端產品時涉及到賬號、密碼、驗證碼等內容的輸入,在用戶提交登錄時要驗證用戶賬號、密碼、驗證碼輸入的準確性,對于用戶不同的輸入情況要給出不同的提示內容,而且不同情況下提示的方式以及提示內容展示的地方也不同,但是無論用戶是因為什么操作導致的失誤,在給用戶反饋時一定要讓用戶能明確自己的錯誤,而不是讓用戶根據系統提示去猜測自己哪里出錯了,這樣會導致用戶使用成本增加。

常見的部分情況及提示內容如下:

4.2 友好的交互體驗

比如賬號、密碼、驗證碼等內容未全部輸入時【登錄】按鈕置灰。

賬號、密碼輸入框輸入內容后提供一鍵清空內容按鈕,方便用戶重新輸入;

密碼輸入框輸入內容后提供查看明文按鈕,方便用戶查看已輸入的密碼是否有誤;

賬號、密碼、驗證碼輸入內容錯誤時在輸入框下方給出具體文字提示,方便用戶清楚自己哪里有錯誤;

4.3 安全的輔助手段

前面也說了B端產品登錄功能最重要的要求就是安全登錄,因此在設計B端產品時一定要圍繞安全方面多考慮一些輔助手段。

比如賬號密碼多次輸入錯誤時賬號鎖定一段時間、同一個賬號限制每天的登錄次數、首次登錄時強制修改初始密碼、更換登錄設備時需要短信驗證、限制驗證碼有效期、登錄狀態下長時間未進行操作登錄狀態失效、定時強制修改登錄密碼登錄等;

4.4 特殊的功能需求

因B端產品的目標客戶是企業,不同企業對同一個功能的需求肯定也不一樣,尤其是SAAS化的B端產品,在設計登錄功能時要綜合考慮各種特殊的使用常見,以某公司產品為例,他們的產品服務了十幾家商戶,每兩三家商戶會有一個項目經理負責日常對接,項目經理在服務商戶時需要登錄系統,系統登錄賬號只能是手機號,且在登錄時是通過判斷手機號歸屬商戶然后登錄進去后就是哪家商戶。

因此,為了能登錄進入不同商戶系統,項目經理需要為每家商戶找一個個不同的手機號注冊成他們的管理員,登錄不同的商戶系統時需要換不同的賬號,這就帶給項目經理非常不好的使用體驗,操作體驗差還好,最主要的是后期項目經理負責的商戶更多了,估計連注冊賬號的手機號都找不到了,為什么會出現這種情況呢,就是之前的產品經理在設計登錄功能時沒有考慮到這個問題,如果在設計登錄功能時就考慮到會有該種情況的存在,然后在設計登錄功能時除了賬號密碼再額外增加一個登錄商戶選項是不是就可以解決該問題。

五、B端產品登錄功能需求文檔范文

5.1 功能概述

5.1.1 業務流程圖

5.1.2 功能架構

5.2 功能說明

5.2.1 賬號登錄

5.2.1.1 業務流程

  1. 用戶打開登錄網址進入登錄頁面;
  2. 輸入登錄賬號、密碼、驗證碼進行登錄;

5.2.1.2 頁面原型

5.2.1.3 邏輯說明

  1. 賬號輸入框:輸入賬號后顯示清空操作按鈕,點擊清空按鈕清空已輸入的賬號;
  2. 密碼輸入框:輸入密碼后顯示密碼明文查看按鈕及清空按鈕,鼠標按下明文查看按鈕密碼明文展示,鼠標松開后密文展示,點擊清空按鈕清空已輸入密碼;
  3. 驗證碼:驗證碼為4位隨機的大寫英文字母,單擊驗證碼展示區域刷新驗證碼,驗證碼有效期為60秒;
  4. 所有輸入框獲取焦點時提示文字消失且邊框變為綠色,失去焦點時恢復原狀;
  5. 【登錄】按鈕:點擊【登錄】按鈕時依次校驗登錄賬號、密碼、驗證碼,若某一項校驗出問題則在對應輸入框下方紅字提醒用戶錯誤原因,全部校驗通過則成功登錄并進入系統首頁;
  6. 【找回密碼】按鈕:點擊【找回密碼】按鈕跳轉至找回密碼頁面;
  7. 賬號首次成功登錄時彈窗提示賬號首次登錄時需修改初始密碼,點擊【確定】按鈕跳轉至修改初始密碼頁面,初始密碼修改后需要重新輸入賬號、密碼、驗證碼進行登錄;

5.2.2 重置初始密碼

5.2.2.1 業務流程

  1. 用戶初次成功登錄賬號后彈窗提示用戶修改初始密碼;
  2. 點擊彈窗的【確定】按鈕后頁面跳轉至重置初始密碼頁面;

5.2.2.2 頁面原型

5.2.2.3 業務邏輯

  1. 新密碼輸入框:輸入密碼后顯示密碼明文查看按鈕及清空按鈕,鼠標按下明文查看按鈕密碼明文展示,鼠標松開后密文展示,點擊清空按鈕清空已輸入密碼;
  2. 確認密碼:輸入密碼后顯示密碼明文查看按鈕及清空按鈕,鼠標按下明文查看按鈕密碼明文展示,鼠標松開后密文展示,點擊清空按鈕清空已輸入密碼;
  3. 驗證碼:點擊【獲取驗證碼】按鈕向登錄賬號綁定手機號發送6位隨機數字驗證碼,驗證碼已發送后【獲取驗證碼】按鈕展示60秒倒計時,倒計時結束后恢復原狀,驗證碼有效期為60秒;
  4. 所有輸入框獲取焦點時提示文字消失且輸入框邊框變為綠色,失去焦點時恢復原狀;
  5. 【取消】按鈕:點擊【取消】按鈕取消修改初始密碼,返回至登錄頁面;
  6. 【提交】按鈕:點擊【提交】按鈕依次校驗密碼、驗證碼,若某一項校驗出問題則在對應輸入框下方紅字提醒用戶錯誤原因,全部校驗通過則提示重置密碼成功,然后返回至登錄頁面;

5.2.3 找回密碼

5.2.3.1 業務流程

  1. 用戶打開登錄網址進入登錄頁面;
  2. 忘記登錄密碼后在登錄頁面頁面點擊【找回密碼】按鈕進入找回密碼頁面;

5.2.3.2 頁面原型

5.2.3.3 業務邏輯

  1. 新密碼輸入框:輸入密碼后顯示密碼明文查看按鈕及清空按鈕,鼠標按下明文查看按鈕密碼明文展示,鼠標松開后密文展示,點擊清空按鈕清空已輸入密碼;
  2. 確認密碼:輸入密碼后顯示密碼明文查看按鈕及清空按鈕,鼠標按下明文查看按鈕密碼明文展示,鼠標松開后密文展示,點擊清空按鈕清空已輸入密碼;
  3. 驗證碼:點擊【獲取驗證碼】按鈕向登錄賬號綁定手機號發送6位隨機數字驗證碼,驗證碼已發送后【獲取驗證碼】按鈕展示60秒倒計時,倒計時結束后恢復原狀,驗證碼有效期為60秒;
  4. 所有輸入框獲取焦點時提示文字消失且輸入框邊框變為綠色,失去焦點時恢復原狀;
  5. 【取消】按鈕:點擊【取消】按鈕取消修改初始密碼,返回至登錄頁面;
  6. 【提交】按鈕:點擊【提交】按鈕依次校驗密碼、驗證碼,若某一項校驗出問題則在對應輸入框下方紅字提醒用戶錯誤原因,全部校驗通過則提示重置密碼成功,然后返回至登錄頁面;

5.2.4 修改密碼

5.2.4.1 業務流程

  1. 用戶成功登錄賬號;
  2. 在我的頁面選擇修改密碼進入修改密碼頁面;

5.2.4.2 頁面原型

5.2.4.3 業務邏輯

  1. 原密碼輸入框:輸入密碼后顯示密碼明文查看按鈕及清空按鈕,鼠標按下明文查看按鈕密碼明文展示,鼠標松開后密文展示,點擊清空按鈕清空已輸入密碼;
  2. 新密碼輸入框:輸入密碼后顯示密碼明文查看按鈕及清空按鈕,鼠標按下明文查看按鈕密碼明文展示,鼠標松開后密文展示,點擊清空按鈕清空已輸入密碼;
  3. 確認密碼:輸入密碼后顯示密碼明文查看按鈕及清空按鈕,鼠標按下明文查看按鈕密碼明文展示,鼠標松開后密文展示,點擊清空按鈕清空已輸入密碼;
  4. 驗證碼:點擊【獲取驗證碼】按鈕向登錄賬號綁定手機號發送6位隨機數字驗證碼,驗證碼已發送后【獲取驗證碼】按鈕展示60秒倒計時,倒計時結束后恢復原狀,驗證碼有效期為60秒;
  5. 所有輸入框獲取焦點時提示文字消失且輸入框邊框變為綠色,失去焦點時恢復原狀;
  6. 【取消】按鈕:點擊【取消】按鈕取消修改密碼,返回至我的頁面;
  7. 【提交】按鈕:點擊【提交】按鈕依次校驗密碼、驗證碼,若某一項校驗出問題則在對應輸入框下方紅字提醒用戶錯誤原因,全部校驗通過則提示重置密碼成功;

 

本文由 @袁賀 原創發布于人人都是產品經理,未經作者許可,禁止轉載。

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 好細,后臺遇到這樣的產品得樂死

    來自陜西 回復
  2. 里面的邏輯圖真細致,太棒了

    來自浙江 回復
  3. 寫的很細,對我這樣的新手產品經理很有幫助,??

    回復
  4. 后面需求文檔部分很有指導意義

    來自北京 回復
  5. 不錯

    來自上海 回復
  6. 挺詳細的

    來自美國 回復
  7. ??,寫的很詳細

    來自陜西 回復