今年要關(guān)注的是新擬物風(fēng)還是2.5D矢量插畫(huà)又或者是其他？讓我們一起來(lái)看看在2020年可能會(huì)影響我們?nèi)粘ＴO(shè)計(jì)體驗(yàn)的三大設(shè)計(jì)趨勢(shì)。

最近有大量的設(shè)計(jì)軟件和工具雨后春筍般涌現(xiàn)——Sketch,Figma,Adobe Creative Cloud,C4d,Redshift等等。這使得設(shè)計(jì)創(chuàng)作門(mén)檻越來(lái)越低，設(shè)計(jì)師們也能夠以更多的形式和更低的成本表達(dá)自己的創(chuàng)意。

我覺(jué)得趨勢(shì)應(yīng)該是能夠相互結(jié)合，還能以創(chuàng)造性的方式在web和許多APP中得到使用。如果使用正確，3D插圖、動(dòng)畫(huà)和自定義的組合可以為用戶(hù)提供一套完整的解決方案。

3D 插畫(huà)

由于一批3D愛(ài)好者在Instagram上分享他們的作品，3D在2019年流行了起來(lái)。在2020年，3D設(shè)計(jì)領(lǐng)域會(huì)得到更加重要的發(fā)展。

3D之所以變得如此流行主要得歸功于一些強(qiáng)大的渲染工具，比如OC，RedShift等等，以及非常便宜的顯卡和其他硬件設(shè)備。

越來(lái)越強(qiáng)大的軟件以及越來(lái)越便宜的設(shè)備，使得不同領(lǐng)域的設(shè)計(jì)師們也能夠通過(guò)3D表達(dá)自己的創(chuàng)意。

Illustrations by Crystal Yumumu on Dribbble

Illustrations by Luis Yrisarry Labadía on Behance

Illustration by Mike | Creative Mints on Dribbble

Illustration by Mike | Creative Mints on Dribbble

我們是知識(shí)搬運(yùn)工，我們是技術(shù)傳播者！

東莞瀟灑職業(yè)培訓(xùn)學(xué)校開(kāi)設(shè)課程有：CNC數(shù)控編程、塑膠模具設(shè)計(jì)，壓鑄模具設(shè)計(jì)、沖壓模具設(shè)計(jì)， Solidworks/pro/E產(chǎn)品設(shè)計(jì)、AutoformR7工藝分析，非標(biāo)自動(dòng)化設(shè)計(jì)、PLC編程、文職、電商、平面設(shè)計(jì)、新媒體等培訓(xùn)課程，瀟灑職業(yè)培訓(xùn)學(xué)校線下、線上、隨到隨學(xué)等學(xué)習(xí)方式，上班學(xué)習(xí)兩不誤，歡迎預(yù)約免費(fèi)試學(xué)！

即日起，組團(tuán)3人以上學(xué)習(xí)CNC電腦鑼實(shí)操課程，學(xué)費(fèi)全免，學(xué)會(huì)為止包就業(yè)，工資4000-6000以上

將平面設(shè)計(jì)概念轉(zhuǎn)化為3D有無(wú)數(shù)種方法。我可以看到設(shè)計(jì)師們大多在以下領(lǐng)域重新構(gòu)思舊的想法，形成新的作品。

• 中小企業(yè)，企業(yè)，高科技(人工智能，機(jī)器學(xué)習(xí)，大數(shù)據(jù)等)和it相關(guān)公司的插圖

• 兒童插圖和動(dòng)畫(huà)

• 實(shí)驗(yàn)性的幾何插圖

幾年前，網(wǎng)頁(yè)設(shè)計(jì)師的設(shè)計(jì)工具還不需要會(huì)3D軟件。鮮明反差的是，今天的設(shè)計(jì)師們正在成為更全面的設(shè)計(jì)師，不斷學(xué)習(xí)插畫(huà)，攝影，C4D，動(dòng)畫(huà)等。

設(shè)計(jì)師們已經(jīng)走了很長(zhǎng)一段路，我喜歡看到他們慢慢成長(zhǎng)為超級(jí)英雄！

動(dòng)畫(huà)

在當(dāng)今快節(jié)奏的技術(shù)時(shí)代，動(dòng)畫(huà)的發(fā)展緊跟步伐。尤其是近期在3D領(lǐng)域的應(yīng)用，把曾今的不可能實(shí)現(xiàn)變成了可能，為更加富有創(chuàng)意性的設(shè)計(jì)打開(kāi)了大門(mén)。

2019年，我寫(xiě)了一篇關(guān)于2D和3D混合使用的趨勢(shì)，預(yù)測(cè)設(shè)計(jì)師能有更加多的創(chuàng)意空間。隨著技術(shù)支持更進(jìn)一步，設(shè)計(jì)師可以更加大膽的去思考2D與3D結(jié)合的創(chuàng)意，產(chǎn)出的動(dòng)畫(huà)流暢順滑，這一趨勢(shì)在2020年肯定會(huì)大放異彩。

在2019年，我們注意到在一些網(wǎng)頁(yè)中，動(dòng)畫(huà)被非常多具有想象力的方式呈現(xiàn)。一個(gè)很棒的例子是蘋(píng)果AirPods頁(yè)面。

毫無(wú)疑問(wèn)，在2020年，網(wǎng)頁(yè)上會(huì)看到非常多的過(guò)渡動(dòng)畫(huà)，場(chǎng)景動(dòng)畫(huà)，這得益于網(wǎng)頁(yè)技術(shù)的支持，一些新的JS庫(kù)，比如ScrollMagic. js, Three.js, Anime.js, Mo.js, Velocity, Scroll Reveal 等等。

我用ScrollMagic庫(kù)設(shè)計(jì)了一個(gè)我的個(gè)人網(wǎng)站，它非常輕量，但很強(qiáng)大。盡管我直接應(yīng)用庫(kù)來(lái)做，幾乎未做修改，但是依然可以獲得比較好的網(wǎng)頁(yè)效果：

我的個(gè)人網(wǎng)頁(yè)截圖

使用SwiftUI庫(kù)可以讓iOS設(shè)計(jì)師很輕易的做出不錯(cuò)的動(dòng)畫(huà)。下面的動(dòng)畫(huà)是我用SwiftUI不到10分做出來(lái)的動(dòng)畫(huà)效果。

基于這些動(dòng)畫(huà)庫(kù)和工具，能做出比較復(fù)雜的2D和3D動(dòng)畫(huà)。設(shè)計(jì)師能夠更加大膽的設(shè)計(jì)創(chuàng)意效果，開(kāi)發(fā)現(xiàn)在也能比較容易的用代碼實(shí)現(xiàn)出來(lái)。

Illustration by Zak Steele-Eklund on Dribbble

Illustration by Daniel Tan on Dribbble

Illustration by Stian ? on Dribbble

動(dòng)畫(huà)可能看起來(lái)像一個(gè)閃亮的新玩具，但我們需要小心使用。過(guò)度使用動(dòng)畫(huà)不僅會(huì)影響用戶(hù)體驗(yàn)，還會(huì)影響性能。

自定義或是組件化

在2019年，我們見(jiàn)證了數(shù)量激增的定制插畫(huà)，特別是在商業(yè)設(shè)計(jì)中。這個(gè)趨勢(shì)在2020年將得到延續(xù)。

雖然在幾年前，很難說(shuō)服客戶(hù)采用適合他們的業(yè)務(wù)或行業(yè)的插畫(huà)，但現(xiàn)在這點(diǎn)已經(jīng)成為行業(yè)標(biāo)準(zhǔn)。

組件化圖片通常應(yīng)用于通用對(duì)象，即那些易于可視化的對(duì)象。隨著人工智能，大數(shù)據(jù)，區(qū)塊鏈和機(jī)器學(xué)習(xí)的興起，這些插圖廣泛應(yīng)用于web和UI設(shè)計(jì)已經(jīng)成為不爭(zhēng)的事實(shí)。

Illustration by the Netguru Team

Illustration by Daniel Tan on Dribbble

Illustration by Ben Schade on Dribbble

Illustration by Calvin Sprague on Behance

擬物設(shè)計(jì)是仿照真實(shí)世界物件的樣式，也是在初代iPhone上被應(yīng)用的最亮眼的趨勢(shì)。巔峰之后，就漸漸被人遺忘?，F(xiàn)如今，新擬物更多的被應(yīng)用于游戲設(shè)計(jì)或復(fù)媒體設(shè)計(jì)中。

Illustration by Paarth Desai on Dribbble

設(shè)計(jì)師們意識(shí)到，簡(jiǎn)單易懂的風(fēng)格能更好的講好故事。干凈的風(fēng)格也使得設(shè)計(jì)師能夠設(shè)計(jì)出風(fēng)格獨(dú)特的插圖。

哪種風(fēng)格會(huì)持續(xù)下去？

我唯一能確定的就是未來(lái)會(huì)變得越來(lái)不確定。我這篇文章中的預(yù)測(cè)是基于觀察，分析數(shù)千個(gè)網(wǎng)頁(yè)，設(shè)計(jì)稿，插畫(huà)等等得出來(lái)的。

最近設(shè)計(jì)圈非常狂熱的追捧新擬物風(fēng)（軟UI），在一些功能簡(jiǎn)單的應(yīng)用像音樂(lè)或日歷應(yīng)用上效果很不錯(cuò)。為了畫(huà)出新擬物風(fēng)的效果，你需要做3層有差別的顏色：

1、最淺的顏色用在左上角的投影上

2、中間色用到元素及背景上

3、最深的顏色用到右下角的投影上

我最近用這種方法設(shè)計(jì)了一個(gè)音樂(lè)APP概念。

新擬物風(fēng)才剛剛站上舞臺(tái)，所以我并不確定它是否能成為主流。我們需要看到它繼續(xù)發(fā)展并能真正應(yīng)用到實(shí)際的APP中。

對(duì)于現(xiàn)在，新擬物風(fēng)并不能取代扁平設(shè)計(jì)趨勢(shì)，它只是一個(gè)簡(jiǎn)單的加法。

漸變?cè)谌缃褚埠芰餍?，許多人不確定它是否會(huì)持續(xù)下去。但是，漸變?cè)诂F(xiàn)在已經(jīng)非常適合UI設(shè)計(jì)，它提供了非常優(yōu)雅的視覺(jué)體驗(yàn)。

Stripe’s homepage

Illustration by Mike | Creative Mints on Dribbble

我熱切的期待設(shè)計(jì)師們能夠在今年使用這些趨勢(shì)，并能綜合這些設(shè)計(jì)方法為用戶(hù)提供極致的用戶(hù)體驗(yàn)。