一份優(yōu)秀的交互設(shè)計(jì)作品集應(yīng)該準(zhǔn)備哪些內(nèi)容？

Spell(華裔設(shè)計(jì)總監(jiān))：我覺(jué)得首先要明白的一點(diǎn)就是，為什么找交互設(shè)計(jì)，或者其他設(shè)計(jì)的工作需要作品集。從我面試各種設(shè)計(jì)師的經(jīng)驗(yàn)來(lái)說(shuō)，作品集其實(shí)是一個(gè)人設(shè)計(jì)風(fēng)格和思考過(guò)程的折射。所以基于這個(gè)觀點(diǎn)，我們來(lái)說(shuō)說(shuō)怎么用作品集來(lái)傳達(dá)這些信息。

本文主要基于硅谷的業(yè)界標(biāo)準(zhǔn)，如果有和國(guó)內(nèi)不完全相同的地方歡迎跟我討論~

1，你解決了什么問(wèn)題

我見(jiàn)過(guò)最普遍的作品集，也是最普遍的讓我看了一眼就會(huì)選擇不要這個(gè)candidate的作品集，通常有一個(gè)固定的格式：上來(lái)就說(shuō)“我的流程”。UX是一門(mén)科學(xué)，請(qǐng)問(wèn)你除了做用戶研究做線框圖做原型做測(cè)試做迭代，還能給我玩出什么花樣來(lái)?我不需要你把這些贅述一遍，我真正想看到的是，你如何用你的設(shè)計(jì)解決了一個(gè)具體的問(wèn)題。

可能你會(huì)說(shuō)我做的東西都是產(chǎn)品經(jīng)理提的需求，我做的都是學(xué)生項(xiàng)目只是個(gè)大作業(yè)，但其實(shí)萬(wàn)變不離其宗，你之所以設(shè)計(jì)一個(gè)款產(chǎn)品或者產(chǎn)品中的一個(gè)功能，總是要解決一個(gè)問(wèn)題吧。哪怕是個(gè)很小的例子，你做了朋友圈點(diǎn)贊的設(shè)計(jì)，這個(gè)設(shè)計(jì)存在也有他的理由吧，你是如何思考得到了你最終的解決方案的呢?我在意的是這個(gè)。

下面來(lái)一發(fā)栗子

我非常喜歡的設(shè)計(jì)師事務(wù)所MetaLab是設(shè)計(jì)了大名鼎鼎的 Slack | CrunchBase (融資3億多美金，一年前估值已達(dá)到28億)的事務(wù)所。他們?cè)趺凑故玖怂麄儗?duì)于Slack的設(shè)計(jì)呢?

是的你沒(méi)有看錯(cuò)，只有這么短的內(nèi)容。你可能會(huì)說(shuō)那是因?yàn)樗麄兠曉谕獠恍枰龊芨呒?jí)的Portfolio展示了。那么你就錯(cuò)了，在做了Slack之前，MetaLab在硅谷眾多老牌牛逼事務(wù)所里面，只是名不見(jiàn)經(jīng)傳的小事務(wù)所一枚，沒(méi)有Portfolio，哪里來(lái)的客戶。

扯回來(lái)。之所以說(shuō)他們是個(gè)很好的栗子，并不是因?yàn)樗麄冏隽薝nicorn Startup的設(shè)計(jì)，而是他們?cè)趺凑故玖俗约河迷O(shè)計(jì)解決的問(wèn)題：”How we got people talking.”整個(gè)布局中，他們很簡(jiǎn)單的展示了他們?cè)O(shè)計(jì)中不同的走向，不需要他們說(shuō)太多話，你能感受到他們?cè)谠O(shè)計(jì)產(chǎn)品中，投入在產(chǎn)品中的思考力。

當(dāng)然，這個(gè)栗子只是為了幫大家認(rèn)識(shí)到怎么確立一個(gè)好的problem statement. 讓別人第一眼就知道你做了什么。

(后面的Portfolio會(huì)比較接地氣，只是忍不住給大家看看這個(gè)很牛逼的Portfolio)

2，你如何思考并解決問(wèn)題

設(shè)計(jì)不是純粹主觀的，交互設(shè)計(jì)更不是。交互設(shè)計(jì)強(qiáng)調(diào)功能性，強(qiáng)調(diào)解決問(wèn)題。作為一個(gè)每天審閱很多作品集的人，我很看重你的思考力，你如何解決問(wèn)題。

接地氣一點(diǎn)的說(shuō)，就是你的“流程”。你可能很疑惑，剛才第一條里面不是說(shuō)了如果上來(lái)就說(shuō)流程我會(huì)立馬Pass么。恩，此流程非比流程，如果你在這一步做的還是列出來(lái)你做的事情，告訴我我做了用戶調(diào)研，然后做了線框圖，然后做了高保真blah blah，那么不好意思，你還是out。大多數(shù)時(shí)候，我們需要的不是只會(huì)簡(jiǎn)單重復(fù)一個(gè)流程的人，而是能說(shuō)明白為什么在某個(gè)特定場(chǎng)景需要使用特點(diǎn)流程的人，也就是事情背后的那個(gè)“為什么”。

這個(gè)聽(tīng)起來(lái)好像很簡(jiǎn)單，但是我認(rèn)為是作品集實(shí)踐中最難的一步。因?yàn)槟阋恢圹E的把你解決的問(wèn)題，使用的方法融入到你敘述自己如何解決這個(gè)問(wèn)題的過(guò)程中。

在這里提幾個(gè)小技巧：

1. 給一個(gè)不是行業(yè)內(nèi)的人講一遍你做了什么，用了哪些方法解決了哪些問(wèn)題的故事，看看他們哪里有了疑問(wèn)。這就是你故事沒(méi)有講好的地方。

我們舉例你做了個(gè)App幫用戶找附近好喝的奶茶店(這是一個(gè)虛構(gòu)的項(xiàng)目請(qǐng)不要太認(rèn)真為什么是奶茶不是咖啡之類的問(wèn)題)，你采訪了10個(gè)愛(ài)喝奶茶的人，然后你做了個(gè)流程圖，接著你做了線框圖，你把線框圖給工程師看了，他們提了點(diǎn)建議，你做了改進(jìn)然后做了高保真.現(xiàn)在你要把這個(gè)項(xiàng)目放到你的Portfolio里面。

找個(gè)人說(shuō)說(shuō)這個(gè)流程，你每一步做了什么之類的。你可能會(huì)被問(wèn)到：你為什么要找10個(gè)愛(ài)喝奶茶的人，為什么不是不愛(ài)喝的人?為什么你要做流程圖之類之類的。然后你再來(lái)做改進(jìn)。

于是改進(jìn)后的版本可能是：為了知道誰(shuí)是我們的用戶，他們有什么痛點(diǎn)，我們采訪了十個(gè)人。我們希望我們的App能夠給喜歡喝奶茶的人帶來(lái)價(jià)值，所以我們采訪的都是奶茶的愛(ài)好者。。。(后面的請(qǐng)開(kāi)腦洞自己編下去)

重點(diǎn)就是你知道誰(shuí)是你的聽(tīng)眾，并且講清楚你每一步的決策是為什么。

2. 能使用圖來(lái)講故事的時(shí)候，多使用圖片

你們讀我寫(xiě)的這么多字到現(xiàn)在，估計(jì)也要哭了吧哈哈哈。想想我看你Portfolio的時(shí)候你全是字我的心情~!來(lái)讓我給你們個(gè)栗子吧。

Tingyu Li | The Feast Catering 是親愛(ài)的萌萌噠的學(xué)生聽(tīng)雨小朋友的作品之一，這也是一個(gè)課堂項(xiàng)目。她做了一些很有意思的觀察，然后在作品集里面，很聰明的把這些流程用圖像表現(xiàn)了出來(lái)。比如她和用戶訪談的過(guò)程中，發(fā)現(xiàn)用戶說(shuō)點(diǎn)餐的時(shí)候想要一個(gè)餐巾紙都要很久，她就形象的把這部分做了出來(lái)，讓你能夠感同身受，同時(shí)也深入的說(shuō)了這個(gè)問(wèn)題是因?yàn)轭櫩筒⒉荒芸偸羌皶r(shí)的和服務(wù)員交流。我覺(jué)得大家對(duì)于作品集最多的問(wèn)題可能就是：我都做得是用研，怎么辦?我做的東西看起來(lái)并不高大上，怎么辦?你們可以自己感受一下聽(tīng)雨這里的方法。(所以學(xué)生項(xiàng)目也可以做的很有意思并且被包裝的很好)

3. 能展示結(jié)果，一定要展示結(jié)果

就像剛才說(shuō)的，交互設(shè)計(jì)不是純主觀的，一個(gè)設(shè)計(jì)有沒(méi)有起到他本來(lái)的作用，是可以被衡量的。比如一個(gè)交友網(wǎng)站，你做了讓用戶對(duì)其他用戶點(diǎn)贊的功能，目的是為了增強(qiáng)用戶間的交流，加強(qiáng)用戶粘性，那么有沒(méi)有做到這件事情，是可以衡量的。

估計(jì)你們也喜歡看更接地氣一點(diǎn)的栗子，那我還是用學(xué)生的例子吧。XUAN同學(xué)本科期間一直在為在校同學(xué)做一枚App，在過(guò)程中積累了不少用戶，于是在她的作品集里面，她很清楚的寫(xiě)出了自己的這個(gè)結(jié)果。我建議大家再有這樣的結(jié)果的時(shí)候，就一定要展示出來(lái)。

4. 沒(méi)人不喜歡驚喜，來(lái)個(gè)彩蛋吧

這個(gè)沒(méi)什么太多可以解釋的，每次看到申請(qǐng)者的作品集里面有很匠心獨(dú)運(yùn)的小彩蛋的時(shí)候，都肯定會(huì)是個(gè)加分項(xiàng)。

來(lái)個(gè)我好朋友的Portfolio安利一下，這除了是一個(gè)非常好的作品集之外，彩蛋請(qǐng)自尋。Shuang’s Portfolio

3，你到底是個(gè)怎樣的設(shè)計(jì)師

其實(shí)說(shuō)來(lái)說(shuō)去，我看你的作品集，最想知道的就是你到底是個(gè)怎么樣的設(shè)計(jì)師呢?有沒(méi)有自己的風(fēng)格，自己分析問(wèn)題處理問(wèn)題的方式。

你可能會(huì)說(shuō)，作為交互設(shè)計(jì)師我不想限制自己，我的風(fēng)格就是項(xiàng)目是什么風(fēng)格我就是什么風(fēng)格。那么你可能錯(cuò)誤理解了我這里說(shuō)的風(fēng)格的意思，我所指的風(fēng)格，是指你作為設(shè)計(jì)師，思考的風(fēng)格。

這次先來(lái)一枚栗子

I Am | Ying Wang Sunny是灣區(qū)挺厲害的設(shè)計(jì)師一枚，也是我很喜歡的一個(gè)妹子，之前在Google，最近剛剛?cè)チ薃irbnb。她做過(guò)的項(xiàng)目，不管是Freelance的還是在公司做的項(xiàng)目，跨度很大，風(fēng)格也不禁相同，但是她的Portfolio展示出來(lái)的，卻是一個(gè)很完整的有自己體系的設(shè)計(jì)師。你看了她的Portfolio之后，就像是能看到她這個(gè)人一樣。(是的她本人也是這么萌萌噠)

再比如Melanie Daveid 的例子就是完全不同的風(fēng)格，但是你能從她的作品里面直接感覺(jué)到她到底是怎么樣的設(shè)計(jì)師。

做到這一點(diǎn)，其實(shí)是很難的，因?yàn)椴煌瑫r(shí)期的項(xiàng)目，不同時(shí)期的你，會(huì)有不同的思考和工作流程，那么應(yīng)該怎么辦呢?

下面是幾個(gè)小技巧

1. 多使用stock image

2. 先確定整體Portfolio的風(fēng)格，再對(duì)項(xiàng)目逐個(gè)調(diào)整

3. 整個(gè)作品集別使用太多字體，不論是你包裝出來(lái)的圖片還是你的作品本身。也別用太多顏色。

4. 別在布局上創(chuàng)新，我能順利的瀏覽你的作品集是重中之重，別搞出什么導(dǎo)航在左下角這種反人類設(shè)計(jì)。

最后說(shuō)幾句大家談起Portfolio的時(shí)候經(jīng)常問(wèn)我的問(wèn)題：

1. 多少個(gè)項(xiàng)目最合適?

我的Portfolio 上面只有六個(gè)項(xiàng)目，其中 UXOffer 那個(gè)項(xiàng)目還只是個(gè)鏈接，有充數(shù)的嫌疑。我個(gè)人認(rèn)為3-8個(gè)都是合適的，無(wú)需太多。

2. 之前做的和UX/交互設(shè)計(jì)無(wú)關(guān)怎么辦?

這個(gè)其實(shí)有點(diǎn)因人而異，但是你要做的第一步無(wú)疑是要開(kāi)始做更多的項(xiàng)目開(kāi)始積累。但是更重要的是不要浪費(fèi)自己之前的經(jīng)歷，因?yàn)槟愕拿坎糠纸?jīng)歷都會(huì)對(duì)你的人生和成長(zhǎng)有幫助的。我面試過(guò)從數(shù)據(jù)科學(xué)家，建筑師，日語(yǔ)翻譯等等各行各業(yè)轉(zhuǎn)行來(lái)做交互設(shè)計(jì)的人，我反而覺(jué)得這些人很有趣。在項(xiàng)目不夠的時(shí)候可以想想怎么把自己之前的經(jīng)歷講成故事，放在你的網(wǎng)站上。

3. 我不太擅長(zhǎng)視覺(jué)設(shè)計(jì)，怎么包裝自己的項(xiàng)目?

幾個(gè)建議：stock image大法好。別吝嗇留白。選好字體。

作者簡(jiǎn)介：Spell，高級(jí)產(chǎn)品設(shè)計(jì)@Salesforce。曾助力微軟，亞馬遜，HTC，Citrix及若干創(chuàng)業(yè)公司的產(chǎn)品設(shè)計(jì)。當(dāng)下樂(lè)趣是將UX的知識(shí)傳遞給更多的人，并創(chuàng)立了UXOffer-專注于幫助中國(guó)學(xué)生獲得最好的HCI/交互設(shè)計(jì)教育機(jī)會(huì)。

個(gè)人網(wǎng)站：http://hangyu.me/