今天以一個(gè)正式課學(xué)員在咨詢的工作案例作為對(duì)象，在框架基礎(chǔ)之上，進(jìn)行更深入的實(shí)例演示，來(lái)理解框架到底有什么價(jià)值和作用。

下面該學(xué)員目前的項(xiàng)目設(shè)計(jì)案例（已脫敏），是一個(gè)服務(wù)配置的表單頁(yè)面。內(nèi)容區(qū)域的左側(cè)是服務(wù)列表，右側(cè)是服務(wù)相關(guān)的設(shè)置和信息。

在內(nèi)部評(píng)審中，團(tuán)隊(duì)對(duì)于界面的的樣式并不是特別滿意，包括覺(jué)得頁(yè)面太白、視覺(jué)層級(jí)不合理之類……

先忽略評(píng)審建議，以視覺(jué)的眼光來(lái)看待，目前存在的問(wèn)題主要是信息呈現(xiàn)上的不合理， 包括以下幾個(gè)問(wèn)題:

1. 服務(wù)列表欄空間太小，信息展示不全
2. 服務(wù)配置/方案選擇的層級(jí)關(guān)系不夠清晰
3. 模塊框架邊框太多，線條元素過(guò)多
4. 主色應(yīng)用過(guò)度，會(huì)對(duì)視覺(jué)造成不必要干擾
5. ……

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

可以發(fā)現(xiàn)矩形模塊的數(shù)量很多，模塊之間留出的縫隙也很多，會(huì)過(guò)度切割用戶的視覺(jué)內(nèi)容。所以沒(méi)有絕對(duì)的必要，就不要在一個(gè)包含了矩形背景的區(qū)域中，為下級(jí)組件添加描邊邊框。

下面我們進(jìn)入改動(dòng)的操作中，首先是確定頁(yè)面的整體框架，和目前沒(méi)有太大的差異。但是稍微加寬導(dǎo)航和服務(wù)列表欄，讓比例更平衡一點(diǎn)。

接著細(xì)化框架內(nèi)容，確定下級(jí)模塊的基本布局形式。

主要優(yōu)化點(diǎn)包括：

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

到這一步都是對(duì)框架本身的構(gòu)建，再下一步，就是完善里面具體的內(nèi)容和字段，就是進(jìn)入組件布局的過(guò)程。

其中，影像信息更新的內(nèi)容比左側(cè)的影響匹配規(guī)則內(nèi)容更多，但它們沒(méi)有均分寬度的必要。所以一方面優(yōu)化左側(cè)選項(xiàng)的表現(xiàn)形式，另一方面調(diào)整模塊寬度，擴(kuò)大右側(cè)空間。

完成細(xì)節(jié)的調(diào)整以后，最后我們?cè)匍_(kāi)始添加色彩和視覺(jué)樣式。

其中，把服務(wù)列表的開(kāi)關(guān)改了，因?yàn)殛P(guān)閉服務(wù)通常需要二次確認(rèn)，且開(kāi)關(guān)的操作并不高頻，那開(kāi)關(guān)就并不合適。然后就是顏色的調(diào)整，時(shí)間關(guān)系沒(méi)有做的特別細(xì)，但基本方針就是主色的應(yīng)用不能過(guò)度，開(kāi)關(guān)可以用功能色替代，文本按鈕可以額外用主色創(chuàng)建一個(gè)明度較低的顏色不會(huì)顯得太扎眼。

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

是就怕用戶沒(méi)把它們刪了嘛？

最后，前后兩個(gè)版本的對(duì)比圖：

之前版本

改版后版本

結(jié)尾

B 端設(shè)計(jì)的界面效果沒(méi)有什么高大上的理論，先從框架出發(fā)，然后在細(xì)節(jié)處保持嚴(yán)謹(jǐn)、合理、一致，就可以獲得更好的交付結(jié)果。

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

第九期 B 端產(chǎn)品設(shè)計(jì)課程開(kāi)啟正式招生，早報(bào)名早學(xué)習(xí)，學(xué)員群里等著大家了 ???https://pro.uisdc.com

歡迎關(guān)注作者的微信公眾號(hào)：「超人的電話亭」