禁用功能那些事

編輯導讀：在填問卷或者使用產品的時候，為了避免一些無法預計的系統錯誤和損失，系統在使用者提交空值或不符合系統規則的資料時，會禁止使用者某些操作，達到預防「慘案」發生的效果。本文作者圍繞禁用功能，談談它的設計，希望對你有幫助。

不知道大家在使用產品的時候，有沒有碰到過，明明是可以點選的按鈕，但怎麼點選都沒有反應，然後就一直停在那個頁面什麼都做不了，如下圖：

頁面的內容都已填寫完整，但點選「下一步（預覽）」時就是沒反應；

之後向上翻看了一下，發現還有兩個必填項沒有填寫；其實點選「下一步（預覽）」時輸入框有提示，但因為沒有翻到有提示語的頁面，使用者以為沒有反應，會感到困惑。

那這種情況產品要如何處理呢？我覺得有以下兩種方案：

方案一：必填項未填寫完整時，「下一步（預覽）」按鈕禁用/隱藏；

只有在必填項都填寫完整時，才會將按鈕變成可點選的狀態；這種方案的好處是可以避免使用者誤觸沒有效果的按鈕；

但需要注意的是，有可能使用者一直無法將按鈕變成可點選的狀態，讓使用者感到迷茫，所以在使用者點選禁用按鈕時，要給出提示語，引導使用者繼續操作；

方案二：「下一步（預覽）」按鈕一直保持可點選的狀態，當有必填項未填時，點選按鈕在當前頁給出提示，或定位到有問題的頁面；

只有在必填項都填寫完整時，點選按鈕才會進入下一步；這種方案的好處是使用者做出動作後都能及時收到反饋，系統業務流程清晰；

兩種方案都能幫助使用者達成目的，但是第二種方案對使用者來說，體驗更好，流程更清晰；在需要引導使用者完成既定流程時，直接展示可操作按鈕比禁用的方案更好。

一、禁用功能

禁用，為了避免一些無法預計的系統錯誤和損失，系統在使用者提交空值或不符合系統規則的資料時，會禁止使用者某些操作，達到預防「慘案」發生的效果；通常以禁用，隱藏的形式呈現；

以表單填寫為例，為了避免使用者轉錯賬戶，導致雙方損失財產，系統在使用者沒有按規則填寫銀行卡持有人和銀行卡號時，會禁止操作下一步，即使填寫了也需要校驗成功後才會進行轉賬，達到提前阻止問題發生；

來看幾個常見的實際案例吧，想必大家都有發過簡訊，但有沒有注意過傳送按鈕的狀態變化呢？什麼時候不能傳送，什麼時候能傳送，為什麼要這樣處理？

IOS系統簡訊功能：

在沒有輸入任何內容和只輸入了簡訊的時候，傳送按鈕是禁用的，說明目前還不能傳送簡訊；當只輸入收件人時，傳送按鈕變成了可點選的狀態，但實際點選是沒有反應的；

安卓系統簡訊功能：

與ios系統不同的是，在只輸入收件人時，傳送按鈕仍是禁用狀態；反之，只輸入簡訊內容時，傳送按鈕是可點選狀態，點選後會提示「請新增收件人」；

不同的系統收發簡訊的流程都是一樣，由A編輯簡訊，通過通訊基站B，讓C收到簡訊；

假設，有收件人手機號碼，但是簡訊內容為空，那麼A會發送簡訊，C會接收到一條內容為空的簡訊；

假設，沒有收件人手機號碼，那麼A會發送簡訊，B會接收到簡訊，但C不會接收到簡訊；

A->B->C 以及 a->b 這兩個過程都會耗費網路資源和伺服器資源，當他是單個個體存在時，耗費的資源幾乎可以忽略不計，但以億為單位去推測累計一年所耗費的資源時，就無法忽視了；

根據工信部最新發布的資料顯示，截至4月末，三家基礎電信企業的行動電話使用者總數達15.9億戶，2020年1－12月簡訊業務量總計17796億條，平均每秒鐘同時傳送5萬條，如果大家都發送沒有手機號碼的簡訊，將浪費大量的網路資源和伺服器資源，如果有人惡意傳送大量沒有手機號碼的簡訊，甚至導致伺服器宕機，所有人都無法正常使用簡訊功能；

為了避免網路資源和伺服器資源浪費，甚至伺服器的宕機，系統在使用者沒有填寫收件人手機號碼時，會禁止傳送簡訊，即使不同的系統使用不同的解決方案，都是達到預防「慘案」發生的效果。

二、禁用功能的注意事項

1）禁用狀態需與正常狀態明顯區分

禁用狀態，是為了讓使用者知道這裡是不可點選的，將操作按鈕的存在感處理得很低，達到減少使用者點選的效果，一般以置灰的形式呈現；

正常狀態，為了引導使用者完成系統內操作，系統會吸引使用者去點選，達到指引的效果一般用醒目的顏色，跳動或其他能吸引使用者實現的形式呈現；

當禁用狀態和正常狀態區分時，使用者能清楚的知道什麼時候是可以點選的，什麼時候不可以點選；

如果系統裡的所有操作按鈕都只有一種狀態時，使用者在點選每一個按鈕時，都像是在拆盲盒，短時間可能是驚喜，但時間長了只會覺得茫然無措，甚至有些疲憊，永遠都不知道點選了按鈕會有什麼結果，什麼時候應該點，什麼時候不應該點。這時系統如果增加了沒有結果時的狀態，使用者多次點選無果後，漸漸就會知道點選這種狀態的按鈕是沒有用，也就會減少點選次數；

上圖是一個WPS編輯文件的功能介面，對於使用者來說，編輯文件是連續的動作，使用的功能也是差不多的，如果因為當前該功能無法使用就隱藏的話，會讓使用者感到不穩定，尤其是剛剛還能看到那個功能，突然一下就找不到的情況，這時建議系統不更改功能展示的位置，只區分功能的可用狀態；

如上圖，為了減少使用者的困擾，禁用狀態與正常狀態應保持在相同的位置，同時做明顯的顏色區分，讓使用者一眼就能辨認能不能使用該功能。

2）點選禁用功能時給出反饋

禁用功能的反饋，目的是避免使用者使用禁用功能時，有系統無響應的感知；

由於功能已經被禁用了，當用戶執行操作時，就無法執行正常的跳轉，或者一些變化，此時，使用者並不能直觀判斷出功能被禁用，因此會預設定義為程式出問題了，系統出故障了；

所以，禁用功能的反饋，是為了避免使用者歸責於產品BUG，對產品產生負面情緒，同時也是為了給到操作指引，避免使用者不知道該如何處理。

編輯表單後提交資訊，有時部分內容忘了填寫就提交，系統會給出提交失敗的原因，或引導使用者進入下一步；如上圖，在使用者沒有填寫銀行卡號卻點選了下一步時，系統給出能完成表單提交的提示，同時提示語簡潔，準確，能讓使用者快速瞭解如何做才能完成表單的提交。

三、總結

再來複習一下，禁用，是為了避免一些無法預計的系統錯誤和損失，禁止使用者某些操作，達到預防「慘案」發生的效果；

那麼在決定使用禁用功能之前，一定要想清楚這個禁用功能是為了避免什麼錯誤和損失，當前的禁用方案能否達到效果；

同時，要考慮禁用功能的反饋，避免使用者使用禁用功能時，有系統無響應的感知，覺得系統出故障了；

在考慮解決方案時，不僅要考慮能否達到預期效果，還要考慮使用者體驗。

本文由 @噠噠臨 原創釋出於人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基於CC0協議。