設(shè)計(jì)總是在變化。在過(guò)去一年里，我們不僅看見(jiàn)了五福的C4D運(yùn)用，雙11的動(dòng)效插畫(huà)運(yùn)用，以及大量AR/VR智能的設(shè)計(jì)，還有蘋(píng)果黑暗模式的普及，新技術(shù)帶來(lái)新的體驗(yàn)和解決方案。2020年，關(guān)注研究新興的用戶(hù)體驗(yàn)趨勢(shì)，前段時(shí)間，在我星球里，我?guī)еO(shè)計(jì)師一起來(lái)研究關(guān)于2020界面設(shè)計(jì)趨勢(shì)，希望能幫助大家是設(shè)計(jì)中有所啟發(fā)。

 研究背景 

 隨著UI/UX領(lǐng)域人工智能的發(fā)展，和虛擬現(xiàn)實(shí)等新技術(shù)的變革，從前單一的內(nèi)容很難滿(mǎn)足用戶(hù)的訴求，用戶(hù)的訴求也變得千人前面，所以在研究趨勢(shì)之前，我基于這些關(guān)鍵詞，來(lái)分析2020的設(shè)計(jì)趨勢(shì)。

 色彩趨勢(shì) 

1.彩虹漸變

這兩年來(lái)，彩色漸變一直是設(shè)計(jì)趨勢(shì)，設(shè)計(jì)師將大膽的漸變，飽和度更高的漸變運(yùn)用在設(shè)計(jì)中去，讓整體的色彩感覺(jué)，更加年輕化與活躍。

▲ Apple一直是這個(gè)領(lǐng)域的引領(lǐng)者，隨著當(dāng)年iPhoneX的發(fā)布，彩虹的漸變色，大膽的漸變風(fēng)格瞬間成為設(shè)計(jì)師筆下的弄潮兒。

▲ 這組插畫(huà)中，作者就運(yùn)用了大面積的漸變，兩種顏色的運(yùn)用，通過(guò)重疊，明度變化，豐富了整個(gè)設(shè)計(jì)層次。

▲ 不僅在平面設(shè)計(jì)中，在網(wǎng)頁(yè)設(shè)計(jì)中，也是被大量運(yùn)用，SWATCH的官網(wǎng)，清新的漸變配合動(dòng)感的模特照片，以及和產(chǎn)品的完全結(jié)合，讓頁(yè)面充滿(mǎn)著活力。

▲ 在移動(dòng)端也是如此，金融產(chǎn)品的背景設(shè)計(jì)，銀行卡面的設(shè)計(jì)，可視化圖表的運(yùn)用，都能看出大膽漸變還是很受歡迎。

2.黑暗模式

隨著google和facebook以及instagram這些知名應(yīng)用都開(kāi)始提供黑暗模式，國(guó)內(nèi)微信也開(kāi)始黑暗模式，2020黑暗模式設(shè)計(jì)，一定是需要設(shè)計(jì)師去關(guān)注的。

黑暗模式，除了在黑暗中提高內(nèi)容可讀性以外，還能減少用戶(hù)疲勞，還可以節(jié)約電池，所以黑暗模式在今年將是所有應(yīng)用程序必不可少的一個(gè)功能。

▲ Google的黑暗模式運(yùn)用，通過(guò)一個(gè)簡(jiǎn)單的按鈕開(kāi)關(guān)就可以切換，也可以根據(jù)系統(tǒng)定義切換。

▲ 黑暗模式未來(lái)會(huì)成為一種標(biāo)配，一個(gè)軟件設(shè)計(jì)在剛開(kāi)始的時(shí)候就必須考慮進(jìn)來(lái)。

▲ 關(guān)于黑暗模式，正向當(dāng)年iOS扁平化剛出來(lái)的時(shí)候，國(guó)內(nèi)的很多產(chǎn)品都還沒(méi)有準(zhǔn)備好，但是相信過(guò)不了多久，黑暗模式一定會(huì)普及開(kāi)來(lái)，所以2020大家都應(yīng)該提前去了解黑暗模式的，設(shè)計(jì)規(guī)范和細(xì)節(jié)。

3.更大膽的一種顏色

▲ 除了漸變色，那么大膽的單色在設(shè)計(jì)中運(yùn)用也會(huì)越來(lái)越多，整個(gè)設(shè)計(jì)就一套色彩體系貫穿，大多時(shí)候以品牌色的形式去運(yùn)用，配合留白，對(duì)比明顯的字體，整體給人印象深刻。

▲ 在韓國(guó)的應(yīng)用中用的比較多，它的優(yōu)勢(shì)是色彩干凈，品牌整體感強(qiáng)，但是對(duì)設(shè)計(jì)師駕馭頁(yè)面能力也要求很高，因?yàn)榇竺娣e的單色，如果用不好就會(huì)很刺眼。

▲ Naverpay的設(shè)計(jì)，整個(gè)界面就是用的綠色漸變，清新同時(shí)也能很好和Naver品牌色進(jìn)行結(jié)合。

▲ 在它的很多頁(yè)面中，很多控件這個(gè)綠色運(yùn)用的很巧妙，不會(huì)給人很刺眼的感覺(jué)，所以大膽的一種顏色運(yùn)用在2020頁(yè)將是設(shè)計(jì)師值得去關(guān)注的一個(gè)方向。

▲ 掃碼加入知識(shí)星球，了解更多

 插畫(huà)趨勢(shì)  

在過(guò)去幾年里，插畫(huà)是一種新的表達(dá)方式，越來(lái)越多的設(shè)計(jì)師，插畫(huà)師通過(guò)插畫(huà)表達(dá)產(chǎn)品的情緒，個(gè)人的情緒主張，那么在2020插畫(huà)的運(yùn)用就得和品牌很好的融合起來(lái)，如果你的插畫(huà)是和品牌割裂的，需要注意。

1.和品牌結(jié)合

▲ wibbite的插畫(huà)，標(biāo)志性歐美的風(fēng)格，除了插畫(huà)本身手法比較簡(jiǎn)約模塊，插畫(huà)中運(yùn)用的色彩和內(nèi)容本身也很產(chǎn)品定位匹配。

▲ 插畫(huà)對(duì)于品牌來(lái)說(shuō)也是非常重要的一個(gè)因素，無(wú)論在界面設(shè)計(jì)，還是在品牌營(yíng)銷(xiāo)很多場(chǎng)景都需要插畫(huà)去營(yíng)造產(chǎn)品氛圍和氣質(zhì)，插畫(huà)有助于將我們的品牌故事講述給聽(tīng)眾聽(tīng)，所以在構(gòu)建一個(gè)品牌時(shí)候，插畫(huà)是非常重要的點(diǎn)之一，但是做之前一定要盡量多去了解我們?yōu)榭蛻?hù)提供的設(shè)計(jì)價(jià)值，只有了解了用戶(hù)價(jià)值，才能去定義去特色的故事，幫助產(chǎn)品。

▲ Uber系列插畫(huà)提供暖色，以及安全藍(lán)的運(yùn)用，突出打車(chē)服務(wù)中安全的關(guān)鍵要素。

▲ Google的插畫(huà)系統(tǒng)也是如此，沒(méi)有很華麗的炫技，有的是對(duì)于多元文化的思考，設(shè)計(jì)場(chǎng)景的融合貫通。

所以不難看出，插畫(huà)的方向一定是和品牌結(jié)合的，不會(huì)為了趨勢(shì)而趨勢(shì)，一定是圍繞內(nèi)容去設(shè)計(jì)。

2.3D插畫(huà)

▲ 如果說(shuō)這2年，各種各樣的插畫(huà)手法百花齊放，那么隨著人們的審美變化，趨勢(shì)也從靜態(tài)變成動(dòng)態(tài)，從平面變成3D，從今年的支付寶五福設(shè)計(jì)中大家應(yīng)該能感覺(jué)到2020的插畫(huà)設(shè)計(jì)一定是往著3D方向，而且是動(dòng)態(tài)3D方向演進(jìn)的。

▲ 谷歌一組插畫(huà)，結(jié)合與大腦、團(tuán)隊(duì)合作、想法、密碼箱為圖形進(jìn)行創(chuàng)意設(shè)計(jì)，人物造型可愛(ài)好玩，凸顯年輕化潮流。

▲ Apple在中國(guó)區(qū)App Store 的一組設(shè)計(jì)，整體設(shè)計(jì)以紅色為主，運(yùn)用了象征中國(guó)元素的龍、紅包、燈籠、福字、紙牌作為設(shè)計(jì)元素，整體運(yùn)用3D表達(dá)，凸顯年輕和趣味性。

3.等距插畫(huà)

等距插畫(huà)這兩年已經(jīng)是一個(gè)主流風(fēng)格之一，在未來(lái)還會(huì)接著流行，但是等距插畫(huà)未來(lái)或許和場(chǎng)景聯(lián)系在更緊密，在每年天貓雙11設(shè)計(jì)中，互動(dòng)城的設(shè)計(jì)每年基本都是等距插畫(huà)風(fēng)格，它的故事感和畫(huà)面感，都能讓人眼前一亮，所以電商的設(shè)計(jì)，在短時(shí)間內(nèi)，大型活動(dòng)場(chǎng)景基本都離不開(kāi)這個(gè)風(fēng)格。

▲ 這組等距插畫(huà)場(chǎng)景故事感很強(qiáng)，建立了一個(gè)空間世界，作為網(wǎng)站主風(fēng)格非常的吸引人。

▲ 除了這種大的場(chǎng)景，等距插畫(huà)，在小的場(chǎng)景中，作為插畫(huà)規(guī)范也是運(yùn)用比較多，它風(fēng)格可輕可重，隨著5G時(shí)代到來(lái)，靜態(tài)可能會(huì)逐步演進(jìn)成動(dòng)態(tài)插畫(huà)。

4.根據(jù)內(nèi)容定制的插畫(huà)

隨著內(nèi)容的升級(jí)，對(duì)內(nèi)容的表達(dá)也會(huì)被越來(lái)越重視，那么如何更好的把內(nèi)容更生動(dòng)表達(dá)出來(lái)，插畫(huà)就是很好的一個(gè)形式，根據(jù)內(nèi)容定制的插畫(huà)，在很多產(chǎn)品中被運(yùn)用到，互聯(lián)網(wǎng)教育，IT等領(lǐng)域。所以專(zhuān)門(mén)針對(duì)內(nèi)容去設(shè)計(jì)插畫(huà)，在今年或許是一個(gè)趨勢(shì)，插畫(huà)不再是孤零零只是為了情感化而存在。

▲ Crowdrise的產(chǎn)品設(shè)計(jì)，整體就是運(yùn)用作為整體設(shè)計(jì)語(yǔ)言，風(fēng)格統(tǒng)一，內(nèi)容突出，畫(huà)面效果好。

▲ 插畫(huà)的形態(tài)終于不再是孤零零的只是用戶(hù)情感的表達(dá)，而是隨著內(nèi)容的升級(jí)變化，在產(chǎn)品中發(fā)揮的重要性也越來(lái)越大。

3.3D黏土插畫(huà)的運(yùn)用

3D設(shè)計(jì)因?yàn)榻衲暝O(shè)計(jì)師很喜歡用的樣式之一，我們將盡管3D已經(jīng)存在了一段時(shí)間，但最近我們看到了很多模仿粘土樣式效果的3D插圖的興起。這將成為今年流行的設(shè)計(jì)趨勢(shì)，我們甚至還會(huì)看到很多藝術(shù)家在電影，插畫(huà)和廣告中結(jié)合了2D和3D風(fēng)格。

▲ 在instagran的一組設(shè)計(jì)中，設(shè)計(jì)師運(yùn)用這種黏土和3D的方式設(shè)計(jì)，畫(huà)面充滿(mǎn)了生活感和溫暖。

▲ 谷歌也在它們的項(xiàng)目中大量運(yùn)用這種黏土風(fēng)格設(shè)計(jì)，會(huì)顯得更加的現(xiàn)代和活潑，黏土的設(shè)計(jì)相對(duì)3D插畫(huà)區(qū)別在于更加細(xì)膩，線(xiàn)條上更加柔和。

 字體趨勢(shì) 

這幾年越來(lái)越多的公司，開(kāi)始定制字體，根據(jù)自己的品牌特質(zhì)去做一些獨(dú)特的字體，從國(guó)外到國(guó)內(nèi)，品牌定制字體未來(lái)或許還會(huì)越來(lái)越多，對(duì)于設(shè)計(jì)師好處來(lái)說(shuō)，這些品牌字體很多都是免費(fèi)開(kāi)放給設(shè)計(jì)師用，會(huì)形成一個(gè)很高的商業(yè)環(huán)境。

1.定制字體

▲ 錘子發(fā)布了他們的Smartisan T黑字體。

▲ 騰訊發(fā)布了定制的“騰訊字體”，相比原來(lái)傾斜的黑體字，騰訊的新字體更現(xiàn)代、更協(xié)調(diào)、更動(dòng)感。運(yùn)用起來(lái)也非常有力量感。

▲ 阿里普惠體，隨著集團(tuán)業(yè)務(wù)龐大，字體使用場(chǎng)景多且復(fù)雜，包括各產(chǎn)品客戶(hù)端、營(yíng)銷(xiāo)設(shè)計(jì)、操作系統(tǒng)、硬件設(shè)備、建筑空間及公關(guān)傳播等等。決定以現(xiàn)代為核心設(shè)計(jì)理念，以可靠、明快為設(shè)計(jì)切入點(diǎn)，將阿里精神融入到字體當(dāng)中。最終一款擁有現(xiàn)代感滿(mǎn)足全場(chǎng)景黑體誕生了，而且商用免費(fèi)。

▲ 除了前面的阿里，騰訊，錘子，小米OPPO，京東也都發(fā)布了自己的專(zhuān)屬品牌字體，所以在2020年，品牌字體或許是每個(gè)公司的一個(gè)標(biāo)配了，我們拭目以待。

▲ 國(guó)外其實(shí)是最早開(kāi)始為品牌定制字體的，三星手機(jī)雖然銷(xiāo)量消化，但是他們品牌字體：SamsungOne，設(shè)計(jì)風(fēng)格，很強(qiáng)的現(xiàn)代感，而且，這個(gè)字體有不同粗細(xì)的筆畫(huà)字重，適用面很廣。

▲ IBM的字體名稱(chēng)：IBM Plex Sans Text，這款字體設(shè)計(jì)比較簡(jiǎn)潔，干凈，沒(méi)有多余的筆畫(huà)，這個(gè)字體很良心免費(fèi)商用的。

2.粗體的運(yùn)用

縱觀2020的一些設(shè)計(jì)，留白越來(lái)越大，邊距越留越多，字體也變的很粗，粗的字體和正文普通字體形成了明顯的對(duì)比，再加上網(wǎng)格的布局，讓頁(yè)面內(nèi)容更加凸顯。

▲ 大字體的運(yùn)用，字體就是內(nèi)容，重復(fù)運(yùn)用內(nèi)容元素作為排版手段，對(duì)于內(nèi)容組織和平面要求較高。

▲ 在UI設(shè)計(jì)中，大字體的設(shè)計(jì)也很常見(jiàn)，蘋(píng)果商店，蘋(píng)果官方應(yīng)用都是大字體的推崇者，隨便5G的來(lái)臨，對(duì)于內(nèi)容的追求也會(huì)越來(lái)越高，那么除了大字體，視覺(jué)元素減少，內(nèi)容本身質(zhì)量要求也越來(lái)越高。

▲ 粗的字體常用語(yǔ)大標(biāo)題，或者頁(yè)面導(dǎo)航性指引作業(yè)，幫助用戶(hù)更好去理解功能本身，上面這個(gè)頁(yè)面粗的字體就是導(dǎo)航，告訴用戶(hù)這一頁(yè)，你需要去完成什么動(dòng)作指引。

▲ 掃碼加入知識(shí)星球，了解更多

 最后 

 

設(shè)計(jì)趨勢(shì)必然與技術(shù)發(fā)展緊密結(jié)合，作為設(shè)計(jì)師我們需要了解，以及平時(shí)和我們?cè)O(shè)計(jì)進(jìn)行結(jié)合，下期將帶來(lái)，2020的UI設(shè)計(jì)趨勢(shì)下部分，看看還有哪些需要我們?nèi)リP(guān)注的。

轉(zhuǎn)自：ui中國(guó)-skys