求職寶典！新人交互設計師的作品集制作方法（附優秀案例）

@窒息紅Leon?：經常有學生問起交互該怎么體現自己的作品與能力，所以今天就來說說新人交互設計師的作品集制作。

聲明：本文用到的所有素材均經過授權，僅作學習交流，不得用于任何商業用途，否則一定追究法律責任。

特別感謝：家誠Leo、小和、Ding、Bubu 提供他們的作品集給我參考。

轉眼又到了一年之春，除了萬物復蘇天氣轉暖，同時也迎來了一個求職季：不僅僅是學生們要忙著春招、找實習、申請國外的學校，同時也是在職人員跳槽的高峰期。對交互設計師來說，既然要求職，簡歷與作品集自是必不可少，前者已經在以前的文章里聊過很多次，倒是后者經常有學生問起交互該怎么體現自己的作品與能力，所以今天就來說說新人交互設計師的作品集制作。

對于交互設計師的核心競爭力，似乎國內外都比較認可的一種說法就是「Story telling」和「Persona」，用中文來說就是「場景演繹」與「用戶畫像/建?！埂Ｔ掚m如此，這兩項能力的具體理解還沒那么容易，尤其是「場景演繹」。很多人剛開始做作品集的時候就是堆砌——堆砌做過的項目、把界面排列起來、把個人經歷羅列一下，總讓人感覺讀起來干巴巴的。要知道，作品集本身就是一個產品，于是制作作品集也是體現這兩項重要能力的過程。

Persona

用戶畫像是非常重要的一項能力，對用戶的理解、歸納將直接影響設計師工作的效果，盡管現在很多大公司并不嚴格按照交互設計流程來進行設計，但是這依然是很有分量的一個考察點?！禔bout Face 》中有很大的篇幅來專門介紹這種工具如何在實際項目中發揮作用，感興趣的朋友可以針對這幾個章節專門去研究一下。下圖就是一個比較好的畫像例子（來自 Bubu）。

一些比較失敗的作品集中不會專門描述項目的用戶畫像，他們可能會表達目標人群是學生、是老人、是年輕女性，但是過于寬泛的定義將會掩蓋真正的受眾。如果能夠針對選擇幾個有代表性的例子，并建立起更具針對性、指向性的畫像，可以幫助設計師在前期構建項目雛形。因此在作品集中，非常建議將這部分畫像展示出來，也非常利于讀者了解這個項目。

上面這張圖是另一個我個人覺得比較好的用戶畫像范例（來自家誠Leo），針對的產品是一個在線學習平臺。雖然使用真人照片也可以，但是設計師自己根據用戶特點繪制了三個典型卡通人物，并且在旁邊仔細描述了他們的基本情況和與產品相關的訴求。從 Skill buyer 到 Skill seller 再到 Employer，也是從校園到社會（Campus to Society）的一個進階過程。這樣敘述整體會顯得很有層次感，也包含了足夠廣的覆蓋面。

Storytelling

我自己對場景演繹的理解主要就是 5W 原則，你必須具備將項目及場景中「Who、What、When、Why、How」都清晰表達出來的能力。聽起來好像很玄乎，其實并不是，比較失敗的作品集只描述了設計師做了什么工作，比如我設計了一個打車軟件，展示了其中的個人中心、打車界面，但事實上對于項目的背景、解決的問題、適用的場景都沒有詳細的表述。

像上面這張圖就是我自己作品集里一個比較失敗的例子。我僅僅羅列了溝通模塊、附近尋伴、我的圈子三個功能及界面，本身比較單薄，而且前后并沒有直接的串聯，也沒有與場景結合在一起，屬于場景演繹的失敗典型。頂部「新功能」、「新思路」幾個字完全是廢話，沒有對比根本體現不出「新」，也表達不出這樣設計解決了什么問題。

作品集不像做講演時候的 PPT，后者一般主張盡量少寫字多做引導，主要由講演者推動故事前進；但是作品集往往都是單獨呈現在讀者面前，因此必須在其中描述設計過程。

如果是自己獨立的完整項目，非常建議在作品集中留下二維碼或者網址，畢竟看再多的圖也不如上手玩一下來的真實。（下圖來自：家誠Leo）

結果方面，如果是真實運營的項目，則在作品集中展示一下數據比如 PV、UV、簡單的盈利情況，都會讓讀者對這個項目的評價向上邁好幾個臺階。下圖就是某產品根據前期調研、測試后具體上線的效果對比（來自小和）。通過評估能夠顯著看到數據提升，而這簡單的一頁正是對設計效果最好的體現。

上圖是我自己的一個項目歷程展示，一個長期的項目可以彰顯你的執行力。通過數據的變化以及功能的迭代，在這個過程中非常能體現出項目的成長過程以及你在其中所發揮的作用。

職責

面試時，除了考察你的個人素質，還經常會重點了解協作能力。一個項目從設計稿到正式上線，中間必不可少要與產品經理、視覺設計師、開發工程師通力協作。在這個過程中，除了設計頁面、梳理邏輯以外你還做了什么？對項目的把控能力如何？你的產出是否規范？這都是實際工作中非常重要的能力。

作品集視覺設計

如果只是在作品集中做機械堆砌，整體頁面恐怕不會有很好的一致性。比如封面是一個設計風格，到了具體展示的時候又會出現多種其他風格，這對讀者來說體驗也非常不好。一份優秀的作品集整體上有一條主線來牽引，而在每一個小節中又能體現出項目的特色，不會讓讀者在閱讀時產生很強的跳躍感，也不容易打斷讀者的思路。如果要展示高保真界面或者原型圖、手繪，也都應當將這些圖片預先處理，裁剪成合適的尺寸或者最好放到對應的 mockup 中，千萬不要直接把圖片貼到背景里，會顯得非常突兀。

像下圖這樣（來自家誠Leon），把產品的界面與整體背景完全融合在一起，看起來會非常自然。也沒有必要過多篇幅的羅列界面，總而言之就是讓你的項目有跡可循，體現質體現量，就可以了。

另一方面不太建議把作品集做的太花哨，對色彩的選用還是冷淡一點比較好，同時也要兼顧文字的排版及顯示效果?？傊欢ㄒ浀靡曈X是為內容服務的，千萬不要本末倒置。 像下圖這樣簡單的排版看起來也非常舒服（來自 Ding）。

自我描述

優秀的設計師一定也是一個有趣的人。作品集里展示項目往往比較有限，況且很多公司項目又不適合直接放進來，所以我也建議大家可以在作品集中留一兩頁的篇幅描述一下你自己。比如喜歡運動（跑步、攀巖、射箭......），喜歡手繪（秀一下手賬或者其他作品集），擅長寫作和攝影（其他社交網站的主頁等）等等，相信都可以為自己加不少分。畢竟，誰不要想雇一個純粹的工作機器來做同事吧。（下圖來自家誠Leo）

舉了這幾個例子不知道對大家是否有幫助，如果有看到很棒的作品集也歡迎留言給我，一起學習欣賞。

祝求職的各位能找到滿意的工作：）

推薦作者的微信公眾號：

【為了這7個指南也得存書簽！】

1. 平面設計：《超贊！設計師完全自學指南》
2. 交互設計：《交互設計師修煉指南！教你從零開始成為優秀交互設計師》
3. UI設計：《超實用新手指南！零基礎如何自學UI設計？》
4. 前端開發：《天貓高手來教你！零基礎如何系統地學習前端開發？》
5. 摳圖技巧：《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》
6. 配色方案：《色彩搭配速成！3個實用方法幫你全面搞定配色》
7. DPI指南：《基礎知識學起來！為設計師量身打造的DPI指南》

作者：@窒息紅Leon

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量104萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com