2020年最值得關(guān)注的8個(gè)UI設(shè)計(jì)趨勢(shì)

3 評(píng)論 14398 瀏覽 70 收藏 14 分鐘

快速變化的技術(shù)每年都在影響著設(shè)計(jì)趨勢(shì)。作為設(shè)計(jì)師,我們需要時(shí)刻保持關(guān)注,對(duì)設(shè)計(jì)趨勢(shì)擁有較高的敏感度,不斷學(xué)習(xí),擴(kuò)充自己的設(shè)計(jì)技能,目的是為了跟上最新的市場(chǎng)環(huán)境。基于我的調(diào)研,經(jīng)驗(yàn)和觀察,我甄選了在2020年你將會(huì)看到的最為關(guān)鍵的8個(gè)UI/UX設(shè)計(jì)趨勢(shì)。讓我們一起來(lái)看看吧。

一、動(dòng)態(tài)插圖

插圖被應(yīng)用到APP中已經(jīng)有很長(zhǎng)一段時(shí)間了,它們?cè)谧罱鼛啄甑难葑兞钊擞∠笊羁?。插圖作為一種非常流行的設(shè)計(jì)元素,為我們產(chǎn)品的整體產(chǎn)品增加了情感化體驗(yàn)。插圖非常能抓人眼球,尤其是在融入動(dòng)效后會(huì)顯得更加的自然,將產(chǎn)品帶入生活的氣息,使得產(chǎn)品功能更加突出,同時(shí)也增添了更多的細(xì)節(jié)和個(gè)性。

2020年最值得設(shè)計(jì)們保持關(guān)注的8個(gè)UI設(shè)計(jì)趨勢(shì)

Welcome to Swiggy by Saptarshi Prakash

2020年最值得設(shè)計(jì)們保持關(guān)注的8個(gè)UI設(shè)計(jì)趨勢(shì)

Onboarding animations — Virgil Pana

另一個(gè)好處是使用動(dòng)效后,能抓住用戶(hù)的注意力使其能夠更加沉浸在你的產(chǎn)品中。動(dòng)效同樣是講好品牌故事,產(chǎn)品或者服務(wù)最有影響力的途徑之一。

二、微交互

微交互存在與每一個(gè)網(wǎng)頁(yè)或者app界面中。每當(dāng)打開(kāi)你最喜歡的那些應(yīng)用時(shí),都有機(jī)會(huì)看到它們,比如像Facebook中就有大量不同的微交互,我認(rèn)為“Like”功能就是一個(gè)完美的例子。

有時(shí),我們幾乎意識(shí)不到它的存在,因?yàn)樗鼈兎浅5牟伙@眼,非常自然地融到界面中去了。但是,如果當(dāng)你把這些微交互移除掉的話(huà),你又會(huì)非??斓淖⒁獠⒛芨惺艿揭恍┓浅V匾臇|西丟失了。

2020年最值得設(shè)計(jì)們保持關(guān)注的8個(gè)UI設(shè)計(jì)趨勢(shì)

Menu toggle close animation — Aaron Iker

2020年最值得設(shè)計(jì)們保持關(guān)注的8個(gè)UI設(shè)計(jì)趨勢(shì)

Tab bar active animation — Aaron Iker

一般來(lái)說(shuō),在UI/UX中即使非常小和細(xì)節(jié)處的設(shè)計(jì)都可能會(huì)帶來(lái)巨大的沖擊力。微交互就是完美的證明,細(xì)節(jié)和對(duì)它的關(guān)注能極大的改善產(chǎn)品的整體體驗(yàn),并讓產(chǎn)品體驗(yàn)上升一個(gè)臺(tái)階。每年,新設(shè)備的發(fā)布伴隨著新的機(jī)會(huì),能給產(chǎn)品塑造新品牌和創(chuàng)造富有創(chuàng)意的微交互。

三、3D圖形的應(yīng)用

3D圖形設(shè)計(jì)幾乎無(wú)處不在,比如在電影,游戲或者運(yùn)營(yíng)廣告里等等。3D圖形設(shè)計(jì)早在10年前就出現(xiàn)了然后一直在不斷提升和進(jìn)化。手機(jī)和web技術(shù)進(jìn)展迅猛,新的web瀏覽器能力打開(kāi)了3D設(shè)計(jì)新世界的大門(mén),這給了設(shè)計(jì)師們?cè)趙eb和手機(jī)界面中創(chuàng)造炫酷3D設(shè)計(jì)的機(jī)會(huì)。

2020年最值得設(shè)計(jì)們保持關(guān)注的8個(gè)UI設(shè)計(jì)趨勢(shì)

3D flip menu by Minh Pham

2020年最值得設(shè)計(jì)們保持關(guān)注的8個(gè)UI設(shè)計(jì)趨勢(shì)

Car health report UI by Gleb Kuznetsov

創(chuàng)造并整合這些3D創(chuàng)意設(shè)計(jì)到web和手機(jī)界面中需要特殊的技能和花費(fèi)大量的工作,但這些付出會(huì)得到回報(bào)。

Apple AirPods Pro landing page

3D設(shè)計(jì)對(duì)于產(chǎn)品和服務(wù)來(lái)說(shuō),具有非常大的吸引力,例如在交互上能夠支持用戶(hù)360度查看產(chǎn)品,從而大大提升整個(gè)的產(chǎn)品體驗(yàn)。

在2020年會(huì)有更多的品牌利用3D渲染模型的產(chǎn)品和服務(wù)去模仿線(xiàn)下購(gòu)物體驗(yàn)。

四、虛擬現(xiàn)實(shí)

VR技術(shù)在2019年有一個(gè)巨大的飛躍。最近的一年我們激動(dòng)地看到了頭戴式設(shè)備有了非常大的發(fā)展,尤其是在游戲領(lǐng)域。我們需要記住的是,游戲行業(yè)經(jīng)常在引領(lǐng)著新技術(shù)的發(fā)展并落地到實(shí)際的產(chǎn)品設(shè)計(jì)中。

研究表明,VR也不例外,在Oculus Quest于2019年推出后,許多機(jī)會(huì)為其他行業(yè)打開(kāi)了大門(mén)。Facebook CEO 扎克伯格已經(jīng)測(cè)試了激動(dòng)人心的手部交互功能,并正式宣布將在2020年初為Quest進(jìn)行更新。

2020年最值得設(shè)計(jì)們保持關(guān)注的8個(gè)UI設(shè)計(jì)趨勢(shì)

Oculus Quest — hand interaction feature

2020年最值得設(shè)計(jì)們保持關(guān)注的8個(gè)UI設(shè)計(jì)趨勢(shì)

PlayStation Virtual Reality Website Design by Kazi Mohammed Erfan

索尼和微軟計(jì)劃在2020年夏季發(fā)布他們的新設(shè)備,這就給VR技術(shù)帶來(lái)巨大的機(jī)會(huì)和發(fā)展空間。

增強(qiáng)現(xiàn)實(shí)

在最近幾年,我們能看到在AR(增強(qiáng)現(xiàn)實(shí))這塊有了很大的進(jìn)步和驚喜。世界引領(lǐng)著科技公司在AR開(kāi)發(fā)方面進(jìn)行了巨大的投入,所以我們應(yīng)該期待這項(xiàng)技術(shù)在2020年有更大的成長(zhǎng)和發(fā)展。蘋(píng)果公司也發(fā)布了他們自己的AR套件叫ARKIT3來(lái)幫助設(shè)計(jì)師和開(kāi)發(fā)者在他們的產(chǎn)品中打造AR體驗(yàn)。

2020年最值得設(shè)計(jì)們保持關(guān)注的8個(gè)UI設(shè)計(jì)趨勢(shì)

Apple ARKit 3 by Apple

2020年最值得設(shè)計(jì)們保持關(guān)注的8個(gè)UI設(shè)計(jì)趨勢(shì)

Public transit app by Yi Li

2020年最值得設(shè)計(jì)們保持關(guān)注的8個(gè)UI設(shè)計(jì)趨勢(shì)

House of Plants AR Concept by Nathan Riley

在AR空間里會(huì)有無(wú)限的機(jī)會(huì)和創(chuàng)意去打造一個(gè)新的品牌和激動(dòng)人心的體驗(yàn)。為AR做UI設(shè)計(jì)會(huì)在2020年成為一大趨勢(shì),這就要求設(shè)計(jì)師們?cè)诿鎸?duì)創(chuàng)造AR產(chǎn)品體驗(yàn)前,應(yīng)該去準(zhǔn)備和抓緊學(xué)習(xí)新的工具,原型之類(lèi)的知識(shí)。

六、新擬物風(fēng)

一般來(lái)說(shuō),擬物化設(shè)計(jì)是指以現(xiàn)實(shí)風(fēng)格/方式創(chuàng)造出來(lái)與現(xiàn)實(shí)中的物體相匹配的設(shè)計(jì)元素。不斷發(fā)展的VR/AR技術(shù)以及在各大最流行設(shè)計(jì)平臺(tái)(Dribbble,Behance等)上展示的設(shè)計(jì)作品趨勢(shì)來(lái)看,預(yù)示著擬物化的回歸,但這次換了個(gè)更現(xiàn)代,更酷略微高大上的名字叫“新擬物風(fēng)”(也叫Neumorphism)。

Skeuomorph Mobile Banking | Dark Mode by Alexander Plyuto

Simple Music Player by Filip Legierski

Sleep Cycle App — Neumorphism Redesign by Devanta Ebison

你可能注意到了:Neumorphism代表了豐富細(xì)節(jié)和明確的一種設(shè)計(jì)風(fēng)格。高光,投影,發(fā)光,這些細(xì)節(jié)非常令人印象深刻。Neumorphism風(fēng)格已經(jīng)鼓舞了全世界一大批的設(shè)計(jì)師創(chuàng)作作品,它也會(huì)成為2020年最大的設(shè)計(jì)趨勢(shì)。

七、不對(duì)稱(chēng)布局

最近一年我們也注意到一種不對(duì)稱(chēng)風(fēng)格正在快速發(fā)展。傳統(tǒng)基于“模板”的布局肯定會(huì)消失,這種設(shè)計(jì)趨勢(shì)給2020年的設(shè)計(jì)帶來(lái)了更多的差異化。合適的不對(duì)稱(chēng)風(fēng)格將會(huì)在我們的作品中增多一大批不同的性格,火力以及個(gè)性,所以設(shè)計(jì)不再單純的基于模板。

2020年最值得設(shè)計(jì)們保持關(guān)注的8個(gè)UI設(shè)計(jì)趨勢(shì)

Limnia Fine Jewelry Grid — Zhenya Rynzhuk

Carine fashion store — selection screen concept — Dawid Tomczyk

當(dāng)設(shè)計(jì)這種不對(duì)稱(chēng)風(fēng)格時(shí),設(shè)計(jì)師擁有非常多的選項(xiàng)以及巨大的發(fā)揮空間。但是,想設(shè)計(jì)好這種不對(duì)稱(chēng)風(fēng)格需要大量的練習(xí),它絕不是將元素隨機(jī)的擺放在網(wǎng)格中,而應(yīng)該小心使用和實(shí)現(xiàn)它們,時(shí)刻需要把用戶(hù)的訴求考慮到設(shè)計(jì)中。我們并不想讓用戶(hù)迷失在我們的產(chǎn)品中,對(duì)嗎?

八、講故事

故事在整個(gè)用戶(hù)體驗(yàn)中扮演著非常重要的角色。你可能經(jīng)常會(huì)在著落頁(yè)看到它作為品牌介紹,產(chǎn)品或者一個(gè)新的服務(wù)。講故事就是利用創(chuàng)意的形式把信息傳遞給用戶(hù)。這可以通過(guò)強(qiáng)大的視覺(jué)元素來(lái)呈現(xiàn)(字體、插畫(huà)、高清圖片、顏色、動(dòng)畫(huà)、交互元素)。

A+WQ / Young Lab Page Story of The Week Animation by Zhenya Rynzhuk

2020年最值得設(shè)計(jì)們保持關(guān)注的8個(gè)UI設(shè)計(jì)趨勢(shì)

Free Sketch Template :Mimini by Tran Mau Tri Tam

講故事可以幫助產(chǎn)品創(chuàng)造出品牌和用戶(hù)之間積極的情感連接。講故事可以為你的產(chǎn)品創(chuàng)造出非常多的記憶點(diǎn),讓用戶(hù)感受到自己就是產(chǎn)品或服務(wù)的一部分,他們便會(huì)更加愿意使用你的產(chǎn)品。話(huà)雖如此,講故事也是一種非常有效的營(yíng)銷(xiāo)手段,它可以極大地提高你的產(chǎn)品/服務(wù)的銷(xiāo)量。講故事作為一種非常成功的手段,將在2020年繼續(xù)發(fā)揚(yáng)光大。

總結(jié)

(1)動(dòng)態(tài)插圖

通過(guò)把動(dòng)畫(huà)和插圖進(jìn)行結(jié)合,我們可以使得設(shè)計(jì)變得更加突出,并把它帶入用戶(hù)的日常生活,為產(chǎn)品賦予了極致的細(xì)節(jié)和個(gè)性化。

(2)微交互

微交互被證明是可以在當(dāng)用戶(hù)注意到他們是能夠帶來(lái)非常大的驚喜體驗(yàn),它能夠有效的提升整個(gè)產(chǎn)品的用戶(hù)體驗(yàn)并把產(chǎn)品的品質(zhì)提升一個(gè)等級(jí)。

(3)3D圖形的應(yīng)用

新的瀏覽器技術(shù)打開(kāi)了3D圖形應(yīng)用的大門(mén),能夠給設(shè)計(jì)師帶來(lái)非常大的創(chuàng)意機(jī)會(huì)去打造讓人驚嘆的3D圖形設(shè)計(jì)應(yīng)用到網(wǎng)頁(yè)和手機(jī)APP中。

(4)虛擬現(xiàn)實(shí)

游戲行業(yè)將迎來(lái)新的變革,新的技術(shù)能夠應(yīng)用到產(chǎn)品設(shè)計(jì)中。

(5)增強(qiáng)現(xiàn)實(shí)

在AR空間中擁有無(wú)限的機(jī)會(huì)去創(chuàng)造新的品牌和令人激動(dòng)的新體驗(yàn)。為AR技術(shù)服務(wù)的UI設(shè)計(jì)將在2020年成為主要趨勢(shì),設(shè)計(jì)師需要位為之準(zhǔn)備并去學(xué)習(xí)新的工具,原型,當(dāng)真的需要你去做一款A(yù)R應(yīng)用時(shí)就需要用到。

(6)新擬物風(fēng)

AR/VR技術(shù)不斷發(fā)展,以及在各大流行設(shè)計(jì)平臺(tái)上大量涌現(xiàn)的寫(xiě)實(shí)設(shè)計(jì)作品預(yù)示著擬物風(fēng)的回歸,但只是這次換了個(gè)新的更加現(xiàn)代化的名字。

(7)不對(duì)稱(chēng)布局

運(yùn)用不對(duì)稱(chēng)布局能讓設(shè)計(jì)創(chuàng)意變得擁有更多選項(xiàng)和機(jī)會(huì)。雖然,設(shè)計(jì)一個(gè)成功的不對(duì)稱(chēng)布局需要投入大量的練習(xí)和時(shí)間。

(8)講故事

講故事就是利用創(chuàng)意形式把信息傳遞給用戶(hù)。講故事是一個(gè)非常好的營(yíng)銷(xiāo)工具,可能會(huì)大大增長(zhǎng)產(chǎn)品的銷(xiāo)售額或服務(wù)。

原文:https://uxdesign.cc/8-ui-ux-design-trends-for-2020-68e37b0278f6

作者:Dawid Tomczyk

譯者: 彩云Sky,公眾號(hào):彩云譯設(shè)計(jì)

本文由 @彩云Sky 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來(lái)自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 你這篇文章程序員看了,扶扶自己1000度的眼睛,撓撓本就不剩幾根的頭發(fā),沖你扔了個(gè)茶杯

    來(lái)自浙江 回復(fù)
  2. 除了新擬物風(fēng),別的都是五六年前的潮流趨勢(shì)

    來(lái)自日本 回復(fù)
  3. 好是絲滑

    回復(fù)