UI設(shè)計(jì)中置灰功能總結(jié)

　　我最近在梳理產(chǎn)品報(bào)錯(cuò)場(chǎng)景的過(guò)程中，發(fā)現(xiàn)“置灰”狀態(tài)的使用可以有效的提升報(bào)錯(cuò)場(chǎng)景中的用戶體驗(yàn)。今天AAA教育郭老師就針對(duì)UI設(shè)計(jì)中置灰功能總結(jié)進(jìn)行簡(jiǎn)單的說(shuō)明。
 

　　一、置灰
 

　　「置灰」是相對(duì)于「常態(tài)」而言的，代表著當(dāng)前不可用。這里的「不可用」在不同的場(chǎng)景下有著不同的意思：在用戶等級(jí)體系中，置灰的勛章意味著這個(gè)等級(jí)你還沒(méi)有解鎖;在卡券中心，置灰的卡券代表著這張卡券已經(jīng)過(guò)期或者已使用。

 

　　為了讓大家更好的理解，我將「置灰」分為兩種。一種是「視覺(jué)置灰」，這種置灰僅限于視覺(jué)層面，不影響用戶正常操作，就像上面的卡券一樣，雖然已經(jīng)過(guò)期，但是依然可以點(diǎn)擊查看詳情;另一種是「功能置灰」，直接禁用該功能，用戶不可點(diǎn)擊。
 

　　二、視覺(jué)置灰
 

　　對(duì)于任何一個(gè)設(shè)計(jì)元素或者組件，我們想要系統(tǒng)的掌握它，首先要從功能入手，弄清楚它能夠做什么。視覺(jué)置灰在界面設(shè)計(jì)中主要起到的是一個(gè)篩選的作用。以豆瓣和虎撲為例，如果這個(gè)帖子你已經(jīng)瀏覽過(guò)了，那么就會(huì)置灰，這樣可以篩選出用戶未讀的帖子，提高新帖的閱讀量。

 

　　在電商類的產(chǎn)品購(gòu)買頁(yè)中，置灰意味著當(dāng)前的顏色跟尺碼沒(méi)有。置灰的微信紅包說(shuō)明該紅包你已經(jīng)點(diǎn)擊過(guò)了。

 

　　在網(wǎng)易云音樂(lè)中，置灰代表著當(dāng)前歌曲沒(méi)有版權(quán)，無(wú)法播放。這里篩選的維度是該歌曲是否有版權(quán)。同樣是版權(quán)原因，b站中如果該視頻沒(méi)有取得下載權(quán)限，采用的就是我下面所說(shuō)的功能置灰，直接禁用下載 icon，用戶無(wú)法點(diǎn)擊。這種處理方法有待商榷，我覺(jué)得像網(wǎng)易云一樣提供一個(gè)彈框安撫一下用戶會(huì)更好點(diǎn)。

 

　　上面提到了歌曲版權(quán)的問(wèn)題，這里可以根據(jù)歌曲下載的場(chǎng)景做一個(gè)延伸。目前來(lái)說(shuō)，歌曲付費(fèi)下載已經(jīng)是常態(tài)了。在酷狗音樂(lè)中，用戶點(diǎn)擊下載 icon，彈出一個(gè)對(duì)話框，告知下載該歌曲必須要開通音樂(lè)包或者選擇單曲購(gòu)買，用戶點(diǎn)擊進(jìn)入相應(yīng)的開通和購(gòu)買頁(yè)。

 

　　其余的競(jìng)品都是用戶點(diǎn)擊下載 icon，直接進(jìn)入開通會(huì)員/購(gòu)買單曲的頁(yè)面，在頂部以通告欄的形式告知用戶下載該歌曲必須要開通音樂(lè)包或者選擇單曲購(gòu)買，跳過(guò)了對(duì)話框。這樣的處理方式相較于酷狗音樂(lè)，縮短了用戶的操作路徑，減少了操作步驟。我們都知道每一個(gè)操作步驟都意味著又流失了一部分用戶，這樣的做法可以提升轉(zhuǎn)化率。

 

　　三、功能置灰
 

　　功能置灰(或者說(shuō)禁用)是這篇文章的重點(diǎn)。在繼續(xù)閱讀之前，大家可以先思考一個(gè)問(wèn)題：如果一個(gè)功能無(wú)法使用，其入口我們假設(shè)是一個(gè)按鈕，那么該按鈕是應(yīng)該置灰還是置以常態(tài)用戶點(diǎn)擊之后以彈框報(bào)錯(cuò)呢?

 

　　以支付寶的提現(xiàn)場(chǎng)景為例，如果一個(gè)用戶打算把錢轉(zhuǎn)出到自己的銀行卡里。賬戶余額只有5萬(wàn)，但是他輸入了55萬(wàn)，輸入框立刻校驗(yàn)出錯(cuò)誤，并且在下方給予文字提示?？墒堑撞康霓D(zhuǎn)出按鈕依然是可點(diǎn)擊狀態(tài)，用戶點(diǎn)擊之后，彈出一個(gè)對(duì)話框提示用戶「轉(zhuǎn)出金額超限」(跟底部提示文字一樣)。其實(shí)這里對(duì)話框的存在意義并不大，因?yàn)殄e(cuò)誤信息已經(jīng)通過(guò)輸入框底部的文字完成了傳達(dá)。

 

　　同樣的場(chǎng)景，京東金融采用的方法對(duì)按鈕進(jìn)行置灰，用戶不可點(diǎn)擊。在這里我個(gè)人比較推崇京東金融的方式，那么這樣來(lái)說(shuō)上面的問(wèn)題看來(lái)有答案了，應(yīng)該對(duì)按鈕進(jìn)行禁用。這樣的說(shuō)法明顯欠妥，我們應(yīng)該考慮更多的場(chǎng)景，上面提到的是單行輸入框，如果用戶需要在一個(gè)表單中輸入多條信息，按鈕還需要置灰嗎?我的回答是：「不應(yīng)該」。首先多行輸入框意味校驗(yàn)難度的提高，因?yàn)槊總€(gè)輸入項(xiàng)的格式是不一樣的。而且移動(dòng)端礙于屏幕尺寸，很難像 pc端表單一樣進(jìn)行逐行報(bào)錯(cuò)。

 

　　此外報(bào)錯(cuò)的原因也可能是用戶遺忘了某個(gè)欄目沒(méi)有填，如果按鈕置灰，就會(huì)給用戶造成一個(gè)困境：我不知道自己哪個(gè)步驟做錯(cuò)了，為什么按鈕還是置灰?如果按鈕是可點(diǎn)擊的，那么就會(huì)跳出提示告訴用戶你當(dāng)前還有某某項(xiàng)目未填寫。在多行輸入框表單樣式中，我個(gè)人最偏愛(ài)京東金融的處理方式。一旦某個(gè)輸入框出現(xiàn)報(bào)錯(cuò)，該行文字會(huì)變紅，這樣可以幫助用戶快速的定位問(wèn)題所在，然后再以 toast 形式告知用戶錯(cuò)誤原因。

 

　　功能置灰(禁用)意味著用戶無(wú)法與該功能進(jìn)行交互，也無(wú)法獲得任何反饋。所以我們?nèi)绻靡粋€(gè)功能，必須保證用戶可以明白禁用的原因。當(dāng)然這并不意味著，只有用戶明白禁用的原因，就可以禁用。功能置灰在產(chǎn)品設(shè)計(jì)中并不常見，因?yàn)橹苯咏昧嗽摴δ芟喈?dāng)于封死了一條操作路徑，會(huì)影響用戶體驗(yàn)的流暢性。
 

　　總結(jié)
 

　　因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息，請(qǐng)?jiān)L問(wèn)AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。