今天繼續(xù)回到B端的界面改版案例中，來解答一個問題，為什么你們做的界面看起來不怎么有設(shè)計感！

這次改版的案例是我們課程中某學(xué)員做的一個表盤頁面，非常有代表性，下面我們就會從分析原界面問題開始，到展示重新改版的整個流程。

分析一個頁面本身設(shè)計的問題，首先要先具備合理的認(rèn)識，即什么樣的頁面設(shè)計是優(yōu)秀的、專業(yè)的、有設(shè)計感的。這個認(rèn)識沒有建立起來之前任何分析都沒有意義，因為你的審美水平?jīng)]有超過動手能力，那就絕對不可能指導(dǎo)你自己做出改進(jìn)。

所以解決所有關(guān)于設(shè)計感缺失的第一件事，就是去提升相關(guān)審美，去大量收集同類頁面設(shè)計的優(yōu)秀作品，以500張為一個節(jié)點，然后呢？

把它們刪到剩50張做的最好的案例，并以這些作品為評判標(biāo)準(zhǔn)再去收集新的……不做這個你永遠(yuǎn)提升不了，其它說什么都沒用，所以老老實實去操作一遍你們會回來歡呼認(rèn)識和以前完全不一樣了，而這需要的時間甚至只要兩三個晚上。

再接著進(jìn)行具體分析，類似產(chǎn)品體驗五要素，要以結(jié)構(gòu)化的形式入手，而不是亂糟糟的東找一個問題，西挑一個毛病。

在這次分析中我們主要包含以下2個大的維度，框架和視覺?？蚣芫褪侵钢饕M件、模塊的布局樣式和合理性，視覺則是指字體、色彩、圖表、間距等基本要素。下面首先從框架開始說起。

1. 原圖的框架中全局組件忽略掉左側(cè)沒做滿（作品集輸出的話絕對不能出現(xiàn)的問題）的問題，頂部導(dǎo)航和左側(cè)同色的觀感并不好，不能將組件做出比較好的區(qū)分。

2.頁面的整體信息展示量太少，在 1440 寬的第一屏中下方的柱狀圖表占據(jù)了大量的空間。實際單屏顯示的效果是如下圖所示的，明顯對空間有大量不必要的浪費。

3.在字體應(yīng)用中，模塊標(biāo)題本身的字重沒被統(tǒng)一，整體文字的字號偏大，多數(shù)使用14或14以上，所以看起來很粗狂，并且文字顏色過深。尤其是統(tǒng)計數(shù)字，過于顯眼，超出了識別的必要。

4.圖表的設(shè)計，多個圖表本身的區(qū)域規(guī)則是不一致的，和外部間距不統(tǒng)一，圖表本身細(xì)節(jié)也不嚴(yán)謹(jǐn)，比如環(huán)形圖的起始和結(jié)束位置。5.其他間距的控制問題，如右上角和下方圖表中統(tǒng)計數(shù)字模塊，新建代辦按鈕等，都不是特別的嚴(yán)謹(jǐn)。

其它更小的問題就暫且不提，這些問題看起來都不是大問題，因為原設(shè)計你要說做得有多差吧那肯定不至于，但就是和 “有設(shè)計感” 有很大的差距，而這種差距就是由一點點的細(xì)節(jié)問題累加起來的。

比如我們按原設(shè)計完全一樣的布局內(nèi)容重新調(diào)整下做的框架，你們可以對比下和原來的差別。

下面，我們就圍繞這些問題做相應(yīng)的改動。

1.改版的過程首先從全局框架入手，既然要優(yōu)化向上面跟著原來做就沒意思了，所以我們要做更合理的改動。如果要壓縮高度，讓內(nèi)容更緊湊一點，就要重新調(diào)整內(nèi)容的模塊，將客戶訂單左移，快速入口右移，原有收款付款模塊合并。

而在這個階段一定要靈活一點，框架的設(shè)計絕對不是只有一種可能性，所以再做了第二個版本出來，增加一個統(tǒng)計項讓板塊切割更均分一點。

再或者項目如果頁面數(shù)真不多，導(dǎo)航選項就那幾個，那么沒有理由導(dǎo)航只做在左側(cè)，那就合并頂部導(dǎo)航的版本出來。

可能性多種多樣，需要的主要是產(chǎn)品和交互思維來考慮，而框架本身的基本規(guī)范、參數(shù)應(yīng)用，是B端設(shè)計中基礎(chǔ)的基礎(chǔ)，一點問題也不應(yīng)該出現(xiàn)。

2.然后下一步，就是完善相關(guān)的文本和字段內(nèi)容，用畫原型的方式把內(nèi)容全部填充進(jìn)去。這個階段重點關(guān)注字段的合理性，以及文字的對比，交互的方式。

3.對主要的元素進(jìn)行上色，有明確色彩指向的模塊也填充上顏色，其它亂七八糟的顏色不加，圖標(biāo)和圖片等也不加。確認(rèn)顏色的填充是合理。

4.完成后續(xù)的細(xì)節(jié)，填充對應(yīng)的圖標(biāo)，要替換不同風(fēng)格的圖標(biāo)類型來提升畫面的質(zhì)感，不能讓它太浮夸，也不能看上去太無聊。

到這一步，基本就優(yōu)化完畢了。因為還是遵循原作品設(shè)計的思路做優(yōu)化，所以改版的幅度并沒有做的太大。這里要提醒的是，界面的設(shè)計感就是從細(xì)節(jié)里扣出來的，這些基礎(chǔ)能力全是一個B端設(shè)計師的最入門的基本功，沒有什么奧秘。

下面是改版前后的樣式，可以在電腦上看大圖對比：

結(jié)尾

之后盡量每周會有一篇改版，不管是管理系統(tǒng)的還是移動端的，有希望看的案例也可以在下面留言。

我們下篇再賤~

第8期B端產(chǎn)品設(shè)計全能班開啟預(yù)約了。早預(yù)約，鎖定早鳥價格，課程服務(wù)也從預(yù)約后就開始了~

給彼此一個機(jī)會，現(xiàn)在就預(yù)約變強