作品集的認(rèn)識(shí)

我發(fā)現(xiàn)，有很多設(shè)計(jì)師已經(jīng)工作幾年了，其實(shí)依舊不太清楚作品集到底是什么，長(zhǎng)什么樣，對(duì)于設(shè)計(jì)師的意義。所以我們要在第一部分進(jìn)行解釋?zhuān)瑤椭蠹医⒊雒鞔_的概念。

1. 作品集的重要性

對(duì)于不同職業(yè)，評(píng)價(jià)他們水平如何的方法都不一樣，越是文書(shū)、管理、內(nèi)勤、協(xié)調(diào)等非顯性技能的職業(yè)，評(píng)判起來(lái)就越困難。所以大廠招聘會(huì)盡可能從高學(xué)歷、大廠背景入手，因?yàn)檫@些維度最容易評(píng)判。

但評(píng)價(jià)一個(gè)設(shè)計(jì)師好壞，最重要的東西必然是他的 —— 作品水平，而不是學(xué)歷、背景、經(jīng)驗(yàn)。于是，就需要一個(gè) “載體”來(lái)存放自己的作品供他查看，了解我們的水平。

不同類(lèi)型的設(shè)計(jì)師，會(huì)選擇不同的載體來(lái)制作自己的作品集，最有代表性的，就是過(guò)去品牌、建筑、工業(yè)等設(shè)計(jì)師，會(huì)通過(guò)制作一套完整的畫(huà)冊(cè)作為作品集進(jìn)行展示。

在這些領(lǐng)域中，越是高級(jí)的設(shè)計(jì)師，作品集的排版、裝幀、質(zhì)量就越好。因?yàn)樽髌芳窃O(shè)計(jì)師和外界溝通的橋梁，它就是設(shè)計(jì)師本身實(shí)力的映射。

如果設(shè)計(jì)師想要在市場(chǎng)上獲得招聘方的青睞以及面試機(jī)會(huì)，千言萬(wàn)語(yǔ)都遠(yuǎn)不如一份讓人震撼的作品集能令人信服（只不過(guò)大多數(shù)人做不出這樣的作品集出來(lái)）。

因?yàn)?，?duì)于經(jīng)驗(yàn)豐富的面試官來(lái)講，可以直接從你的作品集中判斷出你的設(shè)計(jì)能力、規(guī)范掌握。

所以，初、中級(jí)設(shè)計(jì)師想要獲得更好的發(fā)展空間、平臺(tái)、薪資，就越是要制作出足夠讓人信服的優(yōu)質(zhì)作品集。這是一個(gè)貫穿我們整個(gè)職業(yè)生涯的工作內(nèi)容，需要我們長(zhǎng)期進(jìn)行準(zhǔn)備、維護(hù)和更新。

2. 作品集制作的難點(diǎn)

紙質(zhì)的載體必然不適合 UI/UX 的作品展示，因?yàn)槲覀兊淖髌坊?RGB 環(huán)境下顯示。所以在今天，大多 UI/UX 使用 PDF 或網(wǎng)頁(yè)等電子格式來(lái)記錄。

雖然載體變更了，但作品集所運(yùn)用的設(shè)計(jì)思路、排版、行文、規(guī)格，都有大量的延續(xù)和保留。所以，平面基礎(chǔ)（排版版式）越好，輸出作品集的質(zhì)量水平也就越高。

但是，絕大多數(shù) UI/ 從業(yè)者平面能力都是不及格的，這種能力匱乏的基礎(chǔ)導(dǎo)致只能依靠模仿來(lái)完成作品集設(shè)計(jì)，于是造成了 —— 作品集同質(zhì)化。

多瀏覽站酷、UICN 的作品，或者招聘看過(guò)應(yīng)聘者投遞的簡(jiǎn)歷，你就會(huì)發(fā)現(xiàn)，UI/UX 作品集從內(nèi)容到樣式排版都表現(xiàn)出了高度的一致性。

其中，不僅僅是因?yàn)槌u成風(fēng)，還因?yàn)槠毡樾缘?UI 設(shè)計(jì)師平面基礎(chǔ)差，設(shè)計(jì)、藝術(shù)素養(yǎng)孱弱。作品集首先是一份輸出視覺(jué)感受文件，然后才是里面的思路、文字、想法、解決的問(wèn)題。

如果你在解決問(wèn)題的思路上，不能提供非常個(gè)性、拍手稱(chēng)贊的方案，那么你的作品集就避免不了和別人同質(zhì)化的結(jié)局，不能脫穎而出。

所以最好能在視覺(jué)感受到的第一步，就能和別的簡(jiǎn)歷拉開(kāi)距離，即提供更有 B 格，更高級(jí)的視覺(jué)展示輸出。

作品集中反應(yīng)的實(shí)力之一，就是設(shè)計(jì)師自身的審美趣味，但這是一個(gè)比較玄學(xué)的問(wèn)題，它隱藏在你設(shè)計(jì)中的每個(gè)角落……

應(yīng)用素材、配圖的技巧和審美息息相關(guān)，這是只能依靠自己積累才能提升的地方，是無(wú)法通過(guò)我的建議、分享來(lái)速成的。

所以，我建議大家多花時(shí)間瀏覽 Bahance 的各類(lèi)首頁(yè)作品推薦作品展示進(jìn)行積累?；蛘咭挥锌臻e時(shí)間就到當(dāng)?shù)氐膱D書(shū)管，免費(fèi)看看那些非常厚重的設(shè)計(jì)、攝影、建筑畫(huà)冊(cè)。

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

3. 作品集的格式應(yīng)用

上面講了，我們要用電子格式來(lái)保存自己的作品集。但是，相對(duì)網(wǎng)頁(yè)來(lái)說(shuō)，PDF 是一個(gè)更重要的格式，因?yàn)榍舐氝^(guò)程發(fā)送 PDF 比網(wǎng)頁(yè)有效得多，而且顯得更正式。

主流的作品集 PDF 制作方案，是通過(guò)完成基礎(chǔ)頁(yè)面的設(shè)計(jì)，然后再合并成一份完整的 PDF 文件。所以，我們需要了解這個(gè)設(shè)計(jì)過(guò)程和導(dǎo)出過(guò)程中的基礎(chǔ)規(guī)范。

首先是對(duì)于畫(huà)布創(chuàng)建上的問(wèn)題，作品集的展示類(lèi)似 PPT，會(huì)拆分成不同的頁(yè)面，并使用相對(duì)統(tǒng)一的規(guī)格（內(nèi)邊距、頁(yè)眉、頁(yè)腳等細(xì)節(jié)）。

頁(yè)面一般以橫向長(zhǎng)方形的比例為主，可以使用 3:2、4:3、16:10、16:9 等常見(jiàn)的比例，或者可以應(yīng)用標(biāo)準(zhǔn)的屏幕分辨率尺寸。

可能很多同學(xué)立馬就想到 1920*1080 的尺寸，在這我要先澆盆冷水。這個(gè)分辨率是非常不適合應(yīng)用在作品集上，原因和 WEB 設(shè)計(jì)類(lèi)似。

1080P 實(shí)際上是一個(gè)非常大的畫(huà)布，創(chuàng)建這樣的畫(huà)布會(huì)面臨非常多的問(wèn)題，首先就是文件體積，由數(shù)十上百個(gè) 1080p 頁(yè)面組成的作品集，默認(rèn)尺寸就輕松過(guò) 100MB，會(huì)對(duì)后期的壓縮造成極大的壓力。

還有，作為面試官在查看作品集的時(shí)候，通常都是以窗口化的方式查看文件的（沒(méi)見(jiàn)過(guò)全屏看作品集的），比如下面這樣。

過(guò)大的分辨率不僅浪費(fèi)，而且新手會(huì)很難控制元素的大小，字體的大小，導(dǎo)致制作過(guò)程中的版式失控。所以，我們通常建議新手將作品集長(zhǎng)寬設(shè)置成 1280*800 即可。

還有，普通 PPT 文件的所有頁(yè)面高度比例是一致的，但作品集并不需要遵守這個(gè)規(guī)則。因?yàn)闀?huì)有部分的作品展示用當(dāng)前的比例無(wú)法滿(mǎn)足。如 UI 完整頁(yè)面、網(wǎng)頁(yè)、H5 等長(zhǎng)圖等，隔斷它們看起來(lái)也會(huì)非常不理想。

所以，遇到默認(rèn)高度無(wú)法滿(mǎn)足的情況時(shí)，就可以選擇增加該頁(yè)面的高度直至符合展示需要為止（寬度不變）。不用太擔(dān)心高度不統(tǒng)一的問(wèn)題，只要頁(yè)面內(nèi)容的展示合理沒(méi)有莫名其妙的截?cái)?，那么就不?huì)讓觀眾感到不適。了解規(guī)格的概念以后，具體的展示和制作方法，將在后面進(jìn)行解釋。

作品集內(nèi)容的規(guī)劃

作品集的制作不是一次純粹的自我表達(dá)，畢竟它要連接招聘方，將自己推銷(xiāo)出去。這需要設(shè)計(jì)師經(jīng)過(guò)深思熟慮，所以我們還要了解，關(guān)于自我表達(dá)，我們需要做什么準(zhǔn)備。

1. 市場(chǎng)想看什么作品集

要提高推銷(xiāo)的概率，我們就必須站在買(mǎi)房的立場(chǎng)里進(jìn)行思考，什么樣的作品集能獲得他們的青睞。換句話(huà)說(shuō)，我們要表現(xiàn)出什么樣的能力，能滿(mǎn)足招聘市場(chǎng)的需要。

我將招聘市場(chǎng)劃分成兩個(gè)部分，低級(jí)市場(chǎng)和高級(jí)市場(chǎng)。這不是指設(shè)計(jì)師水平的高低，而是招聘企業(yè)本身的 Level 高低，它們的區(qū)別可以概括成：

低級(jí)市場(chǎng)就沒(méi)什么好分析的了，我們主要針對(duì)高級(jí)市場(chǎng)做分析，即大廠的設(shè)計(jì)師需要我們具備哪些能力。

通常，大廠對(duì) UI 設(shè)計(jì)師的要求不會(huì)只有視覺(jué)而已，更多考量的是設(shè)計(jì)師的思考能力。專(zhuān)業(yè)的 UED 團(tuán)隊(duì)是要通過(guò)設(shè)計(jì)來(lái)提升產(chǎn)品數(shù)據(jù)、轉(zhuǎn)化和收益的，而不是僅僅做出 “好看” 的設(shè)計(jì)。

所以，你既要了解你的用戶(hù)，做出能讓它們滿(mǎn)意的設(shè)計(jì)，也要參與和理解業(yè)務(wù)，給出能讓內(nèi)部成員滿(mǎn)意的方案。我們一般也稱(chēng)這種設(shè)計(jì)師叫 “全鏈路設(shè)計(jì)師” 或者 “UX 設(shè)計(jì)師”。

作品集要去滿(mǎn)足這些特性，才是符合招聘需要的作品集，而不是盲目跟從市面上高喊 UI 設(shè)計(jì)師又需要掌握的插畫(huà)、3D、動(dòng)畫(huà)軟件，你就去學(xué)這些東西然后硬往里塞，導(dǎo)致整份作品集看起來(lái)支離破碎。

多花時(shí)間去招聘網(wǎng)站整理目標(biāo)行業(yè)、企業(yè)的招聘需求，和內(nèi)部的設(shè)計(jì)師進(jìn)行溝通，可以更好的幫助我們建立對(duì)招聘要求的認(rèn)識(shí)，便于下一步的內(nèi)容制定。

2. 展示作品篩選

有了招聘需求的分析結(jié)果，這一步我們就要想往作品集塞哪些作品了。在主流的市場(chǎng)中，我們?cè)谧髌芳?PDF 中可以放的作品主要有下面這些類(lèi)型：

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

建議最少不少于 3 個(gè)，多不超過(guò) 5 個(gè)，展示太多的項(xiàng)目會(huì)導(dǎo)致作品集看起來(lái)過(guò)度臃腫，即使過(guò)去做過(guò)再多的項(xiàng)目，也只要挑選出其中最值得展示的幾個(gè)出來(lái)既可。

除了項(xiàng)目外，其它設(shè)計(jì)類(lèi)型的展示，一定要和你面向的崗位對(duì)口，如果不是校招生，就千萬(wàn)不要放有臨摹、練習(xí)類(lèi)的字樣。

即使你過(guò)去沒(méi)有這種經(jīng)驗(yàn)，你也要輸出練習(xí)稿的時(shí)候能保證看上去像真實(shí)的項(xiàng)目，并且具備能撐起該類(lèi)設(shè)計(jì)展示的數(shù)量。

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

3. 作品集目錄制定

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

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

這些頁(yè)面的引用多數(shù)是必要的，因?yàn)樽髌芳举|(zhì)上就是一本電子畫(huà)冊(cè)，我們要保證讀者的觀看體驗(yàn)，就要穿插不同的標(biāo)準(zhǔn)頁(yè)面來(lái)控制瀏覽的節(jié)奏，而不是陷入無(wú)窮無(wú)盡的文字和圖片中。

越專(zhuān)業(yè)的設(shè)計(jì)師，在這些頁(yè)面的使用上也會(huì)越嚴(yán)謹(jǐn)。合理組合通用型頁(yè)面，可以保證我們的作品集看起來(lái)正式、專(zhuān)業(yè)、有態(tài)度。

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

更具體的目錄結(jié)構(gòu)我會(huì)在后續(xù)的 DEMO 版本中放出。

最后，目錄結(jié)構(gòu)的定義還有一個(gè)特別重要的作用，就是把作品集當(dāng)成一個(gè)項(xiàng)目來(lái)看待的話(huà)，這個(gè)目錄羅列了這個(gè)項(xiàng)目的任務(wù)總量。

而我們要做的，就是順著這個(gè)任務(wù)列表把后面所有的內(nèi)容做完。如果任務(wù)量遠(yuǎn)遠(yuǎn)超出自己的承受能力，就一定要做適當(dāng)?shù)目s減，保證能按時(shí)完成作品集。

作品集風(fēng)格制定

規(guī)劃了內(nèi)容，下一步就是定制風(fēng)格，把作品集當(dāng)成一個(gè) UI 項(xiàng)目來(lái)完成，好處就是這里就有了我們自由發(fā)揮視覺(jué)效果的空間了。

1. 什么是作品集風(fēng)格

前面說(shuō)過(guò)，作品集其實(shí)就是一本放了自己作品的畫(huà)冊(cè)，除了作品內(nèi)容外，這本“畫(huà)冊(cè)”本身也是要經(jīng)過(guò)設(shè)計(jì)的，而既然設(shè)計(jì)了，也就要產(chǎn)生相應(yīng)的風(fēng)格。

設(shè)計(jì)風(fēng)格這個(gè)詞匯是比較抽象一點(diǎn)，即使作為觀看者，多數(shù)情況下你也很難完整、準(zhǔn)確的去描繪看到的具體是什么風(fēng)格。

所以，為了解決這個(gè)問(wèn)題，通常我只建議大家關(guān)注下面幾個(gè)要點(diǎn)：

我們需要像制作 UI 項(xiàng)目視覺(jué)規(guī)范一樣來(lái)去制定作品集中的這些要素，并在整套作品集頁(yè)面中保持統(tǒng)一。

因?yàn)檎鬃髌芳瘯?huì)包含的頁(yè)面數(shù)量是非常多的，不做好規(guī)劃，會(huì)做著做著發(fā)現(xiàn)作品集一點(diǎn)都不整體，像是縫合怪把幾本冊(cè)子硬拼到一起去。

所以下面，我們就分別來(lái)介紹一下它們各自的要點(diǎn)。

2. 作品集的色系

這里我用的是色調(diào)，而不是色彩，因?yàn)樗且粋€(gè)更寬泛的內(nèi)容。我們腦海里構(gòu)思整冊(cè)格調(diào)，可以是暗黑、黑金、波普、呼吸感、宅寂白、幽暗藍(lán)、蹦迪紫之類(lèi)的……

這是一種色彩的大致應(yīng)用范疇，如果你有比較多的平面、網(wǎng)頁(yè)經(jīng)驗(yàn)，或者已經(jīng)有鐘意的能代表自己的色彩喜好，可以直接開(kāi)始動(dòng)手做配色。

如果腦子里沒(méi)概念，那么就建議多花點(diǎn)時(shí)間去看優(yōu)秀的 PPT、畫(huà)冊(cè)、作品展示案例，找到自己喜歡的色調(diào)進(jìn)行模仿。

色調(diào)的考量是統(tǒng)一整套作品集的氛圍和基調(diào)，你可以嚴(yán)肅也可以卡通（根據(jù)不同行業(yè)可能會(huì)有偏向性），但防止我們?cè)谥谱鬟^(guò)程中色彩缺乏控制而濫用，如果最終效果變成賽博朋克蒸汽波孟菲斯風(fēng)，基本就已經(jīng)走向失控……

3. 作品集的布局

接下來(lái)，就到布局的問(wèn)題上了。在這里也不是讓大家立馬開(kāi)始動(dòng)手做頁(yè)面的布局，而是確定頁(yè)面的基本柵格系統(tǒng)。

柵格是什么我就不具體介紹了，簡(jiǎn)單來(lái)講，就是確定了頁(yè)面的基本尺寸后，規(guī)范內(nèi)部的頁(yè)面距離和內(nèi)容分布、格線(xiàn)系統(tǒng)。在確定了格線(xiàn)系統(tǒng)后，再分別將內(nèi)容對(duì)齊到格線(xiàn)中去。

比如幻燈片式網(wǎng)頁(yè)的柵格應(yīng)用：

或者直接查看畫(huà)冊(cè)、PPT 類(lèi)格線(xiàn)系統(tǒng)的制定：

在我們使用的 1280*800 的頁(yè)面尺寸中，可以使用 12、16、24 三種格線(xiàn)數(shù)量，可以通過(guò)下載我們對(duì)應(yīng)的素材來(lái)獲得對(duì)應(yīng)的 PNG 柵格系統(tǒng)。

后面，我們的案例中會(huì)統(tǒng)一使用 24 列的柵格進(jìn)行展示。

4. 作品集中的字體

和 UI 規(guī)范一樣，作品集的文字使用，肯定也包含標(biāo)題、正文、注釋這三個(gè)大類(lèi)，以及數(shù)字、引用等特殊文字。

要定什么文字類(lèi)型，是大家各自設(shè)計(jì)過(guò)程中自己決定的，但不管定多少文字樣式，都不如選擇字體重要。

在這里也強(qiáng)調(diào)，作為個(gè)人的作品集，你選擇任何字體都沒(méi)問(wèn)題，不用擔(dān)心版權(quán)和商用的風(fēng)險(xiǎn)，所以不要在制作過(guò)程把字體局限在免費(fèi)字體庫(kù)中。

再者，根據(jù)互聯(lián)網(wǎng)領(lǐng)域的特點(diǎn)，我們是很難在作品集中運(yùn)用偏手寫(xiě)、傳統(tǒng)的字體類(lèi)型的，尤其對(duì)于新手而言，盡可能避免使用 “襯線(xiàn)體”或者筆畫(huà)奇怪的個(gè)性字體。

所以，我們整理了一些建議使用的標(biāo)準(zhǔn)字體，在這范圍中選取合適的即可：

最后強(qiáng)調(diào)一下，文字在作品集的作用是 —— 展示想法內(nèi)容，而不要把字體本身當(dāng)成設(shè)計(jì)要素過(guò)度開(kāi)發(fā)。

下篇閱讀：