上期回顧：

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

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

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

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

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

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

比如下面制作的簡單案例：

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

2. 個人介紹頁

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

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

針對個人簡介，你可以參考下面這樣的布局形式：

一定要保持介紹頁的簡潔，直觀，避免廢話。尤其是一些學(xué)校的獎項(xiàng)、經(jīng)歷對面試者來說毫無意義。

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

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

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

比如參考下面的案例：

4. 目錄頁面

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

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

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

5. 類型分隔頁

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2. 網(wǎng)頁類作品展示

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

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

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

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

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

3. 運(yùn)營類作品展示

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

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

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

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

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

4. 其它作品展示

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

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

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

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

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

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

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

1. 作品集的制作軟件

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

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

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

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

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

2. PDF 文件的壓縮

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

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

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

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

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

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

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

素材分享一覽

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

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

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

2. 字體素材分享

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

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

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

3. Mockup 素材分享

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

4. 作品包裝參考

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

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

結(jié)尾分享

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

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

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

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

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

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

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

我們下篇再賤……