@窒息紅Leon?：經(jīng)常有學(xué)生問(wèn)起交互該怎么體現(xiàn)自己的作品與能力，所以今天就來(lái)說(shuō)說(shuō)新人交互設(shè)計(jì)師的作品集制作。

聲明：本文用到的所有素材均經(jīng)過(guò)授權(quán)，僅作學(xué)習(xí)交流，不得用于任何商業(yè)用途，否則一定追究法律責(zé)任。

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

轉(zhuǎn)眼又到了一年之春，除了萬(wàn)物復(fù)蘇天氣轉(zhuǎn)暖，同時(shí)也迎來(lái)了一個(gè)求職季：不僅僅是學(xué)生們要忙著春招、找實(shí)習(xí)、申請(qǐng)國(guó)外的學(xué)校，同時(shí)也是在職人員跳槽的高峰期。對(duì)交互設(shè)計(jì)師來(lái)說(shuō)，既然要求職，簡(jiǎn)歷與作品集自是必不可少，前者已經(jīng)在以前的文章里聊過(guò)很多次，倒是后者經(jīng)常有學(xué)生問(wèn)起交互該怎么體現(xiàn)自己的作品與能力，所以今天就來(lái)說(shuō)說(shuō)新人交互設(shè)計(jì)師的作品集制作。

對(duì)于交互設(shè)計(jì)師的核心競(jìng)爭(zhēng)力，似乎國(guó)內(nèi)外都比較認(rèn)可的一種說(shuō)法就是「Story telling」和「Persona」，用中文來(lái)說(shuō)就是「場(chǎng)景演繹」與「用戶畫像/建?！?。話雖如此，這兩項(xiàng)能力的具體理解還沒(méi)那么容易，尤其是「場(chǎng)景演繹」。很多人剛開始做作品集的時(shí)候就是堆砌——堆砌做過(guò)的項(xiàng)目、把界面排列起來(lái)、把個(gè)人經(jīng)歷羅列一下，總讓人感覺(jué)讀起來(lái)干巴巴的。要知道，作品集本身就是一個(gè)產(chǎn)品，于是制作作品集也是體現(xiàn)這兩項(xiàng)重要能力的過(guò)程。

Persona

用戶畫像是非常重要的一項(xiàng)能力，對(duì)用戶的理解、歸納將直接影響設(shè)計(jì)師工作的效果，盡管現(xiàn)在很多大公司并不嚴(yán)格按照交互設(shè)計(jì)流程來(lái)進(jìn)行設(shè)計(jì)，但是這依然是很有分量的一個(gè)考察點(diǎn)。《About Face 》中有很大的篇幅來(lái)專門介紹這種工具如何在實(shí)際項(xiàng)目中發(fā)揮作用，感興趣的朋友可以針對(duì)這幾個(gè)章節(jié)專門去研究一下。下圖就是一個(gè)比較好的畫像例子（來(lái)自 Bubu）。

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

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

Storytelling

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

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

作品集不像做講演時(shí)候的 PPT，后者一般主張盡量少寫字多做引導(dǎo)，主要由講演者推動(dòng)故事前進(jìn)；但是作品集往往都是單獨(dú)呈現(xiàn)在讀者面前，因此必須在其中描述設(shè)計(jì)過(guò)程。

如果是自己獨(dú)立的完整項(xiàng)目，非常建議在作品集中留下二維碼或者網(wǎng)址，畢竟看再多的圖也不如上手玩一下來(lái)的真實(shí)。（下圖來(lái)自：家誠(chéng)Leo）

結(jié)果方面，如果是真實(shí)運(yùn)營(yíng)的項(xiàng)目，則在作品集中展示一下數(shù)據(jù)比如 PV、UV、簡(jiǎn)單的盈利情況，都會(huì)讓讀者對(duì)這個(gè)項(xiàng)目的評(píng)價(jià)向上邁好幾個(gè)臺(tái)階。下圖就是某產(chǎn)品根據(jù)前期調(diào)研、測(cè)試后具體上線的效果對(duì)比（來(lái)自小和）。通過(guò)評(píng)估能夠顯著看到數(shù)據(jù)提升，而這簡(jiǎn)單的一頁(yè)正是對(duì)設(shè)計(jì)效果最好的體現(xiàn)。

上圖是我自己的一個(gè)項(xiàng)目歷程展示，一個(gè)長(zhǎng)期的項(xiàng)目可以彰顯你的執(zhí)行力。通過(guò)數(shù)據(jù)的變化以及功能的迭代，在這個(gè)過(guò)程中非常能體現(xiàn)出項(xiàng)目的成長(zhǎng)過(guò)程以及你在其中所發(fā)揮的作用。

職責(zé)

面試時(shí)，除了考察你的個(gè)人素質(zhì)，還經(jīng)常會(huì)重點(diǎn)了解協(xié)作能力。一個(gè)項(xiàng)目從設(shè)計(jì)稿到正式上線，中間必不可少要與產(chǎn)品經(jīng)理、視覺(jué)設(shè)計(jì)師、開發(fā)工程師通力協(xié)作。在這個(gè)過(guò)程中，除了設(shè)計(jì)頁(yè)面、梳理邏輯以外你還做了什么？對(duì)項(xiàng)目的把控能力如何？你的產(chǎn)出是否規(guī)范？這都是實(shí)際工作中非常重要的能力。

作品集視覺(jué)設(shè)計(jì)

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

像下圖這樣（來(lái)自家誠(chéng)Leon），把產(chǎn)品的界面與整體背景完全融合在一起，看起來(lái)會(huì)非常自然。也沒(méi)有必要過(guò)多篇幅的羅列界面，總而言之就是讓你的項(xiàng)目有跡可循，體現(xiàn)質(zhì)體現(xiàn)量，就可以了。

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

自我描述

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

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

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

推薦作者的微信公眾號(hào)：

【為了這7個(gè)指南也得存書簽！】

1. 平面設(shè)計(jì)：《超贊！設(shè)計(jì)師完全自學(xué)指南》
2. 交互設(shè)計(jì)：《交互設(shè)計(jì)師修煉指南！教你從零開始成為優(yōu)秀交互設(shè)計(jì)師》
3. UI設(shè)計(jì)：《超實(shí)用新手指南！零基礎(chǔ)如何自學(xué)UI設(shè)計(jì)？》
4. 前端開發(fā)：《天貓高手來(lái)教你！零基礎(chǔ)如何系統(tǒng)地學(xué)習(xí)前端開發(fā)？》
5. 摳圖技巧：《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》
6. 配色方案：《色彩搭配速成！3個(gè)實(shí)用方法幫你全面搞定配色》
7. DPI指南：《基礎(chǔ)知識(shí)學(xué)起來(lái)！為設(shè)計(jì)師量身打造的DPI指南》

作者：@窒息紅Leon

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量104萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com