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

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

1. C 端報(bào)錯(cuò)設(shè)計(jì)
2. B 端報(bào)錯(cuò)設(shè)計(jì)
3. 總結(jié)

1. C 端報(bào)錯(cuò)設(shè)計(jì)

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

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

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

但必填項(xiàng)沒(méi)操作，置灰處理的設(shè)計(jì)方式，僅限于簡(jiǎn)單的表單操作。

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

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

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

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

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

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

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

2. B 端報(bào)錯(cuò)設(shè)計(jì)

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

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

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

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

對(duì)于移動(dòng)端，使用原位紅字提示這種方式不太行。因?yàn)橐苿?dòng)端的表單布局通常如下圖所示，原位提示沒(méi)有空間來(lái)展示。

采用 tosat 提示會(huì)比較好。如下圖，這是支付寶一個(gè)表單填寫(xiě)頁(yè)面。

3. 總結(jié)

C 端：

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

B 端：

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

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