2020年十大網(wǎng)頁設(shè)計趨勢盤點

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

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

　　1. 純文字系列

　　盡管除了標(biāo)準(zhǔn)的文字對圖像的設(shè)置外，一些領(lǐng)域往往熱衷于加入更多不同類型的元素，使設(shè)計變得更豐富。但是這種“純文字”趨勢也很有趣，因為它拋棄了典型的背景圖像，選擇讓文字排版來完成工作。

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

　　2. 插圖

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

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

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

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

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

　　今天，網(wǎng)頁設(shè)計最常見的設(shè)計靈感之一就是使用復(fù)古色彩或版式來傳達(dá)一種懷舊感?？死锼刮鳌ぬ└?Chrissy Teigen)的新網(wǎng)站就是一個很好的例子，他使用具有復(fù)古風(fēng)格的配色方案(復(fù)古但明亮)以及很帶有懷舊風(fēng)格的字體。

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

　　4.黑白

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

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

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

　　5.網(wǎng)格卡片

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

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

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

　　6.概述版式

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

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

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

　　7.超大字體

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

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

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

　　8.幾何形狀和圖案

　　幾何形狀和線條的圖案將在2020年卷土重來。

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

　　15

　　9. 由用戶觸發(fā)的動畫

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

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

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

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

　　10.流行的配色方案

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

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

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

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

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

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

　　對于設(shè)計師和設(shè)計迷來說，2020年都將是精彩紛呈的一年，一起期待吧!