原文作者：?geunbae-lee
原文鏈接：https://uxplanet.org/how-to-structure-your-first-ux-design-portfolio-7b51576a04df
如何創(chuàng)建你的第一份UX設(shè)計(jì)作品集
正在尋找你的第一份交互設(shè)計(jì)的工作摆碉？這篇文章可能會(huì)對(duì)你有所幫助原叮。
引言
正在準(zhǔn)備開(kāi)始你的用戶(hù)體驗(yàn)事業(yè)嗎（ＵＸＤ）渊额？你來(lái)對(duì)地方了夏志，在這篇文章中你能獲得一些創(chuàng)建你交互設(shè)計(jì)個(gè)人作品網(wǎng)頁(yè)的一些技巧。盡管我本人在這方面也還是個(gè)新人童漩。但由于目前為止弄贿，已經(jīng)有很多人邀請(qǐng)我看一看他們的個(gè)人網(wǎng)站了。我還是決定分享一些這方面我所了解的矫膨。僅僅是想表達(dá)一些個(gè)人的想法挎春，請(qǐng)不要以苛刻的態(tài)度看待這篇文章，希望你花費(fèi)時(shí)間能有所收獲豆拨。
#1.創(chuàng)建一個(gè)網(wǎng)站直奋，而不是一個(gè)PDF文檔
首先我建議你創(chuàng)建一個(gè)個(gè)人的網(wǎng)站而不是PDF文檔。盡管現(xiàn)在很多公司在招聘時(shí)仍然讓你發(fā)送PDF格式的作品集施禾，但對(duì)你和招聘者來(lái)說(shuō)簡(jiǎn)單的輸入一個(gè)ＵＲＬ（網(wǎng)頁(yè)地址）還是要方便的多脚线。而且使用在線（網(wǎng)站）的方式更加深入有互動(dòng)性。
比如弥搞，在線作品網(wǎng)站看見(jiàn)鏈接到你其他UX相關(guān)的社交網(wǎng)站邮绿。你還可以鏈接或插入你產(chǎn)品的介紹視頻，放上演示原型攀例，這樣查看的人可以在任何時(shí)間任何地點(diǎn)嘗試你的產(chǎn)品船逮。甚至你還可以加上吸引人的視覺(jué)效果以及其他設(shè)計(jì)相關(guān)的能表達(dá)你創(chuàng)意的東西，如視頻粤铭，動(dòng)效挖胃。（如果另外你能一步一步的展示交互的過(guò)程，用Behance和Dribble 也可以）
創(chuàng)建網(wǎng)站的另外一個(gè)好處是可以添加埋點(diǎn)梆惯。添加埋點(diǎn)以后你可以看到誰(shuí)訪問(wèn)了你的網(wǎng)站酱鸭，他們停留了多久，他們查看了哪個(gè)項(xiàng)目垛吗。通過(guò)創(chuàng)建網(wǎng)站并埋點(diǎn)獲得的這些豐富和有用的信息凹髓，你可以更好改進(jìn)你的網(wǎng)頁(yè)界面，最終更好地呈現(xiàn)你的項(xiàng)目怯屉。
“那么蔚舀，怎么樣開(kāi)始創(chuàng)建我的個(gè)人作品網(wǎng)站呢饵沧？”
下面會(huì)介紹很多方法。由于本文的重點(diǎn)不是介紹創(chuàng)建網(wǎng)站的過(guò)程赌躺，我將只呈現(xiàn)出一些有用的信息資源狼牺。
現(xiàn)有的一些可供下載的響應(yīng)式框架：
HTML 5 Bootstrap Templates?by Colorlib
?HTML5/CSS3 Templatesby Colorlib
?HTML5/CSS3 Templatesfrom Bradley Nice’s blog post
?Bootstrap Templatesby Bashooka
?Responsive Templatesby Responsive Miracle
你還可以使用其他的框架來(lái)創(chuàng)建響應(yīng)式網(wǎng)站。最近寿谴，好像很多人用AngularJS或ReactJS比較快的創(chuàng)建網(wǎng)站锁右，但是說(shuō)實(shí)話失受，連我自己還在學(xué)這些讶泰，所以對(duì)它們我就不多做說(shuō)明。如果你有興趣可以自己去了解下拂到。
其他創(chuàng)建網(wǎng)頁(yè)的方式（非代碼）：
?Wix
分享一個(gè)Adam Dannaway關(guān)于設(shè)計(jì)和開(kāi)發(fā)一個(gè)作品集網(wǎng)頁(yè)整個(gè)過(guò)程的文章--“設(shè)計(jì)和開(kāi)發(fā)我的個(gè)人作品網(wǎng)站的過(guò)程”
#2講一個(gè)你是誰(shuí)的故事
無(wú)論你是否在線申請(qǐng)還是通過(guò)內(nèi)部員工推薦痪署，你都會(huì)發(fā)現(xiàn)還有成百上千和你一樣想要得到這份工作的人。所以兄旬，你需要思考這個(gè)問(wèn)題狼犯，
“如何包裝自己才能在眾人中脫穎而出？”
就像你寫(xiě)大學(xué)申請(qǐng)或求職信领铐，在你把你的所有項(xiàng)目?jī)?nèi)容加到你的作品網(wǎng)站之前悯森，你需要知道下面幾點(diǎn)。
對(duì)于用戶(hù)體驗(yàn)人員來(lái)說(shuō)绪撵，作品集是找工作過(guò)程中最重要的一部分瓢姻。如果沒(méi)有作品集，我很懷疑你是否能找到一份UX設(shè)計(jì)師的工作音诈。這就是作品集的重要性幻碱！所以，你需要問(wèn)自己一些基本的問(wèn)題比如细溅，你希望那些不了解你的人認(rèn)為你是什么樣子的褥傍。
.我有什么特別之處？
.我的背景是什么喇聊？我是如何開(kāi)始從事UX工作的恍风？
.作為UX設(shè)計(jì)師，我有哪些相關(guān)的有用的技能誓篱？
.我和這份工作相關(guān)的興趣和熱情是什么邻耕？我之前的經(jīng)驗(yàn)和項(xiàng)目和這份工作有何關(guān)系？
.我所欠缺的技能和知識(shí)有哪些燕鸽？-了解自己很關(guān)鍵
在你的網(wǎng)站在“關(guān)于我”的部分兄世，你可以更多的介紹你是誰(shuí)。在這里你也可以很好的介紹你的專(zhuān)業(yè)水平啊研，你的熱情和興趣御滩，你希望學(xué)習(xí)和提高的鸥拧。最后但也是最重要，可以列出一些個(gè)人特征削解，比如興趣好愛(ài)富弦，音樂(lè)品味或者其他可以顯示你自己的東西。當(dāng)然氛驮，這只是選填項(xiàng)腕柜，不要讓它成為關(guān)鍵的部分。
除了“關(guān)于我“矫废，創(chuàng)造一個(gè)漂亮的網(wǎng)站介紹頁(yè)也很重要盏缤。比如，你可以添加一個(gè)視頻或圖片蓖扑，或簡(jiǎn)短有力的描述你是誰(shuí)唉铜，你追求的是什么。在點(diǎn)”關(guān)于我“之前律杠，簡(jiǎn)要又直接的描述你自己潭流，也是一個(gè)很不錯(cuò)的方式。只要你的整個(gè)網(wǎng)站的設(shè)計(jì)感一致且平衡（我將在后面討論視覺(jué)設(shè)計(jì)）柜去，你的網(wǎng)站就可能潛在的像你網(wǎng)站的訪問(wèn)者傳達(dá)你是什么樣的設(shè)計(jì)師灰嫉。
我個(gè)人比較喜歡Ivo Mynttinen的這個(gè)作品網(wǎng)站。這個(gè)網(wǎng)頁(yè)仍然存在很多關(guān)于個(gè)人的信息（雖然主頁(yè)的名字如果更突出會(huì)更好）嗓奢。簡(jiǎn)化使用的字體讼撒，使用簡(jiǎn)單的字體，使得這種現(xiàn)代風(fēng)格的設(shè)計(jì)（整頁(yè)面大圖）易讀性更高蔓罚，也可以表現(xiàn)出網(wǎng)頁(yè)設(shè)計(jì)者對(duì)現(xiàn)在網(wǎng)頁(yè)設(shè)計(jì)的流行趨勢(shì)的了解椿肩。我并不是說(shuō)你的個(gè)人作品網(wǎng)站也要與這個(gè)完全一致，你可以做更多創(chuàng)新豺谈。這里我只是想要舉個(gè)例子說(shuō)明保持主頁(yè)風(fēng)格整體感的重要性郑象。
老實(shí)說(shuō)，可能有一部分人看了之后會(huì)不同意“關(guān)于我”這個(gè)部分茬末，或者認(rèn)為在個(gè)人作品網(wǎng)站中厂榛，這個(gè)部分沒(méi)什么用。確實(shí)丽惭，很多時(shí)候人們只是直接去看你的項(xiàng)目击奶，然后從項(xiàng)目經(jīng)歷中做判斷。然而责掏，我個(gè)人認(rèn)為柜砾，個(gè)人作品網(wǎng)頁(yè)應(yīng)當(dāng)被視為是對(duì)你個(gè)人的反映（作品集網(wǎng)站=自我認(rèn)同）而不是單純羅列你項(xiàng)目經(jīng)歷的地方。所以我想說(shuō)换衬，嘗試特別并有創(chuàng)意痰驱，讓自己脫穎而出吧证芭！
#3.吸引人的視覺(jué)
人們都是視覺(jué)動(dòng)物，沒(méi)有人不喜歡精致的設(shè)計(jì)担映。在這個(gè)部分中废士，我想聊聊經(jīng)常被你所忽視的。如果你注意到這些細(xì)節(jié)的東西蝇完，你會(huì)發(fā)現(xiàn)官硝，你的網(wǎng)站質(zhì)量會(huì)有很大的提升。正確的處理這些細(xì)節(jié)可以吸引更多的網(wǎng)站訪問(wèn)者短蜕，證明你是一個(gè)設(shè)計(jì)師氢架，你關(guān)注UX。
“那么這些小但是重要的細(xì)節(jié)是什么呢忿危？”
是誰(shuí)說(shuō)個(gè)人作品網(wǎng)站不需要做的吸引人的达箍？你是否是認(rèn)為只有你的項(xiàng)目?jī)?nèi)容才重要没龙？我可不這么想铺厨！
是的，視覺(jué)部件硬纤，如顏色解滓，字體，布局甚至是圖片筝家，所有這些一起營(yíng)造了你網(wǎng)頁(yè)的感覺(jué)洼裤。如果你在該建立網(wǎng)頁(yè)時(shí)沒(méi)有關(guān)注這些，我建議你回頭仔細(xì)的挑選色板溪王，文字腮鞍，考慮怎樣呈現(xiàn)你的作品。
.“你的設(shè)計(jì)整體一致性高嗎莹菱？”
.“網(wǎng)站顏色看起來(lái)如何移国？是否有顏色不必要，過(guò)多吸引了訪問(wèn)者的注意力道伟？”
.“你是否使用了過(guò)多種的字體迹缀？”
.“字體大小是否合適易讀？”
.“你是否有過(guò)多的操作按鈕蜜徽？”
交互設(shè)計(jì)師也是設(shè)計(jì)師祝懂，所以你需要關(guān)注這些小細(xì)節(jié)！這對(duì)于把東西做好沒(méi)有任何害處拘鞋。
建議：
嘗試以網(wǎng)站訪問(wèn)者的視角思考問(wèn)題砚蓬，當(dāng)他們第一次來(lái)到你的網(wǎng)站會(huì)如何看待你的網(wǎng)站。你無(wú)法抓住所有細(xì)節(jié)這很正常盆色，你需要用一個(gè)新的視角來(lái)看灰蛙。除了完全依賴(lài)你自己發(fā)現(xiàn)問(wèn)題颅和，其實(shí)你還可以邀請(qǐng)別人看你的網(wǎng)站并且認(rèn)真地聽(tīng)取他們的意見(jiàn)。
#4.有清晰的導(dǎo)航和鏈接
導(dǎo)航是你的網(wǎng)站中最重要的部分缕允。當(dāng)你在海上漂時(shí)沒(méi)有指南針在手峡扩，你該往哪里漂？（哈哈）不管怎么樣障本，看網(wǎng)站的人需要知道點(diǎn)擊哪里到哪里（如教届，關(guān)于我，作品驾霜，聯(lián)系我等等）案训。不要將導(dǎo)航隱藏或者讓導(dǎo)航難以發(fā)現(xiàn)。保證訪問(wèn)者能順暢的瀏覽你的網(wǎng)頁(yè)內(nèi)容是至關(guān)重要的粪糙。讓導(dǎo)航清晰使得訪問(wèn)者能順暢的在不同頁(yè)間切換强霎，也可能能增加他們完整閱讀你所呈現(xiàn)內(nèi)容的機(jī)會(huì)。
“典型的導(dǎo)航欄上有什么蓉冈？”
絕大多數(shù)情況下（通常）城舞，對(duì)于一個(gè)設(shè)計(jì)師需要有以下部分：
作品集
關(guān)于我
簡(jiǎn)歷（或者是“關(guān)于我”部分的一個(gè)鏈接）
聯(lián)系我
可選擇-其他的展示項(xiàng)如Dribble頁(yè)，如專(zhuān)業(yè)工作以外的攝影作品
其他的一些特定操作寞酿，應(yīng)當(dāng)容易看見(jiàn)和發(fā)現(xiàn)家夺。比如下載你簡(jiǎn)歷的鏈接應(yīng)當(dāng)明顯又清晰地呈現(xiàn)，因?yàn)檫@是最重要的一個(gè)部分伐弹。此外拉馋，你專(zhuān)業(yè)相關(guān)內(nèi)容的鏈接也應(yīng)當(dāng)顯眼的呈現(xiàn)，如LinkedIn,Dribble,CodePen或Github惨好。
#5.先呈現(xiàn)最好的項(xiàng)目
有的人喜歡先列出他們最近的項(xiàng)目煌茴，有的人喜歡先列出他們最好的項(xiàng)目。我認(rèn)為日川，如果你正在找第一份UX的工作蔓腐，還是首先先列出“最好的”項(xiàng)目（當(dāng)你更有經(jīng)驗(yàn)，有更多項(xiàng)目逗鸣，你可以再重新調(diào)整布局）合住。
“為什么要先列出我最好的項(xiàng)目？”
通常撒璧，先列出的項(xiàng)目比其他項(xiàng)目更更多的訪問(wèn)量透葛，在面試的時(shí)候會(huì)被更多的問(wèn)到。而且先列出的項(xiàng)目可能最終就是反映你現(xiàn)在UX水平的項(xiàng)目卿樱。
（*另外一種方法是可以創(chuàng)建一個(gè)獨(dú)立的部分叫“特定項(xiàng)目”僚害。有時(shí)候，這樣更好；）
#6.在每個(gè)項(xiàng)目板塊中呈現(xiàn)什么內(nèi)容
在UX作品中放什么內(nèi)容萨蚕？-說(shuō)了這么久靶草，這可能是所有當(dāng)中最重要的了。首先我想說(shuō)的是在項(xiàng)目中呈現(xiàn)一堆內(nèi)容岳遥，而不解釋你的UX設(shè)計(jì)過(guò)程奕翔。記住，你是在找交互設(shè)計(jì)而不是視覺(jué)設(shè)計(jì)的工作浩蓉。作為一名UX設(shè)計(jì)師派继，你應(yīng)當(dāng)認(rèn)真的呈現(xiàn)和解釋你的整個(gè)設(shè)計(jì)過(guò)程。
看一看那些成功獲得工作的優(yōu)秀的UX設(shè)計(jì)師捻艳，我們可以看到他們作品集內(nèi)容的一些共同點(diǎn)驾窟。我將列出來(lái)并做一番解釋。
總述
總述部分首先應(yīng)當(dāng)呈現(xiàn)總述部分认轨，解釋項(xiàng)目的一些基本情況绅络。應(yīng)當(dāng)讓看的人能夠一下抓住產(chǎn)品是什么樣的，怎么樣起作用的嘁字。因?yàn)椴皇敲總€(gè)人都能有時(shí)間詳細(xì)的看你寫(xiě)的項(xiàng)目的所有內(nèi)容恩急。如果他們對(duì)這個(gè)項(xiàng)目有興趣，他們可以繼續(xù)向下滾動(dòng)去閱讀拳锚。
.項(xiàng)目的目的-你為何做這個(gè)項(xiàng)目
.目標(biāo)-你完成和交付了什么
.方法-你如何完成的假栓，采用的步驟
.項(xiàng)目歷時(shí)-是否是近期項(xiàng)目寻行，歷時(shí)多久
.項(xiàng)目成員-姓名（或者是鏈接到他們的LinkdIn主頁(yè)）
.你的角色-在面試說(shuō)項(xiàng)目的時(shí)候很重要（你對(duì)團(tuán)隊(duì)的貢獻(xiàn)）
.鏈接-下載APP的霍掺，查看宣傳海報(bào)的，查看原型的拌蜘，數(shù)據(jù)源等等
最后的產(chǎn)品展示-圖片或視頻（概要）
UX過(guò)程
這可能是“必須”中的最重要的部分杆烁。如果你的項(xiàng)目遵從了UX設(shè)計(jì)的過(guò)程，我建議你完整的解釋這個(gè)過(guò)程简卧，但是得用一個(gè)精簡(jiǎn)的形式兔魂。通過(guò)看以下的內(nèi)容，訪問(wèn)者應(yīng)當(dāng)可以能夠了解你的設(shè)計(jì)過(guò)程：
.研究-資料整理举娩，競(jìng)品分析析校，訪談，背景調(diào)查铜涉，問(wèn)卷調(diào)查等
.構(gòu)思-腦暴智玻，思維的發(fā)散和聚合，用戶(hù)認(rèn)知地圖芙代，人物畫(huà)像等
.線框圖-思路吊奢，草圖，腦暴纹烹，可行的和不可行的页滚，測(cè)試結(jié)果召边，迭代
.設(shè)計(jì)-具體的設(shè)計(jì)，測(cè)試/反饋裹驰，迭代隧熙，最終的設(shè)計(jì)
.產(chǎn)品原型-用戶(hù)測(cè)試，迭代幻林，開(kāi)發(fā)（如果你有做）
.在這部分當(dāng)中贱鼻，你和你團(tuán)隊(duì)所遇到的挑戰(zhàn)，線框圖滋将，用戶(hù)測(cè)試的部分邻悬，迭代設(shè)計(jì)都是非常重要的內(nèi)容。
.額外的部分（如果你希望）
.可運(yùn)作的原型Demo-允許用戶(hù)去試用
.這個(gè)項(xiàng)目的文章随闽，所獲獎(jiǎng)項(xiàng)父丰，會(huì)議，獎(jiǎng)金等-展示你在這個(gè)項(xiàng)目的成就和貢獻(xiàn)
.結(jié)論-你學(xué)到什么以及下一步你會(huì)做什么
額外的小貼士：
.用足夠大的分辨率高的圖片掘宪；
.描述從一個(gè)狀態(tài)到另一個(gè)的過(guò)渡蛾扇；
.將項(xiàng)目中的阻礙和受到的限制包括進(jìn)去（或者記在某處）-在面試的時(shí)候會(huì)很有用。順利的部分魏滚，不順利的部分镀首，作為個(gè)人/團(tuán)隊(duì)你是如何克服的；
.避免太多文字-你會(huì)有機(jī)會(huì)去解釋的鼠次；
.一般人們有兩個(gè)版本：1簡(jiǎn)單的更哄，關(guān)注圖片的版本；2專(zhuān)項(xiàng)研究-這也是展現(xiàn)你關(guān)注的很好的方式腥寇；
.嘗試找靈感-尋找你覺(jué)得新奇的專(zhuān)業(yè)的UX個(gè)人作品網(wǎng)站并通過(guò)比較自己的進(jìn)行學(xué)習(xí)成翩。
來(lái)看一看我的關(guān)于如何準(zhǔn)備UX面試的文章吧！
#7.創(chuàng)建其他和設(shè)計(jì)相關(guān)的作品集
作為設(shè)計(jì)師赦役，有時(shí)你想你的作品達(dá)到像素級(jí)完美麻敌，UI設(shè)計(jì)吸引人，有交互掂摔，有動(dòng)效來(lái)展示术羔。有時(shí)候僅僅在簡(jiǎn)歷中寫(xiě)下這樣不足以證明。有些時(shí)候乙漓，你在項(xiàng)目中承擔(dān)的內(nèi)容不足以表現(xiàn)你的特定技能 级历。就像我之前幾次提到的Behance,Dribble,這些都是展示你的創(chuàng)意設(shè)計(jì)的很好的地方，與你的UX作品網(wǎng)站也相獨(dú)立簇秒。
我的個(gè)人Dribble賬號(hào) https://dribbble.com/geunbae-lee
就我個(gè)人鱼喉，除了有一個(gè)個(gè)人作品網(wǎng)站，我在Dribble上也放出了很多UI設(shè)計(jì)，動(dòng)圖GIF扛禽，原型和其他的锋边。個(gè)人認(rèn)為，這些是額外的展示你熱情和水平的地方编曼。在我面試的時(shí)候豆巨，很多人提到他們?cè)贒ribble上看到過(guò)我的設(shè)計(jì)。他們大多數(shù)告訴我他們很相信我能使用那些工具掐场。此外往扔，他們很欣賞我平時(shí)提升技能做的努力，比如Daily UI challenge(每日UI挑戰(zhàn)）熊户。
#8.避免不必要的社交媒體鏈接
最后萍膛，我建議去掉你個(gè)人網(wǎng)頁(yè)中的那些社交媒體鏈接。但是如果你想展示你的個(gè)人生活（而不是專(zhuān)業(yè)相關(guān)的工作）嚷堡，可以放這些鏈接蝗罗，但需要注意不要有奇怪的照片或內(nèi)容可能影響你的形象。這是我個(gè)人的建議蝌戒。
更多我寫(xiě)的文章：
.有心理學(xué)背景對(duì)于從事UX設(shè)計(jì)工作已經(jīng)是一大步
.設(shè)計(jì)師的自我檢查清單：你是或者你想成為什么類(lèi)型的設(shè)計(jì)師串塑？
去這里找我：
LinkedIn? ? ?Dribble? ? ?Medium
陸陸續(xù)續(xù)好幾次才翻完的文章，終于翻完了北苟。第一次翻譯桩匪，有待后續(xù)再改善提高翻譯能力
