萬字干貨！UX作品集制作指南（下）

上期回顧：

標準頁面的設計

前面準備都做完了，就終于到我們具體開始動手做設計的階段了。作為一個完整項目，設計必然先從標準頁面類型展開，這樣方便進行視覺風格的制定和統一。

1. 封面設計

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

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

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

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

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

2. 個人介紹頁

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

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

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

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

3. 職業經歷頁

關于個人工作經驗的部分，需要和介紹分隔開，單獨放一頁。

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

比如參考下面的案例：

4. 目錄頁面

目錄頁，主要用來快速交代整份作品集中包含的作品、結構、順序，而不是放得非常正式的像真實書籍一樣還標注對應頁面位置。

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

至于目錄應該以設計類型還是項目為單位，或者要呈現幾級，就是制作者自己決定的了。

5. 類型分隔頁

我們要對每個大的模塊之間，設計對應的封面作為前后內容的分隔，告訴觀看者進入新的章節，以及對應的作品是什么。

這類封面的設計，只需保證標題清晰、對展示內容呈現準確，避免過度設計即可。

通常，對類型封面設計比較隨意的作品集，會導致觀看過程沒有停頓，閱讀體驗變差。

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

作品展示頁面設計

完成標準頁面的展示，下面就要上主菜，展開對完整項目、視覺作品展示的制作了。

1. UI 類項目展示

項目案例前面有提過，我們重點要放的是你認為最能代表你水準，或者符合投遞公司喜好的類型，只需要放 3-5 個就夠了。但每個項目要展示什么，才是這里要重點談論的東西。

對于 UX 的項目來說，優秀的界面視覺作品是必備的，如果你選出的項目質量不行，那么一定要花點時間翻新一遍設計和樣式，保證輸出內容的優質性。

要注意的是，界面的視覺，只是我們對項目作品判斷的其中一部分而已，對于注重實戰、效率、KPI 的團隊來說，占比甚至更低。

我們要知道 UX 設計的核心理念，是以用戶體驗為中心的設計實踐，通過讓用戶獲得滿意的體驗從而提升產品效益。所以，項目的展示要能體現這種要素。

換個說法，就是你如何用你的專業能力，為項目和產品賦能（賺錢……）。把它當成一份報告來看待，那么項目的主線就應該是為了解決項目問題，你做了什么，成果如何。

一定要牢記，視覺設計得如何和有沒有解決項目問題提升產品效益沒有必然聯系，你必須通過其它展示內容來表現。

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

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

• 介紹項目的基本情況，以及產品需求
• 講解目標用戶的對應認識和總結
• 分析當前產品已有的問題，提升的機會點
• 給出自己要如何改版的相關想法、構思
• 根據前面想法輸出新的流程和原型
• 以及對應新的色彩和其它細節規范展示
• 對最終設計出來的頁面進行細節的說明
• 展示改版后相關數據指標的提升，肯定設計成果

這個規劃是可以任意調整的，以及將展示的內容規劃到更細的層面，比如用戶認識上，有用戶畫像的整理、同理心地圖、訪談、問卷和情緒版等等。

還有，更靈活一點的展示甚至可以在開頭放你做的項目準備的流程，設計過程中的部分團隊攝影圖和難點說明，在項目結尾放有關的復盤和反思等等。

如果你對整體的大綱沒有計劃，只是生硬的照搬別人案例展示的內容和分析工具，那這樣的項目是非常空洞的。項目展示的合理性，并不是為了高大上而高大上，假大空的分析內容用多了，反而越是讓面試官覺得你外強中干。

如果沒有實戰項目，Redesign 項目的設計思路就不要照搬真實項目，尤其是沒有真實性的數據展現和分析。

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

接著我們就要動手進行內容的設計了。首先，項目在展示的形式上有兩種，網頁式和 PPT 式的。

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

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

而項目展示的頁面數量同樣是不少的，我們借助前面的規劃，還要進一步梳理具體包含哪些展示頁面，比如：

上面的案例作為示例比較精簡，高級 UX 設計師的作品集往往只多不少。所以頁面越多，我們在做規劃的時候就要越仔細一點，以免后續的執行中剎不住車越做頁面越多越亂。

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

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

每套項目應用的可以和作品集整體的視覺保持統一，也可以根據項目獨立制定。當然，如果要讓每個項目的排版視覺產生差異，那我只建議躲在色彩上下功夫，而不要在排版和字體上做文章。

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

2. 網頁類作品展示

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

首先講的是網頁有關的作品，依舊屬于 UI 有關的范疇中。如果不是作為項目展示網站的話，那么網頁的展示就建議只以主頁、關鍵頁面進行展示即可。

同樣的，我們展示網頁不是把導出的頁面直接填充到作品集畫布里去就完事了，也同樣需要經過一些包裝和設計。

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

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

3. 運營類作品展示

然后，就是運營類設計的展示了。一般來說，設計 Banner 和活動頁是我們工作設計得最多的兩種運營材料。

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

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

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

如果這套 H5 的設計過程非常復雜，你也可以把構思和準備工作也做進去。當然，這類作品的視覺要求最高，需要花更多的心思到場景的設計和氛圍的豐富上。

4. 其它作品展示

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

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

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

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

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

作品集的制作和導出

本來這部分不想放的，但發現很多同學在這個問題上都會產生非常大的分歧，所以統一解釋一遍。

1. 作品集的制作軟件

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

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

比如常見的 UI 樣機素材，質量最好的一般都是由 PSD 文件構成的，無論是單機還是場景圖。

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

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

2. PDF 文件的壓縮

雖然我們可以通過 PS 快速生成一份 PDF 文件，但流程還沒完全結束。正常生成一份 PDF 的文件通常都非常大（超過 100M），因為頁面數太多了。這么大的文件不僅傳輸起來費勁，而且很多平臺不支持 10MB 以上的簡歷提交。

所以，我們還有個目標，就把 PDF 壓縮到 10MB 以內。

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

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

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

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

最終，經過反復的調試，直至我們導出一份滿意的小于 10MB 的作品集文件為止。

素材分享一覽

針對作品集應該用到的素材內容，我們已經煞費苦心的準備好了，包含了各式各樣的文件內容，下面我們統一羅列出來。文末/底部下載即可

1. 我們的自創素材分享

文章中包含的部分素材會分享出來，包含柵格的 PNG、標準頁面、網頁包裝原型和 APP 包裝原型的 Sketch 源文件等等。

2. 字體素材分享

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

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

英文數字字體包含 BEBAS、DIN、Futura、Gotham、Monsterrat、Moon：

3. Mockup 素材分享

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

4. 作品包裝參考

最后，對于作品集包裝的一些參考，我們也做了對應的整理，包含對 APP 項目的包裝，以及網頁的相關包裝圖例，幫助大家找到更多靈感：

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

結尾分享

前面基本已經把作品集該怎么做的內容講完了，最后就夾帶點私貨，分享一些個人的見解好了。

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

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

當然，有些人覺得抄就抄了，反正不去大廠，被發現再換個公司，首要問題是解決入行的問題。這是非常危險的思想，短期內作品集通不過很正常，正常的心態是要從自己身上挖掘問題，提升自己和作品集質量來實現目標。

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

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

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

我們下篇再賤……