用一個真實案例，演示B端設計框架的價值

今天以一個正式課學員在咨詢的工作案例作為對象，在框架基礎之上，進行更深入的實例演示，來理解框架到底有什么價值和作用。

下面該學員目前的項目設計案例（已脫敏），是一個服務配置的表單頁面。內容區域的左側是服務列表，右側是服務相關的設置和信息。

在內部評審中，團隊對于界面的的樣式并不是特別滿意，包括覺得頁面太白、視覺層級不合理之類……

先忽略評審建議，以視覺的眼光來看待，目前存在的問題主要是信息呈現上的不合理， 包括以下幾個問題:

1. 服務列表欄空間太小，信息展示不全
2. 服務配置/方案選擇的層級關系不夠清晰
3. 模塊框架邊框太多，線條元素過多
4. 主色應用過度，會對視覺造成不必要干擾
5. ……

其中最有代表性的問題，就是在上級組件內使用描邊的方式來突出下級組件，這種做法簡稱 “套娃”。我們把內容去掉以后展示出來的效果如下。

可以發現矩形模塊的數量很多，模塊之間留出的縫隙也很多，會過度切割用戶的視覺內容。所以沒有絕對的必要，就不要在一個包含了矩形背景的區域中，為下級組件添加描邊邊框。

下面我們進入改動的操作中，首先是確定頁面的整體框架，和目前沒有太大的差異。但是稍微加寬導航和服務列表欄，讓比例更平衡一點。

接著細化框架內容，確定下級模塊的基本布局形式。

主要優化點包括：

1. 該頁面層級比較深，原頁面中返回非常弱，面包屑有添加的必要，且服務欄上方的返回使用更明確的文案獨立一行，不用占標題空間。
2. 移除不必要的描邊，使用基礎分割線為次要組件做隔斷，減少二三級模塊層級感。
3. 合并檢查更新和影像壓縮模塊，只有一個選項的情況下，還需要各添加一個標題只能增加認知負擔。
4. 確認操作按鈕右移，減少視覺上的權重，同時要符合正常操作的預期

到這一步都是對框架本身的構建，再下一步，就是完善里面具體的內容和字段，就是進入組件布局的過程。

其中，影像信息更新的內容比左側的影響匹配規則內容更多，但它們沒有均分寬度的必要。所以一方面優化左側選項的表現形式，另一方面調整模塊寬度，擴大右側空間。

完成細節的調整以后，最后我們再開始添加色彩和視覺樣式。

其中，把服務列表的開關改了，因為關閉服務通常需要二次確認，且開關的操作并不高頻，那開關就并不合適。然后就是顏色的調整，時間關系沒有做的特別細，但基本方針就是主色的應用不能過度，開關可以用功能色替代，文本按鈕可以額外用主色創建一個明度較低的顏色不會顯得太扎眼。

還有個非常重要的認識，就是一定不要輕易在編輯環境里給刪除加大紅色，紅色是用來提高關注度和警示的，它可以用在彈窗里的二次確認，但不是用在安靜躺在角落里擺爛的固定刪除按鈕。

是就怕用戶沒把它們刪了嘛？

最后，前后兩個版本的對比圖：

之前版本

改版后版本

結尾

B 端設計的界面效果沒有什么高大上的理論，先從框架出發，然后在細節處保持嚴謹、合理、一致，就可以獲得更好的交付結果。

PS：時間關系，改版僅為了講解設計思路，不代表我們最終的落地輸出和完整水平，有瑕疵可以提出交流。

第九期 B 端產品設計課程開啟正式招生，早報名早學習，學員群里等著大家了 ???https://pro.uisdc.com

歡迎關注作者的微信公眾號：「超人的電話亭」