設(shè)計(jì)一直隨著潮流快速地進(jìn)化著，我們每隔一段時(shí)間就會(huì)看到一些和以往有所不同的設(shè)計(jì)趨勢(shì)。這些正在流行的設(shè)計(jì)方法、視覺(jué)趨勢(shì)，讓一些優(yōu)秀的產(chǎn)品和設(shè)計(jì)讓人注意到，被人喜愛，甚至帶來(lái)商業(yè)價(jià)值，這也是為什么身為設(shè)計(jì)師，需要在設(shè)計(jì)的時(shí)候，善用這些趨勢(shì)，讓這些流行的設(shè)計(jì)手法，發(fā)揮更大的能量。

時(shí)間推進(jìn)到 2020 年，我們注意到很多正在流行的設(shè)計(jì)手法——更夸張的漸變，打破邏輯和常規(guī)的排版，以及依然在流行的簡(jiǎn)約設(shè)計(jì)，對(duì)于這些你并不陌生。但是另一方面，你可能還不夠熟練的深色模式、聲音交互、3D元素正在越來(lái)越多地主宰當(dāng)下的視覺(jué)設(shè)計(jì)。

如果你希望你的設(shè)計(jì)更加貼近當(dāng)下，更突出，更有價(jià)值，不妨看看這份梳理出來(lái)的趨勢(shì)表單。

1、一直流行的「極簡(jiǎn)風(fēng)」+「大留白」

極簡(jiǎn)主義設(shè)計(jì)從來(lái)都是設(shè)計(jì)中的重難點(diǎn)，這是毋庸置疑的。極簡(jiǎn)主義的設(shè)計(jì)一直在流行，從來(lái)沒(méi)過(guò)時(shí)。但是，每個(gè)時(shí)代的極簡(jiǎn)風(fēng)雖然大的范疇一致，但是細(xì)節(jié)上則各不相同，有所區(qū)別。2020 年所流行的極簡(jiǎn)風(fēng)，留白更多，更加講究通透性。這種趨向很難說(shuō)是不是受到了如今過(guò)載信息的影響——用盡可能少的信噪來(lái)區(qū)別于其他的設(shè)計(jì)。

在下面的兩個(gè)案例當(dāng)中，Whiteboard 這個(gè)網(wǎng)站采用了更加經(jīng)典簡(jiǎn)約的設(shè)計(jì)，居中的非襯線字體，背景使用了微妙的淺灰。

Soldo 的設(shè)計(jì)相對(duì)會(huì)更加豐富一點(diǎn)，但是背景的圖片也采用了近乎純白的背景墻，借用不對(duì)稱的布局來(lái)吸引用戶。

Whiteboard

Soldo

2、瘋狂流行的「深色模式」

2019年，iOS 全面擁抱深色模式，讓這種視覺(jué)設(shè)計(jì)手法開始快速地?cái)U(kuò)散，流行。深色模式具備功能性——讓信息更加聚焦，但是隨著它流行開來(lái)，深色模式開始成為i一種用戶需求——用戶想要它，而當(dāng)設(shè)計(jì)師開始大規(guī)模設(shè)計(jì)這樣的作品，應(yīng)用到產(chǎn)品當(dāng)中，它自然而然就成為了一種流行的視覺(jué)美學(xué)。

深色模式深沉而令人著迷，一方面是因?yàn)槠渲袕?qiáng)烈的色彩和信息對(duì)比，另一方面是因?yàn)樗煌诔Ｒ?guī)設(shè)計(jì)的獨(dú)特性。

在下面的案例當(dāng)中，CanneSeries 使用了霓虹強(qiáng)調(diào)色和加粗的字體，搭配動(dòng)畫，讓頁(yè)面顯得足夠抓人眼球。

和前者不同，Davenport 是優(yōu)雅深色模式的典范。白色的襯線字體，優(yōu)雅的金色，細(xì)膩的視覺(jué)元素，沉浸而高級(jí)。

CanneSeries

Davenport

更多深色模式文章：

3、打破規(guī)則的字體和排版

去年開始，熱衷于字體排版的設(shè)計(jì)師們開始頻繁地在設(shè)計(jì)的時(shí)候，打破各種排版設(shè)計(jì)的規(guī)則。這種趨勢(shì)在 2020 年大概要更加徹底吧？

但是想要玩好，并不容易。關(guān)鍵在于，你既要打破規(guī)則——比如間距和對(duì)齊，但是又要讓用戶能夠Get 到信息，在「感到新奇」和「令人難受」之間，拿捏好尺度。當(dāng)然，很多設(shè)計(jì)是偏向藝術(shù)，而不追求信息的準(zhǔn)確性的。所以，你需要明確你的目的是什么，再選擇要不要采用這一技法。

J Powers Events 以不損害可讀性的方式，設(shè)計(jì)了跨區(qū)域的文字排版，有趣的是，當(dāng)你滾動(dòng)頁(yè)面的時(shí)候，字體會(huì)隨著疊加區(qū)域的變化而產(chǎn)生變化。

Makers & Dreamers 這個(gè)頁(yè)面當(dāng)中，采用的是反轉(zhuǎn)字體，混搭襯線體和非襯線體字體，在簡(jiǎn)約的布局下，營(yíng)造出高端而藝術(shù)的感覺(jué)。

J Powers Events

Makers & Dreamers

更多排版文章：

4、提升格調(diào)的藝術(shù)插畫

插畫在流行，而充滿藝術(shù)感的線性插畫則是其中的排頭兵。這種插畫網(wǎng)頁(yè)和UI 的視覺(jué)格調(diào)明顯拉升了起來(lái)，也許看起來(lái)略有一點(diǎn)古怪——問(wèn)題是在于，你不就是要吸引用戶的目光么？

Absurd Design 恐怕不是第一次在這里推薦了，著說(shuō)一個(gè)關(guān)于藝術(shù)插畫的小圖庫(kù)，極富想象力和視覺(jué)張力，強(qiáng)烈推薦。

Heschung 將插畫和動(dòng)畫結(jié)合到一起，異想天開，天馬行空。

Absurd Design

Heschung

當(dāng)然，不會(huì)畫畫也沒(méi)問(wèn)題：

5、手繪插畫和真實(shí)素材的結(jié)合

設(shè)計(jì)的時(shí)候，最常碰到的一個(gè)問(wèn)題，就是用圖片素材還是用插畫素材。其實(shí)還有一個(gè)選項(xiàng)：混合一下。將精致的圖片和有趣的插畫混搭到一起，同樣非常贊！這同樣是打破常規(guī)，同樣能夠制造視覺(jué)奇觀。

Constance Burke 這個(gè)網(wǎng)站，讓真實(shí)的人穿上了手繪的服裝，非常有一套！

Bubka 則更加大膽，當(dāng)你滾動(dòng)頁(yè)面的時(shí)候，抽象的插畫和真實(shí)的圖片之間來(lái)回穿插，相當(dāng)富有想象力！

Constance Burke

Bubka

6、有機(jī)的流體動(dòng)畫效果

你可能注意到了，越來(lái)越多的網(wǎng)站和平臺(tái)開始有意識(shí)地使用各種各樣的動(dòng)畫，以及不那么死板的元素，比如不規(guī)則的流體。這些像水一樣的多變?cè)兀尵W(wǎng)站和APP 顯得更加富有生機(jī)。

流體動(dòng)畫效果可以創(chuàng)造更好的過(guò)渡效果，吸引用戶注意力。這種動(dòng)效的關(guān)鍵在于控制流體的運(yùn)動(dòng)速度，平滑流暢感是設(shè)計(jì)的核心。

Toonami 在光標(biāo)懸停狀態(tài)下使用了流體動(dòng)畫效果，而視頻和文本也同樣采用了類似的流體效果。

Ilya Kulbachny 在標(biāo)題中使用了液體動(dòng)態(tài)效果，這些文本隨著頁(yè)面滾動(dòng)而變化，這種用法可能會(huì)越來(lái)越流行。

Toonami

Ilya Kulbachny

7、各種3D元素

增加網(wǎng)站和 UI 中的視覺(jué)張力、景深層次，3D 元素是一個(gè)很好的選擇，而且一切皆可3D！2020 年，效果更加強(qiáng)大細(xì)膩的 3D 視覺(jué)設(shè)計(jì)，會(huì)讓優(yōu)秀的設(shè)計(jì)更加強(qiáng)大突出。

就像下面的 Metaconf Meetup 和 Toke 網(wǎng)站，都是借用 3D 設(shè)計(jì)來(lái)提升整體的視覺(jué)張力。

Metaconf Meetup

Toke

8、錯(cuò)落有致的圖層疊加穿插

你在設(shè)計(jì)的時(shí)候，習(xí)慣讓讓所有的元素在頁(yè)面上平鋪開嘛？如果讓不同的層，錯(cuò)落有致地鋪開，將會(huì)帶來(lái)更加多樣和富有層次感的設(shè)計(jì)！

你可以讓文本框和圖片、視頻都穿插重疊起來(lái)，甚至結(jié)合動(dòng)效，在交互的過(guò)程中穿插移動(dòng)！

Craft Kitchen 的首頁(yè)中，圖片和圖片，文本和圖片之間都有所重疊，但是整體上，又處于一個(gè)相對(duì)穩(wěn)定的框架中，顯得穩(wěn)重中又有所錯(cuò)落。

Curt Thompson MD 的網(wǎng)站中則使用了圓角矩形的卡片來(lái)承載圖片，這些圖片會(huì)和其他的元素進(jìn)行穿插，產(chǎn)生景深。這個(gè)網(wǎng)站通過(guò)卡片來(lái)建立一個(gè)重疊穿插的規(guī)則，值得學(xué)習(xí)哦~

Craft Kitchen

Curt Thompson MD

9、大幅度漸變

在扁平化設(shè)計(jì)瘋狂流行的前幾年，大家都竭盡全力去規(guī)避漸變，而如今漸變不僅卷土重來(lái)，而且不得不說(shuō)，越來(lái)越放飛了。

剛剛回歸的漸變更加微妙，而現(xiàn)在的漸變的色彩跨度已經(jīng)越來(lái)越大了，而且它開始無(wú)處不在了。多種色彩的漸變組合是一個(gè)大趨勢(shì)。

比如 Bariskuran 就使用大膽的漸變來(lái)呈現(xiàn)設(shè)計(jì)作品集，而 Arjay Studio 則在小小的氣泡元素中使用了非常出彩的大幅漸變效果。

Bariskuran

Arjay Studio

教你玩轉(zhuǎn)漸變：

10、超級(jí)簡(jiǎn)約的導(dǎo)航

2020 年還有一個(gè)重要的趨勢(shì)，就是終結(jié)復(fù)雜的大型導(dǎo)航，轉(zhuǎn)而流行簡(jiǎn)約的簡(jiǎn)化導(dǎo)航。

雖然這種處理手法乍看起來(lái)是非常冒險(xiǎn)，但是從目前的狀況來(lái)看，較少的導(dǎo)航元素會(huì)更符合當(dāng)下用戶的需求，也可以讓網(wǎng)站、APP 本身的信息主干更加清晰，適合信息傳達(dá)，給內(nèi)容騰出更大的空間。

Bikebear 就使用了簡(jiǎn)化導(dǎo)航，網(wǎng)站的視覺(jué)顯得非常的富有特色，甚至有點(diǎn)搞笑；Uniel 則將導(dǎo)航藏到了漢堡圖標(biāo)當(dāng)中，不論你在桌面端訪問(wèn)，還是在移動(dòng)端上訪問(wèn)，更多內(nèi)容都在彈出菜單中顯示。

Bikebear

Uniel

結(jié)語(yǔ)

設(shè)計(jì)趨勢(shì)，流行技法，它們是日常設(shè)計(jì)中的一個(gè)重要的參考和學(xué)習(xí)對(duì)象。它們最大的特點(diǎn)，就是「貼合當(dāng)下」，因?yàn)榇蠹蚁矚g，符合此刻的語(yǔ)境和需求，而在自己的設(shè)計(jì)的時(shí)候，用好這些流行的技法或者趨勢(shì)，能夠讓此刻的設(shè)計(jì)，更加出效果。當(dāng)然，這些流行趨勢(shì)并非獨(dú)立存在，相互之間還可互相組合，這可以產(chǎn)生更加有趣的效果，不是嘛？