由于后臺產(chǎn)品往往具有復雜交互邏輯，因此相比于前端產(chǎn)品更容易發(fā)生操作錯誤，所以其容錯性設計就顯得更為重要。

容錯性是什么？

容錯這個詞嚴格來說應當是計算機領域的詞匯，如果以比較標準化的描述來定義的話，容錯指的是：

“當計算機由于種種原因在系統(tǒng)中出現(xiàn)了數(shù)據(jù)、文件損壞或丟失等等其他故障問題的時候，系統(tǒng)能夠自動將這些損壞或丟失的文件和數(shù)據(jù)恢復到發(fā)生事故以前的狀態(tài)，使系統(tǒng)能夠連續(xù)正常運行的一種技術(shù)?！?/p>

這個聽著有點繞口，其實簡單來說，就是當計算機故障發(fā)生或者存在的情況下，計算機系統(tǒng)依然可以正常工作的能力，這就是計算機的容錯能力。容錯性其實就是可用性之中細分的一個模塊，是專門針對用戶在使用產(chǎn)品的過程中如何避免出錯以及一旦出錯如何盡快有效的糾錯的研究和設計。

容錯包含產(chǎn)品防止錯誤的程度和幫助用戶從錯誤中恢復。防止錯誤是通過頁面的設計、重組或特別安排，防止用戶出錯。比出現(xiàn)錯誤信息提示更好的是更用心的設計防止這類問題發(fā)生。糾錯設計就是當錯誤發(fā)生時，人們看到的界面，并且提出一個建設性的解決方案。就像對付不該發(fā)生的錯誤一樣，容錯性設計的關(guān)鍵在于“做好防御”。產(chǎn)品設計者們必須不斷尋找可能造成用戶困惑和不滿的出錯點。好的防御性設計決定用戶體驗的好壞。

為什么強調(diào)后臺產(chǎn)品的容錯性設計 ?

后臺產(chǎn)品和前端產(chǎn)品存在很大的差異性。后臺多為復雜型交互邏輯，有多分支功能頁面多功能交互能力，后臺產(chǎn)品更加注重的是業(yè)務邏輯的清晰和功能的實現(xiàn)，而前端產(chǎn)品對視覺設計和交互設計有更高的要求。

一個完備的后臺可能會包括多種類型或者不同權(quán)限的用戶，在不熟悉業(yè)務情況下會產(chǎn)生已知未知錯誤或誤操作等行為。很多后臺功能復雜 功能之間很多時候并非完全割裂互相交織的，粗暴的將功能堆積在一起自然不太合適，影響用戶的操作體驗。

容錯性的設計分析：

1、操作前-提醒防錯

1）詳盡的說明文字且引導和提示，突出表現(xiàn)

主要是針對新用戶，目的是為了正確引導用戶學習使用。引導和提示要突出表現(xiàn)，從而引起用戶關(guān)注，確保用戶在操作前能注意到引導或提示信息。

輸入框填寫說明可以讓用戶很容易清晰的識別具體填寫內(nèi)容。

2）當結(jié)果不可逆的時候，詢問用戶讓其知道操作的后果

在用戶操作前即給出正確且有效地引導和提示，有助于減少錯誤發(fā)生的可能性。如 對于比較重要的操作，需要通過二次確認減少錯誤的發(fā)生。

2、操作中-實時提示&實時反饋

1）給用戶的操作進行提醒

在后臺眾多需要填寫表單當中，當鼠標聚焦在某一個操作區(qū)域時如果沒有明確的預提醒，則容易引起誤操作。

2）對用戶的信息輸入進行視覺化呈現(xiàn)，并提供回饋

數(shù)據(jù)錄入是后臺交互設計中最為重要的元素之一。對用戶輸入的信息進行實時檢驗，并給用戶傳遞回饋，在下面這個案例中，當用戶輸入自己的郵件信息之后，即被告知用戶這個動作的含義，到底是輸入正確還是輸入錯誤。

拿1688評價功能來舉例，輸入評價內(nèi)容時評價所允許字數(shù)會隨著輸入內(nèi)容逐個減少，實時的聯(lián)動表達狀態(tài)并提供反饋，并且這個操作也提升了用戶直接的操作感，然后讓用戶看到自己的操作結(jié)果。

3）適當限制用戶的某些交互操作

可以對一些可能造成錯誤的操作入口設置障礙或直接禁止操作，以避免錯誤的發(fā)生。舉個例子：填寫完一個模塊內(nèi)容，展開另一模塊的同時收起上一個模塊。填寫過程限制用戶某些操作這樣始終讓用戶聚焦在當前內(nèi)容。

3、操作后-結(jié)果反饋&糾正引導

1）錯誤發(fā)生時，即使反饋錯誤并提供糾錯幫助

反饋錯誤及時就能保證用戶每個階段的操作都能得到回饋，避免因為一個小的錯誤就要修改相關(guān)聯(lián)的一系列內(nèi)容的情況，提高成功完成任務的效率；反饋不僅要指出有錯，還要指出錯在哪里。錯誤反饋文案要清晰、準確，這樣便于用戶了解錯誤的原因，方便下一步的修改。

2）允許用戶犯錯，并使操作者能夠撤銷以前的指令

Phone手機的還原功能，可以在用戶出錯時將多種功能設置快速還原到原始狀態(tài)。

用戶選購完商品后完成下單，可以通過“關(guān)閉交易”取消該訂單。

3）不僅要反饋出錯更要給用戶解答，給予用戶適當指引和建議

在發(fā)布供應產(chǎn)品中完成發(fā)布信息的編輯添加，點擊“商品發(fā)布”按鈕，如果有錯誤發(fā)生 會在發(fā)布導航中提醒用戶并告知用戶導致發(fā)布不成功的原因。再比如：檢測發(fā)布商品質(zhì)量時，會提示該offer的質(zhì)量星級以及給用戶優(yōu)化的內(nèi)容指引與建議等。

4）允許用戶犯錯，且?guī)椭m正錯誤

當用戶操作出現(xiàn)錯誤時允許用戶犯錯，且?guī)椭鷮㈠e誤的信息糾正同步給用戶。拿1688搜索來舉例：用戶想搜索“連衣裙”這類商品，但輸入時用戶輸入成“連衣”，系統(tǒng)允許用戶輸入錯誤并且?guī)椭脩艏m正為正確字段。

除了上面講的設計點以外其他重要的設計方法

1、 費茨定律

Fitts定律其實很容易理解的。顯然，指點設備的當前位置和目標位置相距越遠，我們就需要越多的時間來移動；而同時，目標的大小又會限制我們移動的速度，因為如果移動得太快，到達目標時就會停不住，因此我們不得不根據(jù)目標的大小提前減速，這就會減緩到達目標的速度, 延長到達目標的時間。

目標越小，就需要越早減速，從而花費的時間就越多。通俗點講：任意一點移動到目標中心位置所需時間與該點到目標的距離和大小有關(guān)，距離越大時間越長，目標越大時間越短。

菲茨定律的啟示：

1. 按鈕等可點擊對象需要合理的大小尺寸。
2. 屏幕的邊和角很適合放置像菜單欄和按鈕這樣的元素，因為邊角是巨大的目標，它們無限高或無限寬，你不可能用鼠標超過它們。即不管你移動了多遠，鼠標最終會停在屏幕的邊緣，并定位到按鈕或菜單的上面。
3. 出現(xiàn)在用戶正在操作的對象旁邊的控制菜單（右鍵菜單）比下拉菜單或工具欄可以被打開得更快，因為不需要移動到屏幕的其他位置。

2、提供非模態(tài)的反饋，不打斷任務流

模態(tài)是指界面中只有提醒彈框才具有可交互行為，其他一切都不可操作；非模態(tài)不會把提醒做成彈框，可能會處理成List Notification, Toast list等方式來提醒用戶。

3、 視覺情感化

心理學把情感定義為：

“人對客觀現(xiàn)實的一種特殊反映形式，是人對于客觀事物是否符合人的需要而產(chǎn)生的態(tài)度的體驗”。

而設計的目標則是在用戶接觸和使用產(chǎn)品的過程中，激發(fā)用戶的正向情感，比如愉快，信任，滿足；避免用戶產(chǎn)生負向情感，比如失望，挫折感，痛苦。正向的情感會使用戶更樂于使用產(chǎn)品，遇到使用過程的一些小問題也更加包容。

舉個例子：網(wǎng)絡問題導致加載數(shù)據(jù)失敗404頁面，通過友情提示動畫的情感表達，這種情感化的語言也能舒緩出錯時給人帶來的失望，挫折感。

作者：何文銓

來源：U一點