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

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

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

一、業(yè)務(wù)場(chǎng)景

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

觸發(fā)對(duì)象：

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

觸發(fā)條件：

• 點(diǎn)擊某按鈕
• 某字段失去焦點(diǎn)
• 某字段有值后
• 刷新頁面時(shí)
• 鼠標(biāo)移入某頁面元素時(shí)

提示類型：

• 提示彈窗
• 對(duì)話彈窗
• toast 提示
• 紅框紅字提示
• 問號(hào)提示
• 加載中
• 進(jìn)度條

二、功能設(shè)計(jì)

1）提示彈窗

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

2）對(duì)話彈窗

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

3）toast 提示

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

4）紅框紅字提示

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

5）問號(hào)提示

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

6）加載中

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

7）進(jìn)度條

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

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

作者：產(chǎn)品老兵，公眾號(hào)：供應(yīng)鏈產(chǎn)品老兵

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

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