在頁面流程中，當用戶沒有進行必填項操作時，點擊操作按鈕，這時候就會出現報錯。那麼針對於報錯場景如何設計更合理，更科學呢？本篇文章將和大家探討校驗報錯如何設計更合理科學，本文大綱如下：1、C端報錯設計C端校驗報錯，大部分設計方案為：必填項未填寫時，保存、提交等操作按鈕置灰處理。如下圖所示，在添加銀行卡流程中，當用戶沒有輸入銀行卡號時，如果用戶點擊下一步，該流程沒辦法繼續下去，微信設計的邏輯是通過置灰「下一步」按鈕讓用戶不可點，以此來解決報錯校。微信發照片同理。
上述設計有一個好處，是避免用戶犯錯。如果按鈕為正常可點擊態，那麼用戶有去點擊的概率，這樣會有意或者無意中引導用戶去犯錯。所以目前針對於C端報錯設計，大部分採用這種做法。
但必填項沒操作，置灰處理的設計方式，僅限於簡單的表單操作。當表單填寫較多，如下圖所示，且只有兩個表單是必填項。如果通過置灰按鈕的話，用戶很難直觀的理解到，僅需要填寫兩個必填項，操作按鈕就恢復正常態。所以針對C端表單複雜的場景，合理的設計是：提交按鈕正常態，通過toast提示報錯的方式去提示用戶。而針對于格式錯誤校驗，C端常見的通過toast去提示告知用戶，也有類似微信這種tips提示，但這種有一個缺點，就是內容區頂部如果有內容，會被遮擋住。優點則是持續展示給用戶。最後讓我們看一個比較特殊的C端案例：登錄場景。登錄前，需要用戶手動勾選服務條款和隱私政策。
按照上述說的，登錄按鈕應該置灰，為啥現在主流的登錄按鈕正常態呢？因為用戶很難去理解這個操作邏輯關聯：需要先勾選服務條款和隱私條款，才能完成登錄。我們作為設計師，能知道這個關聯關係，也是在設計前產品經理或業務方告訴過我們。其次登錄場景是App最重要的流程之一，所以為了保險起見，將按鈕正常態，通過tooltips去提醒用戶先勾選再登錄，更加保險，讓用戶順利完成操作。2、B端報錯設計B端一大特點是：需要填寫的表單內容多，且有些必填，有些選填。如果通過按鈕置灰去避免報錯，那麼用戶在使用時，要時刻注意哪些必填，用戶認知成本和操作成本高。對於B端PC端，最合理的設計是通過原位紅字提示告知用戶。如下圖所示：
這種做法的好處是，提示效率高，一次性就可以將所有的問題告訴給用戶。避免出現重複報錯的情況。
對於移動端，使用原位紅字提示這種方式不太行。因為移動端的表單布局通常如下圖所示，原位提示沒有空間來展示。採用tosat提示會比較好。如下圖，這是支付寶一個表單填寫頁面。
3、總結1、簡單的表單操作且業務好理解的，可以通過操作按鈕置灰，去規避錯誤報錯。這部分支付寶、微信等主流App已經教育用戶多年了。2、對於業務邏輯比較難理解的，操作按鈕正常態，用戶點擊操作按鈕時，通過toast、tooltips、tips等方式告知用戶。如登錄等場景。3、對於表單填寫量較大，且有的選填，有的必填，則同第2點。1、PC端的話，操作按鈕正常態，通過原位紅字提示告知用戶。2、移動端的話，操作按鈕正常態，通過toast或者tips告知用戶。
留言列表
留言列表