B端設(shè)計作品集中的項目展示，往往要包含三個部分的內(nèi)容，項目介紹，設(shè)計分析，內(nèi)容展示。不管在介紹和分析部分，你是直接跳過，還是寫了幾萬字的論文，最后都無法避免的需要對設(shè)計出來的界面本身進行展示和說明。

而這個部分是項目展示中最難的，因為前面的介紹、分析內(nèi)容只要網(wǎng)上多看多找，就有大量可參照的行文方式和布局排版。

而頁面的設(shè)計因為項目的差異，很難完全照搬別人的設(shè)計，所以往往進入界面展示的階段展示質(zhì)量就斷崖下跌。

總結(jié)下來，主要的問題包含下面這幾個：

問題1：展示的頁面難以看清

很多展示中界面的實際尺寸根本不足以展示清楚其中的內(nèi)容，觀看者連界面文字都看不清，自然就導致整個模塊的展示毫無意義。

出現(xiàn)這種問題的主要原因就是原有的畫布太大，放進展示畫布中的尺寸太小。想要解決這個問題，就兩個方面都要優(yōu)化。

一方面設(shè)計稿在制作過程中，能小則小，如果內(nèi)容允許的情況下，我甚至建議你們用 1280px 寬來設(shè)計，不僅后續(xù)好展示，內(nèi)容變緊湊更容易提升設(shè)計感。

另一方面，在放到畫布中時，界面的實際展示尺寸盡量保持在不小于作品集寬的 2/3 。比如，作品集使用 1440 px的畫布，展示界面就盡量不要小于 960 px 。除了居中放置以外，也可以左右布局，隱藏掉一部分不重要的內(nèi)容。

最后再建議，保持一個尺寸后就盡量不要在展示過程中忽大忽小。

問題2：Mockup 素材的濫用

Mockup 的應用在作品集展示中是肯定少不了的，但怎么用，用在哪，選什么樣式是要考究點的。很多界面展示中為了增加畫面的設(shè)計感，就會強行嵌套 Mockup 樣機進去，這并沒有提升展示的質(zhì)感，只是純粹增加了畫面的噪音和干擾元素。

樣機在展示部分的運用，只建議用在兩種情況，特殊的氛圍展示頁面，和全部頁面羅列的收尾，比如下面這些案例。

而在中間的展示部分，不建議使用能包含細節(jié)輪廓、透視、光影效果的樣機（并不絕對，但不會出錯）。使用最簡單的深色圓角描邊，來突出界面區(qū)域即可。

問題3：使用大量沒有價值的文案

這一步既是文案問題，也是設(shè)計問題。在界面展示的階段，作為觀看者主要想要看的就是界面的設(shè)計成果，以及對這些界面設(shè)計思路的必要解釋。

但很多時候，設(shè)計師會為了讓自己表現(xiàn)的更 “專業(yè)”，就老是會往上面加一堆文字，且文字內(nèi)容既拗口又沒有營養(yǎng)，既妨礙頁面本身的展示，也拉低觀看者的評價。

這里的解決方式就不僅僅只是設(shè)計的問題，而是對全局的把控和對精簡的追求。文字減少是必要的，保證最終的顯示效果在可讀性和設(shè)計感中取得平衡。

問題4：頁面的銜接非?；靵y

展示的頁面中，肯定不是每個頁面都是一個獨立的個體，只要負責單獨介紹這個個體的內(nèi)容就可以了。往往有多個頁面之間存在聯(lián)系的情況，如不同的狀態(tài)、步驟、流程、階段，需要將它們共同置入到一個畫布中設(shè)計。

但是這種銜接往往做出來的結(jié)果并不理想，看起來特別混亂。一方面是 B 端界面本身內(nèi)容就特別復雜，高密度的堆疊加上其它文本、裝飾、圖形就容易亂作一團。另一方面，就是頁面間的關(guān)聯(lián)不像C端這么容易理解，引導的方式不對，就會導致觀看者根本不想思考頁面之間的具體邏輯。

避免這樣的問題，建議盡量不要關(guān)聯(lián)3個以上的頁面，尤其是包含復雜業(yè)務邏輯的流程步驟。實際流程雖然可能更多，但要在展示階段省略掉一些不重要的，只保留關(guān)鍵的、有內(nèi)容可看和可介紹的頁面。

要記得作品集展示是展示最突出的設(shè)計成果，這些成果是由一個個獨立的要點構(gòu)成，要易于辨識、理解、信服。而不是把作品集變成 PRD 或者交互文檔，要觀看者逐字逐句參透才能領(lǐng)悟。

在避開以上的問題以后，展開頁面展示部分的設(shè)計，就建議使用下面的流程：

準備階段，就是就是安排你要展示的頁面內(nèi)容和順序，比如你項目做了350 個頁面，肯定沒必要全部展示出來，或者有一些非常重復的頁面，也沒必要每個都放。所以，你要在這個階段先篩選出要放置的頁面。

具體應該多少個沒有絕對的要求，根據(jù)項目和你自己覺得有必要的數(shù)量來定，但作為項目展示中最重要的區(qū)域，篇幅是不能過少的，一定要確保最少頁面展示數(shù)量不要低于10個，不然看起來毫無誠意。

然后再根據(jù)要展示的頁面，用思維導圖或普通文檔工具編寫展示的頁面順序，以及對應的介紹內(nèi)容、文本。

比如，在設(shè)計 Dashboard 頁面時，這個頁面包含了比較特殊的布局方法，以及特意提升了某個模塊組件的權(quán)重，讓用戶操作起來更容易。

文章鏈接：B 端首頁駕駛艙優(yōu)化思路分享 - 政府消防項目

或者，在設(shè)計表單頁面時，針對信息層級做了單獨的分析，重新確認從屬關(guān)系，以及對比老版本，優(yōu)化輸入類組件的寬度，和內(nèi)容更貼合，提升視覺檢索和操作的效率。

文章鏈接：

再或者，一個復雜的列表，包含了很復雜的字段信息，就可以介紹怎么重構(gòu)它的布局，以及壓縮展示高度，解決用因為覺得這個頁面太亂不想用的問題。

文章鏈接：

如果一個頁面實在想不出可以放什么，那就單純展示頁面樣式本身，只為它添加頁面標題和簡單的作用描述。當然，這種情況占比不能太高。

舉這些例子，就是為了說明，在進入設(shè)計階段前，一定要想清楚每個頁面應該展示哪些信息，這些信息必須得是你設(shè)計過程中真實想到的，解決的問題，而不要硬編。后續(xù)的設(shè)計，都需要遵照你前面的思考去完成，而不是做到哪想到哪。比如使用思維導圖做個簡單的整理：

然后，就是用線框圖完成基本的頁面布局，也就是布局原型。做作品集本質(zhì)上就是做平面設(shè)計，排版先行，再去優(yōu)化里面的細節(jié)和色彩，排版決定了整套作品集效果的下限。

所以這一步，就是結(jié)合前面的順序和內(nèi)容，用排版把它們 “優(yōu)雅” 地展示出來。

項目一:

項目二：

在排版上，設(shè)計感和內(nèi)容是相互影響的，有時候前面定的文案太少或者太多，都要在實際排版環(huán)境下進行優(yōu)化。同時，要在這個階段去優(yōu)化比例、結(jié)構(gòu)、間距、對比的關(guān)系，確保整體瀏覽的效果和諧。

完成上面的展示效果后，你就完成了設(shè)計工作的90%，最后就可以開始填充圖片、界面、背景、色彩和文案了。時間關(guān)系我就不做完，理解這個意思即可。

結(jié)尾

最后結(jié)尾再強調(diào)一遍，尤其對于新手階段，頁面展示區(qū)域的設(shè)計權(quán)重是遠遠高于前面的項目介紹和分析的。因為查看初級崗位的簡歷，最普遍的做法，都是直接略過前面的內(nèi)容，直接看界面的設(shè)計和思路的解釋。

所以如果作為初級B端設(shè)計師，在項目前半部分實在寫不出太多 “廢話”，就不要投入過量的精力和筆墨。有大量的初級設(shè)計師反而在后半部分應付了事，這是初級市場的普遍硬傷之一。

希望本次分享能對你們有所啟發(fā)

我們下次再賤~~~

新一期B端課程開課了，課程和作品集輸出方式再次升級，有提升需要的同學快來！