非常干貨系列之UI設(shè)計(jì)作品集該怎么做

一、作品集的制作準(zhǔn)備

「工欲善其事，必先利其器。」

在進(jìn)行作品集的制作之前，我們需要先做好相應(yīng)的準(zhǔn)備，這樣在后續(xù)的制作過(guò)程中才能專注于內(nèi)容本身。
 

1. 作品集的制作工具

「選擇越多，做決策的成本就越高?！?/span>

作為設(shè)計(jì)師，我們可以用來(lái)制作作品集的工具真的是太多了，PPT、keynote、indesign、sketch、word、pages，甚至 ps 也能用來(lái)制作作品集。

很多人還沒(méi)開(kāi)始正式做作品集，就要花一番時(shí)間在工具的選擇上。好不容易選擇了一款工具，做到中途覺(jué)得不順手又想換掉。

大可不必在選擇工具上花太多時(shí)間。

我自己制作作品集就用過(guò) PPT、keynote 和 pages，用起來(lái)都很順手，基本上只要排版方便就可以了，遇到一些需要做視覺(jué)效果的可以結(jié)合ps。最后完成后統(tǒng)一導(dǎo)成 PDF 文件。

這里給出的建議是，選擇 ppt 或 keynote 作為基本的排版工具，一些圖片的處理用更加專業(yè)的工具，開(kāi)始正式制作后就不要再換工具了。
 

2. 作品集的制作形式

這里我所說(shuō)的制作形式，主要是指作品集的呈現(xiàn)形式，即橫排還是豎排，以及每頁(yè)的大概尺寸。

橫排 or 豎排

△ 橫排

△ 豎排

這點(diǎn)我之所以拿出來(lái)講，是因?yàn)槲易约涸谥暗闹谱鬟^(guò)程中，吃過(guò)不小的虧。

最開(kāi)始我參考了一個(gè)朋友的作品集，按照他豎排的方式去制作，結(jié)果做到一半的時(shí)候發(fā)現(xiàn)并不是很好展開(kāi)。我忽略了他是視覺(jué)設(shè)計(jì)師，所以他的方式也許并不太適合交互設(shè)計(jì)師。

為什么這樣說(shuō)呢？視覺(jué)設(shè)計(jì)師的作品集更多的是通過(guò)圖片去表達(dá)，而交互設(shè)計(jì)師需要用更多的文字去表達(dá)。

這里可以舉一個(gè)例子：

△ 圖3

△ 圖4

大家可以對(duì)比一下上面兩張圖的效果，同樣的圖片尺寸以及文字，但是明顯橫排的圖片視覺(jué)效果更好。

頁(yè)面尺寸

如果你使用 ppt 或者 keynote，用軟件默認(rèn)的尺寸就好了。

之所以說(shuō)這一點(diǎn)，是有的小伙伴會(huì)特意把單頁(yè)的尺寸設(shè)置的很大，期望在每頁(yè)放更多內(nèi)容，這樣并不好。一方面，每一頁(yè)內(nèi)容過(guò)多，不利于閱讀；另一方面，在某些過(guò)度頁(yè)面或某些特定頁(yè)面，如果內(nèi)容過(guò)少，會(huì)顯得頁(yè)面很空。

具體的尺寸不具體說(shuō)了，如果使用其他工具，大家可以自行網(wǎng)上查一下。

 

二、作品集的制作過(guò)程

上面說(shuō)了作品集的制作準(zhǔn)備，下面進(jìn)入作品集的制作過(guò)程。
 

1. 作品集要講些什么？

這個(gè)應(yīng)該是大家最關(guān)心的點(diǎn)了。我之前在做作品集的時(shí)候，也是最頭疼這個(gè)，完全不知道該講些什么。

但是這個(gè)也分兩種情況：一種是真的不知道該講些什么，腦海里沒(méi)什么存貨；另一種是想講的東西太多了，所以不知道該講些什么。

第一種情況屬于平時(shí)的工作中，沒(méi)有形成自己的工作流，對(duì)于解決問(wèn)題沒(méi)有自己的方法體系，所以到用的時(shí)候講不出所以然。

針對(duì)這種情況，我的建議是在今后的工作中多總結(jié)多思考，形成自己的工作流和方法體系，當(dāng)務(wù)之急只能是博采眾長(zhǎng)，結(jié)合網(wǎng)上分享的好的經(jīng)驗(yàn)和自己實(shí)際工作中的經(jīng)驗(yàn)，總結(jié)出一個(gè)工作流，然后深挖以往工作中的某一個(gè)解決具體問(wèn)題的點(diǎn)，總結(jié)自己的思考過(guò)程。

但是對(duì)于這種情況，我的文章能起到的作用真的很小。

第二種情況，想講的東西很多，但是對(duì)于「度」的把握拿捏不準(zhǔn)。我自己之前也是屬于這種情況，所以我的文章主要也是針對(duì)這種情況展開(kāi)的。

設(shè)計(jì)流程講不講？

在前幾份工作的求職過(guò)程中，我的作品集參考了知乎上某些問(wèn)答后，形成了一種固有的模式，即流水賬一樣的記錄整個(gè)交互工作開(kāi)展的過(guò)程，也就是我們常說(shuō)的設(shè)計(jì)過(guò)程。

比如下面這樣：

△ 交互設(shè)計(jì)流程

作品集中的大部分項(xiàng)目都按照這個(gè)流程去展示，怎樣做需求分析、用戶調(diào)研，怎樣進(jìn)行信息架構(gòu)設(shè)計(jì)，怎樣設(shè)計(jì)任務(wù)流程，然后直到開(kāi)發(fā)上線、迭代，看上去內(nèi)容很多很豐富吧？但是一個(gè)項(xiàng)目，想把里里外外都理清楚，怕是100頁(yè)也講不完吧。

同時(shí)，我們會(huì)有意識(shí)地控制版面，導(dǎo)致每一塊內(nèi)容都有，但其實(shí)沒(méi)有一個(gè)講到位。倒不如拿自己參與最多或者自己最擅長(zhǎng)的一塊去講。

比如，你在某一個(gè)項(xiàng)目中主要負(fù)責(zé)前期的需求分析，那你就深挖這一塊，集中展示你是如何從拿到一個(gè)需求開(kāi)始進(jìn)行分析，需求分析過(guò)程中運(yùn)用了什么方法，最后得出怎樣的結(jié)論，你的結(jié)論是如何推動(dòng)項(xiàng)目開(kāi)展的。

你可能會(huì)說(shuō)整個(gè)項(xiàng)目的交互是你獨(dú)自完成的，每一個(gè)環(huán)節(jié)都有參與，但是即使每一個(gè)環(huán)節(jié)都參與，不還是有側(cè)重點(diǎn)么？

再者，作為交互設(shè)計(jì)師，大家的設(shè)計(jì)流程都大同小異，也沒(méi)有特意去講這個(gè)的必要。

而且，我們是在做作品集，它的目的只是告訴面試官，我們是可以解決問(wèn)題的，是可以推動(dòng)項(xiàng)目開(kāi)展的，這就夠了。你的更多想法，完全可以留到當(dāng)面去和面試官分享。

設(shè)計(jì)方法講不講？

我們經(jīng)常在工作中接觸到各種各樣的設(shè)計(jì)方法，高大上一點(diǎn)的說(shuō)法是「方法論」，平時(shí)在看各種設(shè)計(jì)文章時(shí)也是被各種方法論搞的暈頭轉(zhuǎn)向，似乎時(shí)不時(shí)地提一下方法論會(huì)顯得更有格調(diào)？

△ 設(shè)計(jì)方法

那到底講不講設(shè)計(jì)方法？

我的建議是，「道法自然，切莫刻意」。

再多的設(shè)計(jì)方法，都是用來(lái)解決問(wèn)題的。

鄧小平同志說(shuō)的「不管黑貓白貓，能捉老鼠就是好貓」。同樣的，能解決問(wèn)題的設(shè)計(jì)方法就是好的方法，設(shè)計(jì)方法沒(méi)有高低之分，并不是你掌握了哪種設(shè)計(jì)方法就代表你有更強(qiáng)的解決問(wèn)題的能力。

所以，不要刻意去講設(shè)計(jì)方法，如果真要講，那只能是這個(gè)方法在你解決問(wèn)題的過(guò)程中發(fā)揮了切實(shí)的作用。

比如我的一個(gè)項(xiàng)目是關(guān)于貴金屬交易的，一個(gè)設(shè)計(jì)重點(diǎn)是對(duì)交易流程的設(shè)計(jì)，那么在這個(gè)設(shè)計(jì)中，我使用的主要設(shè)計(jì)方法就是任務(wù)流程設(shè)計(jì)，所以我重點(diǎn)展示了怎樣通過(guò)設(shè)計(jì)任務(wù)流程去優(yōu)化交易流程。

還有一個(gè)項(xiàng)目，我通過(guò)競(jìng)品分析，推導(dǎo)出我的設(shè)計(jì)目標(biāo)，所以我重點(diǎn)展示了競(jìng)品分析的過(guò)程。

你看，是你的設(shè)計(jì)目標(biāo)決定了你的設(shè)計(jì)方法，為了達(dá)成目標(biāo)，你選擇了最合適的方法，而不是目標(biāo)去適應(yīng)方法。

設(shè)計(jì)原則講不講？

在我們?nèi)粘５脑O(shè)計(jì)工作中，我們也會(huì)遵循一定的原則。這些原則要不要講呢？

△ 設(shè)計(jì)原則

這個(gè)我還是持同樣的觀點(diǎn)，不要刻意去講。

想一下，你的作品集中單拎了一頁(yè)放了幾條通用的設(shè)計(jì)原則，整個(gè)行業(yè)都遵循的原則，然后就沒(méi)然后了?？粗皇呛芷婀置?？

如果你針對(duì)項(xiàng)目特點(diǎn)，有針對(duì)性的設(shè)定了設(shè)計(jì)原則，并且通過(guò)遵循該設(shè)計(jì)原則達(dá)到了提升用戶體驗(yàn)、提升數(shù)據(jù)等等的效果，那我覺(jué)得你可以講，但是你要展開(kāi)。你要從具體的點(diǎn)上去體現(xiàn)你是如何遵循該設(shè)計(jì)原則并達(dá)到目標(biāo)的。

數(shù)據(jù)講不講？

沒(méi)有什么比數(shù)據(jù)更能說(shuō)明問(wèn)題了。

如果你有具體的數(shù)據(jù)可以展示，比如通過(guò)你的某一個(gè)設(shè)計(jì)，用戶轉(zhuǎn)化率得到了提升，用戶滿意度得到了提升，那么一定要把前后的數(shù)據(jù)對(duì)比展示出來(lái)。

還有一點(diǎn)，數(shù)據(jù)對(duì)你設(shè)計(jì)的支撐，你的某一個(gè)設(shè)計(jì)決策是通過(guò)進(jìn)行數(shù)據(jù)分析得出的，你也可以講。

小結(jié)

展示一個(gè)項(xiàng)目時(shí)，不要去講整個(gè)設(shè)計(jì)流程，把流程中的某一點(diǎn)單拎出來(lái)講，結(jié)合一個(gè)具體問(wèn)題來(lái)展開(kāi)，比如我上面說(shuō)到的優(yōu)化交易流程，在展開(kāi)的過(guò)程中融入你用到的設(shè)計(jì)方法，最終達(dá)成了什么目的，帶來(lái)了怎樣的數(shù)據(jù)變化。
 

2. 作品集要如何展開(kāi)？

剛剛講了要講什么，現(xiàn)在談?wù)勅绾沃v。

我今天想分享的展開(kāi)思路也很簡(jiǎn)單，就是「問(wèn)題 – 方案 – 驗(yàn)證」的過(guò)程：

• 拋出你要解決的問(wèn)題；
• 通過(guò)某一個(gè)或某幾個(gè)方法得到解決方案；
• 得到什么結(jié)果或者數(shù)據(jù)。

你還可以有第四步第五步，比如驗(yàn)證后的總結(jié)、迭代等等，我就不再往下說(shuō)了。
 

3. 作品集的視覺(jué)呈現(xiàn)

作品集的視覺(jué)呈現(xiàn)也是我們需要注意的一個(gè)大點(diǎn)，不僅要考慮頁(yè)面的美觀度，還要注意信息傳達(dá)的有效性，以及頁(yè)面與頁(yè)面之間的銜接。

這里有幾個(gè)具體的建議。

對(duì)比

對(duì)比一定要明顯。

通過(guò)字號(hào)、字重和顏色進(jìn)行對(duì)比，迅速傳達(dá)重要信息，不要害怕使用大號(hào)字體。

△ 上圖是前面提到的一個(gè)項(xiàng)目，我用了一整個(gè)頁(yè)面拋出了一個(gè)問(wèn)題，通過(guò)大號(hào)的字體，迅速傳達(dá)我的意思

留白

已經(jīng)被說(shuō)了很多次的留白，大家可以用起來(lái)，不要把每個(gè)頁(yè)面都塞滿，得讓頁(yè)面透透氣。

通過(guò)留白和對(duì)比，讓整個(gè)作品集的展示更有節(jié)奏感。

主題

為每一頁(yè)確定一個(gè)主題，方便觀看者能夠快速得到關(guān)鍵信息，知道每一頁(yè)的中心思想，減少理解成本，讓整個(gè)閱讀體驗(yàn)更順暢。

△ 個(gè)人簡(jiǎn)介

上圖是我在作品集第二頁(yè)的個(gè)人簡(jiǎn)介，我在每一頁(yè)的「左上角」為當(dāng)前頁(yè)面確定了一個(gè)主題，并且通過(guò)字體的字重和大小對(duì)比，對(duì)頁(yè)面進(jìn)行適度留白，使頁(yè)面的層次還算清晰。

大圖

在展示項(xiàng)目的過(guò)程中，可以運(yùn)用一些大圖，增加頁(yè)面的節(jié)奏，提升作品集整體的觀賞性。

圖片的選擇最好和項(xiàng)目契合，能更好的襯托項(xiàng)目。

封面

作品集完成了，不妨多花點(diǎn)時(shí)間琢磨一下封面，作用不言而喻，我就不多說(shuō)了。

各大設(shè)計(jì)網(wǎng)站應(yīng)該都能找到很多優(yōu)秀的封面設(shè)計(jì)，可以琢磨一下。

更多關(guān)于視覺(jué)方面的呈現(xiàn)，大家也可以自己去網(wǎng)上查看更多相關(guān)的文章。
 

4. 其他事項(xiàng)

項(xiàng)目背景

可以簡(jiǎn)單的對(duì)項(xiàng)目背景或問(wèn)題背景進(jìn)行描述，可以使后面的講述更易理解。

項(xiàng)目數(shù)量

我個(gè)人覺(jué)得3~6個(gè)就差不多了。你也可以展示更多，但是展開(kāi)講述的時(shí)候，可以選擇其中的幾個(gè)進(jìn)行重點(diǎn)展示。

在項(xiàng)目類(lèi)型上，建議可以展示不同領(lǐng)域和不同平臺(tái)的。

解決問(wèn)題

一個(gè)項(xiàng)目集中展示一到兩個(gè)點(diǎn)，我覺(jué)得就足夠了。

對(duì)作品集負(fù)責(zé)

給小伙伴的最后一條建議，對(duì)自己的作品集負(fù)責(zé)，別在面試時(shí)被問(wèn)懵了。