你上次更新設(shè)計(jì)作品集的時(shí)間是什么時(shí)候？ 如果你像我一樣“懶”的話，可能已經(jīng)有一段時(shí)間了。 保持一份新鮮的“作品檔案”是向潛在客戶展示你的專業(yè)以及技能的好方法，并且在回顧年度作品時(shí)可能會(huì)對(duì)你有所幫助。

如果你在投資組合設(shè)計(jì)方面落伍了，或者總體上你需要一個(gè)新的投資組合站點(diǎn)，那么在即將開始的2020年會(huì)是一個(gè)絕佳的機(jī)會(huì)，可以使用時(shí)尚的技術(shù)和視覺效果來創(chuàng)建。

利用設(shè)計(jì)趨勢(shì)所創(chuàng)建的現(xiàn)代設(shè)計(jì)可以給人留下深刻的印象。 作品集同時(shí)也代表了你的專業(yè)和技能，因此，明智地設(shè)計(jì)！ 以下是關(guān)于2020年我們認(rèn)為你需要注意的設(shè)計(jì)趨勢(shì)，讓我們來看看吧。

1.主頁簡(jiǎn)介（Homepage Bios）

并沒有特別的規(guī)則規(guī)定了你的個(gè)人簡(jiǎn)介必須放在投資組合網(wǎng)站的“關(guān)于”頁面上。 組合設(shè)計(jì)中最強(qiáng)勁的趨勢(shì)之一是在首頁上就展示你的簡(jiǎn)介內(nèi)容（至少是其簡(jiǎn)短版本）。

這是一種很好的方式，可以從一開始就告訴人們你的工作。 用戶無需進(jìn)入特定的詳情頁面才能了解你的具體工作。

你可以在這里創(chuàng)建關(guān)于個(gè)人的簡(jiǎn)介，甚至突出顯示你所提供的各種項(xiàng)目和服務(wù)。 Bill Chien的網(wǎng)站設(shè)計(jì)中，通過在首頁上使用類似電影中滾動(dòng)的報(bào)幕來展示自己的個(gè)人簡(jiǎn)介內(nèi)容。 從某種意義上說，他的簡(jiǎn)歷很簡(jiǎn)單，但是展示了他的創(chuàng)意。

2.大量的互動(dòng)/交互（Lots of Interactivity）

增強(qiáng)設(shè)計(jì)的交互體驗(yàn)應(yīng)該列入你的清單。

這些設(shè)計(jì)項(xiàng)目中的大部分在視覺上都是吸引人的，充滿了動(dòng)效，豐富的色彩和可點(diǎn)擊的元素，或優(yōu)化懸停效果使其更加獨(dú)特。 使用效果和設(shè)計(jì)技術(shù)可以提供無限可能。

高度互動(dòng)的設(shè)計(jì)優(yōu)勢(shì)之處在于，它可以展示一些高級(jí)的UX技術(shù)。

面臨的挑戰(zhàn)是，有時(shí)設(shè)計(jì)可能會(huì)變得有些混亂。 確保跟蹤用戶的行為和參與度，如果你因此流失了訪問者，那么這可能并不適合你（這對(duì)于在其他項(xiàng)目中部署類似技術(shù)也是一個(gè)很好的測(cè)試）。

3.不尋常的設(shè)計(jì)模式（Unusual Design Patterns）

關(guān)于新的設(shè)計(jì)模式的設(shè)計(jì)也正在發(fā)展和接受測(cè)試。 導(dǎo)航元素，遮擋文本，甚至嘗試更多的動(dòng)畫效果都是很常見的。

這種趨勢(shì)可能會(huì)流行，因?yàn)樗鼮樵O(shè)計(jì)師提供了一個(gè)機(jī)會(huì)，讓他們有一個(gè)小小的空間來測(cè)試技術(shù)和效果。 這樣做的好處是，這種趨勢(shì)推動(dòng)了我們對(duì)不可知的設(shè)計(jì)以及創(chuàng)意的實(shí)踐以及優(yōu)化。

上面的示例同時(shí)使用了一些視覺趨勢(shì)和不尋常的模式。 屏幕輪廓的字體被部分遮蓋，顏色球的動(dòng)畫懸停狀態(tài)以及屏幕邊緣采用垂直樣式的導(dǎo)航。

趨勢(shì)使你考慮設(shè)計(jì)規(guī)范，以及在實(shí)際工作中更新對(duì)它們的看法。

4.黑和白（Black and White）

黑白設(shè)計(jì)通常帶有色彩強(qiáng)調(diào)作用，目前也是設(shè)計(jì)中非常龐大的一個(gè)類型。

最大的影響因素可能是黑白設(shè)計(jì)模式使人們最容易看到作品，作品通常是彩色的。 它使你希望希望被注意的內(nèi)容在屏幕上出現(xiàn)時(shí)得到更多關(guān)注。

與這種黑白趨勢(shì)配對(duì)是另一個(gè)常見因素，作品集內(nèi)容不會(huì)直接顯示在首頁上，用戶必須單擊以找到它們。

5.現(xiàn)代字體（Trendy Typography）

使用合適的字體絕對(duì)是一個(gè)設(shè)計(jì)成功與否的關(guān)鍵之一。 無論你使用的是趨勢(shì)字體類型元素（例如上面的輪廓線）還是僅僅是漂亮的字體，這種趨勢(shì)都不會(huì)馬上過時(shí)。

字體技巧將幫助你的作品集脫穎而出，并幫助其他人了解你的工作。

通過瀏覽你的投資組合網(wǎng)站，潛在的雇主和客戶通常會(huì)對(duì)你的創(chuàng)意印象深刻。 幾乎每個(gè)設(shè)計(jì)師都希望被視為具有強(qiáng)大的技能和設(shè)計(jì)創(chuàng)意的人。 使用現(xiàn)代的字體肯定很合適。

6.高效的效果（High-Performance Effects）

由于網(wǎng)頁設(shè)計(jì)師，攝影師和其他創(chuàng)意人員正在利用他們的作品集來展示自己的能力，因此向更高性能的設(shè)計(jì)要求有了明顯的提高。

這些高性能設(shè)計(jì)中包含了吸引用戶的JavaScript效果，動(dòng)畫和交互。

Victor Costa的網(wǎng)站設(shè)計(jì)是如何創(chuàng)建高性能設(shè)計(jì)的典型示例。 當(dāng)它打開時(shí)為用戶提供一個(gè)選項(xiàng)——標(biāo)準(zhǔn)或高性能。 作品集充滿了互動(dòng)元素，淡入淡出和滾動(dòng)動(dòng)作以及動(dòng)畫。 這些技術(shù)與他在自己的簡(jiǎn)歷中引用的元素相匹配，不僅是對(duì)過去工作的展示，還指示了他還可以為客戶做些什么。

7.充足的空間（Plenty of Space）

這是一個(gè)越來越多的設(shè)計(jì)不斷涌現(xiàn)采用的一種流行趨勢(shì)，同樣，它也正在進(jìn)入投資組合設(shè)計(jì)中——元素和對(duì)象之間有足夠的空間。

這種趨勢(shì)似乎源于確保設(shè)計(jì)能夠在移動(dòng)設(shè)備上適當(dāng)?shù)胤指繇?xiàng)目并具有足夠的分接空間，但是額外的空間在桌面屏幕上也看起來不錯(cuò)。

Lotta Nieminen的作品集站點(diǎn)就是這種設(shè)計(jì)的完美范例。 超大的頁眉空間幾乎占據(jù)了屏幕的三分之一以上，而圖像之間的垂直和水平空間也非常寬。 每個(gè)元素都獨(dú)立放置，夸張的間距使每個(gè)項(xiàng)目空間都可以獨(dú)立吸引用戶注意，這對(duì)于具有多種不同類型圖像的作品集設(shè)計(jì)來說尤其有用。

8.時(shí)尚的界面設(shè)計(jì)（Groovy UI）

將簡(jiǎn)約風(fēng)格的設(shè)計(jì)與時(shí)尚的用戶界面效果相結(jié)合，可以創(chuàng)建出令人贊嘆的產(chǎn)品組合。 視覺的簡(jiǎn)單性和復(fù)雜的交互之間的結(jié)合可以使用戶感到驚訝，并使他們更長(zhǎng)時(shí)間停留并瀏覽更多頁面。

上面的示例中，你可以查看每個(gè)項(xiàng)目組合如何在停止之前以干凈的漣漪效果滑動(dòng)到屏幕上。 光標(biāo)也會(huì)移動(dòng)改變形狀，表示單擊元素可以使用戶以各種方式瀏覽每個(gè)項(xiàng)目，而不僅僅是閱讀設(shè)計(jì)的組合方式。

時(shí)尚的用戶界面，可以讓用戶在不知不覺中花更多的時(shí)間來了解你。

9.大字號(hào)（Large Typography）

字體和語言可以完美地介紹你的作品（和作品集）。 多數(shù)人了解Tobias van Schneider可能是基于他的設(shè)計(jì)或他的視頻內(nèi)容，但是你是否希望他的站點(diǎn)主頁主要是文本？

在計(jì)劃項(xiàng)目或項(xiàng)目執(zhí)行時(shí)，字體往往是最常被忽略的設(shè)計(jì)元素。 我們大多數(shù)人都非常關(guān)注視覺效果或動(dòng)畫效果。

這個(gè)例子說明了為什么如此多的設(shè)計(jì)師選擇具有強(qiáng)字體的作品集。 在深入了解視覺效果之前，它可以設(shè)定正確的語調(diào)——你知道他的工作和網(wǎng)站的內(nèi)容（此選項(xiàng)還可以突出他在處理包含大量文本內(nèi)容的設(shè)計(jì)中的實(shí)力）。

10.不像作品集的作品集（Portfolios That Don’t Look Like Portfolios）

作品集設(shè)計(jì)的最大趨勢(shì)之一是制作看起來像完全是另一類網(wǎng)站的作品集。

Robin Mastromarino的作品集網(wǎng)站設(shè)計(jì)看起來更像是時(shí)裝設(shè)計(jì)師或從事時(shí)尚類型工作的網(wǎng)站，具體取決于你首先查看的是頁面中的哪一部分。 它既美麗又簡(jiǎn)單，最令人印象深刻的是每個(gè)項(xiàng)目都有自己發(fā)光的空間。

細(xì)微的提示可幫助用戶理解設(shè)計(jì)中的要素，例如標(biāo)題上方的小數(shù)字和下方的日期。 此外，該滑動(dòng)元素還指示了通過項(xiàng)目的標(biāo)題向左或向右滾動(dòng)。

這種樣式的其他優(yōu)點(diǎn)是，作為設(shè)計(jì)師，你不必提出全新的東西來炫耀你的作品。 對(duì)于大型的“藝術(shù)”類項(xiàng)目，完成的結(jié)果是重點(diǎn)，而不是創(chuàng)建全新的工作。

11.全屏動(dòng)畫導(dǎo)航（Full-Screen Animated Navigation）

這段時(shí)間以來，許多設(shè)計(jì)師更多選擇一屏的作品集樣式。 如今，由于缺乏合適的導(dǎo)航方式，大部分已經(jīng)轉(zhuǎn)回到多頁項(xiàng)目。

主頁可導(dǎo)航到各個(gè)項(xiàng)目以及這些項(xiàng)目中具有動(dòng)畫效果的頁面，從而為用戶提供更加身臨其境且完全互動(dòng)的體驗(yàn)。

它建立了一個(gè)不錯(cuò)的用戶體驗(yàn)，可能使客戶希望看到類似的技術(shù)，并且是強(qiáng)調(diào)你在數(shù)字領(lǐng)域中進(jìn)行創(chuàng)作的能力的好方法，即使你展示的所有項(xiàng)目都不能反映出這一點(diǎn)。

12.分屏模式（Split-Screen Patterns）

分屏模式已經(jīng)流行了一段時(shí)間，即使不使用此功能，也有越來越多的投資組合正在使用此設(shè)計(jì)。 之所以起作用，是因?yàn)樵氐呐鋵?duì)有助于將用戶吸引到整個(gè)屏幕上，以幫助他們了解面前的所有內(nèi)容。

Xavier Cusso使用具有出色視差滾動(dòng)效果的分屏設(shè)計(jì)在項(xiàng)目之間移動(dòng)。 拼色屏幕設(shè)計(jì)有助于強(qiáng)調(diào)網(wǎng)站的創(chuàng)造性，而中間的元素是要查看的項(xiàng)目組合。 它將投資組合和項(xiàng)目設(shè)計(jì)區(qū)分開來。

這是處理大型項(xiàng)目的好方法，同時(shí)在項(xiàng)目組合設(shè)計(jì)中能夠保持你的個(gè)人風(fēng)格。

13.極簡(jiǎn)風(fēng)格設(shè)計(jì)（Minimalism-Inspired Design）

極簡(jiǎn)風(fēng)格的作品集的最好之處在于，它為設(shè)計(jì)提供了充足的空間。 實(shí)際投資組合的設(shè)計(jì)變得相對(duì)不可見，因此所有焦點(diǎn)都集中在你希望人們看到的元素上。

14.超大的首頁英雄圖（Oversized Homepage Headshots）

使用超大的人物圖像是一個(gè)正在不斷被嘗試使用的趨勢(shì)，尤其是對(duì)于開發(fā)人員和交互設(shè)計(jì)師而言。

這種投資組合趨勢(shì)可能流行的原因可能是因?yàn)槟愫茈y直觀地展示作品，你能突出顯示代碼嗎？

使此項(xiàng)目設(shè)計(jì)起作用的訣竅是要有一個(gè)良好的形象。 它不僅僅只是展示。 它需要你對(duì)此充滿正確的感情，然后將其與合適的字體配合使用，以使你清楚地知道這是一個(gè)投資組合網(wǎng)站以及你的工作。 將所有這些信息保留在滾動(dòng)條上方，以使訪客有機(jī)會(huì)在設(shè)計(jì)中不斷移動(dòng)。

15.模塊化網(wǎng)格（Modular Grids）

似乎從未消失的一種組合設(shè)計(jì)趨勢(shì)是使用模塊化網(wǎng)格來展示項(xiàng)目。 這是一個(gè)很好的功能，因?yàn)槟憧梢栽趩蝹€(gè)畫布上“浮動(dòng)”不同項(xiàng)目的圖像。

Kimi Lewis在她的網(wǎng)頁設(shè)計(jì)中證嘗試一種不同的樣式。 這種設(shè)計(jì)要大得多，而不是用很多小方塊來展示項(xiàng)目。 它將方形和水平方向的長(zhǎng)方形圖像混合并匹配到一個(gè)超大的網(wǎng)格中。

用戶從一開始就對(duì)每個(gè)項(xiàng)目都有良好的感覺。 超大的網(wǎng)格圖像添加元素之間的一些夸張的間距是一個(gè)需要注意的訣竅。 每張圖片上還有一個(gè)漂亮的懸停動(dòng)畫，帶有項(xiàng)目的名稱和類型，可在你單擊之前提供更多信息。

16.明亮有趣的美學(xué)（Bright, Light Aesthetics）

沒有人說設(shè)計(jì)一定就必須是無聊的。 盡管這些設(shè)計(jì)中很多都是深色或白色的，主要是因?yàn)檫@些顏色使查看項(xiàng)目變得容易，但明亮，有趣的顏色選擇也可以使用。

Denys Mishunov的作品集網(wǎng)頁設(shè)計(jì)就是利用色彩和插圖脫穎而出的一個(gè)很好的例子。 明亮的配色方案引人注目，插圖是超大的形象圖使頁面變得有趣。

當(dāng)你從事前端，JavaScript，培訓(xùn)等類似的工作時(shí)，一點(diǎn)點(diǎn)創(chuàng)意就可以提供很大的幫助。 它不僅有助于吸引用戶，而且還可以說明你的工作風(fēng)格和設(shè)計(jì)理念（這可以幫助你找到合適的客戶）。

17.顏色疊加（Color Overlays）

主頁設(shè)計(jì)是創(chuàng)建投資組合最具挑戰(zhàn)性的事情之一。 你如何以誘使用戶實(shí)際點(diǎn)擊的方式預(yù)覽工作或項(xiàng)目部分？

答案可能是部分掩蓋工作。 在預(yù)覽圖像鏈接上使用有趣的顏色疊加是鼓勵(lì)用戶單擊項(xiàng)目在視覺上吸引人的方法。 這樣一來，你就可以在網(wǎng)站的不同部分保持一致的外觀和風(fēng)格，從而使你的首頁更整潔，并確保一個(gè)頁面的加載不會(huì)太繁瑣且加載緩慢，為你提供了在點(diǎn)擊之前突出顯示項(xiàng)目?jī)?nèi)容的機(jī)會(huì)。

Heather Shaw的作品集之所以起作用，是因?yàn)槊總€(gè)項(xiàng)目都如此不同，但是通過彩色疊加，使首頁具有連貫的感覺。 由于帶有客戶名稱和項(xiàng)目類型的標(biāo)簽，用戶還知道他們將要查看哪種項(xiàng)目。 這是一種高度可導(dǎo)航且易于理解的格式，在視覺上很有吸引力。

18.簡(jiǎn)化展示（Streamlined Project Showcase）

投資組合的外觀和風(fēng)格更加簡(jiǎn)化，。 僅顯示少量重點(diǎn)項(xiàng)目可能會(huì)有好處。

它確保用戶僅看到你希望他們關(guān)注的內(nèi)容，而不會(huì)分心。

Stefanie Bruckler使用模塊網(wǎng)格格式，在包含充足空間上展示的項(xiàng)目卻較少。 此外，所有內(nèi)容均位于主滾動(dòng)條的下方，該滾動(dòng)條具有極簡(jiǎn)風(fēng)格的名片樣式設(shè)計(jì)。

外觀精致優(yōu)雅，為這位設(shè)計(jì)師的工作定下了鮮明的基調(diào)。

總結(jié)

仍然還沒有準(zhǔn)備好重新設(shè)計(jì)你的投資組合嗎？ 盡管這是一個(gè)創(chuàng)意項(xiàng)目，但無論你是為公司工作還是作為自由職業(yè)者，這也是對(duì)你的業(yè)務(wù)的投資。

潛在客戶在你還沒有意識(shí)到之前就在尋找供應(yīng)商路上。 擁有最佳項(xiàng)目的現(xiàn)代時(shí)尚投資組合可以給他們留下深刻的第一印象。

----圖文來自：design shack 

----由青島網(wǎng)站建設(shè)公司-博瑞思翻譯編輯整理，為您提供更多有關(guān)青島網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)及其他互聯(lián)網(wǎng)應(yīng)用服務(wù)