起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識不可用狀態設計：如何合理的使用“置灰”？
我最近在梳理產品報錯場景的過程中，發現“置灰”狀態的使用可以有效的提升報錯場景中的用戶體驗。本篇文章就向大家簡單分析一下如何合理的使用“置灰”。
置灰
“置灰”是相對于“常態”而言的，代表著當前不可用。這里的“不可用”在不同的場景下有著不同的意思：在用戶等級體系中，置灰的勛章意味著這個等級你還沒有解鎖；在卡券中心，置灰的卡券代表著這張卡券已經過期或者已使用。
為了讓大家更好的理解，我將“置灰”分為兩種。一種是“視覺置灰”，這種置灰僅限于視覺層面，不影響用戶正常操作,就像上面的卡券一樣，雖然已經過期，但是依然可以點擊查看詳情；另一種是“功能置灰”，直接禁用該功能，用戶不可點擊。
視覺置灰
對于任何一個設計元素或者組件，我們想要系統的掌握它，首先要從功能入手，弄清楚它能夠做什么。視覺置灰在界面設計中主要起到的是一個篩選的作用。以豆瓣和虎撲為例，如果這個帖子你已經瀏覽過了，那么就會置灰，這樣可以篩選出用戶未讀的帖子，提高新帖的閱讀量。
在電商類的產品購買頁中，置灰意味著當前的顏色跟尺碼沒有。置灰的微信紅包說明該紅包你已經點擊過了。
在網易云音樂中，置灰代表著當前歌曲沒有版權，無法播放。這里篩選的維度是該歌曲是否有版權。同樣是版權原因，b站中如果該視頻沒有取得下載權限，采用的就是我下面所說的功能置灰，直接禁用下載icon，用戶無法點擊。這種處理方法有待商榷，我覺得像網易云一樣提供一個彈框安撫一下用戶會更好點。
上面提到了歌曲版權的問題，這里可以根據歌曲下載的場景做一個延伸。目前來說，歌曲付費下載已經是常態了。在酷狗音樂中，用戶點擊下載icon，彈出一個對話框，告知下載該歌曲必須要開通音樂包或者選擇單曲購買，用戶點擊進入相應的開通和購買頁。
其余的競品都是用戶點擊下載icon，直接進入開通會員/購買單曲的頁面，在頂部以通告欄的形式，告知用戶下載該歌曲必須要開通音樂包或者選擇單曲購買，跳過了對話框。
這樣的處理方式相較于酷狗音樂，縮短了用戶的操作路徑，減少了操作步驟。我們都知道每一個操作步驟都意味著又流失了一部分用戶，這樣的做法可以提升轉化率。
功能置灰
功能置灰（或者說禁用）是這篇文章的重點。在繼續閱讀之前，大家可以先思考一個問題：如果一個功能無法使用，其入口我們假設是一個按鈕，那么該按鈕是應該置灰還是置以常態用戶點擊之后以彈框報錯呢？
以支付寶的提現場景為例，如果一個用戶打算把錢轉出到自己的銀行卡里。賬戶余額只有5萬，但是他輸入了55萬，輸入框立刻校驗出錯誤，并且在下方給予文字提示?？墒堑撞康霓D出按鈕依然是可點擊狀態，用戶點擊之后，彈出一個對話框提示用戶“轉出金額超限”（跟底部提示文字一樣）。
其實這里對話框的存在意義并不大，因為錯誤信息已經通過輸入框底部的文字完成了傳達。
同樣的場景，京東金融采用的方法對按鈕進行置灰，用戶不可點擊。在這里我個人比較推崇京東金融的方式，那么這樣來說上面的問題看來有答案了，應該對按鈕進行禁用。
這樣的說法明顯欠妥，我們應該考慮更多的場景，上面提到的是單行輸入框，如果用戶需要在一個表單中輸入多條信息，按鈕還需要置灰嗎？
我的回答是：“不應該”。首先多行輸入框意味校驗難度的提高，因為每個輸入項的格式是不一樣的。而且移動端礙于屏幕尺寸，很難像pc端表單一樣進行逐行報錯。
此外報錯的原因也可能是用戶遺忘了某個欄目沒有填，如果按鈕置灰，就會給用戶造成一個困境：我不知道自己哪個步驟做錯了，為什么按鈕還是置灰？
如果按鈕是可點擊的，那么就會跳出提示告訴用戶你當前還有某某項目未填寫。在多行輸入框表單樣式中，我個人最偏愛京東金融的處理方式。一旦某個輸入框出現報錯，該行文字會變紅，這樣可以幫助用戶快速的定位問題所在，然后再以toast形式告知用戶錯誤原因。
功能置灰（禁用）意味著用戶無法與該功能進行交互，也無法獲得任何反饋。所以我們如果要禁用一個功能，必須保證用戶可以明白禁用的原因。當然這并不意味著，只有用戶明白禁用的原因，就可以禁用。
功能置灰在產品設計中并不常見，因為直接禁用了該功能相當于封死了一條操作路徑，會影響用戶體驗的流暢性。
總結
以上就是我對置灰狀態的簡單分析和總結，有不同的觀點和想法歡迎留言或者加群討論。
#專欄作家#
王M爭（微信公眾號：王M爭），人人都是經理專欄作家，資深互聯網人。
本文原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自 Pexels ，基于 CC0 協議
他強任他強？
勞資尼克揚
勞資尼克楊