編輯導語：在B端SaaS產(chǎn)品中，我們經(jīng)常會遇到一些提示的信息設計模塊，在面對這一模塊時，我們要注意一些功能的設計以及用戶的體驗方面；本文作者分享了關(guān)于B端SaaS中的一些“提示”需求是怎樣做成標準化功能的，我們一起來了解一下吧。

B端產(chǎn)品的業(yè)務方有自營業(yè)務和第三方業(yè)務的區(qū)別，如果是自營業(yè)務產(chǎn)品經(jīng)理做需求設計時大多考慮的是自營業(yè)務的需求，會經(jīng)常做個性化需求、一次性需求；如果是第三方業(yè)務也就是相當于做SaaS產(chǎn)品設計，則需要考慮“這個需求是否滿足大多客戶的需求，怎樣做成標準化功能，是否有經(jīng)濟價值”。

我將通過本篇詳細闡述B端 SaaS中常見的“提示”需求是怎樣做成標準化功能的，即根據(jù)業(yè)務場景設計標準化功能（組件），然后各種業(yè)務模塊調(diào)用此組件，也就是做成了通用的功能。

一、業(yè)務場景

常見的業(yè)務場景是“什么情況下 對何對象 觸發(fā)什么提示”，這一場景的具體分析如下：

觸發(fā)對象：

• 某字段
• 某業(yè)務

觸發(fā)條件：

• 點擊某按鈕
• 某字段失去焦點
• 某字段有值后
• 刷新頁面時
• 鼠標移入某頁面元素時

提示類型：

• 提示彈窗
• 對話彈窗
• toast 提示
• 紅框紅字提示
• 問號提示
• 加載中
• 進度條

二、功能設計

1）提示彈窗

• 定義：僅提示，只有一個【確定】按鈕，用戶點擊【確定】后關(guān)閉彈窗、無業(yè)務邏輯，業(yè)務模塊使用時需定義觸發(fā)條件、觸發(fā)對象、提示文案。
• 案例：創(chuàng)建采購計劃時，如果未選中商品就點擊明細行按鈕【購進記錄】，那么提示彈窗：“請先選中商品，再點擊此按鈕”，點擊【確定】或X后關(guān)閉該提示。

2）對話彈窗

• 定義：彈窗內(nèi)有【確定】【取消】按鈕，點擊【確定】后提示關(guān)閉并執(zhí)行后續(xù)業(yè)務邏輯，點擊【取消】或X關(guān)閉只該彈窗。
• 案例：采購計劃新增頁面，當用戶填寫部分信息后想放棄新增這時就點擊【取消】，系統(tǒng)會彈出對話彈窗“點擊確定，會將頁面數(shù)據(jù)清空并重置到初始狀態(tài)！”。如果點擊【確定】按鈕將關(guān)閉此彈窗和新增頁面并回到采購計劃列表頁（數(shù)據(jù)庫中不保存此新增數(shù)據(jù)），如果點擊【取消】按鈕將關(guān)閉該彈窗、仍在采購計劃新增頁面可繼續(xù)新增。

3）toast 提示

• 定義：被觸發(fā)后在頁面頂部出現(xiàn)文字提示，3秒后自動關(guān)閉。
• 案列：新增采購計劃時業(yè)務上是要先選擇倉庫名稱再添加商品，如果用戶在操作時未選擇倉庫名稱就去點擊【添加商品】則會 toast 提示：請先填寫倉庫名稱再添加商品！。

4）紅框紅字提示

• 定義：觸發(fā)對象被觸發(fā)后其輸入框或下拉框出現(xiàn)紅框紅字提示，該觸發(fā)對象有值后提示再消失。
• 案例：新增采購訂單時，如果供應商名稱的下拉框無值就去點擊【添加商品】，那么供應商名稱的下拉框就紅框紅字提示“請先完善 供應商名稱 再添加”。

5）問號提示

• 定義：鼠標移入到頁面上的某個元素后顯示文字提示，鼠標移出后該提示關(guān)閉。
• 案例：新增倉庫配送單的明細行中的列表，其中列名【生產(chǎn)批號】給出問號提示“只能選合格貨位關(guān)聯(lián)的生產(chǎn)批號”。

6）加載中

• 定義：前端頁面某交互動作請求后端執(zhí)行數(shù)據(jù)庫計算，并將計算的過程返回給前端，這一處理過程對用戶的提示。
• 案例：在采購計劃新增頁面點擊【提交】后請求后端把數(shù)據(jù)插入到數(shù)據(jù)庫中，數(shù)據(jù)庫成功處理后返回給前端，前端再刷新列表頁。這一過程對于用戶來說就是點擊【提交】后看到Loading提示，加載完成后再看到已經(jīng)刷新的列表頁。

7）進度條

• 定義：前端頁面某交互動作請求后端執(zhí)行數(shù)據(jù)庫計算（該數(shù)據(jù)庫計算比較復雜且耗時），并將計算的過程進度返回給前端，這一處理過程對用戶的提示。
• 案例：新增“商品配送價格組”，填寫好必填字段點擊【提交】，這時后端需要把數(shù)十萬個商品數(shù)據(jù)都刷一遍，然后計算出每一個商品的配送價。這一計算過程對于用戶而言就會看到進度條和提示文案“正在為所有商品配置配送價格組，請稍等。。。”

以上就是我在做B端 SaaS產(chǎn)品需求設計時遇到提示類需求的解決辦法，像上面這樣先做好標準化功能、定義好組件，之后在任何一個業(yè)務模塊需要對應提示時，開發(fā)只需要調(diào)用對應組件然后寫好觸發(fā)條件、觸發(fā)對象、提示語句、業(yè)務邏輯即可。這樣就不會出現(xiàn)每種業(yè)務模塊自由寫個性化提示，也就是說做了一個通用、標準的功能，這就是B端 SaaS產(chǎn)品設計的關(guān)鍵思維。

作者：產(chǎn)品老兵，公眾號：供應鏈產(chǎn)品老兵

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

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