作品集的認識

我發現，有很多設計師已經工作幾年了，其實依舊不太清楚作品集到底是什么，長什么樣，對于設計師的意義。所以我們要在第一部分進行解釋，幫助大家建立出明確的概念。

1. 作品集的重要性

對于不同職業，評價他們水平如何的方法都不一樣，越是文書、管理、內勤、協調等非顯性技能的職業，評判起來就越困難。所以大廠招聘會盡可能從高學歷、大廠背景入手，因為這些維度最容易評判。

但評價一個設計師好壞，最重要的東西必然是他的 —— 作品水平，而不是學歷、背景、經驗。于是，就需要一個 “載體”來存放自己的作品供他查看，了解我們的水平。

不同類型的設計師，會選擇不同的載體來制作自己的作品集，最有代表性的，就是過去品牌、建筑、工業等設計師，會通過制作一套完整的畫冊作為作品集進行展示。

在這些領域中，越是高級的設計師，作品集的排版、裝幀、質量就越好。因為作品集是設計師和外界溝通的橋梁，它就是設計師本身實力的映射。

如果設計師想要在市場上獲得招聘方的青睞以及面試機會，千言萬語都遠不如一份讓人震撼的作品集能令人信服（只不過大多數人做不出這樣的作品集出來）。

因為，對于經驗豐富的面試官來講，可以直接從你的作品集中判斷出你的設計能力、規范掌握。

所以，初、中級設計師想要獲得更好的發展空間、平臺、薪資，就越是要制作出足夠讓人信服的優質作品集。這是一個貫穿我們整個職業生涯的工作內容，需要我們長期進行準備、維護和更新。

2. 作品集制作的難點

紙質的載體必然不適合 UI/UX 的作品展示，因為我們的作品基于 RGB 環境下顯示。所以在今天，大多 UI/UX 使用 PDF 或網頁等電子格式來記錄。

雖然載體變更了，但作品集所運用的設計思路、排版、行文、規格，都有大量的延續和保留。所以，平面基礎（排版版式）越好，輸出作品集的質量水平也就越高。

但是，絕大多數 UI/ 從業者平面能力都是不及格的，這種能力匱乏的基礎導致只能依靠模仿來完成作品集設計，于是造成了 —— 作品集同質化。

多瀏覽站酷、UICN 的作品，或者招聘看過應聘者投遞的簡歷，你就會發現，UI/UX 作品集從內容到樣式排版都表現出了高度的一致性。

其中，不僅僅是因為抄襲成風，還因為普遍性的 UI 設計師平面基礎差，設計、藝術素養孱弱。作品集首先是一份輸出視覺感受文件，然后才是里面的思路、文字、想法、解決的問題。

如果你在解決問題的思路上，不能提供非常個性、拍手稱贊的方案，那么你的作品集就避免不了和別人同質化的結局，不能脫穎而出。

所以最好能在視覺感受到的第一步，就能和別的簡歷拉開距離，即提供更有 B 格，更高級的視覺展示輸出。

作品集中反應的實力之一，就是設計師自身的審美趣味，但這是一個比較玄學的問題，它隱藏在你設計中的每個角落……

應用素材、配圖的技巧和審美息息相關，這是只能依靠自己積累才能提升的地方，是無法通過我的建議、分享來速成的。

所以，我建議大家多花時間瀏覽 Bahance 的各類首頁作品推薦作品展示進行積累。或者一有空閑時間就到當地的圖書管，免費看看那些非常厚重的設計、攝影、建筑畫冊。

這些積累會非常有效的提升平面展示和排版設計的眼界，并為后續的制作提供有效的借鑒思路。

3. 作品集的格式應用

上面講了，我們要用電子格式來保存自己的作品集。但是，相對網頁來說，PDF 是一個更重要的格式，因為求職過程發送 PDF 比網頁有效得多，而且顯得更正式。

主流的作品集 PDF 制作方案，是通過完成基礎頁面的設計，然后再合并成一份完整的 PDF 文件。所以，我們需要了解這個設計過程和導出過程中的基礎規范。

首先是對于畫布創建上的問題，作品集的展示類似 PPT，會拆分成不同的頁面，并使用相對統一的規格（內邊距、頁眉、頁腳等細節）。

頁面一般以橫向長方形的比例為主，可以使用 3:2、4:3、16:10、16:9 等常見的比例，或者可以應用標準的屏幕分辨率尺寸。

可能很多同學立馬就想到 1920*1080 的尺寸，在這我要先澆盆冷水。這個分辨率是非常不適合應用在作品集上，原因和 WEB 設計類似。

1080P 實際上是一個非常大的畫布，創建這樣的畫布會面臨非常多的問題，首先就是文件體積，由數十上百個 1080p 頁面組成的作品集，默認尺寸就輕松過 100MB，會對后期的壓縮造成極大的壓力。

還有，作為面試官在查看作品集的時候，通常都是以窗口化的方式查看文件的（沒見過全屏看作品集的），比如下面這樣。

過大的分辨率不僅浪費，而且新手會很難控制元素的大小，字體的大小，導致制作過程中的版式失控。所以，我們通常建議新手將作品集長寬設置成 1280*800 即可。

還有，普通 PPT 文件的所有頁面高度比例是一致的，但作品集并不需要遵守這個規則。因為會有部分的作品展示用當前的比例無法滿足。如 UI 完整頁面、網頁、H5 等長圖等，隔斷它們看起來也會非常不理想。

所以，遇到默認高度無法滿足的情況時，就可以選擇增加該頁面的高度直至符合展示需要為止（寬度不變）。不用太擔心高度不統一的問題，只要頁面內容的展示合理沒有莫名其妙的截斷，那么就不會讓觀眾感到不適。了解規格的概念以后，具體的展示和制作方法，將在后面進行解釋。

作品集內容的規劃

作品集的制作不是一次純粹的自我表達，畢竟它要連接招聘方，將自己推銷出去。這需要設計師經過深思熟慮，所以我們還要了解，關于自我表達，我們需要做什么準備。

1. 市場想看什么作品集

要提高推銷的概率，我們就必須站在買房的立場里進行思考，什么樣的作品集能獲得他們的青睞。換句話說，我們要表現出什么樣的能力，能滿足招聘市場的需要。

我將招聘市場劃分成兩個部分，低級市場和高級市場。這不是指設計師水平的高低，而是招聘企業本身的 Level 高低，它們的區別可以概括成：

低級市場就沒什么好分析的了，我們主要針對高級市場做分析，即大廠的設計師需要我們具備哪些能力。

通常，大廠對 UI 設計師的要求不會只有視覺而已，更多考量的是設計師的思考能力。專業的 UED 團隊是要通過設計來提升產品數據、轉化和收益的，而不是僅僅做出 “好看” 的設計。

所以，你既要了解你的用戶，做出能讓它們滿意的設計，也要參與和理解業務，給出能讓內部成員滿意的方案。我們一般也稱這種設計師叫 “全鏈路設計師” 或者 “UX 設計師”。

作品集要去滿足這些特性，才是符合招聘需要的作品集，而不是盲目跟從市面上高喊 UI 設計師又需要掌握的插畫、3D、動畫軟件，你就去學這些東西然后硬往里塞，導致整份作品集看起來支離破碎。

多花時間去招聘網站整理目標行業、企業的招聘需求，和內部的設計師進行溝通，可以更好的幫助我們建立對招聘要求的認識，便于下一步的內容制定。

2. 展示作品篩選

有了招聘需求的分析結果，這一步我們就要想往作品集塞哪些作品了。在主流的市場中，我們在作品集 PDF 中可以放的作品主要有下面這些類型：

在一個作品集中出現所有類型，必然是不可能的，我們要有目的性的挑選符合招聘需求的內容來放。其中，最核心的作品必然是完整的 UI 項目，包括 APP、WEB、B 端等。

建議最少不少于 3 個，多不超過 5 個，展示太多的項目會導致作品集看起來過度臃腫，即使過去做過再多的項目，也只要挑選出其中最值得展示的幾個出來既可。

除了項目外，其它設計類型的展示，一定要和你面向的崗位對口，如果不是校招生，就千萬不要放有臨摹、練習類的字樣。

即使你過去沒有這種經驗，你也要輸出練習稿的時候能保證看上去像真實的項目，并且具備能撐起該類設計展示的數量。

有了這些想法，就可以更進一步，把要安排到作品集的內容記錄下來，比如參考下圖的案例：

3. 作品集目錄制定

要展示哪些作品確定好了，并不是規劃就到此為止。作品集除了作品外，還會包含其它通用型的頁面，同樣是需要我們做好計劃的。

這些通用型頁面包含但不局限于下面的案例：

這些頁面的引用多數是必要的，因為作品集本質上就是一本電子畫冊，我們要保證讀者的觀看體驗，就要穿插不同的標準頁面來控制瀏覽的節奏，而不是陷入無窮無盡的文字和圖片中。

越專業的設計師，在這些頁面的使用上也會越嚴謹。合理組合通用型頁面，可以保證我們的作品集看起來正式、專業、有態度。

例如，我要制定自己作品集，那我會這么安排：

更具體的目錄結構我會在后續的 DEMO 版本中放出。

最后，目錄結構的定義還有一個特別重要的作用，就是把作品集當成一個項目來看待的話，這個目錄羅列了這個項目的任務總量。

而我們要做的，就是順著這個任務列表把后面所有的內容做完。如果任務量遠遠超出自己的承受能力，就一定要做適當的縮減，保證能按時完成作品集。

作品集風格制定

規劃了內容，下一步就是定制風格，把作品集當成一個 UI 項目來完成，好處就是這里就有了我們自由發揮視覺效果的空間了。

1. 什么是作品集風格

前面說過，作品集其實就是一本放了自己作品的畫冊，除了作品內容外，這本“畫冊”本身也是要經過設計的，而既然設計了，也就要產生相應的風格。

設計風格這個詞匯是比較抽象一點，即使作為觀看者，多數情況下你也很難完整、準確的去描繪看到的具體是什么風格。

所以，為了解決這個問題，通常我只建議大家關注下面幾個要點：

我們需要像制作 UI 項目視覺規范一樣來去制定作品集中的這些要素，并在整套作品集頁面中保持統一。

因為整套作品集會包含的頁面數量是非常多的，不做好規劃，會做著做著發現作品集一點都不整體，像是縫合怪把幾本冊子硬拼到一起去。

所以下面，我們就分別來介紹一下它們各自的要點。

2. 作品集的色系

這里我用的是色調，而不是色彩，因為它是一個更寬泛的內容。我們腦海里構思整冊格調，可以是暗黑、黑金、波普、呼吸感、宅寂白、幽暗藍、蹦迪紫之類的……

這是一種色彩的大致應用范疇，如果你有比較多的平面、網頁經驗，或者已經有鐘意的能代表自己的色彩喜好，可以直接開始動手做配色。

如果腦子里沒概念，那么就建議多花點時間去看優秀的 PPT、畫冊、作品展示案例，找到自己喜歡的色調進行模仿。

色調的考量是統一整套作品集的氛圍和基調，你可以嚴肅也可以卡通（根據不同行業可能會有偏向性），但防止我們在制作過程中色彩缺乏控制而濫用，如果最終效果變成賽博朋克蒸汽波孟菲斯風，基本就已經走向失控……

3. 作品集的布局

接下來，就到布局的問題上了。在這里也不是讓大家立馬開始動手做頁面的布局，而是確定頁面的基本柵格系統。

柵格是什么我就不具體介紹了，簡單來講，就是確定了頁面的基本尺寸后，規范內部的頁面距離和內容分布、格線系統。在確定了格線系統后，再分別將內容對齊到格線中去。

比如幻燈片式網頁的柵格應用：

或者直接查看畫冊、PPT 類格線系統的制定：

在我們使用的 1280*800 的頁面尺寸中，可以使用 12、16、24 三種格線數量，可以通過下載我們對應的素材來獲得對應的 PNG 柵格系統。

后面，我們的案例中會統一使用 24 列的柵格進行展示。

4. 作品集中的字體

和 UI 規范一樣，作品集的文字使用，肯定也包含標題、正文、注釋這三個大類，以及數字、引用等特殊文字。

要定什么文字類型，是大家各自設計過程中自己決定的，但不管定多少文字樣式，都不如選擇字體重要。

在這里也強調，作為個人的作品集，你選擇任何字體都沒問題，不用擔心版權和商用的風險，所以不要在制作過程把字體局限在免費字體庫中。

再者，根據互聯網領域的特點，我們是很難在作品集中運用偏手寫、傳統的字體類型的，尤其對于新手而言，盡可能避免使用 “襯線體”或者筆畫奇怪的個性字體。

所以，我們整理了一些建議使用的標準字體，在這范圍中選取合適的即可：

最后強調一下，文字在作品集的作用是 —— 展示想法內容，而不要把字體本身當成設計要素過度開發。

下篇閱讀：