現(xiàn)今，一份有特色，美觀且優(yōu)秀的在線作品集，同簡(jiǎn)歷一樣，對(duì)UX設(shè)計(jì)師或自由工作者們能否找到一份滿意的工作或吸引到更多的潛在用戶，發(fā)揮著重要的作用。但是，作為沒太多經(jīng)驗(yàn)的設(shè)計(jì)師或或剛?cè)胄行率?，設(shè)計(jì)并創(chuàng)建一份詳盡完善且吸引眼球的在線作品集并不容易，對(duì)吧? 所以，為了幫助大家解決這方面的問(wèn)題，這里收集了10個(gè)優(yōu)秀的UX設(shè)計(jì)師在線作品集，供大家欣賞和學(xué)習(xí)，希望能對(duì)你有所幫助：

1. Bret Victor

1). 設(shè)計(jì)師：Bret Vector

2). 作品集亮點(diǎn)

*獨(dú)特的老電影主題

設(shè)計(jì)師設(shè)計(jì)本作品集時(shí)，添加了很多的電影元素，比如帶有細(xì)微刮痕的褐色老電影背景，如電影膠片般的的圖片邊框等等，旨在給網(wǎng)站來(lái)訪者一種觀看老電影般娓娓道來(lái)的體驗(yàn)。賦予作品集個(gè)性的同時(shí)，也更具吸引力，能夠讓來(lái)訪者在網(wǎng)站上停留更長(zhǎng)的時(shí)間。

*每個(gè)部分內(nèi)容豐富詳盡

設(shè)計(jì)師也為作品集的每個(gè)部分添加了豐富且詳盡的內(nèi)容，在展現(xiàn)其UX設(shè)計(jì)技能的同時(shí)，也能讓閱讀者們更加了解設(shè)計(jì)師本人。

*添加了一個(gè)非常有趣的“藝術(shù)/樂(lè)趣/其它”模塊

與網(wǎng)絡(luò)上可搜索到的標(biāo)準(zhǔn)個(gè)人作品集模板不同，設(shè)計(jì)師特別為其作品集添加了一個(gè)非常有趣的“藝術(shù)/樂(lè)趣/其它”模塊，逗趣讀者的同時(shí)，也能讓他們擁有更好的閱覽體驗(yàn)。

3). 學(xué)習(xí)點(diǎn)

*選擇一個(gè)吸引眼球的主題

因此，在設(shè)計(jì)完成你的個(gè)人作品集時(shí)，也可以適當(dāng)選擇并添加一個(gè)特別的主題，給來(lái)閱覽網(wǎng)站的面試官或客戶留下深刻的印象。

*添加一些額外的有趣信息，讓面試官或客戶更了解作為設(shè)計(jì)師的你

當(dāng)然，適當(dāng)?shù)奶砑右恍┓e極的有趣信息，也能使作品集本身更具可讀性。

2. Gregor Kalfas 

1). 設(shè)計(jì)師：Gregor Kalfas (UX設(shè)計(jì)師)

2). 作品集亮點(diǎn)

*一份具有手繪風(fēng)格的優(yōu)秀作品集

設(shè)計(jì)師設(shè)計(jì)作品集時(shí)，添加許多的手繪元素，例如手繪紙圖樣的背景，手繪標(biāo)題，字體以及圖片等等。而這些元素對(duì)于長(zhǎng)期從事或參與UX設(shè)計(jì)的面試官，客戶或設(shè)計(jì)師來(lái)說(shuō)，是非常熟悉的，在吸引他們關(guān)注網(wǎng)站的同時(shí)，也能迅速的拉近距離，留下深刻印象。

*作品集設(shè)計(jì)結(jié)合了UX設(shè)計(jì)的特點(diǎn)

UX設(shè)計(jì)過(guò)程中，為盡快迭代產(chǎn)品想法，提出更優(yōu)質(zhì)的設(shè)計(jì)方案，設(shè)計(jì)師或產(chǎn)品經(jīng)理常常會(huì)手繪各種產(chǎn)品軟件草圖或制作產(chǎn)品應(yīng)用交互原型，來(lái)測(cè)試其想法的可行性。而本作品集設(shè)計(jì)師抓住這一UX設(shè)計(jì)的特點(diǎn)，添加了相關(guān)的手繪元素和原型交互效果， 讓整個(gè)作品集更像是一個(gè)編輯完善的動(dòng)態(tài)網(wǎng)頁(yè)原型，而不是通過(guò)編碼實(shí)現(xiàn)的在線網(wǎng)站（雖然它的確是編碼而成的在線網(wǎng)站）。而這一點(diǎn)本身就很有特色。

*添加了Q&A的模塊，豐富了作品集內(nèi)容

為豐富作品集內(nèi)容，網(wǎng)站在“設(shè)計(jì)師故事”模塊，添加了Q&A的部分，解答關(guān)于設(shè)計(jì)師的相關(guān)問(wèn)題，也讓讀者更加了解設(shè)計(jì)師。

3). 學(xué)習(xí)點(diǎn)

*結(jié)合UX設(shè)計(jì)特點(diǎn)優(yōu)化作品集設(shè)計(jì)

在你的作品集之中，也可盡量結(jié)合一些UX設(shè)計(jì)的元素或特點(diǎn)。例如，添加一些設(shè)計(jì)草圖圖片，圖標(biāo)，字體或直接選擇一些原型主題之類。

3. Christina Richardson 

1). 設(shè)計(jì)師：Gregor Kalfas (UX設(shè)計(jì)師)

2). 作品集亮點(diǎn)

*作品集界面簡(jiǎn)單整潔

無(wú)論是個(gè)人介紹部分，設(shè)計(jì)項(xiàng)目展示部分，以及聯(lián)系信息部分，設(shè)計(jì)師都盡量做到簡(jiǎn)單整潔。 這也使整個(gè)作品集更易讀，且便于來(lái)訪者更多的集中于網(wǎng)站所列舉的具體設(shè)計(jì)項(xiàng)目信息。

*作品集添加了一個(gè)獨(dú)特清晰的線性地圖

設(shè)計(jì)師特別添加了一個(gè)獨(dú)特清晰的線性地圖，來(lái)展示他的UX設(shè)計(jì)經(jīng)歷。非常直觀新穎。

3). 學(xué)習(xí)點(diǎn)

*添加線性地圖或樹狀結(jié)構(gòu)，簡(jiǎn)潔形象地介紹相關(guān)信息

在你的作品集設(shè)計(jì)之中，也可適當(dāng)?shù)奶砑右恍┚€性地圖或樹狀結(jié)構(gòu)，簡(jiǎn)單直觀的介紹相關(guān)信息。

*簡(jiǎn)單整潔的網(wǎng)頁(yè)界面也可以出彩

設(shè)計(jì)師作品集沒有特定的風(fēng)格和模式，簡(jiǎn)單整潔的網(wǎng)頁(yè)界面設(shè)計(jì)也可以出彩。

4. John Ellison

1). 設(shè)計(jì)師：John Ellison (產(chǎn)品設(shè)計(jì)師)

2). 作品集亮點(diǎn)

*作品集添加了有趣的個(gè)人視頻

作品集網(wǎng)站首頁(yè)優(yōu)先添加了有趣的個(gè)人小視頻。對(duì)設(shè)計(jì)師本人相關(guān)信息和工作進(jìn)行介紹的同時(shí)，也激起了網(wǎng)站訪問(wèn)者對(duì)設(shè)計(jì)師本人的興趣，激勵(lì)他們繼續(xù)閱讀下去。這種采用短小視頻吸引訪問(wèn)者停留閱讀的方式也是值得效仿的。

*分類羅列作品，增強(qiáng)網(wǎng)站可讀性

視頻過(guò)后，設(shè)計(jì)師針對(duì)自己的優(yōu)秀設(shè)計(jì)作品進(jìn)行了分類羅列，一方面使網(wǎng)站更加整潔，內(nèi)容更加清晰的同時(shí)，又能增強(qiáng)網(wǎng)站內(nèi)容可讀性。

3). 學(xué)習(xí)點(diǎn)

*添加各式小視頻，增加網(wǎng)站趣味性

5. Andrew Doherty 

1). 設(shè)計(jì)師：Abdrew Doherty (產(chǎn)品經(jīng)理)

2). 作品集亮點(diǎn)

*作品集簡(jiǎn)單直觀

不同于一般個(gè)人作品集，通過(guò)添加或堆積圖片，設(shè)計(jì)案例和相關(guān)設(shè)計(jì)模塊來(lái)吸引讀者，這個(gè)作品集更像是一份個(gè)人簡(jiǎn)歷。只添加了一張?jiān)O(shè)計(jì)師圖片和幾行相關(guān)的描述， 簡(jiǎn)單直觀。

*包含所有必要作品集因素

盡管所羅列的內(nèi)容很簡(jiǎn)單，但作品集也包含了所有必要的因素，例如設(shè)計(jì)師個(gè)人介紹，設(shè)計(jì)師作品及文章，聯(lián)系方式等等。那么設(shè)計(jì)師是怎么做到的呢？答案很簡(jiǎn)單。給描述中的必要關(guān)鍵詞添加上鏈接即可。鏈接總是能很有效的拓展網(wǎng)站功能和內(nèi)容。

3). 學(xué)習(xí)點(diǎn)

*作品集也可以簡(jiǎn)潔且內(nèi)容豐富

*適當(dāng)鏈接一些關(guān)鍵詞拓展網(wǎng)站內(nèi)容

6. Eva Lotta Lamn 

1). 設(shè)計(jì)師：Eva Lotta Lamn (UX 設(shè)計(jì)師)

2). 作品集亮點(diǎn)

*作品集簡(jiǎn)單卻不平凡

盡管點(diǎn)入作品集網(wǎng)站之后，映入眼簾的只有幾句關(guān)于設(shè)計(jì)師的簡(jiǎn)單介紹，但你仍然可以通過(guò)點(diǎn)擊添加了鏈接的紅色關(guān)鍵詞，瀏覽設(shè)計(jì)師網(wǎng)頁(yè)和界面設(shè)計(jì)，草圖以及所撰寫的設(shè)計(jì)書籍之類相關(guān)作品。

*采用了漂亮的插畫風(fēng)

設(shè)計(jì)師設(shè)計(jì)作品集網(wǎng)站時(shí)，整體采用了插畫風(fēng)。在網(wǎng)站中加入了各種黑白卡通動(dòng)物插畫。而且，每次點(diǎn)擊進(jìn)入網(wǎng)站，都會(huì)顯現(xiàn)不一樣的卡通插畫，例如雨中玩耍的貓咪，從上墜下的蜘蛛，以及調(diào)皮的章魚等等，非?？蓯塾腥ぁ?/p>

*充分利用側(cè)邊欄拓展作品集內(nèi)容

為了使整個(gè)網(wǎng)站內(nèi)容不會(huì)太過(guò)簡(jiǎn)單，設(shè)計(jì)師充分利用側(cè)邊欄添加了更多的內(nèi)容模塊。點(diǎn)擊即可查看詳情，簡(jiǎn)單方便。

3). 學(xué)習(xí)點(diǎn)

*利用插畫美化作品集

在設(shè)計(jì)你的作品集時(shí)，也可以利用多樣的插畫美化網(wǎng)頁(yè)。

*利用側(cè)邊欄豐富作品集內(nèi)容

7. Kristian Tumangan

1). 設(shè)計(jì)師：Kristian Tumangan (UX設(shè)計(jì)師)

2). 作品集亮點(diǎn)

*作品集展示了優(yōu)秀的手機(jī)端應(yīng)用UX設(shè)計(jì)作品

設(shè)計(jì)師挑選并展示了多個(gè)手機(jī)端應(yīng)用UX設(shè)計(jì)作品，而其中幾個(gè)非常不錯(cuò)。

*展示了各種視覺設(shè)計(jì)作品

作為一個(gè)專注于UX和視覺設(shè)計(jì)的多學(xué)科設(shè)計(jì)師，Kristian 還另外展示了一些很優(yōu)秀的視覺設(shè)計(jì)作品。這也會(huì)是吸引訪問(wèn)者的一個(gè)亮點(diǎn)。

3). 學(xué)習(xí)點(diǎn)

*正確選擇和添加優(yōu)秀的設(shè)計(jì)作品

即使只是設(shè)計(jì)新手或毫無(wú)設(shè)計(jì)經(jīng)驗(yàn)的畢業(yè)生，在完成個(gè)人作品集時(shí)，也要學(xué)會(huì)取舍，盡量挑選和添加一些更優(yōu)秀的UX設(shè)計(jì)作品。展示的設(shè)計(jì)越優(yōu)秀，獲得面試的機(jī)會(huì)才會(huì)更大，不是嗎？何樂(lè)而不為了呢！

8. Nan Wang

1). 設(shè)計(jì)師：Nan Wang (UX/產(chǎn)品設(shè)計(jì)師)

2). 作品集亮點(diǎn)

*作品集采用了特色的中國(guó)水墨畫風(fēng)格

設(shè)計(jì)師設(shè)計(jì)作品集時(shí)，統(tǒng)一采用特色的中國(guó)水墨畫風(fēng)格。添加了一系列的水墨風(fēng)圖標(biāo)，字體和圖像，美觀形象。

*作品集添加了動(dòng)畫，更生動(dòng)形象

一般而言，相較于靜態(tài)的圖片，動(dòng)態(tài)的圖片或視頻更容易引起讀者的注意。因此，設(shè)計(jì)師在實(shí)際設(shè)計(jì)其作品集時(shí)，適當(dāng)?shù)奶砑恿艘恍﹦?dòng)圖，例如動(dòng)態(tài)的背景圖，以便吸引網(wǎng)站訪問(wèn)者的注意。

3). 學(xué)習(xí)點(diǎn)

*設(shè)計(jì)一個(gè)統(tǒng)一的作品集風(fēng)格

*為作品集添加生動(dòng)直觀的動(dòng)圖或視頻

9. Office of Choy

1). 設(shè)計(jì)師：UX設(shè)計(jì)辦公室

2). 作品集亮點(diǎn)

*作品集側(cè)重展示了其各種UX設(shè)計(jì)作品

作品集主頁(yè)上并未提供專門的模塊介紹設(shè)計(jì)師具體情況，而是花費(fèi)大量篇幅介紹了其獨(dú)具特色的產(chǎn)品設(shè)計(jì)作品。如此，更有利于吸引一些看重設(shè)計(jì)師能力，希望更多查看設(shè)計(jì)師真實(shí)作品的網(wǎng)站訪問(wèn)者。

而且，由于該作品集更多的將重心放在展示UX設(shè)計(jì)作品上面，每個(gè)具體的作品也適當(dāng)?shù)奶砑恿嗽敱M的細(xì)節(jié)描述，例如設(shè)計(jì)迭代過(guò)程，參與設(shè)計(jì)師情況，用戶研究情況以及設(shè)計(jì)結(jié)果與反響等等，方便面試官或客戶更加全面的了解設(shè)計(jì)案例詳情。

3). 學(xué)習(xí)點(diǎn)

*必要的時(shí)候側(cè)重強(qiáng)調(diào)作品集的某一個(gè)部分或方面

10. Edmund Yu 

1). 設(shè)計(jì)師：Edmund Yu (UX設(shè)計(jì)師)

2). 作品集亮點(diǎn)

*作品集采用圖片聯(lián)播的方式展示設(shè)計(jì)師的作品和技能

作為擁有12年UX設(shè)計(jì)經(jīng)驗(yàn)的設(shè)計(jì)師，相較于逐個(gè)羅列冗雜的各類真實(shí)設(shè)計(jì)案例，Edmund Yu 選擇了更加簡(jiǎn)單有效的方式展示其設(shè)計(jì)技能，即添加了聯(lián)播的各類案例圖片，更加詳盡直觀。

*通過(guò)羅列收錄設(shè)計(jì)師作品的網(wǎng)站和文章，側(cè)面證明了設(shè)計(jì)的能力

除了提供一些優(yōu)秀設(shè)計(jì)作品的圖片展示，設(shè)計(jì)師還專門設(shè)置了“Mention”模塊，羅列收錄其作品的各種網(wǎng)站和文章，側(cè)面證明其設(shè)計(jì)技能，更加高效具體。

3). 學(xué)習(xí)點(diǎn)

*圖片冊(cè)展示也可以使設(shè)計(jì)師作品展示更加簡(jiǎn)單直觀

*提供一些側(cè)面證明展示你的設(shè)計(jì)能力

總結(jié)：

以上就是所有為大家搜集的10個(gè)優(yōu)秀UX設(shè)計(jì)師在線作品集網(wǎng)站。盡管它們可能并沒有做到各方面都絕對(duì)完美，但有些實(shí)例的設(shè)計(jì)理念，也是非常新穎有趣，值得你在設(shè)計(jì)個(gè)人作品集的過(guò)程中加以運(yùn)用和嘗試?？傊?，希望這些優(yōu)秀實(shí)例能真正的給你帶來(lái)靈感。

你可能也會(huì)喜歡：

如何讓你的UI設(shè)計(jì)作品集脫穎而出

如果沒有UX設(shè)計(jì)經(jīng)驗(yàn)，如何創(chuàng)建個(gè)人UI設(shè)計(jì)作品集

設(shè)計(jì)制作作品集網(wǎng)站的真正作用是什么

【設(shè)計(jì)神器推薦】設(shè)計(jì)協(xié)作，用摹客！100人以下團(tuán)隊(duì)免費(fèi)使用

摹客，支持Sketch/PS/XD/Axure設(shè)計(jì)稿交付、自動(dòng)標(biāo)注切圖、全流程協(xié)作。助力設(shè)計(jì)師和產(chǎn)品團(tuán)隊(duì)高效工作！

立即體驗(yàn)：https://app.mockplus.cn/app