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

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

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

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

1. 作品集的制作工具

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

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

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

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

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

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

2. 作品集的制作形式

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

橫排 or 豎排

△ 橫排

△ 豎排

這點我之所以拿出來講，是因為我自己在之前的制作過程中，吃過不小的虧。

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

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

這里可以舉一個例子：

△ 圖3

△ 圖4

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

頁面尺寸

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

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

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

 

二、作品集的制作過程

上面說了作品集的制作準(zhǔn)備，下面進入作品集的制作過程。
 

1. 作品集要講些什么？

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

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

第一種情況屬于平時的工作中，沒有形成自己的工作流，對于解決問題沒有自己的方法體系，所以到用的時候講不出所以然。

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

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

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

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

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

比如下面這樣：

△ 交互設(shè)計流程

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

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

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

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

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

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

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

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

△ 設(shè)計方法

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

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

再多的設(shè)計方法，都是用來解決問題的。

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

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

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

還有一個項目，我通過競品分析，推導(dǎo)出我的設(shè)計目標(biāo)，所以我重點展示了競品分析的過程。

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

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

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

△ 設(shè)計原則

這個我還是持同樣的觀點，不要刻意去講。

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

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

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

沒有什么比數(shù)據(jù)更能說明問題了。

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

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

小結(jié)

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

2. 作品集要如何展開？

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

我今天想分享的展開思路也很簡單，就是「問題 – 方案 – 驗證」的過程：

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

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

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

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

這里有幾個具體的建議。

對比

對比一定要明顯。

通過字號、字重和顏色進行對比，迅速傳達重要信息，不要害怕使用大號字體。

△ 上圖是前面提到的一個項目，我用了一整個頁面拋出了一個問題，通過大號的字體，迅速傳達我的意思

留白

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

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

主題

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

△ 個人簡介

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

大圖

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

圖片的選擇最好和項目契合，能更好的襯托項目。

封面

作品集完成了，不妨多花點時間琢磨一下封面，作用不言而喻，我就不多說了。

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

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

4. 其他事項

項目背景

可以簡單的對項目背景或問題背景進行描述，可以使后面的講述更易理解。

項目數(shù)量

我個人覺得3~6個就差不多了。你也可以展示更多，但是展開講述的時候，可以選擇其中的幾個進行重點展示。

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

解決問題

一個項目集中展示一到兩個點，我覺得就足夠了。

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

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