2020-5-20 ui設(shè)計(jì)分享達(dá)人
設(shè)計(jì)總是在變化。在過去一年里,我們不僅看見了五福的C4D運(yùn)用,雙11的動效插畫運(yùn)用,以及大量AR/VR智能的設(shè)計(jì),還有蘋果黑暗模式的普及,新技術(shù)帶來新的體驗(yàn)和解決方案。2020年,關(guān)注研究新興的用戶體驗(yàn)趨勢,前段時(shí)間,在我星球里,我?guī)еO(shè)計(jì)師一起來研究關(guān)于2020界面設(shè)計(jì)趨勢,希望能幫助大家是設(shè)計(jì)中有所啟發(fā)。
研究背景
隨著UI/UX領(lǐng)域人工智能的發(fā)展,和虛擬現(xiàn)實(shí)等新技術(shù)的變革,從前單一的內(nèi)容很難滿足用戶的訴求,用戶的訴求也變得千人前面,所以在研究趨勢之前,我基于這些關(guān)鍵詞,來分析2020的設(shè)計(jì)趨勢。
色彩趨勢
1.彩虹漸變
這兩年來,彩色漸變一直是設(shè)計(jì)趨勢,設(shè)計(jì)師將大膽的漸變,飽和度更高的漸變運(yùn)用在設(shè)計(jì)中去,讓整體的色彩感覺,更加年輕化與活躍。
▲ Apple一直是這個(gè)領(lǐng)域的引領(lǐng)者,隨著當(dāng)年iPhoneX的發(fā)布,彩虹的漸變色,大膽的漸變風(fēng)格瞬間成為設(shè)計(jì)師筆下的弄潮兒。
▲ 這組插畫中,作者就運(yùn)用了大面積的漸變,兩種顏色的運(yùn)用,通過重疊,明度變化,豐富了整個(gè)設(shè)計(jì)層次。
▲ 不僅在平面設(shè)計(jì)中,在網(wǎng)頁設(shè)計(jì)中,也是被大量運(yùn)用,SWATCH的官網(wǎng),清新的漸變配合動感的模特照片,以及和產(chǎn)品的完全結(jié)合,讓頁面充滿著活力。
▲ 在移動端也是如此,金融產(chǎn)品的背景設(shè)計(jì),銀行卡面的設(shè)計(jì),可視化圖表的運(yùn)用,都能看出大膽漸變還是很受歡迎。
2.黑暗模式
隨著google和facebook以及instagram這些知名應(yīng)用都開始提供黑暗模式,國內(nèi)微信也開始黑暗模式,2020黑暗模式設(shè)計(jì),一定是需要設(shè)計(jì)師去關(guān)注的。
黑暗模式,除了在黑暗中提高內(nèi)容可讀性以外,還能減少用戶疲勞,還可以節(jié)約電池,所以黑暗模式在今年將是所有應(yīng)用程序必不可少的一個(gè)功能。
▲ Google的黑暗模式運(yùn)用,通過一個(gè)簡單的按鈕開關(guān)就可以切換,也可以根據(jù)系統(tǒng)定義切換。
▲ 黑暗模式未來會成為一種標(biāo)配,一個(gè)軟件設(shè)計(jì)在剛開始的時(shí)候就必須考慮進(jìn)來。
▲ 關(guān)于黑暗模式,正向當(dāng)年iOS扁平化剛出來的時(shí)候,國內(nèi)的很多產(chǎn)品都還沒有準(zhǔn)備好,但是相信過不了多久,黑暗模式一定會普及開來,所以2020大家都應(yīng)該提前去了解黑暗模式的,設(shè)計(jì)規(guī)范和細(xì)節(jié)。
3.更大膽的一種顏色
▲ 除了漸變色,那么大膽的單色在設(shè)計(jì)中運(yùn)用也會越來越多,整個(gè)設(shè)計(jì)就一套色彩體系貫穿,大多時(shí)候以品牌色的形式去運(yùn)用,配合留白,對比明顯的字體,整體給人印象深刻。
▲ 在韓國的應(yīng)用中用的比較多,它的優(yōu)勢是色彩干凈,品牌整體感強(qiáng),但是對設(shè)計(jì)師駕馭頁面能力也要求很高,因?yàn)榇竺娣e的單色,如果用不好就會很刺眼。
▲ Naverpay的設(shè)計(jì),整個(gè)界面就是用的綠色漸變,清新同時(shí)也能很好和Naver品牌色進(jìn)行結(jié)合。
▲ 在它的很多頁面中,很多控件這個(gè)綠色運(yùn)用的很巧妙,不會給人很刺眼的感覺,所以大膽的一種顏色運(yùn)用在2020頁將是設(shè)計(jì)師值得去關(guān)注的一個(gè)方向。
▲ 掃碼加入知識星球,了解更多
插畫趨勢
在過去幾年里,插畫是一種新的表達(dá)方式,越來越多的設(shè)計(jì)師,插畫師通過插畫表達(dá)產(chǎn)品的情緒,個(gè)人的情緒主張,那么在2020插畫的運(yùn)用就得和品牌很好的融合起來,如果你的插畫是和品牌割裂的,需要注意。
1.和品牌結(jié)合
▲ wibbite的插畫,標(biāo)志性歐美的風(fēng)格,除了插畫本身手法比較簡約模塊,插畫中運(yùn)用的色彩和內(nèi)容本身也很產(chǎn)品定位匹配。
▲ 插畫對于品牌來說也是非常重要的一個(gè)因素,無論在界面設(shè)計(jì),還是在品牌營銷很多場景都需要插畫去營造產(chǎn)品氛圍和氣質(zhì),插畫有助于將我們的品牌故事講述給聽眾聽,所以在構(gòu)建一個(gè)品牌時(shí)候,插畫是非常重要的點(diǎn)之一,但是做之前一定要盡量多去了解我們?yōu)榭蛻籼峁┑脑O(shè)計(jì)價(jià)值,只有了解了用戶價(jià)值,才能去定義去特色的故事,幫助產(chǎn)品。
▲ Uber系列插畫提供暖色,以及安全藍(lán)的運(yùn)用,突出打車服務(wù)中安全的關(guān)鍵要素。
▲ Google的插畫系統(tǒng)也是如此,沒有很華麗的炫技,有的是對于多元文化的思考,設(shè)計(jì)場景的融合貫通。
所以不難看出,插畫的方向一定是和品牌結(jié)合的,不會為了趨勢而趨勢,一定是圍繞內(nèi)容去設(shè)計(jì)。
2.3D插畫
▲ 如果說這2年,各種各樣的插畫手法百花齊放,那么隨著人們的審美變化,趨勢也從靜態(tài)變成動態(tài),從平面變成3D,從今年的支付寶五福設(shè)計(jì)中大家應(yīng)該能感覺到2020的插畫設(shè)計(jì)一定是往著3D方向,而且是動態(tài)3D方向演進(jìn)的。
▲ 谷歌一組插畫,結(jié)合與大腦、團(tuán)隊(duì)合作、想法、密碼箱為圖形進(jìn)行創(chuàng)意設(shè)計(jì),人物造型可愛好玩,凸顯年輕化潮流。
▲ Apple在中國區(qū)App Store 的一組設(shè)計(jì),整體設(shè)計(jì)以紅色為主,運(yùn)用了象征中國元素的龍、紅包、燈籠、福字、紙牌作為設(shè)計(jì)元素,整體運(yùn)用3D表達(dá),凸顯年輕和趣味性。
3.等距插畫
等距插畫這兩年已經(jīng)是一個(gè)主流風(fēng)格之一,在未來還會接著流行,但是等距插畫未來或許和場景聯(lián)系在更緊密,在每年天貓雙11設(shè)計(jì)中,互動城的設(shè)計(jì)每年基本都是等距插畫風(fēng)格,它的故事感和畫面感,都能讓人眼前一亮,所以電商的設(shè)計(jì),在短時(shí)間內(nèi),大型活動場景基本都離不開這個(gè)風(fēng)格。
▲ 這組等距插畫場景故事感很強(qiáng),建立了一個(gè)空間世界,作為網(wǎng)站主風(fēng)格非常的吸引人。
▲ 除了這種大的場景,等距插畫,在小的場景中,作為插畫規(guī)范也是運(yùn)用比較多,它風(fēng)格可輕可重,隨著5G時(shí)代到來,靜態(tài)可能會逐步演進(jìn)成動態(tài)插畫。
4.根據(jù)內(nèi)容定制的插畫
隨著內(nèi)容的升級,對內(nèi)容的表達(dá)也會被越來越重視,那么如何更好的把內(nèi)容更生動表達(dá)出來,插畫就是很好的一個(gè)形式,根據(jù)內(nèi)容定制的插畫,在很多產(chǎn)品中被運(yùn)用到,互聯(lián)網(wǎng)教育,IT等領(lǐng)域。所以專門針對內(nèi)容去設(shè)計(jì)插畫,在今年或許是一個(gè)趨勢,插畫不再是孤零零只是為了情感化而存在。
▲ Crowdrise的產(chǎn)品設(shè)計(jì),整體就是運(yùn)用作為整體設(shè)計(jì)語言,風(fēng)格統(tǒng)一,內(nèi)容突出,畫面效果好。
▲ 插畫的形態(tài)終于不再是孤零零的只是用戶情感的表達(dá),而是隨著內(nèi)容的升級變化,在產(chǎn)品中發(fā)揮的重要性也越來越大。
3.3D黏土插畫的運(yùn)用
3D設(shè)計(jì)因?yàn)榻衲暝O(shè)計(jì)師很喜歡用的樣式之一,我們將盡管3D已經(jīng)存在了一段時(shí)間,但最近我們看到了很多模仿粘土樣式效果的3D插圖的興起。這將成為今年流行的設(shè)計(jì)趨勢,我們甚至還會看到很多藝術(shù)家在電影,插畫和廣告中結(jié)合了2D和3D風(fēng)格。
▲ 在instagran的一組設(shè)計(jì)中,設(shè)計(jì)師運(yùn)用這種黏土和3D的方式設(shè)計(jì),畫面充滿了生活感和溫暖。
▲ 谷歌也在它們的項(xiàng)目中大量運(yùn)用這種黏土風(fēng)格設(shè)計(jì),會顯得更加的現(xiàn)代和活潑,黏土的設(shè)計(jì)相對3D插畫區(qū)別在于更加細(xì)膩,線條上更加柔和。
字體趨勢
這幾年越來越多的公司,開始定制字體,根據(jù)自己的品牌特質(zhì)去做一些獨(dú)特的字體,從國外到國內(nèi),品牌定制字體未來或許還會越來越多,對于設(shè)計(jì)師好處來說,這些品牌字體很多都是免費(fèi)開放給設(shè)計(jì)師用,會形成一個(gè)很高的商業(yè)環(huán)境。
1.定制字體
▲ 錘子發(fā)布了他們的Smartisan T黑字體。
▲ 騰訊發(fā)布了定制的“騰訊字體”,相比原來傾斜的黑體字,騰訊的新字體更現(xiàn)代、更協(xié)調(diào)、更動感。運(yùn)用起來也非常有力量感。
▲ 阿里普惠體,隨著集團(tuán)業(yè)務(wù)龐大,字體使用場景多且復(fù)雜,包括各產(chǎn)品客戶端、營銷設(shè)計(jì)、操作系統(tǒng)、硬件設(shè)備、建筑空間及公關(guān)傳播等等。決定以現(xiàn)代為核心設(shè)計(jì)理念,以可靠、明快為設(shè)計(jì)切入點(diǎn),將阿里精神融入到字體當(dāng)中。最終一款擁有現(xiàn)代感滿足全場景黑體誕生了,而且商用免費(fèi)。
▲ 除了前面的阿里,騰訊,錘子,小米OPPO,京東也都發(fā)布了自己的專屬品牌字體,所以在2020年,品牌字體或許是每個(gè)公司的一個(gè)標(biāo)配了,我們拭目以待。
▲ 國外其實(shí)是最早開始為品牌定制字體的,三星手機(jī)雖然銷量消化,但是他們品牌字體:SamsungOne,設(shè)計(jì)風(fēng)格,很強(qiáng)的現(xiàn)代感,而且,這個(gè)字體有不同粗細(xì)的筆畫字重,適用面很廣。
▲ IBM的字體名稱:IBM Plex Sans Text,這款字體設(shè)計(jì)比較簡潔,干凈,沒有多余的筆畫,這個(gè)字體很良心免費(fèi)商用的。
2.粗體的運(yùn)用
縱觀2020的一些設(shè)計(jì),留白越來越大,邊距越留越多,字體也變的很粗,粗的字體和正文普通字體形成了明顯的對比,再加上網(wǎng)格的布局,讓頁面內(nèi)容更加凸顯。
▲ 大字體的運(yùn)用,字體就是內(nèi)容,重復(fù)運(yùn)用內(nèi)容元素作為排版手段,對于內(nèi)容組織和平面要求較高。
▲ 在UI設(shè)計(jì)中,大字體的設(shè)計(jì)也很常見,蘋果商店,蘋果官方應(yīng)用都是大字體的推崇者,隨便5G的來臨,對于內(nèi)容的追求也會越來越高,那么除了大字體,視覺元素減少,內(nèi)容本身質(zhì)量要求也越來越高。
▲ 粗的字體常用語大標(biāo)題,或者頁面導(dǎo)航性指引作業(yè),幫助用戶更好去理解功能本身,上面這個(gè)頁面粗的字體就是導(dǎo)航,告訴用戶這一頁,你需要去完成什么動作指引。
▲ 掃碼加入知識星球,了解更多
最后
設(shè)計(jì)趨勢必然與技術(shù)發(fā)展緊密結(jié)合,作為設(shè)計(jì)師我們需要了解,以及平時(shí)和我們設(shè)計(jì)進(jìn)行結(jié)合,下期將帶來,2020的UI設(shè)計(jì)趨勢下部分,看看還有哪些需要我們?nèi)リP(guān)注的。
轉(zhuǎn)自:ui中國-skys
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.88yangsc.com