在進(jìn)行B端產(chǎn)品設(shè)計(jì)時(shí)，我們有時(shí)需要跳出已有的設(shè)計(jì)規(guī)范，思考如何才能讓界面展示不那么混亂。這個時(shí)候，你可以考慮進(jìn)行“設(shè)計(jì)降噪”。那么，有哪些可以用于B端產(chǎn)品設(shè)計(jì)中的降噪方式？本文作者結(jié)合案例做了一定總結(jié)，一起來看。

B端產(chǎn)品經(jīng)常一不小心就做得很復(fù)雜，既要功能豐富，又保持界面效果的整潔，哪有那么好的事？

設(shè)計(jì)規(guī)范把人框得死死的，太復(fù)雜了能怎么辦？

例如下面這個方案是，是基于 Ant Design Pro 改出來的，反映了很多 B 端產(chǎn)品的情況。明明也沒有特別多的功能，看上去卻感覺有點(diǎn)混亂。

Before

我嘗試進(jìn)行降噪處理后，改成了下圖這個樣子，在功能不減的前提下，是不是看起來清爽了許多？

After

下面我通過 5 個步驟，給大家拆解一下這個降噪思路：

1. 減少高亮色；
2. 懸停展示信息；
3. 不要拘泥于規(guī)范；
4. 收起不常用的操作；
5. 去除不必要的裝飾。

對了，不是所有 B 端產(chǎn)品需要視覺降噪的，如果是給客戶定制的，而客戶對視覺要求又不高，那就沒必要了。

一、減少高亮色

原方案給人的第一感覺，是顏色太多了，除了好幾塊主題藍(lán)，還有各種大紅大綠，讓人一下子不知道看哪里。

用顏色表示狀態(tài)確實(shí)是個通用的好辦法，但也要注意色彩占比，不要讓不是那么重要的信息過于搶眼。

將狀態(tài)的色塊變成小圓點(diǎn)后，看起來既不搶眼，又還是能用顏色判斷狀態(tài)。

已選擇的項(xiàng)目數(shù)量，原來是放在一個淡藍(lán)色的大橫框里，再加上那個 i 圖標(biāo)，看起來有點(diǎn)像是錯誤提示了。其實(shí)完全沒必要那么搶眼，去掉背景看起來也挺好。

二、懸停展示信息

如果確保產(chǎn)品基本只用桌面端操作，那么千萬別忘記懸停態(tài)這個好方法。

不需要經(jīng)常查看或者不常用的信息和功能，都可以默認(rèn)隱藏，懸停時(shí)再展示。

這方面可以修改的點(diǎn)就多了：

• 每列重復(fù)的文字操作按鈕，可以懸停再出現(xiàn)。
• 文字后的編輯圖標(biāo)，可以像文件夾重命名那樣雙擊操作。
• 更新時(shí)間如果通常不需要過于精確的數(shù)字，可以默認(rèn)只展示日期。
• 空白信息的添加按鈕，使用率大概較低可以懸停展示。

當(dāng)然，以上這些修改肯定不適用于所有情況，例如有些產(chǎn)品還真的必須外露所有信息和操作。這里只是給個思路而已，如果不適合就別采納了，以你的實(shí)際需求為標(biāo)準(zhǔn)。

三、不要拘泥于規(guī)范

B 端產(chǎn)品的業(yè)務(wù)很復(fù)雜而且經(jīng)常變動，所以基本都需要設(shè)計(jì)規(guī)范。

但是如果太過拘泥于設(shè)計(jì)規(guī)范，什么都按慣例行事，就別想做出特別好的設(shè)計(jì)了。

重要的頁面或模塊，肯定得多花些力氣，這樣才能給大多數(shù)用戶留下個好印象，所以該特殊時(shí)還得特殊一下。

例如原來的查詢模塊，看起來就很臃腫：

用搜索框來做檢索，將下拉框的標(biāo)題塞進(jìn)去后，發(fā)現(xiàn)右邊那兩個按鈕也可以去掉了，順便將“展開”簡化成灰色圖標(biāo)：

現(xiàn)在頁面看起來更加清新了：

四、收起不常用的操作

B 端界面很容易擺出一大堆操作，結(jié)果分析一下數(shù)據(jù)和用戶行為，發(fā)現(xiàn)其實(shí)常用的也就那么幾個。

例如表單右上角的這一堆操作就看著很復(fù)雜，那幾個圖標(biāo)除了刷新之外，使用率應(yīng)該都蠻低的。

于是除了刷新之外的三個圖標(biāo)都收到「…」菜單里，并且為了視覺上能對齊，將新建按鈕放到右邊。

這樣，整個界面又少了些干擾：

五、去除不必要的裝飾

往 B 端頁面放任何裝飾元素都要小心謹(jǐn)慎，哪怕只是邊框和陰影。

B 端頁面上很容易堆一大堆東西，這樣裝飾元素就會開始和有用信息搶占視線，這個時(shí)候你會開始覺得那些裝飾元素有點(diǎn)煩人了。

例如卡片陰影和分頁器的邊框，單獨(dú)看著還不錯，但如果想要進(jìn)一步減少界面的視覺干擾，也可以去掉：

最后對比一下：

每個產(chǎn)品的情況不同，以上的方法肯定無法適用所有場景。

希望這五個思路，能給大家提供一些設(shè)計(jì)靈感。