1 何時整理作品集

最好是天晴時修屋頂，平時就定期復盤

在投簡歷前建議先認真制作一版令自己滿意的完整作品集

如果是打算先快速出一版基礎作品集然后邊投遞邊完善，那么很有可能因為初版作品集的質量一般而錯過好機會

早點做好優(yōu)質作品集，能讓自己在每個階段集中精力做好一件事

在后期的面試中，面試官可能會對作品集的局部細節(jié)提出質疑，如果作品集的確存在瑕疵，那么可以繼續(xù)迭代優(yōu)化

2 把什么放入作品集

2.1 原則

堅持原創(chuàng)，深挖作品，寧缺毋濫

不胡編亂造設計數(shù)據(jù)，只展示自己熟練應用的用研知識

要注意保護企業(yè)機密，不能把墨刀/藍湖鏈接發(fā)出來當作品集

2.2 放什么項目

已經(jīng)工作的小伙伴就別展示大篇幅的練習稿啦，要以呈現(xiàn)工作項目為主，如果工作中的設計沒有很滿意，此時可以再優(yōu)化

我通常會從項目背景、競品分析、最優(yōu)質界面及其設計思考、設計成果等維度介紹一套項目

“低保真原型圖”我一般不會放入作品集，因為都已經(jīng)有成套高保真設計圖了，灰白線框圖并不能額外展示我的設計能力

“最優(yōu)質界面+設計思考”是精華部分，需重點展示

“設計成果”我通常會寫用戶反饋和數(shù)據(jù)轉化，如果獲取不到數(shù)據(jù)不寫也行，但是不要胡編亂造假數(shù)據(jù)

2.3 放幾個項目

放幾個質量最上乘的項目即可

如果項目數(shù)量太多，就不太容易深挖精髓

3 視覺包裝稿

3.1 原則

找工作用的作品集，視覺沖擊力要強

3.2 規(guī)范

3.2.1 寬高比

常見的有2種：寬高比16:9的PPT，寬度固定&高度任意的長圖

如果采用PPT，那么推薦單張頁面大小為1440*810px

1280*720也OK，只是瀏覽時會相對模糊些

不建議使用1920*1080，因為導出的PDF文件可能會超出招聘平臺的文件大小上限

當使用長圖時，我通常設置寬度1400，每1張長圖的高度盡量控制在6000以內 (一般不超8000)

因為高度比較自由，所以視覺包裝上好發(fā)揮；限制最大高度，可以讓圖片加載得快些，節(jié)省HR時間

3.2.2 柵格

可以用12個柵格來規(guī)范包裝稿元素的橫向布局

因為12是2和3的整數(shù)倍，所以可以很靈活地根據(jù)需求在同1行放置1個/2個/3個界面

在Figma中可以按照下圖所示來設置12柵格

3.2.3 樣機

3.2.3.1 數(shù)量

作品集中出現(xiàn)的樣機數(shù)量建議控制在0～2種，可以不用樣機，整體視覺效果會更輕盈

日常注意收集優(yōu)質素材，不必囤積成千上百份資源，與其放收藏夾吃灰，不如只留下最精致的那一批樣機然后靈活使用

3.2.3.2 樣式

建議使用流行通用設備，比如iPhoneX

優(yōu)質樣機下載地址www.uistore.design/categories/mockups/

3.2.3.3 靈活使用在線樣機工具

推薦2款小工具

1、快速創(chuàng)建3D樣機模型&演示動畫www.designcamera.app/

提供手機、iPad、筆記本電腦、臺式機等多種設備，且支持360°旋轉樣機

只需要把圖片拖入包含樣機的黑色窗口，就可快速將界面放入樣機中

可以為樣機添加陰影、設置陰影強度

也可以修改底圖的背景色和外框顏色

2、快速把界面放樣機中展示https://cleanmock.com/designer

3.2.4 色彩

沒有極強的設計功底，就嚴格控制配色

作品集大基調背景色的設計，我認為以下的幾種方向還不錯

“白色”與“帶品牌色相的淺灰色”交織錯落，“品牌色”點綴，詳見下方第1張圖

“白色”與“品牌色”1:1，詳見下方第2張圖

“黑色”為主，“品牌色”點綴，詳見下方第3張圖

3.2.5 字體

正文字體的數(shù)量建議1～2種，字體數(shù)量過多會有些喧賓奪主

建議使用免費字體，比如思源黑體

不建議大面積使用花體字，如果把控不了尺度就很容易過度設計

正文的顏色建議使用無彩色系

當包裝稿寬度為1400px時，字體≥14px

3.2.6 圓角

整體保持統(tǒng)一

根據(jù)作品的氣質選用合適的圓角

想突出“高級感”，就用直角/小圓角

想體現(xiàn)“親和力”，就用較大的圓角

3.3 設計中做幾版通用樣式

作品集要像1本時尚雜志/1套PPT一樣，有固定的幾種版式，省事、統(tǒng)一、和諧

3.4 視覺設計

3.4.1 頭圖

頭圖需要精心設計，爭取先聲奪人

潦草的頭圖大概率會勸退他人

3.4.2 全局裝飾性小元素

可以將“基礎的圓形”充分應用到包裝稿中

也可根據(jù)包裝稿的大場景設計通用小元素，比如大場景是“宇航員女孩遨游太空”，那就可以用“星星連線”和“燈光投射”作點綴

3.4.3 包裝稿配圖

包裝作品時要根據(jù)具體場景選用合適的圖片

3.4.4 用戶調研

可以從身份、占比、職業(yè)等多維度來介紹用戶

舉幾個典型人物的例子，能讓讀者快速代入產(chǎn)品使用場景

可以呈現(xiàn)在職期間用戶的增長情況等數(shù)據(jù)，這是設計有效性的一種驗證。但要注意，如果沒有數(shù)據(jù)就不要瞎寫，胡編亂造一堆假數(shù)據(jù)是在給自己埋地雷。同時要謹記“增長”多數(shù)情況是團隊共同奮斗的成果，面試時別太自大

此模塊可以用圓環(huán)、進度條、圖文列表等多形式來豐富視覺

3.4.5 功能架構

簡約清爽，條理清晰即可

3.4.6 設計風格

呈現(xiàn)時注意順序，從籠統(tǒng)到具體：設計策略、情緒板、具體用色

可以用基礎形狀&線條展示“全局設計策略”的推導

用圖片&花體字展示情緒板

大色塊拼接能直觀展示色彩系統(tǒng)

3.4.7 Logo改版

多樣化呈現(xiàn)Logo改版前后的效果對比、多維度設計思考、方案探索

3.4.8 優(yōu)質界面展示

3.4.8.1 原則

堅持作品的原創(chuàng)性，萬萬不可截圖搬運，可以菜但不能爛

拒絕太過陳舊的包裝稿風格，平時多收集多研究大佬的作品包裝稿

包裝時不能態(tài)度隨意，盡量避免以下問題：設計稿和背景色融為一體、圖片模糊、圖文不搭、表單文案都一樣內容不真實、不按樣機來適配設計 (比如選取的是有劉海屏的iPhone手機，但是沒有微調“頂部導航欄”和“底部標簽欄”，不規(guī)范)

3.4.8.2 界面配圖

用好看的圖片替代工作中快速找的占位圖，能快速提升作品逼格

3.4.8.3 展示1張圖

內容可以從邊界延展開來，不要被設備外框限制住

3.4.8.4 展示2~3張圖

如果沒有說明文案，可直接展示漂亮的界面

3.4.8.5 界面間的銜接

很簡單的一種方式就是“用線條連接”2個頁面

連接線上可以添加說明文案，備注可交互的元素

如下圖，小手圖標是部分界面中已有的元素，把它提取出來作裝飾，此外小手icon也表示“觸發(fā)了點擊事件”，能直觀展示頁面的從屬關系

3.4.8.6 展示關聯(lián)界面

父子界面可以使用包含交互動效的Gif展示

注意界面滑動的速度要適中

可參考下圖，其中的Report和Finish鏤空文字可以這么實現(xiàn)：在PS中設置圖層“填充”0%，再添加“描邊”圖層樣式

3.4.8.7 GIF圖的高度

既可以單獨做一張漂亮的GIF圖（在AE中做動效，PS中包裝）

也可以將動效融合在一張長圖中，前提是“確保圖片清晰可讀”，好處是“GIF圖看起來和其它的圖片不會有明顯斷層，瀏覽順暢”

3.4.8.8 水平方向上建議放1個完整Web界面

因為Web界面寬度大，所以為了完整清晰展示網(wǎng)頁效果，建議在水平方向上只放1個界面就好

當需要展示說明文案時，可以這樣分配橫向空間：在12柵格的前提下，左側4柵格放“界面說明”(文案居右對齊)，界面占中間7柵格，最右邊的1柵格留白

3.4.8.9 樣式相似的Web彈窗，一行可放3個

可參考下圖樣式

3.4.8.10 如果有復雜的交互邏輯，可以展開闡述

可以用表格和流程圖的形式呈現(xiàn)

3.4.8.11 日常練習

精選展示優(yōu)質的日常練習，畫龍點睛

3.4.9 尾圖

封底可以和封面在視覺上首尾呼應

比如下圖中，封面是宇航員女孩遨游太空，封底也展示了女孩插畫

比如下圖中的封面是“抽取一本發(fā)光的優(yōu)質作品集”，封底是將作品集放回書架上，十分巧妙

3.5 總頁數(shù)

16:9的PPT共40～60頁比較合適

3.5.1 如何衡量

1、做一張寬高比16:9的圖片，導出PNG格式

2、在石墨文檔中新建文檔，命名為“最小篇幅40張圖”，把步驟1中的圖片貼40張

3、在石墨文檔中新建文檔，命名為“最大篇幅60張圖”，把步驟1中的圖片貼60張

4、在石墨文檔中新建文檔，命名為“作品集實時預覽”，把作品集的PNG圖片和GIF圖統(tǒng)一放在這個文檔中

5、確保3份文檔的圖片之間都沒有空行

6、電腦全屏截圖，對比最右側“滾動條”的高度，確保在合適的范圍內（“最大篇幅60張圖”滾動條高度≤“作品集實時預覽”滾動條高度≤“最小篇幅40張圖”滾動條高度）

4 發(fā)作品集

4.1 發(fā)之前的自查

預覽整體視覺效果是否滿意

通篇核對文案，檢查錯別字

4.2 發(fā)送的格式

4.2.1 鏈接

個人推薦鏈接形式

如果作品可公開，就發(fā)表在知名設計平臺上，比如UI中國

如果作品不可公開，就放在石墨/騰訊文檔中

4.2.1.1 用石墨/騰訊文檔來承載作品集

把設計好的包裝稿圖片，按順序導入到"空白在線文檔"中

支持gif動圖；瀑布流預覽，比pdf更絲滑；有歷史編輯記錄，萬一作品集被盜用，可用來證明自己的原創(chuàng)性

在分享時可以設置“公開只讀link”，將默認分享文案修改成固定格式（比如：UI作品集-某某某-2年https://shimo.im/docs/ababab1ysl），發(fā)送前要確認鏈接可點擊

4.2.2 PDF

招聘方主動要的話，我們再給

較正規(guī)的招聘方，會要求我們發(fā)作品集到企業(yè)郵箱

注意修改PDF文件名稱，可以使用“UI作品集-某某某-5年-15198888888”的類似格式

Powered by Froala Editor