編輯導語:在B端SaaS產品中,我們經常會遇到一些提示的資訊設計模組,在面對這一模組時,我們要注意一些功能的設計以及使用者的體驗方面;本文作者分享了關於B端SaaS中的一些“提示”需求是怎樣做成標準化功能的,我們一起來了解一下吧。
B端產品的業務方有自營業務和第三方業務的區別,如果是自營業務產品經理做需求設計時大多考慮的是自營業務的需求,會經常做個性化需求、一次性需求;如果是第三方業務也就是相當於做SaaS產品設計,則需要考慮“這個需求是否滿足大多客戶的需求,怎樣做成標準化功能,是否有經濟價值”。
我將透過本篇詳細闡述B端 SaaS中常見的“提示”需求是怎樣做成標準化功能的,即根據業務場景設計標準化功能(元件),然後各種業務模組呼叫此元件,也就是做成了通用的功能。
一、業務場景常見的業務場景是“什麼情況下 對何物件 觸發什麼提示”,這一場景的具體分析如下:
觸發物件:
觸發條件:
- 點選某按鈕
- 某欄位失去焦點
- 某欄位有值後
- 重新整理頁面時
- 滑鼠移入某頁面元素時
提示型別:
- 提示彈窗
- 對話彈窗
- toast 提示
- 紅框紅字提示
- 問號提示
- 載入中
- 進度條提
1)提示彈窗
- 定義:僅提示,只有一個【確定】按鈕,使用者點選【確定】後關閉彈窗、無業務邏輯,業務模組使用時需定義觸發條件、觸發物件、提示文案。
- 案例:建立採購計劃時,如果未選中商品就點選明細行按鈕【購進記錄】,那麼提示彈窗:“請先選中商品,再點選此按鈕”,點選【確定】或X後關閉該提示。
2)對話彈窗
- 定義:彈窗內有【確定】【取消】按鈕,點選【確定】後提示關閉並執行後續業務邏輯,點選【取消】或X關閉只該彈窗。
- 案例:採購計劃新增頁面,當用戶填寫部分資訊後想放棄新增這時就點選【取消】,系統會彈出對話彈窗“點選確定,會將頁面資料清空並重置到初始狀態!”。如果點選【確定】按鈕將關閉此彈窗和新增頁面並回到採購計劃列表頁(資料庫中不儲存此新增資料),如果點選【取消】按鈕將關閉該彈窗、仍在採購計劃新增頁面可繼續新增。
3)toast 提示
- 定義:被觸發後在頁面頂部出現文字提示,3秒後自動關閉。
- 案列:新增採購計劃時業務上是要先選擇倉庫名稱再新增商品,如果使用者在操作時未選擇倉庫名稱就去點選【新增商品】則會 toast 提示:請先填寫倉庫名稱再新增商品!。
4)紅框紅字提示
- 定義:觸發物件被觸發後其輸入框或下拉框出現紅框紅字提示,該觸發物件有值後提示再消失。
- 案例:新增採購訂單時,如果供應商名稱的下拉框無值就去點選【新增商品】,那麼供應商名稱的下拉框就紅框紅字提示“請先完善 供應商名稱 再新增”。
5)問號提示
- 定義:滑鼠移入到頁面上的某個元素後顯示文字提示,滑鼠移出後該提示關閉。
- 案例:新增倉庫配送單的明細行中的列表,其中列名【生產批號】給出問號提示“只能選合格貨位關聯的生產批號”。
6)載入中
- 定義:前端頁面某互動動作請求後端執行資料庫計算,並將計算的過程返回給前端,這一處理過程對使用者的提示。
- 案例:在採購計劃新增頁面點選【提交】後請求後端把資料插入到資料庫中,資料庫成功處理後返回給前端,前端再重新整理列表頁。這一過程對於使用者來說就是點選【提交】後看到Loading提示,載入完成後再看到已經重新整理的列表頁。
7)進度條
- 定義:前端頁面某互動動作請求後端執行資料庫計算(該資料庫計算比較複雜且耗時),並將計算的過程進度返回給前端,這一處理過程對使用者的提示。
- 案例:新增“商品配送價格組”,填寫好必填欄位點選【提交】,這時後端需要把數十萬個商品資料都刷一遍,然後計算出每一個商品的配送價。這一計算過程對於使用者而言就會看到進度條和提示文案“正在為所有商品配置配送價格組,請稍等。。。”
以上就是我在做B端 SaaS產品需求設計時遇到提示類需求的解決辦法,像上面這樣先做好標準化功能、定義好元件,之後在任何一個業務模組需要對應提示時,開發只需要呼叫對應元件然後寫好觸發條件、觸發物件、提示語句、業務邏輯即可。
這樣就不會出現每種業務模組自由寫個性化提示,也就是說做了一個通用、標準的功能,這就是B端 SaaS產品設計的關鍵思維。
作者:中傑,產品經理,細耕於垂直領域wms、erp、SaaS 5年以上,樂於分享實戰經驗,公眾號:wms是怎樣建成的。
本文由 @中傑 原創釋出於人人都是產品經理,未經作者許可,禁止轉載。
題圖來自Unsplash,基於CC0協議。