本文作者結合自己的經驗和實際案例，與大家系統性地分享了UX作品集的設計思路，希望對你有所幫助，enjoy~

回想2017年11月，當時我的作品集上只有一個項目，我把它提交給一個愿意幫忙指點的招聘人員后，受到了嚴厲的批評，所以我對作品集感到非常擔憂。

于是我把自己的作品集發布到 Facebook 和 Slack 小組，希望得到一些提升項目展示的建議和方法，然后獲得了很多素未謀面的設計師們的幫助和支持。

我非常感激他們的幫助，這也是我寫這篇作品集創建歷程的原因，同時也希望這篇文章能夠幫助更多的設計師創造出結構合理而又獨特的作品集網站。

去年秋天，很榮幸我的作品集被 bestfolios.com 選為編輯精選。

在 Medium 上已經有很多關于創建UX作品的建議了。我不想再講類似的建議，而是希望把我作品集的創建過程作為一個案例研究，這樣就可以知道我究竟是如何將那些建議用在實踐中了。我將會講到以下幾個方面：

1. 我如何學習他人的作品集
2. 我為什么決定自己來寫網站的代碼
3. 我如何在設計作品集的時候考慮到它的用戶（作品集的用戶有正在為設計團隊招人的招聘人員和設計師）
4. 我如何快速收集反饋并迭代設計
5. 我如何在作品集中表現出自己的個性并讓它脫穎而出（一定要讀這個部分！很有意思?。?/li>

你可以選擇你最想了解的部分進行閱讀。下面讓我們開始吧！

01 向有更多經驗的設計師學習

就像我設計其他項目時一樣，我一開始都會去學習現有最好的設計，看一看有更多經驗的設計師們都是怎么創作的。

1. 作品集資源

我開始并不知道一個UX作品集是什么樣子的，所以我首先查看了來自美國頂級HCI項目的學生網站。我瀏覽了大量的作品，就是想了解作品集里有什么，他們都把哪些項目放到作品里面。

這里是我瀏覽的部分網站：

• Georgia Tech’s MS-HCI Students/Alumni
• CMU’s MHCI Students/Alumni
• University of Washington’s MHCI+D Students/Alumni
• Bestfolios
• Cofolios

在 Mudium 上也有一些講述如何創建UX作品集的優秀文章，我從中學到了很多：

from Geunbae “GB” Lee

from Nick Babich

2. 好的藝術家摹仿，偉大的藝術家偷師

首先，設計不是藝術。那為什么不引用史蒂芬喬布斯和畢加索的名言呢？他們對如何從別人哪里獲得靈感有非常獨到的看法。

對于我來說，看別人的作品不是為了抄襲，而是要去學習他們哪里做的好，他們是如何解決在作品集設計中遇到的難題，為什么他們的解決方案很好，甚至是他們哪里做的不好，這樣你才能發揮自己的優勢，取其精華去其糟粕，用自己的方式去解決他們沒有搞定的問題。

我接下來會講在我創作作品集的過程中所作出的具體決策，而且會詳細來說我究竟從別人的作品集中學到了什么。

02 選擇合適的平臺

有很多工具可以幫助設計師來創建作品集，比如說 Squarespace, Wix, Readymag, Adobe Portfolio, Webflow 這些模版平臺, 或者直接自己動手使用 HTML/CSS/JS 語言 來寫網站等等。那么我是如何抉擇的呢？

選擇合適的工具就如同打下了堅實的基礎：你需要付出哪些努力，你的網站可以實現哪些功能，你能夠選擇或創建的樣式等等，而這些都取決于你最初選擇的工具。

在我研究作品集的過程中，我會記錄下其他人的網站上有用的功能（側邊欄導航，可展開內容等），并添加了一些我認為會使我的網站更有用和更具吸引力的功能。

然后我學習了所有可用的工具，去了解它們分別能夠實現什么功能。因為我很明確我的作品集里面需要什么，而且我想要通過獨特的交互來使作品集具有很強的個性，所以我最終決定還是自己來寫代碼建網站。

也就是說，自己寫代碼就意味著我需要自己考慮所有的細節，比如保持樣式一致性，讓網頁能夠支持響應式，能夠很好的適配手機、平板電腦還有所有主流的臺式機屏幕分辨率。

當我開始建網站的時候，我花了相當長的時間去糾結這些技術細節，但是其實我本該把這些時間花在項目打磨上的。我可以想象如果想要去完全重建作品集網站是很困難的。而 Squarespace 這類工具都幫你搞定這些東西了，你可以專注于你的內容展示。

這對我難說很難取舍，但是我真的很希望我的網站能夠有自己的特色，所以我還是愿意去花時間和精力在寫代碼上。當我有時間的時候我也會去逛以下 Webflow ，它也會提供一些高度自定義的交互方式。

這是我主要的收獲：當創建作品集的時候，思考什么對你和你的目標用戶更重要，然后選擇合適的工具來幫你實現這個目標。

03 考慮用戶需求

設計師要以用戶為中心。如果你申請的是一份UX/產品設計師的工作，但是你自己的作品集網站很難用，這就很諷刺了。

但是在我瀏覽其他人的作品集網站的時候，還是會發現很多網站不好用。有些會在主頁放一些設計作品的好看圖片和富有創意的名字，但是這些信息并沒有告訴我們作品本身是什么，還有它解決的問題有哪些。

有一些會在案例說明中放上很詳盡的設計過程，我更喜歡這種；但是如果在頁面上沒有大綱或者導航，我很快就不知道自己看到哪里了，然后就不會繼續往下看。有一些有很酷的動畫和視覺效果，但是讓人眼花繚亂，我沒辦法很快定位到我需要的信息，特別是當我時間有限的時候。

如果我們站在目標用戶（招聘人員和設計師忙于他們的工作）的角度，并著眼于他們的需求進行設計，就可以避免很多類似的問題。

有的功能是我特意放在作品集網站中的，為了讓目標用戶瀏覽起來更方便。其中有些是受到其他設計師優秀設計的啟發，有些是我自己思考出來的，還有的是我從評論中得到的反饋。

我不會分享這些具體評論，因為我覺得這只是創建作品集網站的方法，但是它們真的）有幫助我在網站上得到了很多積極的反饋。

1. 簡明而翔實的作品列表

招聘者和設計師們翻閱我們的作品集，查看我們的項目和經驗，是為了了解我們做了哪種類型的設計，我們是哪種設計師，還有我們給人的印象是否和他們要找的人相吻合。

通過和不同的招聘者及設計師交談，我學到的第一件事就是他們通常會去看我們的項目列表，因為我們的作品能夠證明我們的能力。

所以，為他們提供更多項目的信息很重要，這可以幫助他們快速決定要更多了解哪個項目。以下是我放在每個作品描述中的內容：

• 項目名稱和圖片
• 描述設計作品類型的標簽，在項目中用了那些設計方法
• 一句話概括項目內容

我不僅提供了項目的圖片和名稱，還提供了更多的信息。

再次說明一下，我不是說這是唯一的解決方案，但是這是我對它的思考。很多人會默認點擊列表中的第一個項目，如果他們沒有看到自己想看的內容就會離開網頁。當然大多數情況下我們的第一個項目應該是最引以為豪的那個。

但是，如果他尋找的是與信息可視化相關的項目，而這個項目在列表第三個，這時候該怎么辦呢？我們應該讓他們一個一個看項目直到發現想看的那個，如果這時候他們還沒有放棄的話；還是說我們給項目加上相關信息？

我認為這些頁面的目標就是去吸引合適的人去查看他們感興趣的項目，最大限度地增加自己作為潛在適合者的機會。所以我試著去做這些工作，讓他們能夠一下看到想看的內容。

2. 項目概況

對于我們做過的項目，我們總想去深入挖掘，然后展示所有考慮到的細節，這樣去表現自己的設計技巧和思維能力。

但是，對于那些不熟悉項目背景也沒有太多時間查看所有項目的人來說，他們只是希望快速了解這個項目到底是什么，值不值得點擊去瀏覽。

一個快速提供這些內容的方法就是展示出來項目概況，包括以下內容：

• 你的設計想要解決的問題
• 你的解決方案概述
• 你的設計流程概覽和你對每個步驟的貢獻
• 項目相關的其他信息（項目長度、團隊/個人、你的角色、使用的工具）
• 視覺稿/動畫/你的解決方案，就像在 App store 上架那樣展示

我發現最后一點非常有用——每一個我放在作品集里面的項目，我嘗試去展示其主要功能和價值主張，并且設法去推銷它，好像我真的在吸引顧客一樣。

這種做法推動我去更深入地思考設計的新增價值；也幫助我的讀者很快知道我的設計是什么，為什么他們需要關注它。

在這個部分的最后，我還是會給到用戶直接跳轉到最終原型的頁面的選擇，如果他們想要跳過設計過程直接上手體驗產品。這取決于他們的時間和興趣，他們可以很快地看我的設計成品，也可以詳細閱讀設計過程的文檔。

項目概覽示例

3. 側邊導航

我最初是在 Geunbae Lee’s 的作品集中看到側邊導航形式的，并且認為很有用。因為側邊導航對我的網站很重要，但是它在很多網站模版工具中又不能實現，所以這也成為我自己動手寫代碼來建作品集網站的原因之一了。

側邊導航最終版本

有很多原因能說明側邊欄對我來說很重要。首先，我的設計過程通常復雜又靈活，在其中會反映出我在設計過程中學到了什么，遇到了哪些問題，我接下來應該怎么做，諸如此類。

我想完整地記錄我的設計過程和思考，因為我認為這是我的長處之一。但我知道不同的人訪問我的網站是想看不同的東西，可能會挑著去找他們最需要的信息。所以有了側邊欄就意味著我可以為所有的內容提供一個大綱，他們可以選擇重要的內容去看。這給了我的讀者一種可控感。

說到大綱，側邊欄還有助于為讀者說明整個案例研究的信息架構。你可能現在已經忘記了，你正在讀的是“考慮用戶需求”的“側邊導航”小節的內容。

雖然知道這在某些情況下并不重要，但讓讀者了解他們在文章中所處的位置，并讓他們對接下來將要閱讀的內容有預期，肯定會有助于創造更好的閱讀體驗，尤其是當他們時間比較少的情況下。

4. 可擴展內容

另一個幫助別人快速瀏覽作品案例的功能是可擴展內容，我最開始是在 Phil Kimura-Thollander’s 的作品集中看到的。

通過跟很多設計師和招聘者交談，我了解到他們在設計流程中最想看的是：

• 用戶研究的主要收獲
• 你是怎么作出設計決策的
• 你的用戶研究和反饋是如何影響設計決策的

所以我決定把這些信息直接放在頁面第一層級，讓每個人都能夠看到。

但是交談中有些人還是對細節很感興趣，比如我的研究是如何展開的，詳細的結果是什么，我是怎么詮釋這些結果的，為什么我只選擇了特定的平臺去設計等等。

對于這些信息，我決定在主線流程中進行隱藏，只讓那些感興趣的人去探索。某種意義上來說，這就如同是為普通用戶和那些需要更多控制和信息的專家用戶做設計一樣。

用信息可視化的術語來說，網站/案例研究的整個流程類似于 Shneiderman 的口頭禪：先展示概覽，然后進行精簡和篩選，接著按需要展示更詳細的信息。那些可展開的內容就是更詳細的信息。

展開內容

5. 在滾動時候高亮重點

另一個幫助別人快速瀏覽作品案例的功能是增加高亮。一開始我把設計故事的核心句子加粗，這樣別人可以了解到我的故事或論證的中心思想。

然后我被 Wan-Ting Huang 的作品集激發了靈感，決定在用戶滾動頁面的同時高亮重點內容，這樣可以更好的引起他們的注意，也有更驚艷的閱讀體驗。

滑動時候高亮重要內容

通過收集到的反饋，我發現用戶真的很喜歡高亮的形式，因為這讓他們能夠更快地找到重要信息。也有人問我這個功能是怎么實現的，而且也看到有其他人的作品集中也用了類似功能。

04 快速試錯&迭代

當我們談到設計師的良好特質時，能夠接受建設性的批評，讓自己很受傷但是仍然能夠快速失敗并不斷迭代的能力一直是其中之一。

當我在創建自己作品集的時候，我也會確保我從不同的人那里收集到了反饋。在的佐治亞理工學院，當校友或來自不同公司的招聘人員訪問的時候，可以得到很多作品集評審的機會。我會抓住機會收集作品集的反饋。

我通常會用兩種方式來收集反饋。有時候我會讓評審作品集的人進行瀏覽，就像他們正在網上從成百上千的建立中尋找感興趣的某一個作品集一樣。我會問他們要找哪些內容，然后觀察他們的習慣，讓我的作品集能夠在這種情況下符合他們的要求。

還有一種方式是，我會對著作品集來為他們講解一個案例，就像我正在參加面試一樣。我會記錄下我跳過的地方，一些比較難解釋的想法還有他們的問題，然后我可以優化流程和內容。

還有其他一些我利用到的資源。比如，Slack 和 Facebook 上一些作品集相互幫助的小組。他們給我提供了各種各樣的見解。但是，我也會對采納的建議有所選擇，因為每個人都會從自己的角度來批判作品集。最終，我會來定義優先級，作出最終的決定。

我現在的作品集是我的第二個主要版本，但是它已經經過了上百次的迭代。我仍然很樂意去繼續完善我的作品集，我也歡迎各位的反饋。

05 讓作品集個性化

招聘者想要招到對自己的工作充滿熱情，會為團隊做出貢獻，而且將來會成為好同事的人。

我曾經為在美國申請大學的學生提供建議，指導他們寫個人陳述。我通常對他們說的是，你的個人陳述是唯一一個在面試之前可以表達自己的聲音，并向招生者展示自己的地方。我認為作品集也是如此。

如果你的簡歷是對經歷的客觀總結，那么你的作品集就是一個真實的個人空間，通過你所介紹的項目、你描述流程的方式以及你設計整個作品集的方式，可以展示你是誰，你對什么事情報以熱情，你是如何思考的。

以下這些作品集中的內容很受大家喜歡。

1. 有趣的個性化加載

這真的是我作品集中最自豪的一個部分了。盡管它不是一個重要的部分，很多面試官都很喜歡它，因為他們認為這個動效表現了我的個性和對細節的專注。

有圖片、動畫和視頻的案例研究通常需要一些加載時間，會讓瀏覽體驗不那么好。這就是為什么許多人更喜歡使用預加載器作為臨時占位符，并且僅在加載完所有內容后才顯示網頁內容的原因了。

但是預加載過程也會很重復無聊，特別是當一個頁面需要十多秒去加載的時候。我們可以為這些等待時間增加什么樂趣，從而讓用戶不用去盯著同樣的加載占位符重復一遍又一遍？

我最初的靈感來自于 Google Chrome。當網絡鏈接斷掉的時候，Chrome 會優雅地提供一個簡單的恐龍游戲。這讓等待很有趣，也消除了人們可能會體驗到的的挫敗感。

恐龍游戲

但是我不只是想給用戶一個有趣的等待體驗；我想要我的加載動畫展示我是誰，這樣用戶每次打開一個新頁面，他就會多了解我一點，即使他還沒看過我的作品。

通過很多探索，我決定去展示一些作品中永遠都不會寫的關于我自己的趣味軼事。我整理了20條，關于我的興趣，過去的經歷，寫作，思考等等，讓它們隨機出現在加載過程中。

這些趣味軼事5秒內就能瀏覽完，每次人們刷新頁面時都會更新，這可以幫助他們更好地將我想象為自己的同事/朋友，但它又不是必不可少的，所以如果人們錯過了它，我不會有任何損失，因為這說明頁面加載速度比預期的快。

預加載過程中的一個趣味軼事

很多看過我作品集的人都會跟我提gif中的這個細節，有些人甚至會試著刷新很多次就為了看我所有的趣味軼事。我設計這個小交互的時候也覺得很有趣，我很高興可以利用我的設計和編程技能完成它，我也建議你們都利用自己的優勢，去讓自己的作品集變得個性又驚艷。

2. 展示你的優勢

作品集中的項目和你展示它們的方式應該能夠反映出你的優勢，這能夠幫助你定義整個作品集網站的風格和感覺。

如果你去瀏覽那些成功的作品集網站，你會發現他們的出彩是因為不同的原因。一些是因為有很多種類的高品質項目，一些是因為有詳盡的設計過程和深入的思考，還有一些用了很好看的插畫去簡潔地傳達用戶需求和設計解決方案。

這些設計師的優勢和個人風格也都有意無意地反映在他們的作品里面，就像觀眾可以從 Quentin Tarantino 或者 Christopher Nolan 的電影來判斷他們的風格，你的作品集的訪問者應該能夠從你的項目和你記錄它們的方式來判斷出你是哪種設計師。

對于我來說，我很早就發現自己不太擅長畫畫（我只能畫盒子/界面?。┍M管我也學著去用可視化的方式來更好地表達我的想法，但是我可能比不上那些畫了十多年的人。

在過去的兩年里我也只做了少數幾個項目，這就是為什么我要專注于我的優勢，去為我的項目記錄高度詳盡的流程，深思熟慮的結構和深刻的反思。

當每個喜歡我的作品集的人都表示他們驚艷于我的設計流程、我對細節的關注還有作品質量的時候，我知道我成功了。但是，擁有詳盡的設計流程也意味著我的案例研究會很長。這也是為什么我會那些在第三部分提到的些設計決策，去方便跳過和瀏覽。

3. 展示你的興趣

UX/產品設計師通常都來自不同的背景，有著各自獨特的興趣。我有計算機科學和心理學的學科背景，所以我對為人工智能和 VR / AR / VUI 等新興技術做設計特別感興趣，這樣我們可以利用它們的優勢來使人們的生活更方便。

因此，我選擇與這些技術相關的學校項目和附帶項目，并讓自己對這些新興領域的設計原則進行更多的思考。我把這些內容放到作品集中去展示我喜歡設計什么，同時也寫下我對聲音語音設計和AI設計的思考。

你的項目應該能夠證明你的能力和興趣。確定你選擇的項目是可以反映它們的，然后做好用你的熱情去講述每一個作品集中的項目的準備。

4. 個人品牌

雖然我不是一個品牌設計師，我卻著迷于創建品牌形象。這和在作品集中展示優勢和興趣類似，但是創建個人品牌需要更進一步：你實質上是在試圖去為讀者建立你自己的形象，并讓自己和一些形容詞/技能掛鉤。

由于我沒有視覺設計的背景，我不能夠去作出一個能代表自己的logo（如果有人感興趣，我樂意提供幫助?。┫喾?，通過思考我的經驗和優勢，我頭腦風暴了很多方法想讓別人記住我。

最終，我決定在我的名字——Tony上搞些花樣，作為“技術愛好者，思想家和T形設計師”，所有這些都以T開頭，反映了我的技能/興趣/個性。

這像是在做一些營銷上的努力。我在作品集、簡歷、領英個人主頁和 Medium 主頁上給自己打上標簽。當我在面試中介紹自己或者現場演講的時候也會提到這些。通過這種方式，我確定我的作品集和其他所有材料都傳達了我想要表達的信息，共同向目標用戶展示了一致的品牌形象。

我覺得這么做很有趣，也還在深入探索個人品牌究竟是什么。

你終于看完了！覺得感受如何？繼續尋找你自己的優勢和風格，然后嘗試在你的作品集里展示它們。

作者：Tony Jin

原文鏈接：https://uxdesign.cc/how-i-designed-and-built-my-ux-design-portfolio-from-scratch-f1f9b5261029

翻譯：Evelyn；審核：Maisie；翻譯小組公眾號：交譯所

本文由 @交譯所 翻譯發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議