鑽石舞台

我之前發過金山設計系統 King Design：金山設計系統2.0升級，又有B端組件用了

結果發現後台有人說顯老氣……

下圖是該網站眾多實例圖中的一個：

上圖來源：https://design.ksyun.com/docs/design/guide-9/

金山也是國內知名度很高的軟件公司了，遠的不說，跟國內的螞蟻金服的 Ant Design 和字節的 Acro Design 比一下，差距還是蠻明顯的：

P.S. 點擊圖片放大可能看得更清楚些。

Ant Design

AcroDesign

其實很多年代久遠的 B 端系統，都有「老氣」的問題。

我今天就想來嘗試一下，如何讓 B 端設計顯得「年輕」起來。

為什麼顯老氣？

和上面的 Ant Design 和 Acro Design 比起來，下面這個界面最明顯的差異是不夠整潔精緻。

早期的界面設計使用的背景色、陰影和分割線顏色都偏深，還喜歡到處用高亮色，再加上信息密集，在現在看來就比較粗獷混亂。

接下來，我將通過四個步驟來嘗試改善這些問題。

對了，雖然今天要解決的是視覺問題，但作為以功能為主的 B 端產品，我們還是要從實用性出發。

為了讓界面更加簡潔乾淨，先看看有什麼信息可以去除的。

1. 去除不必要信息

首先，圖表卡片的重複信息很多：

1. 橫坐標很密集，可以減到每 30 分鐘一個數字

2. 既然所有圖表縱坐標最大值都是 100%，那麼可以默認不展示數字

3. 卡片上「告警」為 0 的信息完全可以不展示

4. 卡片上的拖動和放大操作，完全可以鼠標懸停時再展示

5. 左導航上幾乎每一個選項都有一個圖標，這個其實沒有必要，對用戶沒有幫助不說，還很「搶戲」。

6. 選擇時間跨度的組件很占地方，但是又不是經常使用（推測），所以我用「自定義」這三個字替代了。

2.弱化次要信息

有些信息雖然必須留着，但因為不是什麼重要信息，所以要降低存在感，這樣才能實現視覺降噪。

頂導航：漸變背景變成了單色，右側的信息降低不透明度，整個導航的存在感下降了。

左導航：深灰色背景變淺、摺疊按鈕挪到頂部與導航標題「監控」同行、降低導航標題「監控」的不透明度、縮小箭頭尺寸，這一細節操作讓整個左導航的存在感下降了。

背景：除了圖表卡片之外，其它的白色方塊都去除了，一下子就清淨了好多。次按鈕、下拉框和 tab 等輔助操作的背景從白色改為透明，並且使用更淺的邊框線。

卡片：將告警信息作為標籤置於標題左側，減小占用空間。拖動和放大圖表則統一用灰色，置於卡片右上角，雖然存在感低卻容易找到。

信息：減輕標題重量，將卡片標題的字體從加粗變成常規，並把跟隨的「(%)」挪到圖表縱坐標上。簡化輪廓，將下拉框的說明「查找卡片」從框外挪到框內。

色彩：所有陰影都去除了，只保留卡片懸停態，這樣重點更加突出。將標題高亮色都去掉，都改為深灰色。

3.強化重要信息

把視覺干擾降低之後，我們才有餘地來拉升重要信息的存在感。

1. 首先是把頁面標題加大，同時增加上下間距，這樣視覺層次一下子就出來了。

2. 將藍色的主按鈕放到最右邊，更容易凸顯，還能和最左側的導航高亮塊相互呼應。

3. 將時間 tab 放到左側緊跟下拉框，更容易看到。

4. 加粗卡片上的三個大號數字。

因為一張圖上的重點信息越少越好，所以這些就差不多了。

想要學習或者練習體驗/交互設計的朋友，可以了解一下「體驗設計學習社」。

如果你只是想要多認識一些同行，也可以加入我們無廣告的純粹體驗研討微信群：