傳播文化錦繡，塑造企業(yè)靈魂

用這10種流行的設(shè)計手法，讓你的作品在2020年更有設(shè)計感！

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

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

微信圖片_20200317150155.jpg

如果你希望你的設(shè)計更加貼近當下，更突出，更有價值，不妨看看這份梳理出來的趨勢表單。



1、

一直流行的「極簡風」+「大留白」


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

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

微信圖片_20200317150203.jpg

https://whiteboard.is/

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

微信圖片_20200317150206.jpg

https://www.carolinsoldo.com/



2、

瘋狂流行的「深色模式」


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

深色模式深沉而令人著迷，一方面是因為其中強烈的色彩和信息對比，另一方面是因為它不同于常規(guī)設(shè)計的獨特性。

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

微信圖片_20200317150209.jpg

https://canneseries.com/en/

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

微信圖片_20200317150211.jpg

https://davenportm2m.com/



3、

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


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

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

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

微信圖片_20200317150214.jpg

https://jpowers.events/

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

微信圖片_20200317150216.jpg

https://dreamers.squarespace.com/


4、

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


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

Absurd Design 恐怕不是第一次在這里推薦了，一個關(guān)于藝術(shù)插畫的小圖庫，極富想象力和視覺張力，強烈推薦。

微信圖片_20200317150219.jpg

https://absurd.design/

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

微信圖片_20200317150221.jpg

https://noel.heschung.com/en/chapitre/les-debuts-de-l-aventure/


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

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

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

微信圖片_20200317150223.jpg

https://constanceburke.com/

Bubka 則更加大膽，當你滾動頁面的時候，抽象的插畫和真實的圖片之間來回穿插，相當富有想象力！

微信圖片_20200317150226.jpg

https://www.bubka.be/



6、

有機的流體動畫效果


你可能注意到了，越來越多的網(wǎng)站和平臺開始有意識地使用各種各樣的動畫，以及不那么死板的元素，比如不規(guī)則的流體。這些像水一樣的多變元素，讓網(wǎng)站和APP 顯得更加富有生機。

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

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

微信圖片_20200317150234.jpg

https://www.adultswim.com/toonami/

Ilya Kulbachny 在標題中使用了液體動態(tài)效果，這些文本隨著頁面滾動而變化，這種用法可能會越來越流行。

微信圖片_20200317150238.jpg

https://kulbachny.com/



7、

各種3D元素


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

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

微信圖片_20200317150240.jpghttps://metaconf.net/



微信圖片_20200317150244.jpg

https://toke.com.br/



8、

錯落有致的圖層疊加穿插


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

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

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

微信圖片_20200317150246.jpg

https://adcraftandkitchen.com/

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

微信圖片_20200317150249.jpg

https://curtthompsonmd.com/



9、

大幅度漸變


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

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

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

微信圖片_20200317150252.jpg

https://www.bariskuran.com/

微信圖片_20200317150254.jpg

https://arvr.angels-it.com/#the-development-of-AR-projects



10、

超級簡約的導航


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

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

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

微信圖片_20200317150256.jpg

https://www.bikebear.com.my/

微信圖片_20200317150258.jpg

https://uniel.jp/



結(jié)語


設(shè)計趨勢，流行技法，它們是日常設(shè)計中的一個重要的參考和學習對象。它們最大的特點，就是「貼合當下」，因為大家喜歡，符合此刻的語境和需求，而在自己的設(shè)計的時候，用好這些流行的技法或者趨勢，能夠讓此刻的設(shè)計，更加出效果。當然，這些流行趨勢并非獨立存在，相互之間還可互相組合，這可以產(chǎn)生更加有趣的效果，不是嘛？







原文鏈接：https://designmodo.com/web-design-trends-2020/
譯文鏈接：https://www.uisdc.com/10-design-trends-2020
作者：CARRIE COUSINS
譯者：陳子木
口碑好，服務(wù)周到，打造專業(yè)品牌！
GOOD REPUTATION, GOOD SERVICE, TO CREATE A PROFESSIONAL PILOT BRAND
關(guān)于我們

憑著白鯨文化傳媒的媒體優(yōu)勢以及出色的技術(shù)和服務(wù)，白鯨文化傳媒已經(jīng)成為省內(nèi)外的綜合服務(wù)提供商。公司與多家省內(nèi)外知名企業(yè)、政府機關(guān)單位建立起了廣泛良好的合作關(guān)系。 優(yōu)秀的服務(wù)質(zhì)量，完美的客戶體驗以及高水準的專業(yè)服務(wù)團隊，為企業(yè)建立優(yōu)秀的公司形象、打造卓越廣泛的品牌知名度，構(gòu)建企業(yè)的核心競爭力優(yōu)勢。公司與多家省內(nèi)外知名企業(yè)建立起了廣泛良好的合作關(guān)系。
聯(lián)系我們
廣東省廣州市南沙區(qū)富佳北街73號
13423663453     |     020-39006895