校驗(yàn)報錯如何設(shè)計更科學(xué)？2個方面幫你輕松搞定！

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

本篇文章將和大家探討校驗(yàn)報錯如何設(shè)計更合理科學(xué)，本文大綱如下：

1. C 端報錯設(shè)計
2. B 端報錯設(shè)計
3. 總結(jié)

1. C 端報錯設(shè)計

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

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

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

但必填項(xiàng)沒操作，置灰處理的設(shè)計方式，僅限于簡單的表單操作。

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

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

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

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

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

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

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

2. B 端報錯設(shè)計

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

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

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

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

對于移動端，使用原位紅字提示這種方式不太行。因?yàn)橐苿佣说谋韱尾季滞ǔＨ缦聢D所示，原位提示沒有空間來展示。

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

3. 總結(jié)

C 端：

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

B 端：

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

歡迎關(guān)注作者的微信公眾號：「Echo的設(shè)計筆記」