UI 作品集是用于展示 UI 作品的包裝合集，是設(shè)計師用于投遞的 "簡歷"。即使是初學(xué)者也大多對作品集有所耳聞，只是對作品集具體的表現(xiàn)形式、放什么內(nèi)容沒有明確的概念。

所以想要自己完成作品集去投遞，就要解決這個問題，這也是我們今天分享的主題。

一、設(shè)計作品集的基本認識

作品集的主要目標(biāo)是放個人作品，是所有設(shè)計行業(yè)的設(shè)計師都會輸出和準(zhǔn)備的職業(yè)證明之一。

而不同設(shè)計行業(yè)準(zhǔn)備作品集的方式不同，最早的作品集源自建筑、室內(nèi)、服裝、工業(yè)設(shè)計等成熟設(shè)計行業(yè)，從業(yè)設(shè)計師往往會將作品經(jīng)過特點的編排后，打印成冊投遞或帶去面試。很多同學(xué)可能了解過的藝術(shù)/設(shè)計留學(xué)所需的作品集，也是按這種規(guī)格進行準(zhǔn)備。

而 UI 設(shè)計和這些成熟的設(shè)計行業(yè)不同，它是誕生于數(shù)字化信息時代的，從設(shè)計的實施、落地、應(yīng)用、流通都是在電子屏幕內(nèi)，所以作品集的制作自然不需要遵循傳統(tǒng)設(shè)計行業(yè)的形式。

但是，作品集內(nèi)容應(yīng)該放什么，展示的排版布局技法，卻有很大一部分延續(xù)了傳統(tǒng)作品集的思路。所以想更好的完成作品集的輸出，就要先了解傳統(tǒng)作品集的設(shè)計思路和技法。

傳統(tǒng)作品集是遵循藝術(shù)類畫冊、雜志設(shè)計思路完成的，而這類設(shè)計最普遍的特點 —— 大留白、低信息密度，簡稱"B格高"。這類書籍在圖書館里都有常駐，有條件的話都建議沒事到圖書館里翻一翻自己體會。

之所以設(shè)計和排版走這種路線，是因為不同設(shè)計行業(yè)的創(chuàng)作成果，只看圖往往毫不出彩。尤其是品牌類設(shè)計，一個簡單的文字型 LOGO，作為一般人就完全感受不到它的專業(yè)性和設(shè)計感在哪里。

所以做作品展示的時候，光放一張圖毫無價值，必須要介紹設(shè)計背后的過程、思路，也就是添加文字說明體現(xiàn)其價值。再者，簡單的圖文展示過于簡陋，還需要用一定的設(shè)計讓讀者可以沉浸到設(shè)計師營造的"氛圍"中去，激發(fā)讀者對內(nèi)容的興趣和認可。

這種做法也適用于相關(guān)藝術(shù)的展覽，往往一面墻只放一張小畫，再配上專業(yè)的打光和充足的空間，來升華作品在觀看者眼中的印象。

這對于 UI 設(shè)計行業(yè)來說也適用，簡單陳列 UI 界面圖，往往毫無說服力，所以通過特定的文案、排版進行包裝，來提升觀看者對作品的評價。

所以總結(jié)起來，設(shè)計作品集并不是簡單陳列作品的載體，而是要在這個基礎(chǔ)上通過文字信息、排版設(shè)計完成對作品的"包裝"，提升作品質(zhì)感和外部評價的手段。

理解這點非常重要，因為作品集中所有的文字、排版、裝飾、設(shè)計都是為了凸顯作品而存在，它們是實現(xiàn)目標(biāo)的手段。而很多新手和初級設(shè)計師卻把完成這些內(nèi)容作為目標(biāo)，在錯誤的道路上越走越遠，所以無論花費多少精力和時間都收效甚微。

下面我就會圍繞這個目標(biāo)，來分享作品集制作的相關(guān)要點。

二、UI 作品集的制作解析

在這部分，我會根據(jù)作品集的制作順序提出相關(guān)的常見問題并做出解答，下面是本次會包含的問題：

1. UI 作品集的主要形式
2. UI 作品集要包含幾個項目
3. UI 作品集項目應(yīng)該怎么選
4. 每個項目要包含多少頁面
5. UI 作品集的總頁面數(shù)量限制
6. 作品集頁面的參數(shù)和規(guī)格
7. 作品集封面應(yīng)該怎么做
8. 個人信息和工作信息怎么放
9. 作品項目應(yīng)該如何做
10. 運營類作品的展示和比重
11. 作品集中的素材版權(quán)
12. UI 作品集的輸出格式
13. UI 作品集的主要形式

1. UI 作品集的主要形式

前面說過傳統(tǒng)設(shè)計作品集會以畫冊的形式為標(biāo)準(zhǔn)，通過創(chuàng)建固定寬、高的頁面作為載體，再開展設(shè)計，這可以方便后續(xù)要進行印刷和裝幀。

而 UI 作品集沒有打印的需要，主要的展示場景是在電腦、平板、手機的顯示器上，所以最合理的查看模式是從上到下滑動為主，無需考慮左右翻頁的場景。

也就是說，UI 作品集是由若干縱向排列的圖片組合而成的長圖，查看者通過上下滾動來進行翻頁。因為這種滾動查看的特性，組成作品集的每個頁面是沒有高度限制的，無需以畫冊或 PPT 的要求將它們固定在一個數(shù)值上。

雖然它是長圖，但在作品集展示中不會直接導(dǎo)出一張長圖文件，因為圖太大讀取效率低、查看不方便。所以會以其它格式進行導(dǎo)出，最常見的有兩種：

1. PDF：將所有頁面合并成一個 PDF 文件
2. 網(wǎng)頁：將所有頁面上傳到網(wǎng)站上生成鏈接

2. UI 作品集要包含哪些項目

UI 作品集主要包裝和展示的對象是完整的項目，而不是零碎的設(shè)計作品或練習(xí)作業(yè)，所以做作品前要考慮的第一件事就是要放哪些項目在里面。

放的太少，會顯得簡陋且空洞，放的太多，那看得人也沒有耐心看下去純屬無用功。所以作品集中合理的項目展示數(shù)量是 3-5 個。

而下一個難題，就是選什么項目？

第一個考慮因素是作品集求職的目標(biāo)，求職哪個端的設(shè)計就以哪種類型的項目為主，可以適當(dāng)放一個其它端的設(shè)計，但不要認為放的項目種類越多越好（只有最下層的外包行業(yè)喜歡這種作品集），這會讓專業(yè)的團隊認為你不夠?qū)Ｗⅲ┒痪?/p>

比如找 C 端工作，作品集可以放 3 個 C 端 APP 或小程序，然后加一個 B 端項目，找 B 端工作，可以放 2-3 個 B 端項目再加個小程序。

如果沒什么項目經(jīng)驗，且第一次做作品集，那就只選 3 個同類項目集中精力做好即可。

3. UI 作品集項目應(yīng)該怎么選

選項目是做作品集最大的難題之一，因為多數(shù)同學(xué)的項目經(jīng)歷（或沒有）無法支撐你們選出理想的項目。所以我們首先要強調(diào)一個原則 —— 作品項目不是你真實項目的歸檔，而是你展示最佳水平和技藝的容器。

而有工作經(jīng)驗和沒有工作經(jīng)驗是兩種情況，所以我們要分開解釋。

首先是沒有經(jīng)驗的新人，選擇的項目就是 —— 對線上項目進行系統(tǒng)改版。簡單來說，就是通過你掌握的相關(guān)知識和技能，挑選已經(jīng)上線的項目進行體驗和分析，并做出系統(tǒng)的優(yōu)化，輸出新的設(shè)計方案。

這種設(shè)計過程可以直觀的反應(yīng)設(shè)計師的思維邏輯和設(shè)計水平，遠比自己創(chuàng)造個項目還是硬編虛假的真實項目有效。很多成熟的設(shè)計師缺乏足夠項目或保密因素，也會在作品集中放改版設(shè)計成果，所以不要一直糾結(jié)于如何獲取真實項目上。

至于要選哪些對象做改版，就看個人興趣為主，但是一定要避開過于復(fù)雜、常見的產(chǎn)品，一定要挑選自己能夠理解的項目。

第二個就是有工作經(jīng)驗的設(shè)計師，如果過去做過的完整項目很多，那可以從中挑選出自己最滿意的幾個。但問題主要出現(xiàn)在經(jīng)手的項目存在各種問題，比如只是做迭代，設(shè)計的要求很低，需求給的特別混亂。

不管這些項目存在什么問題都不用糾結(jié)，因為作為作品集項目，你同樣需要重構(gòu)它們，否則無法表現(xiàn)你的最佳水平。也不用擔(dān)心后面面試中的疑問，項目最終得實現(xiàn)脫離設(shè)計稿是很常見的事情，你大可用設(shè)計方案最后沒被采納或開發(fā)不跟設(shè)計稿做來解釋（尤其 B 端）。

同時，項目也不一定全都得是完整的項目，也可以是特定的大功能、版本的迭代，可以參考大廠設(shè)計團隊日常發(fā)的項目復(fù)盤，絕大多數(shù)內(nèi)容也是以這個角度展開。

4. 每個項目要包含多少頁面

選完項目，就要確定作品集項目中應(yīng)該包含的頁面數(shù)量。因為一個完整的產(chǎn)品會包含幾十上百個不同頁面，全部做出來即沒必要，又浪費時間，但也不代表我們隨便選幾個湊出來就夠了。合理的展示數(shù)量應(yīng)該在 16-20 個頁面左右。

在我自己的課程中，我會強調(diào)在產(chǎn)品分析階段創(chuàng)建"頁面地圖"來梳理產(chǎn)品包含的頁面結(jié)構(gòu)和數(shù)量，而我們就要從中篩選出最能代表這個產(chǎn)品功能、服務(wù)、設(shè)計的頁面作為設(shè)計和展示的對象。

比如一個電商應(yīng)用，最值得展示的肯定是商品、促銷、購物的相關(guān)頁面，而不是客服、設(shè)置、條款等頁面。但也不是說選出的每個頁面都要很重要，而是可以根據(jù)展示的需要插入一些"湊數(shù)"的頁面，一方面讓展示更完整，另一方面減輕設(shè)計的工作量。

這可以再延伸出一個細節(jié)，就是成熟的設(shè)計師是根據(jù)項目的最終展示需要來選擇頁面，而不是先做了頁面最后再想怎么展示。

5. UI 作品集的總頁面數(shù)量限制

作品集作為下級頁面的組合，同樣也要關(guān)注作品集本身包含的頁面數(shù)量。如果頁面數(shù)量過少，那么作品集會很空洞像沒做完，頁面數(shù)量過多，則做起來耗時間觀看者也不會看完。

所以我們必須要把作品集整體的長度控制在合理的高度中，而這個高度其實主要是基于屏高，而不是頁面數(shù)量（因為頁面高度不一致）。

比較合理的作品集頁面屏高總數(shù)大致在 50-60 屏上下，這是容納 3 個以上項目比較合理的高度。

在我的課程里，會重點強調(diào)在作品集前期建立大綱，來控制作品集內(nèi)容和總長度，這也是對完成你作品集的工作量的規(guī)劃。

6. 作品集頁面的參數(shù)和規(guī)格

進入到作品集的設(shè)計階段，首先就要面對作品集畫布創(chuàng)建應(yīng)該多大的問題，而這和網(wǎng)頁畫布創(chuàng)建一樣是一個長期被誤解的問題。

首先就是建議大家到 Behance 等作品展示網(wǎng)站看一看，它們展示的的項目包裝內(nèi)容，是否足夠讓你看清。如果答案是肯定的，你可以用截圖工具去量下它的內(nèi)容展示寬度。

合理的作品集展示寬度在 1280-1440 之間，標(biāo)準(zhǔn)屏高度在 720-900 之間（隨頁面內(nèi)容可超出），而不是標(biāo)準(zhǔn)的 1080P（1920*1080）。

一方面觀看者幾乎不可能全屏查看作品集，另一方面過大的畫布不僅不會讓設(shè)計過程變得困難，還會影響后續(xù)導(dǎo)出的文件體積，除了弊端幾乎沒有優(yōu)點。

在創(chuàng)建畫布后，一套合理的作品集還需要創(chuàng)建相應(yīng)的柵格規(guī)范用于整套作品集的排版，具體創(chuàng)建的參數(shù)要根據(jù)設(shè)計師自己決定。沒有柵格的輔助，那么作品集的觀感一定是混亂不堪的。

7. 作品集封面應(yīng)該怎么做

對于設(shè)計師作品集而言，封面的設(shè)計一定要保證 "腔調(diào)"，因為它是其他人接觸這套作品集看到的第一個頁面，決定了第一印象。但因為 UI 設(shè)計師尤其是初學(xué)者沒有能力去完成復(fù)雜的視覺設(shè)計，所以封面一定要走簡約的路線。

封面只要增加一個作品集相關(guān)的大標(biāo)題，和少量個人信息，背景元素即可。但不要使用任何模板或是照抄網(wǎng)上流行的樣式，因為這種一眼就能看出來，對作品集的第一印象會有毀滅性的打擊。

具體的封面設(shè)計思路可以參考我以前分享的內(nèi)容：

8. 個人信息和工作信息怎么放

作品集就是設(shè)計師的簡歷，雖然項目展示是和核心，但是簡歷里放的信息，也要盡量添加到作品集中。主要的信息包含下面這些：

1. 個人信息：個人的基礎(chǔ)信息、教育信息、自我介紹等
2. 職業(yè)經(jīng)歷：經(jīng)歷過的公司和相應(yīng)的年份、崗位、職能
3. 項目經(jīng)歷：經(jīng)手的項目有哪些，主要負責(zé)哪些工作和成果

這一步主要的問題，集中在沒有職業(yè)和項目經(jīng)歷的話怎么辦？那只有一個建議，只放個人信息，后面靠足夠優(yōu)質(zhì)的作品展示來讓招聘放降低這部分要求。

9. 作品項目應(yīng)該如何做說明

到項目展示部分，就要經(jīng)過必要的包裝設(shè)計，而包裝就源自你要如何解釋項目的思路。

最合理的項目展示是反應(yīng)你完成項目設(shè)計的真實流程，你先做了哪些準(zhǔn)備工作，最后怎么開展設(shè)計，以及對不同細節(jié)設(shè)計的想法的詮釋。而不是像很多 UX 作品集一樣，套雙鉆模型寫八股文，做出堆砌文字強行分析的項目展示。

在今天的求職市場中，面試官是非常反感字多的作品集的，很少會去看里面寫了什么，尤其是字多內(nèi)容還不嚴謹?shù)?。大家更希望看設(shè)計感強的，觀看體驗舒適的作品集。

所以設(shè)計過程本身沒有什么內(nèi)容可寫，或者不知道怎么組織語言，那干脆不加一堆的分析，而是以視覺方案的展示為主（當(dāng)然要足夠優(yōu)秀）。這也是目前中高端市場中主要的作品集輸出方向，設(shè)計越來越簡約，質(zhì)感、腔調(diào)、審美的比重越來越高。

10. 運營類作品的展示和比重

運營類作品在 UI 設(shè)計工作中是非常常見的需求類型，是有必要在作品集中添加相應(yīng)的展示。但添加運營設(shè)計案例時，非常不建議在作品集末尾增加一個"其它設(shè)計"或"運營設(shè)計"分類，然后隨便填一些運營圖作品進去。

運營作品放置有兩種選項，一種是作為完整的項目展示，另一種是置入到項目展示中去。

作為完整項目的意思，就是把包含多個運營場景、成套元素、不同會場的復(fù)雜運營需求進行整合，按成套項目的標(biāo)準(zhǔn)進行包裝和輸出。

第二種方法，則是在項目視覺展示或者模塊展示中，加入有運營設(shè)計的部分。比如產(chǎn)品內(nèi)有會員或?qū)鲰撁?，有較多的運營設(shè)計需求，就可以在這種地方插入運營設(shè)計相關(guān)的成果，和產(chǎn)品進行緊密的結(jié)合。

運營設(shè)計如果不能表現(xiàn)足夠成熟的專業(yè)能力或是和項目良好地適配，那么寧愿不放。一些簡單練習(xí)，莫名其妙的臨摹案例，只會形成反效果，證明你運營設(shè)計的水平不行而已。

11. 作品集中的素材版權(quán)

在制作作品集中，不可避免地需要應(yīng)用外部素材，首當(dāng)其沖的就是字體，然后是樣機、配圖、裝飾、文，等等。

很多同學(xué)會糾結(jié)版權(quán)的問題，這里給出明確的：作品集是個人非商用用途無需考慮版權(quán)問題。

但是，素材是指設(shè)計中引用的元素，而不是指模板，或是直接照抄的成套的作品集。這么做雖然沒有版權(quán)上的商業(yè)糾紛，但是會直接影響面試官對你的看法，后果同樣很惡劣。

12. UI 作品集的輸出格式

最后一個問題，就是在完成作品集后應(yīng)該怎么輸出，我會建議準(zhǔn)備三套內(nèi)容：

1. 高清的 PDF
2. 小于 20M/10M 的 PDF
3. 獨立的網(wǎng)頁版本

首先最合適的 PDF 文件要準(zhǔn)備兩份，一份是存本地去面試時帶去現(xiàn)場看的，另一份是用來求職中在網(wǎng)上投遞的。而拉鉤、Boss 等平臺限制了文件大小，所以要實現(xiàn) PDF 的壓縮。

而制作 PDF 和壓縮 PDF，只建議將作品集導(dǎo)出成圖片以后，再使用 Photoshop 中的導(dǎo)出工具實現(xiàn) PDF 文件的輸出和壓縮，無需使用任何其它工具。

除了做 PDF 版本外，有些投遞情況對象可能要你直接發(fā)鏈接不想收文件。那么你可以把作品集導(dǎo)出圖片后上傳到一些特定工具中，再對外分享。

比如騰訊文檔、飛書文檔、Notion 等工具。

輸出完作品集，就可以投遞了，而投遞后如果一點面試機會都沒，那就優(yōu)先從作品集上找問題。99%的沒有面試的原因都是因為作品集做的不夠好，不要光糾結(jié)學(xué)歷還是項目經(jīng)驗。

可以多在不同社群把作品集發(fā)出去讓其他有工作經(jīng)驗的設(shè)計師評價，往往你就能找到問題的缺陷，去努力優(yōu)化它們。

結(jié)尾

上面包含了對作品集輸出的主要概念、規(guī)格、知識點，但不管你作品集怎么玩出花來，最重要的核心永遠是作品本身。先保證作品本身輸出的質(zhì)量過關(guān)，再考慮用作品集的包裝來放大這個效果。

如果連項目都不知道怎么做，或者完全沒辦法把它們做好，那你當(dāng)前的任務(wù)絕對不是做作品集，而是去完成基礎(chǔ)知識和技能的學(xué)習(xí)。同時作品集從零準(zhǔn)備到輸出是個大工程，見了很多新手花了半年時間也做不出像樣的成果……

作者：超人的電話亭