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

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

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

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

Before

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

After

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

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

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

一、減少高亮色

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

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

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

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

二、懸停展示信息

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

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

這方面可以修改的點就多了：

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

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

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

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

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

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

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

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

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

四、收起不常用的操作

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

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

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

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

五、去除不必要的裝飾

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

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

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

最后對比一下：

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

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