UI設計師作品集應該如何打造

2021-11-24

拿不到面試機會？總是面試不理想？拿不到自己想要的期望工資？十年的UI設計師為什么給人感覺才兩三年工作經(jīng)驗？你的作品集到底出什么問題？怎樣才能做到適當包裝簡歷，讓面試官眼前一亮？下面由面試王者講下如何設計自己的pdf作品集。

PDF作品集是衡量一位設計師能力占比很重要的一部分，從作品集里可以看到你對審美、技法、理論掌握程度，還有對所經(jīng)歷項目的復盤、整合的拿捏程度；當然，從上面三個詞還能細化，比如審美可以分為選擇圖片的美感、顏色搭配、層級、間距、整體調性等；技法可以分為質感、蒙板的運用、版式、寫實擬物等；理論可以分為格式塔、留白、以及一些交互思維等，還有基礎UI的水平，比如字重、行高、主次、圖標、按鈕、凸顯等等，這些都可以在作品集里看到。

公司在招聘的時候，不是每個投遞者都會拿到面試機會，招聘官會根據(jù)作品集提前篩選一波，然后再把質量好一些的作品集給到設計負責人，其次再進行面試。其次現(xiàn)在各大招聘軟件上，最后一項都會標準，需要提供相應的作品集，想必這一點是硬性要求了，如下圖所示：

作品集里存在的三個致命問題

先給大家講一個真實的故事吧，在18年的時候，我?guī)鸵粋€資深設計師招人篩選作品集的時候，發(fā)現(xiàn)幾個致命性的問題：1.十年水平=初級？

干了10年的設計師，作品集依然處在一個初級階段，基本的對齊間距都有問題，更別說什么細節(jié)質量了。這類設計師的根本原因就是“閉關鎖國”，怎么說呢，就是公司部門的需求，設計師產(chǎn)出后質量不高，然后部門也沒有很高的要求，俗話說：能用就行。設計師呢，平常也是得過且過，沒有自我提高意識，沒有自驅力：主要表現(xiàn)在下班時間沒有自我練習、審美沒有階段性提高、理論知識也是止步于此，更別說去社交以及參加一些設計交流分享會了。

2.同質化嚴重

90%的作品集千篇一律，這里的意思是比較模版化，從封面上來看，視覺沖擊不夠，顏色運用不夠高級，說白了一眼就能看出來是敷衍了事，不夠認真。還有的作品集喜歡用一些樣機，一堆一堆的手機模型平鋪，這種已經(jīng)是好幾年前的方式了，“那個小手我想大家都知道，都用的爛爛的了”；還有一些比較新穎的模型，已經(jīng)用爛了，再用就爛大街了，這種一般就是第一個用的吃肉，第二個用的喝湯，最后用的人多了，就真的不怎么樣了。。準確來說就是沒有什么創(chuàng)新。

3.設計產(chǎn)出與分析不符

作品集里內(nèi)容分析與實際產(chǎn)出驢唇不對馬嘴。這樣的案例我們在很多設計網(wǎng)站和作品集里都見過很多，嘩啦嘩啦分析了一大堆，結果設計產(chǎn)出和分析根本沒什么關系，禁不起推敲，這也就是為什么你的作品集投出去沒有回應的其中一個原因了，其實完全就是為了湊頁數(shù)的結果，或者說項目不真實，以為面試官不會認真去看，為了加頁而把什么“項目背景”、“設計目標”、“最終數(shù)據(jù)”都放上，完全不了解當初的立項背景，這個問題就比較嚴重了～

拿不到面試機會的四個原因

開門見山，現(xiàn)在互聯(lián)網(wǎng)行業(yè)已經(jīng)算是很成熟了，大到十幾萬員工的一線互聯(lián)網(wǎng)公司，小到初創(chuàng)型公司甚至國企單位，都會有UI設計師這個崗位，有的供不應求，有的只需要1-2個足矣，但是為啥還會有很多同學連面試機會都拿不到呢？甚至工作了很多年的連一個初級中級崗位都拿不到，原因有以下幾個吧：

一、作品集不亮眼（直接原因）

雖說做了四五十頁的作品集，很是辛苦，但是通篇看下來沒有吸引人的項目，所以打開也就不到20秒的時間，就關掉了；這里要說一下，其實一個作品集，剛開始吸引人的地方是封面，按我個人經(jīng)驗來說，封面通常2個風格，第一就是視覺沖擊力強的，第二就是版式很強，這兩種方法都可以。吸引面試官打開后，接著就是吸引人的扉頁和項目了，只有這樣，面試官才有興趣接著往下看。

二、工作時間間隔太短，太跳（忌諱，如有不可抗力因素除外）

這里分兩種情況，第一種是自然情況，主要說1年內(nèi)或者2年內(nèi)頻繁跳槽，比如1年跳了2次，2年跳了3次4次這樣，這樣的簡歷盡管作品集再好，hr看到后也會一票否決（不是絕對化，也有偶爾通過的，但是極少）。第二種就是不可抗力因素，比如：公司倒閉、公司項目不盈利，邊緣化、公司裁員等等，這種情況和hr如實說明就好，裁員好些新聞都會報道，所以不是什么丟人的事情。這里建議大家盡量在一家公司待夠至少2年的時間，再去選擇跳槽，最好是3年，否則就會出現(xiàn)hr篩選都不會通過的情況，不要以為過了業(yè)務面就萬事大吉了，現(xiàn)在的公司hr有一票否決權，所以大家還是要特別重視一下～

三、行業(yè)內(nèi)風評不太好，個人評價太差（這個極少了）

這個主要就是個人口碑問題，講個故事：“曾經(jīng)有個同組外包崗設計師，偶然得知他在網(wǎng)上帶網(wǎng)課，也去分享什么經(jīng)驗知識，沒多多久竟然被微信群曝光，此人收了報名費竟然把好友拉黑，其實報名費也就不到300塊，這個人品真的就太不咋地了”，其實設計圈子真的很小，猜大家一定有過這種情況：我新加的設計師微信好友，竟然有我的同事！類似這種，所以大家都在圈子里混，還是“猥瑣發(fā)育不要浪”好一些。這里就不過多贅述了，都懂得，就是希望大家可以在圈子里表現(xiàn)的積極一些就行。

第二就是作品集千萬不要去抄襲。。一定要去原創(chuàng)，并不是不讓大家抄，要會“抄”，并不是像素級的復制，那這個真的太傻了，真的太影響自己的聲譽了。。一定要帶的腦子去“抄”。

四、薪資高于平均水平，跳槽給不到預期

招聘軟件在線簡歷預期薪資填寫高于公司預算。這類設計師確實存在，比如在一家小公司，同等能力下，薪資要高于市場平均水平很多，能力也不是特別出類拔萃，這類設計師如果跳槽的話，期望薪資鐵定要拿比之前高，那么大概率不會過；比如這個設計師的薪資是35k，面大廠期望薪資40k，但是大廠資深設計才32k，那么通常情況下是不會給到的。

作品集整體框架6 3 1

前置一下：如果你是UI設計或者UX設計師，那么你的作品集起碼60%是關于UIUX的作品，其余30%可以是視覺的作品，其次10%可以是自驅練習作品，大致的構成是這樣的。如果你是全棧設計師，UIUX、視覺表現(xiàn)都很強，那么55開就行，如下圖展示。具體的文章末尾會詳細講到～

優(yōu)秀的作品集如何做？

硬性要求有2點：

1.格式命名，例如：張三資深UI設計師 2021.pdf（推薦）

姓名+崗位+版本，pdf格式。簡單粗暴，直接明了。為什么選pdf呢，因為pdf這種文件格式與操作系統(tǒng)平臺無關，也就是說，PDF文件不管是在Windows，Unix還是在蘋果公司Mac OS操作系統(tǒng)中都是通用的。這一特點使它成為在Internet上進行電子文檔發(fā)行和數(shù)字化信息傳播的理想文檔格式。設想一下有這么一個情景：你不能確定面試官究竟是用什么終端設備打開你的作品集，可能是手機、ipad、pc&Mac OS，大家不要慌，pdf完全支持以上幾個設備。展示上也都沒問題。千萬不要給ppt什么鏈接之類的，如果設備展示不友好，出現(xiàn)圖片錯位，拉伸壓縮的情況，這樣面試官在初步瀏覽作品集的時候體驗就很差了。

2.內(nèi)頁尺寸，1920*1080橫向（推薦）

通常制作的尺寸都是這個，我的方法一般是sketch做好后，導出單個pdf格式的，然后用Acrobat合并文件，合并完后看看大小，如果在15m內(nèi)（最好控制在10m）就好。如果很大，再去pdf的壓縮網(wǎng)站壓一下就行了。

具體怎么做呢？硬貨來襲！

第1頁，封面

首先要有一個能吸引面試官眼球的封面，封面也是體現(xiàn)你設計基本功的一面，這個上面講過了，可以是偏視覺強一些or版式強都行。特別注意的是：封面或者前幾頁一定要吸引人，如果前面不能夠吸引面試官，后面的內(nèi)容再精彩，也難以讓面試官有繼續(xù)看下去的興趣。封面最好加上最重要的三個信息：1-電話、2-郵箱、3-微信聯(lián)系方式，下面我放幾個比較好的封面供大家參考：

第2頁，扉頁

這一頁主要放你的個人信息+照片。這一頁可以分為左右結構或者上下結構。左邊放個人信息：照片（千萬不要放一些生活照和游客照，因為你是一個設計師，是有基本審美的，可以去拍一些履歷照或者桌前照，基本都是純灰色底的照片，特別強調照片不要放太大）、姓名、出生年月、畢業(yè)院校、專業(yè)、在學校擔任過的職務、興趣愛好，簡約一些就行。右半部分主要放工作經(jīng)驗，公司、職務、工作年限、主要負責業(yè)務就可以了，簡潔明了，等面試的時候展開說就行。

第3頁，目錄

目錄部分要做的簡潔一些，主要體現(xiàn)整個作品集的大板塊即可，但是不要無腦放文字，要有一些版式和節(jié)奏、圖形樣式作為點綴，要知道每一個都要當作一個平面設計去設計和排版。

第4頁，核心項目封面

這頁依然是考量你的視覺和版式能力，一般會有一個視覺重心，如果是偏C端的一般要把核心頁面或者把頁面嵌套在樣機里，然后進行版式設計。其二就是如果是偏B端，那就是網(wǎng)頁或者把網(wǎng)頁嵌套到筆記本電腦里，然后進行版式設計。其三就是智能硬件等等。。套路都一樣，要有一個視覺重心和標題的展示。

第5頁，項目背景

為什么要放項目背景？因為面試官不太清楚這個項目的是干嘛的，要達成一個什么樣的效果和收益，為什么要做（比如產(chǎn)品側來講的話數(shù)據(jù)反饋不理想、對用戶不友好、轉化比較低。設計側呢，比如滿足產(chǎn)品需求支持設計、視覺傳達無法滿足用戶快速感知等等。交互側可能是跳轉頁面太多需要優(yōu)化、頁面彈窗提示太重不需要等等），主要是介紹這些東西。

第6頁，設計目標

主要是價值點、收益是什么、設計在其中解決了什么問題，需求是否合理（如果合理是否設計側有創(chuàng)新點和驅動，如果不合理，設計是否有好的解決方案）、設計目標、改版前后對比、UI界面展示。這一頁發(fā)揮的比較多，合理安排即可～

第7頁，方案對比

這頁主要是說如果產(chǎn)品方案評審后，設計側挖掘了并且創(chuàng)新了新的方案，也就是比產(chǎn)品的方案還要好（無論功能、交互、體驗上來說），一定要有before和 after的對比，并且要講明白方案升級后，好在哪里？為什么要這么做的合理解釋，主要是讓面試官了解你是一個會考慮問題的設計師，會站在不同的場景考慮問題，而不是一個單純的把界面做好看就行～

第8頁，遇到問題&如何解決？

無論是一個優(yōu)秀的產(chǎn)品還是一個重要的迭代計劃，途中必定會遇到一些問題，比如設計研發(fā)無法還原度很好、動畫無法實現(xiàn)、設計稿里的字重研發(fā)那里支持不了、投影的實現(xiàn)不是自己想象的那樣、設計方案實現(xiàn)后，發(fā)現(xiàn)有些問題沒有前置解決，這時候又要去重新制定UI規(guī)則等等，我相信這些都是大家在工作中遇到的，那么這些不妨大家在工作中記錄下來，方便下次避坑。在作品集里或者面試中，面試官也會問到類似的問題：“請說一個你在工作中遇到的困難”，這類問題，同樣，我們可以選取一個解決了重大問題并且陳述解決方法，這樣也是作品集里的一個亮點。

第9頁，圖標

圖標可以單起一頁，因為圖標icon部分是最能體現(xiàn)UI設計師基本功的部分，可以放大展示細節(jié)，然后后面放標準線框矩陣，意為我的圖標都是按規(guī)則中規(guī)中矩畫的，比較規(guī)范化。

第10頁，色彩規(guī)范

產(chǎn)品里的標準色，輔助色，都可以單獨摘出來展示，且可以作為設計規(guī)范進行結果性陳述，讓每個頁面都是合理的過度，循序漸進，讓頁面里每個元素的存在都有理有據(jù)可依。

第11頁，數(shù)據(jù)支撐設計結果

可以放一些不太機密的數(shù)據(jù)，可以支撐你設計結果的數(shù)據(jù)。比如過了一個月兩個月的數(shù)據(jù)，數(shù)據(jù)視覺展示可以不那么具象，稍微帶點抽象就行，具象的話有可能影響到公司和部門的機密，在面試的時候說明即可。同時，數(shù)據(jù)這里一定要略微真實，意思是不要只放好的數(shù)據(jù)，不好的也要有一些，但是不要太多，1-2個足矣，這樣可以展示數(shù)據(jù)不好，為后期的迭代做準備，這樣不僅你的設計產(chǎn)出有正向數(shù)據(jù)展示，不好的數(shù)據(jù)也是為后期產(chǎn)品優(yōu)化做了支撐。

第11-15頁，頁面展示（多頁展示，至少4頁）

到了頁面展示分為兩種情況：第一，如果是頁面改版設計，最好放before after的對比，這樣方便面試官一眼看到前后對比效果，也能看出來你改的怎么樣。第二就是從0-1的頁面，這種我建議直接展示就行，一頁放2-3個頁面，直接平鋪就行，直接果斷（頁面中的背景可以適當做一些簡單的視覺元素，不需要太多，不要影響主體）

第16頁，后續(xù)迭代計劃

一般產(chǎn)品上線后一周就會有數(shù)據(jù)結果，產(chǎn)品迭代的周期一般2周一個版本，有些快速迭代的公司是1周一個版本；所以我們不管是產(chǎn)品優(yōu)化還是新項目，上線后一定第一時間問產(chǎn)品要數(shù)據(jù)，看一下上線后的數(shù)據(jù)情況（這個一般要在研發(fā)中配合pm告知打點的情況，如果本身有打點計劃，一定要在需求文檔里看一眼；要是自己想加一些想要看自己設計的數(shù)據(jù)打點，要配合PM、QA完成打點補充）。本頁主要展示迭代計劃以及為什么、后期要怎么做，主要考慮排版，不需要全部放上，有些面試說出來即可。

小tips：

以上就是UI項目的展示頁面，作品排序突出求職意向，一個完整的UI項目展示至少要15頁，才夠完整，分為分析+結果產(chǎn)出，產(chǎn)出的成果需要和分析緊扣，不要分析和頁面毫無關系，這樣濫竽充數(shù)面試官是能夠看出來的，我們不要為了湊頁面而湊頁面。除了上面說的幾個頁面標題外，也可以自己增加，這個比較靈活，不是說非要跟我的一模一樣。UI設計師的作品側重點應該在：界面+交互+用研，附加技能主要在：視覺+插畫+運營+品牌。

如果你有動效作品，格式為mp4，需要打包為zip的壓縮包（因為設計師的電腦都是mac，不要壓縮為rar！不要壓縮為rar！不要壓縮為rar！因為不一定每個設計師都裝有解壓rar的軟件），然后在郵箱附件里添加即可。

作品集的布局：

第一部分60%UI作品：

如果作品集里有3個UI項目，那么排布情況是這樣的：第一個一定是你的核心項目，無論從UI視覺表現(xiàn)、分析思路、思維方法論、數(shù)據(jù)支撐一定是做好的，是經(jīng)得起推敲的；第二個第三個，可以頁數(shù)沒那么多，比如第一個15-18頁，第二個可以10-14頁，第三個可以8-10頁，為什么呢？因為現(xiàn)在的面試不可能讓你把作品集里的項目全部講完，一般都是將1-2個你認為最好的項目即可。

第二部分30%的視覺表現(xiàn)

這部分一定要放視覺表現(xiàn)相當好的作品，不能湊合，要不就露出了你的短板，或者給你整個作品集減分了，導致你的面試會不順利，可以試想這樣一個情景：面試官剛打開你的作品集，被你的封面所吸引，一頁一頁瀏覽下去，感覺UI作品真的很不錯，有想要給你發(fā)面試邀請的想法了，但是看到視覺部分，印象分會就會突然跌一部分，是不是很虧，所以作品集里我們盡量展示我們的長處，避開我們的短板。視覺的作品里一般包含：字體設計、插畫、海報、活動頁、主視覺、logo、專題頁，三維渲染等等。

第三部分10%的自驅練習

這部分沒有什么大的要求，如果只是練習單一的UI頁面，直接每頁排版即可，如果是練習的redesign改版，那么整體的展示邏輯可以像第一部分UI一樣分析+產(chǎn)出。如果是視覺的練習，也是直接展示即可。

第四部分，封底

封底要與整個作品集調性一直，特別是和封面，如果作品太多，可以在封底附上設計網(wǎng)站主頁的鏈接和ID，如果面試官對你感興趣，回去相關的網(wǎng)站搜尋。

作品集需要注意的事項

1.不要只停留在視覺表現(xiàn)

通過最近和大廠的設計總監(jiān)和資深設計師聊天得知，如今的UI設計師不光要求要把界面做美觀，如果是這樣，不就成了美工了嘛；實際上我們在做界面設計的時候要前置問題，考慮用戶場景及交互，還有一些情感化的考慮（比如這個頁面內(nèi)容較少，我們可以考慮情感化設計來豐富頁面內(nèi)容），以及我們在前幾次的設計過程和復盤中遇到的問題，這次就不要再犯錯了。

2.樣機模型的合理使用

看過太多作品集里的樣機了，很多斜躺的圓角樣機（如下圖），就不要使用了，真的太過時了；其二就是不要用太過于寫實的樣機（比如金屬邊框的樣機）；其三是那個小手（如下圖），真的用的人太多了，都要看吐了，一種東西頭幾個人用效果是不錯的，如果人人都用，就爛大街了。我個人的建議是直接手動畫扁平的矩形，外圍加一些描邊即可（如下圖），簡潔又能說明情況，太復雜反而宣兵奪主。

3.注重原創(chuàng)性

第一，每一頁的作品集一定要認真對待，每一頁也要當作平面設計去認真做，不要去套模版，因為模版化的東西，面試官一眼就能看出來，那樣根本不會去打開你的作品繼續(xù)看下去了。第二，不要去放很多臨摹的東西，因為這些東西不能代表你的實際能力，只能代表你的模仿能力。第三，也是最重要的，不要抄襲！不要抄襲！不要抄襲！設計圈子很小，如果被發(fā)現(xiàn)，你在這個圈子的也就“出名”了，也就變成了我最上面說的那類人，風評不好，名聲很差。

4.作品集細節(jié)

合理的使用字體，選擇合適的字號，需要有對比拉開層次。作品集里的文案也分標題、副標題、正文、注釋。

定義什么字體、文字類型，這個需要根據(jù)自己的作品調性去選擇，字體的選擇不用擔心版權問題，因為沒有涉及到商用和利益，根據(jù)經(jīng)驗，UIUX作品集里可以使用一些“無襯線體”，中文比如可以用：方正悠黑，冬青黑體，小米蘭亭pro，這三個都是非常好看的中文字體；英文可以選取DIN、Gothem，我一般就是用din多一些；視覺類的作品集可以選取手寫體。