在頁面流程中，當用戶沒有進行必填項操作時，點擊操作按鈕，這時候就會出現(xiàn)報錯。那么針對于報錯場景如何設計更合理，更科學呢？

本篇文章將和大家探討校驗報錯如何設計更合理科學，本文大綱如下：

1. C 端報錯設計
2. B 端報錯設計
3. 總結

1. C 端報錯設計

C 端校驗報錯，大部分設計方案為：必填項未填寫時，保存、提交等操作按鈕置灰處理。

如下圖所示，在添加銀行卡流程中，當用戶沒有輸入銀行卡號時，如果用戶點擊下一步，該流程沒辦法繼續(xù)下去，微信設計的邏輯是通過置灰「下一步」按鈕讓用戶不可點，以此來解決報錯校。微信發(fā)照片同理。

上述設計有一個好處，是避免用戶犯錯。如果按鈕為正常可點擊態(tài)，那么用戶有去點擊的概率，這樣會有意或者無意中引導用戶去犯錯。所以目前針對于 C 端報錯設計，大部分采用這種做法。

但必填項沒操作，置灰處理的設計方式，僅限于簡單的表單操作。

當表單填寫較多，如下圖所示，且只有兩個表單是必填項。如果通過置灰按鈕的話，用戶很難直觀的理解到，僅需要填寫兩個必填項，操作按鈕就恢復正常態(tài)。

所以針對 C 端表單復雜的場景，合理的設計是：提交按鈕正常態(tài)，通過 toast 提示報錯的方式去提示用戶。

而針對于格式錯誤校驗，C 端常見的通過 toast 去提示告知用戶，也有類似微信這種 tips 提示，但這種有一個缺點，就是內(nèi)容區(qū)頂部如果有內(nèi)容，會被遮擋住。優(yōu)點則是持續(xù)展示給用戶。

最后讓我們看一個比較特殊的 C 端案例：登錄場景。登錄前，需要用戶手動勾選服務條款和隱私政策。

按照上述說的，登錄按鈕應該置灰，為啥現(xiàn)在主流的登錄按鈕正常態(tài)呢？

因為用戶很難去理解這個操作邏輯關聯(lián)：需要先勾選服務條款和隱私條款，才能完成登錄。
我們作為設計師，能知道這個關聯(lián)關系，也是在設計前產(chǎn)品經(jīng)理或業(yè)務方告訴過我們。

其次登錄場景是 App 最重要的流程之一，所以為了保險起見，將按鈕正常態(tài)，通過 tooltips 去提醒用戶先勾選再登錄，更加保險，讓用戶順利完成操作。

2. B 端報錯設計

B 端一大特點是：需要填寫的表單內(nèi)容多，且有些必填，有些選填。

如果通過按鈕置灰去避免報錯，那么用戶在使用時，要時刻注意哪些必填，用戶認知成本和操作成本高。

對于 B 端 PC 端，最合理的設計是通過原位紅字提示告知用戶。如下圖所示：

這種做法的好處是，提示效率高，一次性就可以將所有的問題告訴給用戶。避免出現(xiàn)重復報錯的情況。

對于移動端，使用原位紅字提示這種方式不太行。因為移動端的表單布局通常如下圖所示，原位提示沒有空間來展示。

采用 tosat 提示會比較好。如下圖，這是支付寶一個表單填寫頁面。

3. 總結

C 端：

1. 簡單的表單操作且業(yè)務好理解的，可以通過操作按鈕置灰，去規(guī)避錯誤報錯。這部分支付寶、微信等主流 App 已經(jīng)教育用戶多年了。
2. 對于業(yè)務邏輯比較難理解的，操作按鈕正常態(tài)，用戶點擊操作按鈕時，通過 toast、tooltips、tips 等方式告知用戶。如登錄等場景。
3. 對于表單填寫量較大，且有的選填，有的必填，則同第 2 點。

B 端：

1. PC 端的話，操作按鈕正常態(tài)，通過原位紅字提示告知用戶。
2. 移動端的話，操作按鈕正常態(tài)，通過 toast 或者 tips 告知用戶。

歡迎關注作者的微信公眾號：「Echo的設計筆記」