一條提示資訊的N種表現方式

編輯導語：本篇文章聚焦在校驗規則及提示資訊，幫助新手B端體驗設計師快速瞭解提示資訊的觸發規則及注意事項，搭配複雜案例助力融會貫通。歡迎感興趣的小夥伴們一起閱讀分享。

業務性強，內容複雜度高是ToB產品的典型特徵。

當用戶需要在產品流程中錄入大量資料資訊時，業務本身的複雜性會大大增加錄入成本

。

作為體驗設計師，透過

系統引導性提示

和

校驗性提示資訊

幫助使用者快速完成工作是我們的職責所在。下面我們一起來看看複雜的校驗性提示資訊如何去做：

一、提示資訊存在的必要性

提示資訊是系統與使用者之間資訊反饋的載體，告知使用者當前操作的可行性，減少操作損失，引導使用者進行。

提示資訊是反饋元件的一部分，屬於反饋元件，但不包含所有的反饋元件。

因為只有在錄入內容出現報錯、阻斷時才需要提示資訊。

1。 B端產品的校驗規則為什麼複雜？

C端產品的提示資訊除了提示以外還起到安撫使用者的作用，適當進行情感化的設計幫助留住使用者。

而

B端提示資訊只有在必要時才會展示，能不要提示儘量不要提示，不要給使用者額外的“負擔”，提升工作效率和使用效率才是我們的目標。

所以提示資訊的設計需要謹慎，謹慎的事情必然伴隨一定的複雜性。

2。 常見的校驗規則

提示資訊分為系統性提示和校驗性提示

，我們這次只針對校驗性提示進行講解。

提示資訊跟隨校驗結果出現，本質上也是一種資訊反饋。

3。 基本原則

資訊校驗一般分為前端校驗和後端校驗

。舉個例子，前端校驗就像我們登入郵箱，輸入了密碼，主觀判斷輸入正確，但是提交後發現後輸入錯誤。如果這裡系統強制要求是12位數密碼，你只輸入了11位，那麼這裡提示：“請輸入12位數的登入密碼”就屬於前端校驗，而提交後提示的：“賬號或密碼錯誤”是屬於後端校驗。

前端校驗常見的有：

欄位校驗、必填項校驗、完成度校驗、產品業務資料校驗等等

。比如電話號碼少填寫一位數、必填內容未完成、一共三個步驟只填寫了兩步。

當產品業務資料校驗放在前端去做時，多半是因為校驗內容過多，想給後端校驗跑資料時減輕壓力

，將一些簡單的業務功能性校驗放在前端去做。但是這裡要注意，要跟前端工程師溝通好，並不是所有內容都適合放在前端進行校驗的。

後端校驗涉及到

使用者資訊確認、業務資料確認等需要跑通資料庫的校驗內容

。

常見的比如保險理賠中我們報案提交理賠的時間，不能早於事故發生的日期，這方面的資料儲存於後端資料庫，所以需要後端調取資料進行核實才能出校驗結果。

4。 提示資訊的出現順序

校驗步驟的基本規則是

先前端校驗，再後端校驗

。基礎內容完成後，再進行復雜資訊的校驗。

校驗出現以下3種情況，才會對應展示提示資訊：

（1）Error錯誤類

具有強打斷性，如果錯誤內容未做修改，是不能繼續提交進行下一階段的，所以Error類是最先進行報錯並提示的。

（2）提示無需確認

不會被強制打斷，但是會作為普通提示告知使用者。比如我們在校驗使用者身份資訊時，會根據使用者提供的證件型別來判斷校驗的內容，若使用者未填寫，需要提示使用者必須先錄入證件資訊才能編輯其他內容。

（3）提示需要確認

具有打斷性，這時的提示資訊一定要給出使用者明確提示，以及提交儲存或確認後影響的內容。因為強打斷，所以需謹慎。但是也不用畏手畏腳，該提示的必須提示，掌握好這個分寸。

前端校驗與後端校驗提示資訊出現的順序基本一致

：Error錯誤類 – 提示需確認&提示無需確認，

只是前端無法呼叫複雜資料只能做簡單的欄位校驗，而後端校驗涉及到的是資料庫儲存的內容資訊。

二、校驗提示的三類情況及表現形式

校驗後的提示資訊一般伴隨使用者錄入資訊頁面時出現（互動三原則之一：操作後有反饋），

錄入過程又分為錄入中校驗和階段提交校驗

；

提示資訊也分為需要確認和無需確認兩種情況

。下面是綜合兩者進行的三種形式分類：

1。 錄入過程中，提示無需確認

當資訊錄入中，有些小錯誤給使用者簡單的提示即可。比如“需要錄入身份證資訊，才能檢視您的使用者資料”，這時候給一個全域性提示，不需要用彈窗、氣泡卡片這種打斷性強的內容。

（1）提示無需確認使用的反饋元件

① 警告提示

基本定義和使用規則：

展示需要關注的資訊，適用於簡短的警告提示。有使用者操作觸發或系統觸發兩種情況。警告提示有四種樣式，帶有底色，顏色更能吸引人的注意力，所以

警告提示的內容優先順序一般高於全域性提示。

為什麼用：

警告的資訊的內容需要被使用者確認，它會以非模態的展現形式，始終展現，不會自動消失，使用者需要點選才能關閉。（根據業務產品需求，也會出現3s自動消失的情況，根據情節而定）

② 全域性提示

基本定義和使用規則：

由使用者的操作觸發的“輕量級”全域性反饋。預設3秒即消失

何時使用：

用來提供成功、警告和錯誤等反饋資訊，而且不會打斷使用者的操作。

顯示位置：

頁面頂部居中

2。 錄入過程中，提示需確認

比如列表中的“刪除”按鈕，使用者有可能不小心點選，這時候給一個氣泡卡片，二次確認即可。

比如使用者即將離開頁面，但修改內容未做儲存時，給使用者二次確認，減少誤操作的損失。

需要確認的原因：減少使用者誤操作、操作聯動、影響使用者下一流程的內容。

（1）提示需確認常用的反饋元件

① 氣泡卡片

基本定義和使用規則：

點選後觸發，彈出氣泡式的確認框

何時使用：

氣泡確認框是一種輕量的反饋方式，承載的內容也相對較少。主要用於二次確認操作。對比較為常規的對話方塊二次確認，氣泡確認框從形式上更輕量，干擾更小，控制元件的開啟關閉方式也更為便捷。

顯示位置：

跟隨內容展示，有12個方向供選擇

② 通知提醒框

基本定義和使用規則：

用於向用戶反饋重要的警告提示和通知訊息。

何時使用：

一般用於系統級通知，需要吸引使用者關注但又不強制使用者去處理的場景。當訊息出現時，使用者可以選擇繼續當前操作，也可以選擇處理當前訊息。因為是系統級通知，所以顯示位置也不用跟隨操作，在指定的位置展示即可。

顯示位置：

頁面右上角

③ 對話方塊（彈窗）

基本定義和型別：

對話方塊是模態形式的浮層，在當前頁面開啟後承載相關操作。因為會中斷使用者當前的任務流程，所以需要謹慎使用，一般用於快捷且不需要頻繁操作的任務，滿足使用者執行操作且不離開當前頁面。

對話方塊的型別有三種：功能對話方塊、確認對話方塊、訊息提示對話方塊。

功能對話方塊：

涉及到平臺內容的錄入，資訊較為複雜，還會伴隨步驟和反饋等等。

今天我們主要講的是提示資訊相關的反饋，也就是確認對話方塊、訊息提示對話方塊這兩種。

何時使用：

要求使用者立即響應、通知使用者緊急資訊、確認使用者決定時使用。

顯示位置：

頁面上下左右居中

④ 抽屜頁面

抽屜頁還能承載提示資訊？

沒錯！

有時會因為業務的複雜關聯性導致一個任務提交，觸發多種校驗提示

。彈窗已經不能滿足我們內容承載，我們需要使用抽屜頁面來承載大量的提示資訊，而且伴隨分類和不同的提示話術。最後的案例會具體講。

3。 階段性提交，提示需確認

提交成功

，給一個彈窗（對話方塊）明確告知使用者已成功提交，必要時配圖，培養使用者的操作習慣和對品牌的感知。但這僅僅是用於多步驟錄入或大量資訊錄入時使用，簡單的錄入不需要這樣“聲勢浩大”的提交反饋。

提交失敗

，給出明確的錯誤原因和錯誤引導。如果錯誤內容數量多，種類多，可進行分類展示。

（1）階段性提交，提示需確認常用的反饋形式

當商戶入駐蝦皮，需要填寫關於個人身份、店鋪詳情等資訊，分步驟填寫並提交儲存時，視為階段性提交。

當然這只是比較簡單的形式，

相信很多B端從業的夥伴們都見過超長表單，當表單過長，系統進行階段性提交就會觸發比較多的提示資訊

。

所以下面講解的是常見的三種階段性提交，系統反饋的提示資訊型別：

① 只觸發一項內容需要校驗並修改時 – 單條資訊 – 對話方塊

② 觸發一項以上內容需要校驗 – 多條資訊對話方塊聚合

用總結性話術，幫助使用者確認所有提示資訊，比如【具體修改內容描述，可自定義的一句話】修改影響以下內容，是否確認？

③ 內容過多需要逐個確認- 用抽屜頁面承載 – 同時考慮是否一個摺疊入口

根據業務訴求，有2點體驗細節需要考慮：

內容過多，使用者需要一一檢視，有時無法一次性確認，可以給一個摺疊入口，方便使用者再次確認

但是使用者每次提交都會給出最新的校驗後提示資訊，所以“摺疊入口”也不是非要有，根據業務需求來決定

以上是提示資訊常用的反饋元件，下面這張圖是關於反饋的強度和提示時間的對比：

三、資訊反饋的設計原則

1。 輕量化

關於輕量化，不得不提的是非模態提醒。那麼模態與非模態又有什麼區別呢？

（1）模態

使用者在完成任務的過程中，介面會出現彈窗打斷使用者的操作行為

，使用者必須透過主動點選才可以進行下一步操作，這即是模態彈窗。

① 優點

模態彈窗通常能較好的獲取使用者的視覺焦點

，並透過承載的內容、按鈕主次層級來引導使用者完成他們的需求，這也會根據使用者、產品側重點的不同，彈出樣式也有所不同。

常見的模態彈窗有對話方塊、動作欄、抽屜…等。

② 缺點

模態是一種強打斷的形式

，直接打斷使用者錄入的過程非常“不禮貌”，會導致使用者反感，若非必要情況下不要使用。

非必要不模態。

（2）非模態

相比模態彈窗，非模態提示較為輕量，觸發後以一種非阻礙的的方式呈現，不會打斷使用者的當前操作，

主要是給予使用者即時反饋，讓使用者清楚應用當前的互動後狀態。

優點：

非模態彈窗不強制使用者操作，根據反饋資訊的重要程度及意願，可在一定的時間內自動消失，也可等待使用者操作後消失。

（3）常見非模態

前面我們講過的氣泡卡片、全域性提示、警告提示都是常見的非模態提示。

2。 精準化

（1）文案清晰

引導文案一定要清晰有效，不要說了半天使用者無法理解。

（2）目標清晰

我們需要幫助使用者完成目標，直接給出“友好”的目標提示。

（3）引導清晰

對於複雜業務場景，給出“新手引導”式有指向性的提示，幫助使用者理解、方便使用者操作。

3。 高效化

（1）節省時間

能在前端校驗的內容不要放到後端校驗，減少後端校驗時的反饋時間。

（2）聚合反饋

能一次提示清楚內容不要分多個反饋元件出現，會讓“眼花繚亂”無法識別。

（3）讀取效率

能分類的、能明確錯誤模組的一定要給到，方便使用者快速定位錯誤區域。

四、複雜案例帶練

說了這麼多，可能還是有點懵，下面我有一個複雜案例帶大家拆解。

案例介紹：

業務特點

：流程型業務，涉及多個操作角色，每一環節疊加內容

內容特點

：複雜表單錄入，涉及內容聯動，“牽一髮而動全身”

涉及模組

：頁面錄入、觸發編輯態錄入、抽屜錄入

1。 模組儲存-校驗規則/互動規範

點選“修改”，啟用模組內容，內容由只能檢視，變為可以編輯的狀態

當內容有修改時，點選“取消”觸發前端校驗，給使用者一個氣泡確認的反饋，告知使用者有內容未儲存

點選“儲存”，觸發後端校驗，後端校驗需要時間（一般不超過5s）

這時“儲存”變成“載入狀態”，“取消”按鈕不可點選

提示需求確認的資訊使用“全域性提示”給使用者反饋

2。 阻斷類：校驗提示資訊

阻斷：不修改正確無法繼續進行下一步流程。這時候我們的提示資訊要給出明確指導提示。

3。 抽屜提交/儲存-校驗規則/互動規範

使用抽屜頁錄入資訊並提交或儲存時，一般有兩種結果，成功或失敗。儲存成功的反饋比較簡單我們就不細講了。

提交成功/儲存成功

：關閉彈窗並給到全域性提示

而提交失敗含有兩種情況：

第一種情況：校驗出錯誤，需要修改後重新提交

第二種情況：無錯誤資訊，但是有些內容修改會出現聯動變化，需要使用者進行確認才能儲存。

當提示資訊有且只有一條，用一個對話方塊進行展示：

若提示需確認資訊超過2條，使用抽屜聚合。透過資訊分類和專業的話術方案幫助使用者決策。

4。 頁面提交/儲存-校驗規則/互動規範

錄入資訊超過一屏，在進行儲存提交時，如果觸發超過2條及以上的報錯、提示資訊，我們會用抽屜頁面去展示。依然保持錯誤型別、內容模組的分類。

錯誤型別

：普通提示、需確認

內容模組：

基本資訊、賬戶資訊、支付資訊等錄入時涉及到的具體模組

提示資訊內容

：文案話術儘可能的簡潔易懂，做到多一個字少一個字都會影響閱讀的程度

五、文章總結

B端互動體驗的魅力在於“解決問題，提升操作效率，降低工作成本”

，但常常因為業務本身的複雜性而屢屢受挫。

就像我們之前可能認為“很簡單”的提示資訊和校驗規則，在跟產品經理、前後端小夥伴們討論拆解中竟也能發現如此多需要注意的細節點。

下面我嘗試用3句話總結文章重點：

校驗順序：先前端再後端。

提示規則：阻斷類先行；提示無需確認隨時可能出現；提示需確認必須出現。

提示資訊在校驗後出現，結合業務需求考量，使用操作效率更高的的反饋元件，非必要不出現。

本文由 @EllieOne 原創釋出於人人都是產品經理，未經許可，禁止轉載

題圖來自Unsplash，基於CC0協議。