2020年十大網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)盤(pán)點(diǎn)

　　Adobe XD產(chǎn)品設(shè)計(jì)高級(jí)總監(jiān)Khoi Vinh認(rèn)為，“從這些趨勢(shì)可以清楚地看出，‘網(wǎng)絡(luò)’設(shè)計(jì)比從前更接近傳統(tǒng)的“圖形”或“印刷”設(shè)計(jì)了。與僅僅五到十年前相比，設(shè)計(jì)師在表現(xiàn)力和創(chuàng)造力方面的靈活性令人驚訝?！?/p>

　　該預(yù)測(cè)的作者Amber Leigh Turner經(jīng)過(guò)了繁重的整理工作后，匯總了可能在2020年使你的屏幕煥然一新的頂級(jí)Web設(shè)計(jì)趨勢(shì)。

　　1. 純文字系列

　　盡管除了標(biāo)準(zhǔn)的文字對(duì)圖像的設(shè)置外，一些領(lǐng)域往往熱衷于加入更多不同類型的元素，使設(shè)計(jì)變得更豐富。但是這種“純文字”趨勢(shì)也很有趣，因?yàn)樗鼟仐壛说湫偷谋尘皥D像，選擇讓文字排版來(lái)完成工作。

　　Phase3的網(wǎng)站是一個(gè)很好的例子，這個(gè)設(shè)計(jì)只關(guān)注字體，這種字體也具有某種個(gè)性，而不是規(guī)規(guī)矩矩的或過(guò)度使用無(wú)襯線字體。《紐約時(shí)報(bào)》上也能看到這種趨勢(shì)，例如Food Festival網(wǎng)站的純文本標(biāo)題就采用了將自定義字體與動(dòng)畫(huà)配對(duì)的形式。

　　2. 插圖

　　雖然插圖已經(jīng)在網(wǎng)站上流行了很多年，但最近出現(xiàn)了一種越來(lái)越流行的趨勢(shì)，那就是原創(chuàng)的的、細(xì)節(jié)化的、干凈利落的的插圖網(wǎng)站。

　　像DottedSign(上圖)和Fixate(下圖)這樣的網(wǎng)站就很好的詮釋了這種增長(zhǎng)趨勢(shì)。這兩個(gè)網(wǎng)站都使用了非常合適的和細(xì)節(jié)化的插圖，從而把整個(gè)網(wǎng)站緊密的連接在一起。

　　將插圖與一些動(dòng)畫(huà)結(jié)合在一起的形式確實(shí)更加吸引人，并可作為與網(wǎng)頁(yè)訪客交流的另一種方式。動(dòng)畫(huà)插圖是文本的一個(gè)很好的補(bǔ)充工具，它可以更好地說(shuō)明闡釋網(wǎng)站的用意、思想以及促進(jìn)和訪客之間的交流互動(dòng)。

　　3.復(fù)古風(fēng)格的色彩和版式

　　復(fù)古一直都是一種流行趨勢(shì)。但是在2020年，這種趨勢(shì)很可能將以不同的形式展現(xiàn)。網(wǎng)站不是專注于復(fù)古或陳舊的外觀，而是把懷舊的元素和現(xiàn)代風(fēng)格融合在一起。

　　今天，網(wǎng)頁(yè)設(shè)計(jì)最常見(jiàn)的設(shè)計(jì)靈感之一就是使用復(fù)古色彩或版式來(lái)傳達(dá)一種懷舊感。克里斯西·泰根(Chrissy Teigen)的新網(wǎng)站就是一個(gè)很好的例子，他使用具有復(fù)古風(fēng)格的配色方案(復(fù)古但明亮)以及很帶有懷舊風(fēng)格的字體。

　　作為備受歡迎的排版趨勢(shì)網(wǎng)站，Typewolf仍舊使用復(fù)古的排版和顏色來(lái)設(shè)計(jì)其網(wǎng)站頁(yè)面，同時(shí)仍保持美學(xué)的現(xiàn)代性。他們的字體與背景顏色搭配，視覺(jué)上很復(fù)古，但卻絲毫不讓人覺(jué)得過(guò)時(shí)。

　　4.黑白

　　2020年可能會(huì)有越來(lái)越多的網(wǎng)站嘗試完全不使用色彩顏色，而堅(jiān)持只使用黑白兩色?？墒钦f(shuō)是單色的去極簡(jiǎn)主義吧。

　　卡恩·威爾遜(Cahn Wilson)的網(wǎng)站很好地展示了缺乏色彩的設(shè)計(jì)美學(xué)。該網(wǎng)站主要展示一些帶有灰度圖像的黑白圖像，干凈、清晰。

　　Alexsandr Yaremenko的網(wǎng)站(如下)也保留了黑白配色方案。

　　5.網(wǎng)格卡片

　　大多數(shù)網(wǎng)站是在不可見(jiàn)的網(wǎng)格系統(tǒng)上設(shè)計(jì)的，因?yàn)檫@樣的系統(tǒng)可以使頁(yè)面上的各個(gè)組成部分保持水平。但是，預(yù)計(jì)到2020年，這些網(wǎng)格將在視覺(jué)上變得更加占主導(dǎo)地位，甚至被用作主要的設(shè)計(jì)美學(xué)。這種趨勢(shì)顯然是受到流行的“卡片”設(shè)計(jì)的啟發(fā)。

　　Frames for Future的網(wǎng)站是使用網(wǎng)格作為設(shè)計(jì)美感的一個(gè)很好的例子。他們網(wǎng)站的內(nèi)容組合在一起形成一個(gè)大矩形，并以網(wǎng)格格式對(duì)齊。

　　Evergib的大部分網(wǎng)站(如下)也都布置在網(wǎng)格中，并通過(guò)不同大小的“單元”賦予其尺寸，在視覺(jué)上增添了不少趣味。

　　6.概述版式

　　字體概述是一種新興趨勢(shì)，并且很有可能在2020年愈演愈烈。

　　“在網(wǎng)絡(luò)上，排版的與眾不同已經(jīng)成為一種必要。考慮到不久前設(shè)計(jì)師們還只有屈指可數(shù)的幾種字體可供使用，這其實(shí)是很令人驚訝的一種變化”，來(lái)自Adobe的Vinh解釋說(shuō)：“我們有大量的網(wǎng)絡(luò)字體。我們還需要更大膽、更多樣化的網(wǎng)頁(yè)排版?！焙翢o(wú)疑問(wèn)，這不僅體現(xiàn)在這一趨勢(shì)中，其他很多趨勢(shì)也體現(xiàn)了這一點(diǎn)。

　　本文開(kāi)頭提到的網(wǎng)站Phase 3其實(shí)就具有這樣概述版式的設(shè)計(jì)。Redscout還使用大輪廓字體作為其網(wǎng)頁(yè)設(shè)計(jì)美學(xué)的一部分，結(jié)合動(dòng)畫(huà)將字母的“填充”體現(xiàn)出來(lái)，當(dāng)你向下滾動(dòng)頁(yè)面時(shí)，只留下輪廓。

　　7.超大字體

　　這是另一種基于字體的趨勢(shì)。到2020年，很可能你可以在房間的另一頭看清楚這一頭電腦屏幕上的字體設(shè)計(jì)。

　　Redscout和《紐約時(shí)報(bào)美食節(jié)》(在本文的前面都有介紹)都是這一趨勢(shì)的很好例子。而B(niǎo)aina(上圖)也將其名稱的字體大小提高到非常醒目的尺寸，占據(jù)了其主頁(yè)的近一半面積。

　　HalloBasis也采用了非常大的字體的版式，并作為一種導(dǎo)航樣式，可幫助訪問(wèn)者前往其網(wǎng)站的不同區(qū)域。

　　8.幾何形狀和圖案

　　幾何形狀和線條的圖案將在2020年卷土重來(lái)。

　　例如FUTURE LONDON ACADEMY網(wǎng)站上采用的動(dòng)畫(huà)幾何形狀的設(shè)計(jì)就可以體現(xiàn)這一趨勢(shì)。XXXI的網(wǎng)站(如下圖)的“編碼簡(jiǎn)介”以類似的方式使用幾何形狀。

　　15

　　9. 由用戶觸發(fā)的動(dòng)畫(huà)

　　通常，當(dāng)我們想到動(dòng)畫(huà)時(shí)，我們看到它們自己發(fā)生，獨(dú)立于我們作為網(wǎng)站訪問(wèn)者在頁(yè)面上所做的任何動(dòng)作。然而，在網(wǎng)頁(yè)設(shè)計(jì)中，越來(lái)越多的趨勢(shì)是由訪問(wèn)者的某種輸入或動(dòng)作觸發(fā)動(dòng)畫(huà)。

　　Adobe的Vinh當(dāng)然同意?！皩⒂脩艚换ヅc有優(yōu)秀的動(dòng)畫(huà)和字體設(shè)計(jì)結(jié)合起來(lái)，是這一代版式設(shè)計(jì)中最令人興奮的事情之一。”

　　除了前文提到的Coding的簡(jiǎn)介，羅曼·阿瓦萊(Romain Avalle)的網(wǎng)站也是這一趨勢(shì)的一個(gè)很好的例子。

　　在這個(gè)網(wǎng)站的中心，縮寫(xiě)的輪廓根據(jù)光標(biāo)所在的位置而移動(dòng)。這種類型的交互式動(dòng)畫(huà)有助于吸引觀眾，并使他們放慢腳步找出動(dòng)畫(huà)。這樣的設(shè)計(jì)使得用戶的體驗(yàn)感脫穎而出，而不是僅僅作為被動(dòng)的消費(fèi)者。

　　10.流行的配色方案

　　流行的配色和配色方案在音樂(lè)、服裝、社交媒體等各個(gè)方面體驗(yàn)出來(lái)。到2020年，其中一些配色也許會(huì)成為設(shè)計(jì)師們?cè)O(shè)計(jì)網(wǎng)站的方式。

　　就拿Pinterest和Instagram流行的原色藍(lán)色和淺粉色/粉塵狀的腮紅色作為流行的顏色組合示例。

　　Collate Art的網(wǎng)站(如上圖)和Datalands的網(wǎng)站(如下圖)均在其網(wǎng)站設(shè)計(jì)中采用了這種流行的配色方案。

　　關(guān)鍵趨勢(shì)總結(jié)

　　總的來(lái)說(shuō)，2020年最可能看到的網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)包含的元素有：動(dòng)畫(huà)、插圖、版式設(shè)計(jì)以及新型的配色方案和交互作用。

　　從大型字體到概述字體，從復(fù)古風(fēng)格的換舊感到時(shí)尚的配色方案……

　　對(duì)于設(shè)計(jì)師和設(shè)計(jì)迷來(lái)說(shuō)，2020年都將是精彩紛呈的一年，一起期待吧!