防錯(cuò)設(shè)計(jì)一定程度上可以防止使用者操作錯(cuò)誤，而產(chǎn)品設(shè)計(jì)人員可以從用戶操作前、中、后三個(gè)維度入手，搭建產(chǎn)品防錯(cuò)設(shè)計(jì)策略。具體如何操作？本文作者就做了總結(jié)，一起來(lái)看看吧。

咱先講個(gè)段子。

大家應(yīng)該都聽過(guò)葵花寶典的故事吧，講的是一青年男子得到一本絕世秘籍，名喚《葵花寶典》。

翻開第一頁(yè)赫然八個(gè)大字：

“欲練神功，必先自宮”

于是此男子心一橫，手起刀落……然后練就一身絕世神功。

待他翻到秘籍最后一頁(yè)時(shí)，瞠目結(jié)舌，口吐鮮血倒地而亡，沾血的秘籍仍被他緊緊握住，紙上八個(gè)大字：

“若不自宮，也能成功”

悲劇，悲劇！

若這幾個(gè)字寫在第一頁(yè)，哪能如此結(jié)局??！

哈哈哈哈，雖然是我現(xiàn)編的段子……但是你是不是也感受到了防錯(cuò)的重要性，所謂一失足成千古恨~~~

一、什么是防錯(cuò)設(shè)計(jì)？

防錯(cuò)，或者叫做防呆，一種預(yù)防矯正的行為約束手段，運(yùn)用防止錯(cuò)誤發(fā)生的限制方法，讓操作者不需要花費(fèi)注意力、也不需要經(jīng)驗(yàn)與專業(yè)知識(shí)，憑借直覺(jué)即可準(zhǔn)確無(wú)誤地完成的操作。

——維基百科

簡(jiǎn)單講就是防止你犯錯(cuò)的措施。

其實(shí)防錯(cuò)已經(jīng)被應(yīng)用到了各個(gè)領(lǐng)域，下面咱們僅從互聯(lián)網(wǎng)設(shè)計(jì)的角度上來(lái)進(jìn)行敘述。

防錯(cuò)的設(shè)計(jì)方法有哪些？

斷根、保險(xiǎn)、自動(dòng)、復(fù)制等防錯(cuò)原則相信大家也聽過(guò)，分得較細(xì)，我個(gè)人更喜歡把防錯(cuò)設(shè)計(jì)分為三部分：

預(yù)防錯(cuò)誤、糾正錯(cuò)誤、后悔藥。

為什么這么分？

用戶使用軟件的操作過(guò)程分為3個(gè)階段，操作前、操作中、操作后，而對(duì)應(yīng)這三個(gè)階段的防錯(cuò)設(shè)計(jì)方法就是操作前預(yù)防、操作中糾正和操作后的后悔藥。

比起太多的防錯(cuò)法則，我覺(jué)得濃縮成3步更好記憶。

那么下面就從這三個(gè)方面來(lái)講述一些常見(jiàn)的防錯(cuò)設(shè)計(jì)方法。

1. 預(yù)防錯(cuò)誤

預(yù)防錯(cuò)誤意思是讓用戶沒(méi)有機(jī)會(huì)犯錯(cuò)，最典型的如USB接口，老防錯(cuò)案例了，從接口形狀上就把犯錯(cuò)的可能性給杜絕了。

產(chǎn)品設(shè)計(jì)中如何預(yù)防錯(cuò)誤？可以從禁用和限制下手。

1）禁用

不可選的操作直接置灰處理，讓你一眼就知道是不可用的，最常見(jiàn)的比如登錄時(shí)未輸入信息時(shí)按鈕置灰。

但是這里需要注意一點(diǎn)，當(dāng)我們遇到較長(zhǎng)的表單時(shí)，最好不要使用置灰處理方式。

表單較長(zhǎng)，意味著信息可能超過(guò)手機(jī)一屏外，當(dāng)用戶漏填時(shí)需要上下滾動(dòng)來(lái)尋找自己未填寫的信息。如果采用置灰處理，會(huì)讓用戶很難找到自己到底是哪一項(xiàng)未填寫。

建議的處理方式是按鈕可點(diǎn)擊，點(diǎn)擊后若有必填項(xiàng)為空，則焦點(diǎn)定位到該選項(xiàng)提示用戶填寫信息。

2）限制

針對(duì)一些特定的格式，在用戶操作前就進(jìn)行強(qiáng)制的限制，舉三個(gè)案例：

1. 輸入手機(jī)號(hào)時(shí)限制只能輸入11位數(shù)字。
2. 抖音拍視頻時(shí)設(shè)置預(yù)告卡片的位置的設(shè)計(jì)中，限制了卡片的操作區(qū)域。
3. 有時(shí)長(zhǎng)要求的短視頻，在裁剪時(shí)限制了時(shí)長(zhǎng)，用戶如何裁剪都不會(huì)超過(guò)時(shí)長(zhǎng)。

2. 糾正錯(cuò)誤

糾正錯(cuò)誤指的是用戶在操作過(guò)程中犯了錯(cuò)或者即將犯錯(cuò)時(shí)，可以幫助用戶糾正錯(cuò)誤，可以提示用戶讓用戶“知錯(cuò)”就改，也可以讓系統(tǒng)識(shí)別錯(cuò)誤后幫助用戶改錯(cuò)。

下面從提示糾錯(cuò)和自動(dòng)糾錯(cuò)兩方面來(lái)舉例。

1）提示糾錯(cuò)

提示糾錯(cuò)是最常見(jiàn)的糾錯(cuò)方式，此方式效果較好且開發(fā)成本較低，所以在產(chǎn)品設(shè)計(jì)中使用的最多。

提示糾錯(cuò)主要采用三種方式，提示程度從弱到強(qiáng)依次為：原地確認(rèn)、彈窗確認(rèn)、輸入文字確認(rèn)。

原地確認(rèn)：干擾性最弱，用戶使用時(shí)流暢度最好，若用戶操作后不會(huì)出現(xiàn)很嚴(yán)重的后果可以使用此方法。

彈窗確認(rèn)：干擾性中等，最常見(jiàn)的確認(rèn)方式，大多數(shù)時(shí)候使用模態(tài)彈窗，對(duì)使用流程有阻斷效果，用戶必須完成彈窗的選擇后方能進(jìn)行下一步。

輸入文字確認(rèn)：比較少見(jiàn)，常用于刪除重要信息時(shí)的確認(rèn)操作，例如刪除飛書的知識(shí)庫(kù)時(shí)需要輸入知識(shí)庫(kù)的名稱進(jìn)行二次確認(rèn)，對(duì)于刪除知識(shí)庫(kù)此類的大量數(shù)據(jù)時(shí)需要慎重再慎重，若使用一般的確認(rèn)彈窗則可能出現(xiàn)用戶由于習(xí)慣而導(dǎo)致的手滑誤刪，給用戶造成不可挽回的損失。

我曾經(jīng)就因?yàn)槟硞€(gè)產(chǎn)品沒(méi)有做這樣嚴(yán)格的確認(rèn)導(dǎo)致我刪除了我的整個(gè)知識(shí)賬戶的情況，當(dāng)時(shí)可真是心痛到無(wú)以復(fù)加，還聯(lián)系了客服詢問(wèn)是否能找回?cái)?shù)據(jù)，得到的答復(fù)是不能，到現(xiàn)在還心有余悸。

你可能會(huì)疑惑，既然你知道這個(gè)操作危險(xiǎn)，為什么要去點(diǎn)擊刪除這個(gè)按鈕？

這涉及到人類心理學(xué)范疇，可不要小瞧了人類的好奇心，尤其是對(duì)未知危險(xiǎn)的好奇心，看看懸疑影視劇里的主人公為什么不聽勸偏偏要去尋找黑暗中的不明動(dòng)靜就知道，好奇心總會(huì)驅(qū)使人們?nèi)プ鲆恍拔ｋU(xiǎn)”的事情。

而產(chǎn)品設(shè)計(jì)要做的事情，不是阻斷用戶的好奇心，而是在用戶激發(fā)自己好奇心的時(shí)候幫助他不犯錯(cuò)。

3. 自動(dòng)糾錯(cuò)

自動(dòng)糾錯(cuò)需要更多的開發(fā)成本，所以不是每個(gè)產(chǎn)品都能做到自動(dòng)糾錯(cuò)，下面列舉幾個(gè)常用的自動(dòng)糾錯(cuò)的設(shè)計(jì)方法。

微信公眾號(hào)中編輯文章時(shí)，若有疑似錯(cuò)別字的時(shí)候，會(huì)提示當(dāng)前錯(cuò)別字的數(shù)量，點(diǎn)擊可以跳轉(zhuǎn)到錯(cuò)別字的位置，方便編輯者進(jìn)行修改。??

二、后悔藥

所謂“后悔藥”指的是當(dāng)用戶犯錯(cuò)后，給予他挽回錯(cuò)誤的余地，最常見(jiàn)的做法有兩種：撤銷操作和回收站。

• 撤銷操作：例如電腦上刪除文檔后可以按住control+Z進(jìn)行撤銷操作，釘釘發(fā)送消息后可撤回重新編輯。
• 回收站：基本上是文檔類產(chǎn)品的標(biāo)配，第一次刪除只是軟刪除，相當(dāng)于把文件移入“回收站”這一文件夾，刪除回收站內(nèi)的文件時(shí)才是最終的刪除。

這也是為什么有些產(chǎn)品允許用戶在第一次刪除時(shí)不給予二次提示，回收站內(nèi)刪除時(shí)才進(jìn)行二次確認(rèn)，這種設(shè)計(jì)方式可以讓用戶操作上更加流暢。

三、如何把握防錯(cuò)的度？

最后聊一聊防錯(cuò)設(shè)計(jì)的邊界，過(guò)度防錯(cuò)反而會(huì)成為用戶完成任務(wù)的阻礙。

在實(shí)際工作中我們不能完全照搬設(shè)計(jì)法則，需要結(jié)合業(yè)務(wù)和場(chǎng)景來(lái)進(jìn)行考慮，也就是“因地制宜”。

那么如何判斷邊界在哪里呢？

我的判斷標(biāo)準(zhǔn)就一個(gè)：

如果可挽回，就盡量不阻斷用戶的流程。

其實(shí)大部分情況下，只要是可挽回的操作，阻斷用戶的流程實(shí)在大可不必，阻斷在很多時(shí)候會(huì)干擾用戶的心流。

為什么很多人覺(jué)得蘋果的使用很流暢？

其實(shí)未必是它物理反應(yīng)時(shí)間快，而是它讓你感覺(jué)阻斷少，只要能挽回就不打斷你的操作。