雖然我寫了不少關(guān)于作品集相關(guān)的文章和視頻，但是好多同學在面對 UI 作品集包裝的時候還是會不知道如何下手。特別糾結(jié)的幾個問題：

1. 我該放什么項目
2. 我要怎么著手包裝
3. 怎么樣才能避免同質(zhì)化

有這些問題的原因也很簡單：

1. 從來沒有或者很久沒有包裝過作品集了
2. 參與的需求太零碎不知道怎么整合
3. 不知道要包裝成什么樣子才能突出自己的優(yōu)勢和別人不同，市面上同質(zhì)化作品集太多了。

好，那我們一點一點來解決。

一、如何避免同質(zhì)化

這是一個設(shè)計行業(yè)繞不開的問題，我們思路可以打開，咱們看看別的行業(yè)是怎么求職的。比如產(chǎn)品和運營更多的靠簡歷上的項目和業(yè)績的描述，開發(fā)也都是靠技術(shù)方面的描述更多的都是在面試的過程中談的，而設(shè)計師不一樣，設(shè)計師需要拿設(shè)計作品說話，其實講道理，你 UI 設(shè)計的好不好，根本不用包裝，簡歷里面貼幾個 UI 界面上去，一眼就能看出來設(shè)計的怎么樣，包括什么插畫、三維的產(chǎn)出，你貼上去，有經(jīng)驗的面試官一眼就知道水平了，具體再通過面試環(huán)節(jié)來聊。之所以要作品集，那還不就是因為卷，你包裝的好看自然比不包裝的有優(yōu)勢。還有一點，設(shè)計水平的要素體現(xiàn)不僅僅是 UI、插畫、三維，還有比如平面版式的設(shè)計，這個時候作品集包裝考驗的點就出來了，很多 UI 設(shè)計師是沒有學過平面版式設(shè)計的，所以，很卷。

那如何避免同質(zhì)化呢？我覺得能做的點有這幾個：

1. 突出你項目中你個人比較出彩的能力

那什么是個人比較出彩的能力呢，首先肯定是你比較精致的 UI 界面，要做到差異化首先是 UI 界面表現(xiàn)突出，什么是突出？參考“部分”站酷首頁三火的 UI 界面。其次是，在工作過程中對設(shè)計方案的衡量有自己的思考過程。例如我們這位同學所體現(xiàn)的他對用戶看課過程中的交互手勢優(yōu)化的研究和思考過程。想要和別人不一樣，項目自然是最明顯的區(qū)別，因為有了業(yè)務和用戶的兩大 buff 加持，你自然可以做到和別人不一樣，每一個項目都有自己的特點，關(guān)鍵是你在這里能發(fā)揮什么樣的設(shè)計價值。

<

2. 更多的設(shè)計表現(xiàn)

想要不一樣，那肯定要有多樣的設(shè)計技法和風格。工作中可以不用，但是你不能不會。同樣具備以上第一點中的能力，你比別人多會一個插畫，或者插畫風格突出那都是優(yōu)勢，但要記住，在精不在多。

<

3. 優(yōu)秀的版式包裝

UI 設(shè)計能力是靠內(nèi)容體現(xiàn)的，但是就像是我們身上穿的衣服、褲子、鞋子，單獨拿出來可能都還不錯，但是搭配在一起有時候就會不協(xié)調(diào)，所以你需要用版式包裝來把界面呈現(xiàn)出來，人家匯報可以直接用 word 為什么還要用 ppt 來美化就是這個道理。

二、如何著手包裝作品集

1. 找靈感

這點希望大家不要杠，不管我們有多少信息需要整合，都先放一放。找到一些讓你比較有感覺的作品包裝來吸取一點靈感，特別是比較優(yōu)秀的版式作品。版式設(shè)計千變?nèi)f化，只要不是 1:1 復刻，自己嘗試做出一些變化那就不算抄襲，畢竟誰也沒有資格說他的版式就是世界上獨一無二的，更何況咱也不拿去商用，我覺得無可厚非。要是連這個都要上綱上線，那就只有兩種可能：1.從來沒做過設(shè)計 2.鍵盤俠。任何行業(yè) 99%都是普通人，要求每個設(shè)計師一上來就成為設(shè)計大師能原創(chuàng)一種新的風格和版式，是不是有點扯淡。

<

設(shè)計真的很難，它本身就是很抽象的東西，它不是代碼，1 就是 1，2 就是 2.所以當你苛求每個人都是頂尖設(shè)計師的時候，你自己要先成為頂尖設(shè)計師你才有評價的資格，而頂尖設(shè)計師也從未否認過自己不需要尋找設(shè)計靈感，抄襲另說。
設(shè)計靈感會幫助你更好的建立落地前的信心。同時找到靈感后要分析，這個設(shè)計作品集出彩的原因是什么：

1. 這些包裝/版式如此突出的原因是什么？配色？原創(chuàng)/素材的元素？留白？用了柵格？還是強化了信息的對比和層次？還是大量分析文案和整體版式合體的比較和諧？
2. 再思考這些包裝的優(yōu)點如果要整合到一個包裝里去要注意哪些細節(jié)，才不會顯得融合錯亂。比如字體、間距的把控，樣機的選擇，元素風格的搭配等等。
3. 如果讓你提煉這些作品集的優(yōu)點并且加入自己的想法和項目的特色，你會怎么做。

2. 找到適合自己的包裝類型

很多人糾結(jié)，到底要不要放大量文字。你先想一想，你為什么想放文字？無非就是怕吃虧，怕能力展示不全，對吧？那這個問題從面試官角度來看到底是怎么樣呢？我也從我?guī)讉€大廠做管理的朋友們得到了比較準確的回復：

<

1. 部分面試官確實會仔細看文案和邏輯，但不多，取決于當時的心情以及崗位硬性要求。
2. 大部分面試官看候選者能力第一反應就是找作品集包裝和內(nèi)容優(yōu)秀高級的，其他能力在面試環(huán)節(jié)再了解。
3. 很多設(shè)計師的文案非常沒有營養(yǎng)，或者自己沒有做過但是有樣學樣的套進去，也就懶得看了。

所以，不管你放不放，你唯一要做的就是把包裝做的高級，先拿到面試機會。如果你既放了大量文案又能把排版做高級那就是最好的，但如果一味的放了大量的文字，導致包裝看起來像匯報 ppt，那就得不償失了。如果沒有真的做過推導和分析就不要寫，寫了到面試環(huán)節(jié)被問到了也要出糗。

3. 梳理內(nèi)容框架

內(nèi)容放置的原則有這么幾條：

1. 優(yōu)先去排視覺突出的 UI 界面，其次再去排列表等沒有太多設(shè)計感的湊數(shù)頁面。好看的那就單獨拿出來排，沒亮點的就湊一塊排。
2. 放置什么內(nèi)容取決于你要展示自己什么能力，舉個例子，你要展示 UI 設(shè)計的能力，那么就展示 UI 界面。你要展示你的邏輯分析，那么你這一塊可以多用一些文字，記住記住記??！文字太多的時候可以把文字用數(shù)據(jù)可視化的形式來代替！讓信息更直觀而又不會顯得字很多像論文。
3. 一種能力，就用 1-2 個項目展示即可，比如 UI 設(shè)計能力，那就不要超過 2 個項目都用同一種包裝邏輯，2 個項目足夠展示了，除非你的項目涉及到 2 種以上完全不同風格的產(chǎn)品和 UI。
4. 放內(nèi)容的優(yōu)先級和順序和你當下要找的行業(yè)、崗位也是有很大的關(guān)系，盡可能的把有關(guān)系的內(nèi)容放在前面展示。
5. 除了工作能力以外，也要多準備一些業(yè)余時間的練習，最好是參加過的一些設(shè)計比賽。本身項目如果限制很大，那么就要靠業(yè)余練習來彌補，很多同學說自己公司的項目因為各種原因看起來很丑，所以為了讓面試官知道你的真實設(shè)計水平還是要私底下準備一下。

4. 根據(jù)首頁確定包裝設(shè)計規(guī)范

因為包裝的內(nèi)容很多，在包裝之前咱們無法做到剛開始就對整個包裝有個完美的把控，甚至你可能有一些方向卻心里沒底，很多時候當你把第一頁或者封面設(shè)計出來之后才有個直觀的感受，你在首頁中會不斷的調(diào)整設(shè)計的風格和一些細節(jié)元素，字體樣式的使用、文字大小、粗細、排版規(guī)則、元素使用、留白控制，最后設(shè)計完一張你比較滿意的首頁后再往下走就會快很多了。

<

就和我們設(shè)計 UI 界面一樣，數(shù)十張頁面的源頭其實都是首頁，首頁會包含大部分的設(shè)計規(guī)范：文字、圖標、間距等等。所以做包裝也是一樣，先把首頁的效果控制好，把規(guī)范的規(guī)律控制好，再往下做就會快很多。

5. 文字的細節(jié)

①字體的選擇

千萬別小看文字，如果你使用了錯誤的字體，那么很可能會讓你包裝看起來不夠和諧。例如這個畫面中的英文和中文，你們的第一感受是什么？英文的字體在直角和圓角處理的對比很強烈，時尚感比較強，但是中文的字體整體非常的硬，并且筆畫比較零碎，帶有一些俏皮的感覺，所以這兩種字體在一個包裝內(nèi)一起出現(xiàn)，給人感覺就不是很搭。

<

依然是中英文的案例，下方的兩個案例中，中英文風格差距都非常大，其中有一個還是站酷首推，確實有點迷了。這里的英文和中文看上去不說風格相似吧，簡直就毫無關(guān)系，甚至英文還出現(xiàn)了兩種不同的字體。英文和中文要放在一起，那要么就一起矮胖要么一起高瘦，如果像鹿鼎記里的胖頭陀和瘦頭陀這樣肯定是不行的。

<

除了這樣的案例以外，還有很多設(shè)計師會選擇一些襯線字體，關(guān)于這類型的字體大家一定要謹慎，如果自己不能把控好整體風格千萬不要用襯線字體。除非像下面這些產(chǎn)品一樣：國風、漢字工具等等這樣的產(chǎn)品，那么你用帶襯線的字體會更契合一點。

<

再來看一些例子，比如中文字體到底用幾種更合適。像下面的案例中兩個標題的字體明顯發(fā)生了變化，這就導致風格在局部不統(tǒng)一的問題。

<

還有這個作品集中，作者大部分畫板里都用了一種比較飽滿的字體（標小智無界黑）作為標題，這種風格的字體看起來比較有活力帶有一些二次元卡通的感覺，但是這位同學整體包裝的是偏 b 端數(shù)據(jù)化和表單偏多的內(nèi)容，這樣看起來風格就不是很搭了，同時在整個包裝中也會出現(xiàn)標題是常規(guī)中文字體的情況，一般如果你用無界黑作為標題了，那么整體調(diào)性就都要統(tǒng)一，不能一會大標題用正常中文，一會大標題用無界黑，就非常奇怪。

<

這里就推薦給大家一些我比較常用的中文和英文字體，分為基礎(chǔ)版本和進階版本，其實還有很多好用的，但是對設(shè)計師整體把控能力要求較高，這里就暫時不列出來了。

<

②字體層級的把控

大小、顏色、粗細都是用來控制信息的層級，所以做 UI 包裝就和設(shè)計 UI 界面一樣，我們都要規(guī)范好整個包裝里需要用到哪幾個層級的文字。這里舉兩個例子大家就明白了。

第一個包裝畫板，里面涉及到了大標題文字、大標題修飾文字、標題、正文、標簽這幾個類型的文字，所以以圖中的比例，畫板設(shè)置 2000px 寬，大標題為 100pt、大標題修飾字號為 50pt、標題為 40pt、正文 16pt、標簽 20pt。這幾種文字大小就會貫穿整個作品集包裝，只要用到某一類型的文字，則必須要統(tǒng)一規(guī)范使用。

<

第二個，在一個畫板中如果出現(xiàn)更多信息層次的展示，就需要加入顏色來豐富層級以及表達其功能性。例如這個畫板中一共使用了 3 種字體大小，3 種顏色來體現(xiàn)信息關(guān)系和層級。

<

層級并不是越多越好，一般在整個包裝中控制在 5-6 種以內(nèi)即可。

③文字的排列、行高

文字是不會單獨存在的，他可能是一行可能是一段。通常我們在做視覺化包裝的時候，文字往往不是為了讓別人看清楚而放上去的，更多的是作為版式的一種修飾：
點、線、面。

比如點，包括各種小圓點、圖標、裝飾性字母、標點符號等等，用來活躍畫面。然后是線，可以是分割線，也可以是一行文字，用來分割畫面、引導視線以及調(diào)整版面的節(jié)奏，當你把文字設(shè)計的足夠小的時候一行文字就看起來像一根線，或者用幾行來表示一個段落形成一個面/塊。用塊來代替元素成為視覺落點也是一種不錯的設(shè)計手法。

<

要注意的是整體包裝的行高、字間距，以及線、面的使用規(guī)律要統(tǒng)一。

④標題文字優(yōu)化的案例

設(shè)計師找工作為什么一定要有作品集，那是因為需要展示自己設(shè)計的成果，你不僅僅要設(shè)計界面、設(shè)計插畫、設(shè)計元素，那么咱們的作品集包裝也需要設(shè)計，如果你只是把文字和圖片很簡單的平鋪上去，那和做 ppt 匯報就沒有區(qū)別了。更多的設(shè)計都會體現(xiàn)在每一個元素的細節(jié)上，例如：標題。

<

很多設(shè)計師就會把標題直接放在畫板上，最多用一下特殊字體、粗細和大小來和正文做區(qū)分，但是沒有想過是否我們也可以通過更多的設(shè)計手法來設(shè)計我們的標題呢？例如通過大小對比、描邊填充、粗細對比、顏色變化、樣式結(jié)合、中英文結(jié)合以及增加裝飾等小技巧把一個很普通的標題設(shè)計的更有細節(jié)！

6. 配色

在包裝的時候有幾個配色的原則，只要掌握這些原則，你的作品集看起來就不會很粗糙。大家都知道顏色是用來干什么的：1.強調(diào) 2.引導 3.構(gòu)圖 4.修飾氛圍
所以當你想要給某一個點、線、面上色的時候一定要問自己，這里加顏色是為了什么？以下這幾個包裝時候的顏色原則一定要牢牢記住：

①一個項目只有 1 個主色

通常就是我們的產(chǎn)品品牌色。其次選擇幾個輔助色或者點睛色來搭配，具體配色的原則這里就不說了，相信大家工作這么久對顏色的搭配技巧應該有一定的心得了，配色這玩意兒一定程度靠天賦和感覺的。

②不要零碎的使用色塊

如下方的案例，頁面中的色塊七零八落，既起不到引導和構(gòu)圖作用，也起不到強調(diào)的作用，所以放在頁面中反而讓閱讀者不知道信息的重點在哪里，畫面很零碎。

<

③需要大面積的色塊一般是用來構(gòu)圖或者過渡上下畫板的作用

如果對版式構(gòu)圖不熟練的同學，要么一整塊上色，要么這一整塊都不要使用顏色。

<

④在界面中已經(jīng)帶有顏色了，所以包裝上使用顏色就盡量以點綴和修飾氛圍為主

如果界面中帶有大量的圖片，那么色塊可以搭配的重一點。

<

⑤想要做簡潔包裝的同學，背景、文字都以黑白灰為主體，穿插顏色來起到修飾的作用

切記不要讓整個畫板都帶有色彩以及頁面內(nèi)充斥著帶有顏色的色塊。

<

7. 圖片

圖片選擇我在以前的作品集文章中就有提到。即便這些圖片可能不是真實環(huán)境下我們看到的圖片，但是在做包裝的時候建議大家還是花時間把好看的圖片放進去。同樣有幾個必須要注意的圖片使用原則，找好了找對了，包裝整體的質(zhì)感會上升一個檔次。

<

①盡量選擇背景純凈的圖片

這里的純凈指的是沒有一絲雜亂元素，最多只可以有漸變。

②只有 1 個主體物并突出

當圖片中出現(xiàn)多個主體后圖片就不高級了。所以你們看那些大佬們的作品集里的圖片是不是完全遵循以上兩個原則？

③選擇人物圖片的時候盡量選擇特寫

如果有多個圖片一起排列，盡量主體的構(gòu)圖、占比、位置保持一致。

這里推薦幾個找圖的網(wǎng)站：unsplash、pixbay、mapbox、pexels

<

8. 版式

版式涉及到的內(nèi)容就太多了，這里不展開講了。說幾點讓大家避坑吧。

①學會自由創(chuàng)作

其實我不太明白為什么作品集有的人就像做 ppt 一樣都是固定畫板，每一個畫板講一件事，尺寸還都一樣。這就導致很多好看的版式你排不出來，只能左文右圖或者左圖右文。所以固定寬度而讓高度根據(jù)內(nèi)容創(chuàng)作來變化這樣可以讓你有更多的創(chuàng)作發(fā)揮空間。

②學會塊狀布局

大家在展示信息的時候是不是都是這樣，在一個畫板中放你的文字和圖片，這樣看上去每個信息都是獨立的，零碎的，很小氣，每小塊信息之間的間距也不太明顯，信息關(guān)聯(lián)性也差，看上去畫面就沒有高級感。

<

<

什么是塊？比如你用一個色塊做底，內(nèi)容放在色塊里，會形成一個塊。比如你把關(guān)聯(lián)的信息靠的更近，它們也會形成一個塊。你單獨用一張圖片也會形成一個塊。雖然我們做出了塊，但是也不要讓塊變的零碎。讓其中 1 個或 2 個塊放大，做出對比和層次，畫面會更加豐富。

<

③留白的重要性

留白的區(qū)域也是塊，做好一個畫面中信息的平衡。留白也是為了更突出主體，讓畫面聚焦

④大膽創(chuàng)作

其實很多設(shè)計師收到周圍環(huán)境以及以往經(jīng)驗的局限，不太敢放開手去設(shè)計。做作品集無非就是圖文排版，看來左右的方式已經(jīng)刻在大家的骨子里了，很多設(shè)計師單反想試試新的排版方式就會擔心這樣設(shè)計是不是不好。有時候呢也需要去補充一些設(shè)計的基本理論知識，很多 UI 設(shè)計師真的連平面的基礎(chǔ)都沒有，可能連什么是版心也不清楚，所以更不要說作品集的版式包裝了。有空可以去學習一下版式設(shè)計，對包裝作品集非常有幫助。

好啦，今天分享的視覺篇就到這里，還給大家提供了一些樣機，樣機的使用也注意幾個技巧：

1. 樣機務必統(tǒng)一樣式，盡可能只使用 2 種以內(nèi)差別不大的樣機。
2. 樣機種類和 UI 界面保持一致，iOS 和安卓不要混用
3. 使用樣機時不要選擇角度過于偏低，看不清界面細節(jié)。
4. 沒有樣機也可以使用粗描邊代替，簡化細節(jié)
5. 不要使用光澤度擬物化特別高的樣機

推薦 6 個樣機網(wǎng)站：

1. https://www.mockupworld.co/
2. https://www.ls.graphics/free-mockups
3. https://unblast.com/
4. https://www.pixeden.com/
5. https://www.graphICPear.com/?ref=www.aboutppt.com
6. https://mrmockup.com/

以上圖片均來源網(wǎng)絡(luò)，如需刪除請聯(lián)系

作者：應謀鬼計