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

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

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

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

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

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

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

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

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

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

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

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

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

理解這點(diǎn)非常重要，因?yàn)樽髌芳兴械奈淖帧⑴虐妗⒀b飾、設(shè)計(jì)都是為了凸顯作品而存在，它們是實(shí)現(xiàn)目標(biāo)的手段。而很多新手和初級設(shè)計(jì)師卻把完成這些內(nèi)容作為目標(biāo)，在錯誤的道路上越走越遠(yuǎn)，所以無論花費(fèi)多少精力和時間都收效甚微。

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

二、UI 作品集的制作解析

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

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

1. UI 作品集的主要形式

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

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

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

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

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

2. UI 作品集要包含哪些項(xiàng)目

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

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

而下一個難題，就是選什么項(xiàng)目？

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

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

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

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

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

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

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

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

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

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

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

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

4. 每個項(xiàng)目要包含多少頁面

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

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

可以參考我之前分享的頁面選擇說明：

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

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

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

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

所以我們必須要把作品集整體的長度控制在合理的高度中，而這個高度其實(shí)主要是基于屏高，而不是頁面數(shù)量（因?yàn)轫撁娓叨炔灰恢拢?/p>

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

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

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

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

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

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

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

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

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

對于設(shè)計(jì)師作品集而言，封面的設(shè)計(jì)一定要保證 “腔調(diào)”，因?yàn)樗瞧渌私佑|這套作品集看到的第一個頁面，決定了第一印象。但因?yàn)?UI 設(shè)計(jì)師尤其是初學(xué)者沒有能力去完成復(fù)雜的視覺設(shè)計(jì)，所以封面一定要走簡約的路線。

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

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

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

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

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

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

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

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

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

在今天的求職市場中，面試官是非常反感字多的作品集的，很少會去看里面寫了什么，尤其是字多內(nèi)容還不嚴(yán)謹(jǐn)?shù)摹４蠹腋Ｍ丛O(shè)計(jì)感強(qiáng)的，觀看體驗(yàn)舒適的作品集。

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

10. 運(yùn)營類作品的展示和比重

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

運(yùn)營作品放置有兩種選項(xiàng)，一種是作為完整的項(xiàng)目展示，另一種是置入到項(xiàng)目展示中去。

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

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

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

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

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

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

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

12. UI 作品集的輸出格式

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

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

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

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

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

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

輸出完作品集，就可以投遞了，而投遞后如果一點(diǎn)面試機(jī)會都沒，那就優(yōu)先從作品集上找問題。99%的沒有面試的原因都是因?yàn)樽髌芳龅牟粔蚝茫灰饧m結(jié)學(xué)歷還是項(xiàng)目經(jīng)驗(yàn)。

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

結(jié)尾

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

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

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