上期回顧：

標(biāo)準(zhǔn)頁(yè)面的設(shè)計(jì)

前面準(zhǔn)備都做完了，就終于到我們具體開(kāi)始動(dòng)手做設(shè)計(jì)的階段了。作為一個(gè)完整項(xiàng)目，設(shè)計(jì)必然先從標(biāo)準(zhǔn)頁(yè)面類(lèi)型展開(kāi)，這樣方便進(jìn)行視覺(jué)風(fēng)格的制定和統(tǒng)一。

1. 封面設(shè)計(jì)

封面設(shè)計(jì)是別人打開(kāi)我們作品集看見(jiàn)的第一眼，而第一眼，就要盡量建立良好的印象。

所謂的好印象，不是讓你像做電商一樣用非常有侵略性的視覺(jué)效果去侵襲觀看者的“眼睛”，而是簡(jiǎn)單又不失優(yōu)雅地展示自己孤高的品味和矜持（怎么這么繞口）……

所以，封面設(shè)計(jì)盡量做得簡(jiǎn)介、干練，能帶來(lái)舒適的觀看體驗(yàn)。如果自己沒(méi)有什么想法，就多到網(wǎng)上找 PPT 式的優(yōu)秀案例，對(duì)版式進(jìn)行合理的模仿（不用完全一摸一樣）。

比如下面制作的簡(jiǎn)單案例：

TIPS：不要在封面上放一些精度特別差的插畫(huà)，或者拍的太隨意的自拍照片，顏值自信的就找天真藍(lán)還是海馬之類(lèi)的拍點(diǎn)正經(jīng)職業(yè)照。

2. 個(gè)人介紹頁(yè)

個(gè)人介紹頁(yè)面，主要放我們自己個(gè)人的基本簡(jiǎn)介，這里要強(qiáng)調(diào)作品集的個(gè)人介紹和完整的簡(jiǎn)歷文檔是不一樣的。

作品集主要展示作品為主，太瑣碎的個(gè)人信息是沒(méi)有必要加入的，所以該頁(yè)面只需要包含基礎(chǔ)的 3 個(gè)模塊：照片、基本信息、個(gè)人簡(jiǎn)介。

針對(duì)個(gè)人簡(jiǎn)介，你可以參考下面這樣的布局形式：

一定要保持介紹頁(yè)的簡(jiǎn)潔，直觀，避免廢話。尤其是一些學(xué)校的獎(jiǎng)項(xiàng)、經(jīng)歷對(duì)面試者來(lái)說(shuō)毫無(wú)意義。

3. 職業(yè)經(jīng)歷頁(yè)

關(guān)于個(gè)人工作經(jīng)驗(yàn)的部分，需要和介紹分隔開(kāi)，單獨(dú)放一頁(yè)。

工作經(jīng)歷是有非常強(qiáng)的時(shí)間屬性的，所以我們?cè)谥谱鬟^(guò)程中也要盡量能讓觀看者清晰的看出我們從業(yè)的整體情況，建議使用時(shí)間線的方式來(lái)呈現(xiàn)該頁(yè)面。

比如參考下面的案例：

4. 目錄頁(yè)面

目錄頁(yè)，主要用來(lái)快速交代整份作品集中包含的作品、結(jié)構(gòu)、順序，而不是放得非常正式的像真實(shí)書(shū)籍一樣還標(biāo)注對(duì)應(yīng)頁(yè)面位置。

所以，在這個(gè)頁(yè)面除了模塊標(biāo)題外，盡可能搭配相關(guān)的圖片，讓觀看者更容易識(shí)別。

至于目錄應(yīng)該以設(shè)計(jì)類(lèi)型還是項(xiàng)目為單位，或者要呈現(xiàn)幾級(jí)，就是制作者自己決定的了。

5. 類(lèi)型分隔頁(yè)

我們要對(duì)每個(gè)大的模塊之間，設(shè)計(jì)對(duì)應(yīng)的封面作為前后內(nèi)容的分隔，告訴觀看者進(jìn)入新的章節(jié)，以及對(duì)應(yīng)的作品是什么。

這類(lèi)封面的設(shè)計(jì)，只需保證標(biāo)題清晰、對(duì)展示內(nèi)容呈現(xiàn)準(zhǔn)確，避免過(guò)度設(shè)計(jì)即可。

通常，對(duì)類(lèi)型封面設(shè)計(jì)比較隨意的作品集，會(huì)導(dǎo)致觀看過(guò)程沒(méi)有停頓，閱讀體驗(yàn)變差。

以上案例只是給大家的一些參考，任何類(lèi)型的頁(yè)面布局、設(shè)計(jì)都可以有自由發(fā)揮的空間，只要設(shè)計(jì)能符合該頁(yè)面的功能性即可。

作品展示頁(yè)面設(shè)計(jì)

完成標(biāo)準(zhǔn)頁(yè)面的展示，下面就要上主菜，展開(kāi)對(duì)完整項(xiàng)目、視覺(jué)作品展示的制作了。

1. UI 類(lèi)項(xiàng)目展示

項(xiàng)目案例前面有提過(guò)，我們重點(diǎn)要放的是你認(rèn)為最能代表你水準(zhǔn)，或者符合投遞公司喜好的類(lèi)型，只需要放 3-5 個(gè)就夠了。但每個(gè)項(xiàng)目要展示什么，才是這里要重點(diǎn)談?wù)摰臇|西。

對(duì)于 UX 的項(xiàng)目來(lái)說(shuō)，優(yōu)秀的界面視覺(jué)作品是必備的，如果你選出的項(xiàng)目質(zhì)量不行，那么一定要花點(diǎn)時(shí)間翻新一遍設(shè)計(jì)和樣式，保證輸出內(nèi)容的優(yōu)質(zhì)性。

要注意的是，界面的視覺(jué)，只是我們對(duì)項(xiàng)目作品判斷的其中一部分而已，對(duì)于注重實(shí)戰(zhàn)、效率、KPI 的團(tuán)隊(duì)來(lái)說(shuō)，占比甚至更低。

我們要知道 UX 設(shè)計(jì)的核心理念，是以用戶體驗(yàn)為中心的設(shè)計(jì)實(shí)踐，通過(guò)讓用戶獲得滿意的體驗(yàn)從而提升產(chǎn)品效益。所以，項(xiàng)目的展示要能體現(xiàn)這種要素。

換個(gè)說(shuō)法，就是你如何用你的專(zhuān)業(yè)能力，為項(xiàng)目和產(chǎn)品賦能（賺錢(qián)……）。把它當(dāng)成一份報(bào)告來(lái)看待，那么項(xiàng)目的主線就應(yīng)該是為了解決項(xiàng)目問(wèn)題，你做了什么，成果如何。

一定要牢記，視覺(jué)設(shè)計(jì)得如何和有沒(méi)有解決項(xiàng)目問(wèn)題提升產(chǎn)品效益沒(méi)有必然聯(lián)系，你必須通過(guò)其它展示內(nèi)容來(lái)表現(xiàn)。

項(xiàng)目展示是很麻煩的，不同領(lǐng)域、項(xiàng)目的做法也不一樣。所以為了解決這種問(wèn)題，我們要先通過(guò)大綱規(guī)劃，讓展示的內(nèi)容有說(shuō)服力，連貫性和邏輯性。

大綱的規(guī)劃方式并不需要借助其它工具，只要像寫(xiě)報(bào)告、論文的形式將主要步驟記錄下來(lái)即可，比如：

• 介紹項(xiàng)目的基本情況，以及產(chǎn)品需求
• 講解目標(biāo)用戶的對(duì)應(yīng)認(rèn)識(shí)和總結(jié)
• 分析當(dāng)前產(chǎn)品已有的問(wèn)題，提升的機(jī)會(huì)點(diǎn)
• 給出自己要如何改版的相關(guān)想法、構(gòu)思
• 根據(jù)前面想法輸出新的流程和原型
• 以及對(duì)應(yīng)新的色彩和其它細(xì)節(jié)規(guī)范展示
• 對(duì)最終設(shè)計(jì)出來(lái)的頁(yè)面進(jìn)行細(xì)節(jié)的說(shuō)明
• 展示改版后相關(guān)數(shù)據(jù)指標(biāo)的提升，肯定設(shè)計(jì)成果

這個(gè)規(guī)劃是可以任意調(diào)整的，以及將展示的內(nèi)容規(guī)劃到更細(xì)的層面，比如用戶認(rèn)識(shí)上，有用戶畫(huà)像的整理、同理心地圖、訪談、問(wèn)卷和情緒版等等。

還有，更靈活一點(diǎn)的展示甚至可以在開(kāi)頭放你做的項(xiàng)目準(zhǔn)備的流程，設(shè)計(jì)過(guò)程中的部分團(tuán)隊(duì)攝影圖和難點(diǎn)說(shuō)明，在項(xiàng)目結(jié)尾放有關(guān)的復(fù)盤(pán)和反思等等。

如果你對(duì)整體的大綱沒(méi)有計(jì)劃，只是生硬的照搬別人案例展示的內(nèi)容和分析工具，那這樣的項(xiàng)目是非?？斩吹?。項(xiàng)目展示的合理性，并不是為了高大上而高大上，假大空的分析內(nèi)容用多了，反而越是讓面試官覺(jué)得你外強(qiáng)中干。

如果沒(méi)有實(shí)戰(zhàn)項(xiàng)目，Redesign 項(xiàng)目的設(shè)計(jì)思路就不要照搬真實(shí)項(xiàng)目，尤其是沒(méi)有真實(shí)性的數(shù)據(jù)展現(xiàn)和分析。

使用其它的分析方法來(lái)解決問(wèn)題，同樣可以得到讓人信服的結(jié)果，不要放你駕馭不了的內(nèi)容和編造數(shù)據(jù)。

接著我們就要?jiǎng)邮诌M(jìn)行內(nèi)容的設(shè)計(jì)了。首先，項(xiàng)目在展示的形式上有兩種，網(wǎng)頁(yè)式和 PPT 式的。

它們最大的不同點(diǎn)在于，網(wǎng)頁(yè)式的展示更講究?jī)?nèi)容的一氣呵成，制作難度更高，效果也更好。而 PPT 式則是不同的展示模塊涇渭分明，對(duì)樣式布局有比較多的局限。

我們前面講過(guò)，作品集盡量以標(biāo)準(zhǔn)頁(yè)面制作，也就是以 PPT 形式展示，在一些特定的模塊中使用長(zhǎng)圖，這樣效率也會(huì)比網(wǎng)頁(yè)型的更高。

而項(xiàng)目展示的頁(yè)面數(shù)量同樣是不少的，我們借助前面的規(guī)劃，還要進(jìn)一步梳理具體包含哪些展示頁(yè)面，比如：

上面的案例作為示例比較精簡(jiǎn)，高級(jí) UX 設(shè)計(jì)師的作品集往往只多不少。所以頁(yè)面越多，我們?cè)谧鲆?guī)劃的時(shí)候就要越仔細(xì)一點(diǎn)，以免后續(xù)的執(zhí)行中剎不住車(chē)越做頁(yè)面越多越亂。

雖然頁(yè)面的類(lèi)型多，但展示的設(shè)計(jì)上排版和制作 PPT 或畫(huà)冊(cè)依舊是很相似的，可以看看下面的示例：

如果我們所有頁(yè)面采取統(tǒng)一的長(zhǎng)寬比，局限性會(huì)體現(xiàn)在出現(xiàn)長(zhǎng)頁(yè)面的情況下。比如首頁(yè)、精選這種高度特別長(zhǎng)的界面，完全無(wú)法容納。所以，我會(huì)建議遇到這樣的情況，就增加該頁(yè)面的高度，即使變更比例也不要緊。

每套項(xiàng)目應(yīng)用的可以和作品集整體的視覺(jué)保持統(tǒng)一，也可以根據(jù)項(xiàng)目獨(dú)立制定。當(dāng)然，如果要讓每個(gè)項(xiàng)目的排版視覺(jué)產(chǎn)生差異，那我只建議躲在色彩上下功夫，而不要在排版和字體上做文章。

同時(shí)，在 UI 類(lèi)項(xiàng)目展示上，樣機(jī)是不可或缺的，無(wú)論通過(guò)場(chǎng)景 Mockup 渲染主題氛圍，還是使用普通邊框容納界面畫(huà)布，都可以很好的提升展示內(nèi)容的專(zhuān)業(yè)性。

2. 網(wǎng)頁(yè)類(lèi)作品展示

項(xiàng)目展示完，主菜上完了，最后我們就要端甜品出來(lái)了。展示就不用再這么復(fù)雜了，只需要以突出視覺(jué)為主就可以。

首先講的是網(wǎng)頁(yè)有關(guān)的作品，依舊屬于 UI 有關(guān)的范疇中。如果不是作為項(xiàng)目展示網(wǎng)站的話，那么網(wǎng)頁(yè)的展示就建議只以主頁(yè)、關(guān)鍵頁(yè)面進(jìn)行展示即可。

同樣的，我們展示網(wǎng)頁(yè)不是把導(dǎo)出的頁(yè)面直接填充到作品集畫(huà)布里去就完事了，也同樣需要經(jīng)過(guò)一些包裝和設(shè)計(jì)。

首先是單屏高的網(wǎng)頁(yè)作品，這類(lèi)展示起來(lái)是最容易的，縮小案例的尺寸置入畫(huà)布中，再增加一些背景元素即可。

如果是長(zhǎng)屏的網(wǎng)頁(yè)，類(lèi)似官網(wǎng)主頁(yè)或產(chǎn)品主頁(yè)，那么該展示頁(yè)同樣要增加高度去容納它，同時(shí)也增加背景色、背景圖、電腦樣機(jī)等素材來(lái)豐富展示效果。

3. 運(yùn)營(yíng)類(lèi)作品展示

然后，就是運(yùn)營(yíng)類(lèi)設(shè)計(jì)的展示了。一般來(lái)說(shuō)，設(shè)計(jì) Banner 和活動(dòng)頁(yè)是我們工作設(shè)計(jì)得最多的兩種運(yùn)營(yíng)材料。

Banner 的展示同樣需要有背景作為襯托，但是，如果我們要放 Banner 的話，就盡量是一次放一套同主題、同風(fēng)格的作品，不要一張放一個(gè)界面，那樣像是強(qiáng)行在拉篇幅。

如果手頭沒(méi)有整套的，那就根據(jù)原有的設(shè)計(jì)作品進(jìn)行拓展，自己定一些新文案做成整組的，這樣看起來(lái)才具有更好的專(zhuān)業(yè)性，展示案例可以看下圖：

而在 H5 活動(dòng)頁(yè)面的展示上，一個(gè)項(xiàng)目也盡可能展示多個(gè)頁(yè)面，讓作品的完整度更圓滿一點(diǎn)。

如果這套 H5 的設(shè)計(jì)過(guò)程非常復(fù)雜，你也可以把構(gòu)思和準(zhǔn)備工作也做進(jìn)去。當(dāng)然，這類(lèi)作品的視覺(jué)要求最高，需要花更多的心思到場(chǎng)景的設(shè)計(jì)和氛圍的豐富上。

4. 其它作品展示

最后，我們來(lái)講講插畫(huà)或者 C4D 作品的展示（選填）了。作為已經(jīng)避免面試正職的作品集來(lái)說(shuō)，插畫(huà)或者 C4D 類(lèi)的作品，多數(shù)情況下是不需要放的，尤其在你自己沒(méi)有學(xué)過(guò)或者掌握程度一般的情況。

插畫(huà)和 C4D 對(duì)于用戶體驗(yàn)的效果并不多，且它們的主要應(yīng)用方向都在運(yùn)營(yíng)類(lèi)的設(shè)計(jì)（少部分在情感化）。如果一定要展示這類(lèi)設(shè)計(jì)作品，一定不要放一些干巴巴的練習(xí)作品，內(nèi)容不知所謂空洞無(wú)物的練習(xí)或臨摹，比如下面這些。

作為面試官來(lái)說(shuō)，看這部分機(jī)能要看的，是你怎么在業(yè)務(wù)場(chǎng)景下輸出應(yīng)用插畫(huà)技能或 3D 技能，而不是展示一些半吊子看看網(wǎng)上教程就能做出來(lái)的作品。

所以插畫(huà)和 C4D 你要放，就一定要分配對(duì)應(yīng)的載體，是做 Banner 上，還是 H5、網(wǎng)頁(yè)、管理界面、商品詳情等。

完成作品的對(duì)應(yīng)包裝，最后，就可以開(kāi)始合并 PDF 文件了。

作品集的制作和導(dǎo)出

本來(lái)這部分不想放的，但發(fā)現(xiàn)很多同學(xué)在這個(gè)問(wèn)題上都會(huì)產(chǎn)生非常大的分歧，所以統(tǒng)一解釋一遍。

1. 作品集的制作軟件

制作作品集，頁(yè)面的主要制作工具必然是要使用 Sketch/XD/Figma 的，原因和設(shè)計(jì) UI 界面類(lèi)似，頁(yè)面數(shù)多，內(nèi)容多，為了效率就需要使用這類(lèi)軟件。

如果現(xiàn)在還抱著使用 PS、AI 的思路來(lái)制作內(nèi)容頁(yè)面（不是不可以），那么效率一定會(huì)受到嚴(yán)重的拖累。它們應(yīng)用的場(chǎng)景并不在制作主要頁(yè)面的過(guò)程中，而是對(duì)特定素材進(jìn)行處理。

比如常見(jiàn)的 UI 樣機(jī)素材，質(zhì)量最好的一般都是由 PSD 文件構(gòu)成的，無(wú)論是單機(jī)還是場(chǎng)景圖。

我們需要通過(guò) PS 來(lái)完成多數(shù)素材的調(diào)整，樣機(jī)圖片的修改、合成、導(dǎo)出，將有背景的場(chǎng)景圖導(dǎo)出成 JPG，將透明背景的樣機(jī)導(dǎo)出成 PNG，再導(dǎo)入到作品集畫(huà)布中去。

以及，最終我們也會(huì)使用 PS 來(lái)輸出 PDF 文件，即將所有頁(yè)面導(dǎo)出成位圖并命名以后，使用 PS 的“文件——自動(dòng)——PDF演示文稿” 功能生成即可。

2. PDF 文件的壓縮

雖然我們可以通過(guò) PS 快速生成一份 PDF 文件，但流程還沒(méi)完全結(jié)束。正常生成一份 PDF 的文件通常都非常大（超過(guò) 100M），因?yàn)轫?yè)面數(shù)太多了。這么大的文件不僅傳輸起來(lái)費(fèi)勁，而且很多平臺(tái)不支持 10MB 以上的簡(jiǎn)歷提交。

所以，我們還有個(gè)目標(biāo)，就把 PDF 壓縮到 10MB 以內(nèi)。

壓縮 PDF，并不是我們看見(jiàn)的字面意思，直接拿 PDF 去找工具壓縮，這種壓縮效果非常差。最好的壓縮辦法，是對(duì)作品集頁(yè)面的位圖文件先進(jìn)行壓縮，然后再合并 PDF。這里，還是建議使用 PS，使用 “文件——腳本——圖像處理器”，將品質(zhì)設(shè)置成3-6，批量的壓縮圖片。

壓縮后的所有圖片文件尺寸，可以通過(guò)上級(jí)文件夾來(lái)查看，如果遠(yuǎn)超 10MB，就把圖片質(zhì)量再往下調(diào)，直至達(dá)到指定要求為止。

當(dāng)然這是一種比較偷懶的辦法，如果你不嫌麻煩，想要在 10MB 內(nèi)獲得最好的畫(huà)質(zhì)效果，那么每張圖片的壓縮比例是可以有差異的。簡(jiǎn)單的、標(biāo)準(zhǔn)頁(yè)面壓縮率更高，把空間留給展示內(nèi)容更多的頁(yè)面。

這時(shí)我們就可以使用 PS 的 “文件——導(dǎo)出——WEB所用格式”，將格式設(shè)置成 JPG，然后拖動(dòng)品質(zhì)的滑塊控制導(dǎo)出質(zhì)量和文件大小。

最終，經(jīng)過(guò)反復(fù)的調(diào)試，直至我們導(dǎo)出一份滿意的小于 10MB 的作品集文件為止。

素材分享一覽

針對(duì)作品集應(yīng)該用到的素材內(nèi)容，我們已經(jīng)煞費(fèi)苦心的準(zhǔn)備好了，包含了各式各樣的文件內(nèi)容，下面我們統(tǒng)一羅列出來(lái)。文末/底部下載即可

1. 我們的自創(chuàng)素材分享

文章中包含的部分素材會(huì)分享出來(lái)，包含柵格的 PNG、標(biāo)準(zhǔn)頁(yè)面、網(wǎng)頁(yè)包裝原型和 APP 包裝原型的 Sketch 源文件等等。

2. 字體素材分享

為你們準(zhǔn)備了最常用的中文和西文字體，數(shù)量雖然不多，卻是我們?cè)诋a(chǎn)出項(xiàng)目包裝時(shí)使用頻率最高、通用性最強(qiáng)的。一共十二款字體，中西文各六款。在作品集中使用沒(méi)有任何版權(quán)問(wèn)題，商用記得自己百度搜。

中文字體包含阿里巴巴普惠、冬青黑、小米蘭亭、漢儀旗黑、思源黑體、OPPOSans：

英文數(shù)字字體包含 BEBAS、DIN、Futura、Gotham、Monsterrat、Moon：

3. Mockup 素材分享

對(duì)作品集中需要使用的樣機(jī)、場(chǎng)景，也做了對(duì)應(yīng)收集，包含了 6 種類(lèi)型的 Mockup，VI、名片、手表、iPad、收集和電腦：

4. 作品包裝參考

最后，對(duì)于作品集包裝的一些參考，我們也做了對(duì)應(yīng)的整理，包含對(duì) APP 項(xiàng)目的包裝，以及網(wǎng)頁(yè)的相關(guān)包裝圖例，幫助大家找到更多靈感：

時(shí)間關(guān)系，還有很多素材還來(lái)不及整理完善，我們會(huì)持續(xù)保持這套作品集內(nèi)容的更新，可以過(guò)一陣子再回復(fù)，說(shuō)不定就有新上內(nèi)容。

結(jié)尾分享

前面基本已經(jīng)把作品集該怎么做的內(nèi)容講完了，最后就夾帶點(diǎn)私貨，分享一些個(gè)人的見(jiàn)解好了。

作品集作為一個(gè)面向社會(huì)職場(chǎng)的展示窗口，就包含了內(nèi)在的社會(huì)屬性，它和社會(huì)公約是無(wú)法切割開(kāi)的。當(dāng)你把作品集做完開(kāi)始在公共場(chǎng)合、平臺(tái)展示，或者投遞出去，就要受到公約的審視。

也就是說(shuō)在作品集中偽造工作經(jīng)驗(yàn)、張冠李戴、惡性抄襲、雇傭槍手，就要直視可能產(chǎn)生的后果。類(lèi)似前陣子某阿里新入職員工像素級(jí)抄襲被舉報(bào)事件，最后的結(jié)果必然是被開(kāi)除再上大廠黑名單，被同行不齒。

當(dāng)然，有些人覺(jué)得抄就抄了，反正不去大廠，被發(fā)現(xiàn)再換個(gè)公司，首要問(wèn)題是解決入行的問(wèn)題。這是非常危險(xiǎn)的思想，短期內(nèi)作品集通不過(guò)很正常，正常的心態(tài)是要從自己身上挖掘問(wèn)題，提升自己和作品集質(zhì)量來(lái)實(shí)現(xiàn)目標(biāo)。

但是，不以自己能力為核心，總想著走偏門(mén)作假，那么丟失的心氣就基本找不回來(lái)了，絕大多數(shù)情況下只會(huì)邁向更高級(jí)的造假，更復(fù)雜的謊言和更沒(méi)有下限的演技。

周樹(shù)人（萬(wàn)能引用）說(shuō)，如果已經(jīng)跪下爬習(xí)慣了，就會(huì)忘記如何直立行走……

希望這篇分享可以幫助到你們，有其它疑惑的同學(xué)可以在留言區(qū)中留言。

我們下篇再賤……