B端視覺降噪,別被設計規范框住了
在進行B端產品設計時,我們有時需要跳出已有的設計規范,思考如何才能讓界面展示不那么混亂。這個時候,你可以考慮進行“設計降噪”。那么,有哪些可以用于B端產品設計中的降噪方式?本文作者結合案例做了一定總結,一起來看。
B端產品經常一不小心就做得很復雜,既要功能豐富,又保持界面效果的整潔,哪有那么好的事?
設計規范把人框得死死的,太復雜了能怎么辦?
例如下面這個方案是,是基于 Ant Design Pro 改出來的,反映了很多 B 端產品的情況。明明也沒有特別多的功能,看上去卻感覺有點混亂。
Before
我嘗試進行降噪處理后,改成了下圖這個樣子,在功能不減的前提下,是不是看起來清爽了許多?
After
下面我通過 5 個步驟,給大家拆解一下這個降噪思路:
- 減少高亮色;
- 懸停展示信息;
- 不要拘泥于規范;
- 收起不常用的操作;
- 去除不必要的裝飾。
對了,不是所有 B 端產品需要視覺降噪的,如果是給客戶定制的,而客戶對視覺要求又不高,那就沒必要了。
一、減少高亮色
原方案給人的第一感覺,是顏色太多了,除了好幾塊主題藍,還有各種大紅大綠,讓人一下子不知道看哪里。
用顏色表示狀態確實是個通用的好辦法,但也要注意色彩占比,不要讓不是那么重要的信息過于搶眼。
將狀態的色塊變成小圓點后,看起來既不搶眼,又還是能用顏色判斷狀態。
已選擇的項目數量,原來是放在一個淡藍色的大橫框里,再加上那個 i 圖標,看起來有點像是錯誤提示了。其實完全沒必要那么搶眼,去掉背景看起來也挺好。
二、懸停展示信息
如果確保產品基本只用桌面端操作,那么千萬別忘記懸停態這個好方法。
不需要經常查看或者不常用的信息和功能,都可以默認隱藏,懸停時再展示。
這方面可以修改的點就多了:
- 每列重復的文字操作按鈕,可以懸停再出現。
- 文字后的編輯圖標,可以像文件夾重命名那樣雙擊操作。
- 更新時間如果通常不需要過于精確的數字,可以默認只展示日期。
- 空白信息的添加按鈕,使用率大概較低可以懸停展示。
當然,以上這些修改肯定不適用于所有情況,例如有些產品還真的必須外露所有信息和操作。這里只是給個思路而已,如果不適合就別采納了,以你的實際需求為標準。
三、不要拘泥于規范
B 端產品的業務很復雜而且經常變動,所以基本都需要設計規范。
但是如果太過拘泥于設計規范,什么都按慣例行事,就別想做出特別好的設計了。
重要的頁面或模塊,肯定得多花些力氣,這樣才能給大多數用戶留下個好印象,所以該特殊時還得特殊一下。
例如原來的查詢模塊,看起來就很臃腫:
用搜索框來做檢索,將下拉框的標題塞進去后,發現右邊那兩個按鈕也可以去掉了,順便將“展開”簡化成灰色圖標:
現在頁面看起來更加清新了:
四、收起不常用的操作
B 端界面很容易擺出一大堆操作,結果分析一下數據和用戶行為,發現其實常用的也就那么幾個。
例如表單右上角的這一堆操作就看著很復雜,那幾個圖標除了刷新之外,使用率應該都蠻低的。
于是除了刷新之外的三個圖標都收到「…」菜單里,并且為了視覺上能對齊,將新建按鈕放到右邊。
這樣,整個界面又少了些干擾:
五、去除不必要的裝飾
往 B 端頁面放任何裝飾元素都要小心謹慎,哪怕只是邊框和陰影。
B 端頁面上很容易堆一大堆東西,這樣裝飾元素就會開始和有用信息搶占視線,這個時候你會開始覺得那些裝飾元素有點煩人了。
例如卡片陰影和分頁器的邊框,單獨看著還不錯,但如果想要進一步減少界面的視覺干擾,也可以去掉:
最后對比一下:
每個產品的情況不同,以上的方法肯定無法適用所有場景。
希望這五個思路,能給大家提供一些設計靈感。
專欄作家
ZoeYZ,一名前華為騰訊留英設計師;公眾號:體驗進階;人人都是產品經理專欄作家。
本文由@體驗進階的ZoeYZ 原創發布于人人都是產品經理,未經作者許可,禁止轉載。
題圖來自Unsplash,基于CC0協議。
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
簡約美