2022年你最需要抓住的UI/UX設(shè)計趨勢

2022-6-12    純純

在本文中,我們將發(fā)現(xiàn):

  • 3D視覺設(shè)計師的內(nèi)卷將會越來越嚴(yán)重

  • 數(shù)據(jù)可視化的工作將變得越來越重要

  • 服務(wù)的移動化還需要做出更多努力

  • scrollytelling 技術(shù)會越來越流行



1、滾動已死,滾動敘事興起 


舊的滾動是無聊的。如果你想吸引注意力,你就需要實現(xiàn)滾動敘事(scrollytelling)。(彩云注:這個技術(shù)的核心在于邊滾動頁面邊講故事) 

undefined

《紐約時報》是第一批在他們的文章《雪花飄落》中使用滾動敘事手法的機(jī)構(gòu)之一。


它是一種敘事形式,可以在網(wǎng)頁和APP上呈現(xiàn)。想象一下,在一個網(wǎng)站中每個插圖、文本和其他元素都開始變得生動起來。自然地,你會想看到這個故事的結(jié)局。它就像一個游戲,帶你穿越迷宮。雖然你不能影響它的進(jìn)程,但卻讓你感覺自己能參與其中。


2022年,Scrollytelling將會出現(xiàn)在你看到的每一個流行網(wǎng)站上。


另一方面,scrolllytelling讓用戶真正去閱讀內(nèi)容。你可以用動態(tài)文本讓他們產(chǎn)生興趣,比如谷歌的網(wǎng)站 (https://www.google.com/search/howsearchworks/)。他們的團(tuán)隊知道如何讓信息看起來更好:

undefined

Scrollytelling在用戶向下滾動時被激活,因此得名。沒有點擊,沒有選擇的麻煩,沒有彈出窗口。你似乎停留在一個地方,但通過滾動,把屏幕上的故事慢慢展開。這不僅要求設(shè)計師創(chuàng)造出酷炫的視覺效果,還需要認(rèn)真思考一個你想要講述的故事情節(jié)。


所以,最好的網(wǎng)站不可能在2天內(nèi)建成,需要更多的時間去打磨。

undefined

IAmBinadam令人驚艷的敘述設(shè)計


滾動敘事的項目通常需要大量的時間和精力。不過,這樣做的結(jié)果是值得的。頁面變成“活的”,每一秒都有新的事情發(fā)生,所以在閱讀時很難感到無聊。


那么移動端APP呢? Pure是一款約會應(yīng)用(彩云注,這個應(yīng)用在app store可以搜到,推薦大家安裝一個體驗一下,非廣告),它創(chuàng)造了一種我稱之為“tappytelling”的故事(當(dāng)你第一次點擊并打開應(yīng)用時,它就會被激活):


undefined


Scrollytelling是為用戶而創(chuàng)建的,用戶很喜歡它,不需要到其他頁面去閱讀整個故事。相反,網(wǎng)頁設(shè)計的整個故事都是事先考慮好的,并盡可能以最有趣的方式設(shè)計出來。 


2、用戶喜歡看數(shù)據(jù),數(shù)據(jù)可視化越來越被重視 


如何在2022年做出一個還不錯的企業(yè)網(wǎng)站?你不會想告訴用戶你是“XX領(lǐng)域公認(rèn)的領(lǐng)導(dǎo)者,該領(lǐng)域最好的之一”。這種標(biāo)準(zhǔn)的廣告表達(dá)并不傳達(dá)任何有價值的信息。


最好不要用形容詞,而是用事實來說明:你有多少分支機(jī)構(gòu),在哪些城市,誰是你的客戶,以及你是如何幫助他們的。抽象信息是不可靠的。但如果你有很多想要分享的數(shù)據(jù),你需要讓它不僅簡單,而且有趣。 

undefined

數(shù)據(jù)可視化有助于以一種吸引人的方式傳達(dá)正確的信息。它也可以與滾動敘事(Scrollytelling)緊密結(jié)合。以下是IAmBinadam展示數(shù)據(jù)的方式:


undefined

 通過去除數(shù)據(jù)集的復(fù)雜性,使信息更容易讓讀者感知。

undefined

不同級別的數(shù)據(jù)具有不同的大小,這樣用戶知道應(yīng)該先從哪里查看


讀者可以很快注意到作者試圖通過圖片引出的結(jié)論??紤]到如今人們消費(fèi)的數(shù)據(jù)量巨大,那些干凈整潔的數(shù)字帶來的正面影響更大。 


undefined

有些圖表乍一看甚至不像圖表,這使得它們更加能被注意到


還有一種現(xiàn)象叫做“新冠后遺癥”。這是Covid對公司及其員工的長期影響。根據(jù)英國國家統(tǒng)計局的數(shù)據(jù),2018年,壓力和焦慮的平均得分約為2.7/10。自新冠疫情發(fā)生以來,得分已升至4.0/10,很少低于這一水平。同樣因為大流行,在過去兩年里工作量增加了4個小時。


人們壓力太大,卷的太辛苦,以至于不愿去看復(fù)雜的數(shù)據(jù)。


設(shè)計師做好數(shù)據(jù)可視化,以保持人們的注意力。記住,復(fù)雜的信息通常被忽略,因為讀者試圖節(jié)省他們的時間,更有可能使用滾動按鈕。
undefined

Illustration by Mona Chalabi


以下是我們推薦的一些表示數(shù)據(jù)的方式

  • 1)圖表和曲線圖

  • 2)插圖

  • 3)靜態(tài)信息圖

  • 4)互動信息圖


undefined

Illustration by Ink Factory


如何讓信息圖表看起來更好?

一個好的圖表,或者任何其他形式的數(shù)據(jù)可視化,都應(yīng)該具有在Edward Tufte的“定量信息的可視化顯示”中描述的特征。在他的書中,Tufte通過圖表解釋了好圖表的3個原則:


1)展示數(shù)據(jù)的圖形元素與數(shù)值總數(shù)的比值應(yīng)趨向于1。簡單地說,應(yīng)該刪除一切不必要的元素,保持整潔。 


undefined


2)充分利用好畫面空間。也就是說,需要將數(shù)據(jù)編排的更緊密


undefined

Graph by Hootsuite


3)客觀地描述數(shù)據(jù)。不要使用夸張的圖表,可視化數(shù)據(jù)可以看起來很酷,但真實永遠(yuǎn)是更重要的。


3、2022年還有必要做APP嗎?


根據(jù)We Are Social的數(shù)據(jù),2021年有52.2億人使用手機(jī),約占世界人口的66%。自2020年1月以來,手機(jī)用戶數(shù)量增長了1.8%(9300萬),而手機(jī)聯(lián)網(wǎng)總數(shù)量增長了7200萬(0.9%),到2021年初達(dá)到80.2億。


過去一年,社交媒體用戶的數(shù)量增長了13%以上。到2021年初,社交網(wǎng)絡(luò)上已有近5億新用戶注冊。根據(jù)App Annie的數(shù)據(jù),Android用戶每天花在手機(jī)上的時間超過4小時。2020年,安卓用戶上網(wǎng)時長超過3.5萬億小時。


令人印象深刻的數(shù)字,是嗎?似乎到2022年,為產(chǎn)品做一個APP將成為必須擁有的東西。如何知道你的公司是否真的需要一款應(yīng)用?有以下幾點可供評估:

 

1)用戶主要通過移動設(shè)備訪問你的網(wǎng)站這是你應(yīng)該了解的重要數(shù)據(jù)。

客戶和你在一起的時間越長,你就有越多的機(jī)會去吸引他們,了解他們的習(xí)慣,并給他們想要的東西。(彩云注:這就是為什么各大廠之間都在拼命搶占用戶的在線時長。)

2)幫助內(nèi)部業(yè)務(wù)流程更加有效。

如果你想要提高員工的工作效率、改進(jìn)工作流程或增加利潤,那么就制作一個可以幫助管理業(yè)務(wù)流程的移動應(yīng)用。

如今,像這樣的手機(jī)應(yīng)用使企業(yè)能夠執(zhí)行越來越復(fù)雜和多樣化的任務(wù),加快日常重復(fù)操作和文檔管理。


3)實現(xiàn)一些網(wǎng)站上沒有的新功能。

如果你認(rèn)為APP能為用戶打開新的觸點,并讓用戶體驗更加友好,那么它就值得考慮開發(fā)。問問自己的APP能提供什么新的商業(yè)機(jī)會?例如,隨著疫情的蔓延,許多人開始用上健身APP在家里鍛煉。


4)競爭對手做的情況。

要了解競爭對手在做什么,他們是否有APP,能做什么,以及他們是否真的對用戶有用。


查看App Store和谷歌Play的統(tǒng)計數(shù)據(jù)。下載和評論的數(shù)量可以告訴你用戶是如何使用競爭對手的應(yīng)用的。如果他們的服務(wù)真的很方便而且很有必要,那么你就容易被甩在后面。


5)復(fù)購率。

一個應(yīng)用可以幫助你留住那些習(xí)慣從你那里購買的人。如果想為老客戶開展促銷活動了,給他們發(fā)送一個通知就能完成,成本更低。


在正確的時間提供的報價越有吸引力,人們購買的可能性就越大。

undefined

6)促銷工具。


有了應(yīng)用,你就不需要花錢設(shè)計和制作實體卡,客戶也不需要隨身帶卡。將促銷計劃整合到APP,并分享有用的促銷信息。


做原生APP還是移動端網(wǎng)站?

開發(fā)手機(jī)網(wǎng)站比開發(fā)手機(jī)應(yīng)用需要更少的工作量,這反過來可以降低整體推廣成本。


這部分是由于響應(yīng)式設(shè)計的出現(xiàn),它允許你根據(jù)打開網(wǎng)站的設(shè)備屏幕來調(diào)整網(wǎng)站。至于APP,它們必須為許多移動平臺單獨(dú)編寫:Android、IOS、Windows等。


一些設(shè)計師認(rèn)為“前端驅(qū)動的網(wǎng)絡(luò)體驗”會是2022年的一個好機(jī)會,我非常同意!(彩云注:在國內(nèi),現(xiàn)在開發(fā)小程序的肯定越來越多了。) 


4、3D設(shè)計具備更強(qiáng)競爭力 


我們一開始并沒有將其放在首位,因為這并不是一個新的趨勢,在很久以前設(shè)計師們就已經(jīng)設(shè)計了很多3D圖像和動畫了。 

undefined

Cardi B rhymes with 3D

3D技術(shù)已經(jīng)在過去流行了很多年,但它不會很快消失。此外,我們預(yù)測3D圖形將變得更加多樣化和包容。


在過去的幾年里,3D藝術(shù)和動畫已經(jīng)出現(xiàn)在各種UI設(shè)計趨勢評論中。這意味著越來越多的設(shè)計師將它們整合到頁面中。


3D當(dāng)然應(yīng)該成為2022年最熱門的趨勢和預(yù)測之一,因為與經(jīng)典動畫相比,逼真的3D形狀結(jié)合動畫總是引人注目的。


undefined


從技術(shù)上講,通過3D更容易傳達(dá)更多內(nèi)容,因為它比平面圖片更接近我們的感知。3D插圖更有深度,信息量更大,也更具互動性。"


許多設(shè)計師將3D對象無縫地“安置”在2D空間中。它允許創(chuàng)建更有趣的組合,也作為一個優(yōu)秀的工作方法蘊(yùn)藏著巨大的潛力。


undefined

烏克蘭政府網(wǎng)站用3D手模擬了黑客帝國


注意一點:在整合3D圖形等重量級內(nèi)容之前,確保你的應(yīng)用性能是OK的,能夠快速加載所有元素。 


5、元宇宙風(fēng)潮  


Meta的logo既不是2D也不是3D。或者兩者兼而有之?這就是即將到來的2022年的莫比烏斯帶和薛定諤的貓。 

 undefined

undefined

Meta logo的變化(3D版本)(https://design.facebook.com/stories/designing-our-new-company-brand-meta/)


(彩云注:這個概念在去年簡直不要太火,未來幾年肯定還會是一個大的趨勢,設(shè)計師也需要保持關(guān)注。跟著趨勢走,易于放大自身價值。)


6、混合動畫  


越來越多的公司在網(wǎng)站和移動應(yīng)用中使用動畫,以提高用戶的沉浸感和體驗,使內(nèi)容更有趣。 

undefined


動畫是2022年重要的網(wǎng)頁設(shè)計趨勢。2022年,如果沒有它,你的產(chǎn)品很可能會看起來就像個半成品?;旌巷L(fēng)格的動畫越來越受歡迎:定格動畫和3D動畫的結(jié)合,2D動畫和3D動畫的結(jié)合。設(shè)計師這樣做是為了獲得不同尋常的風(fēng)格解決方案,以及提高最終產(chǎn)品的質(zhì)量。


2022年,動畫設(shè)計將是品牌市場定位的重要組成部分,想想一個公司新的視覺形象——動畫形象。隨著這個領(lǐng)域的專業(yè)設(shè)計師數(shù)量的增長,實現(xiàn)新想法的機(jī)會也在增加。


2022年如何使用網(wǎng)頁動畫?

1)講故事動畫。

可以通過在界面和用戶之間建立情感聯(lián)系來傳達(dá)信息。 

undefined

加載動畫Yoichi Kobayashi


2)更有趣的加載。


用戶不愿意等待,除非載入畫面很有趣。帶有百分比的動畫不僅可以分散用戶的注意力,還可以告知他們加載頁面需要多少時間。使用進(jìn)度條或者任何你能想到的可以顯示時間流逝的東西。

undefined


3)光標(biāo)效果。

用戶可以精確地觀察光標(biāo)所在的位置。通過添加智能互動動畫,對這個光標(biāo)作出反應(yīng)來探索網(wǎng)站。這種效果在21世紀(jì)初非常流行。如你所知,流行趨勢往往每20年就會重演一次。


undefined 


4)動態(tài)排版

你有沒有想過讓字母跳舞? 

undefined



添加角色的動畫插圖

據(jù)Statista統(tǒng)計,2020年全球動畫市場達(dá)到了2700億美元。趨勢是視頻,而不是靜態(tài)信息。全球品牌在社交網(wǎng)絡(luò)上使用動畫制作廣告。毫無疑問,動畫插圖的優(yōu)勢是它們非常靈活和多樣化。 

undefined

寶馬歷史動畫


這樣的作品通常用于兩種情況:

1)用于解釋視頻

2)電商廣告

undefined

動畫解說的趨勢出現(xiàn)在幾年前,解說視頻清楚地顯示點擊的位置或公司的項目是關(guān)于什么的。


在招聘或商業(yè)視頻中,用戶更喜歡看畫出來的人物,而不是抽象的形狀或物品。畫出來的人物可以喚起情感共鳴,就像活著的人一樣。


7、微交互,大影響  


微交互是幫助用戶瀏覽網(wǎng)站或應(yīng)用的小界面變化。通常這些是作為提示用戶的視覺或聲音效果:它們顯示發(fā)生了什么,將導(dǎo)致什么操作,下一步需要做什么。 

undefined

圖片來源awwards


動畫交互將為你的設(shè)計注入活力,并有助于保持用戶粘性。關(guān)注每一個細(xì)節(jié)是設(shè)計師工作的關(guān)鍵,因為設(shè)計中的所有元素都可以帶來積極的用戶體驗。


重要的是要達(dá)到元素的和諧,而不是把注意力分散到界面的各個方面。微交互作用的一個重要部分是顏色,它們?yōu)榻缑嬖卦鰪?qiáng)價值。


undefined


微交互有助于頁面導(dǎo)航,解釋它們的功能。最重要的方面之一是加快和簡化以前冗長的功能,以實現(xiàn)特定的行為。 


8、動態(tài)logo,加深品牌印記  


2022年,在線品牌面臨著新的挑戰(zhàn),需尋求新的解決方案,其中之一就是動畫logo設(shè)計。 

undefined

圖片來源Toridori


動畫logo主要有以下幾點營銷優(yōu)勢:

1)吸引注意力。這意味著它們有助于提高品牌知名度。

2)有助于提高SEO。谷歌更傾向于動態(tài)內(nèi)容,帶有動態(tài)圖形的頁面更容易吸引用戶。

3)在移動端看起來更好。絲滑的動畫看起來比靜態(tài)的logo更有趣。

4)最重要的是展示了歷史。靜態(tài)logo背后的想法正在動畫中發(fā)展。由于這一點,在幾秒鐘內(nèi),你可以展示品牌的使命,甚至它的價值!


undefined

一家洗衣機(jī)[公司]的標(biāo)志(https://www.schulthess.ch/)

現(xiàn)在有很多設(shè)計模板,可以很容易地用字體制作一個動畫logo:


undefined



undefined

圖片來源Shabello, Bobby Voeten

作者:彩云Sky         來源:站酷
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。


魏華的微信.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計m.820esy.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 
UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司



分享本文至:

日歷

鏈接

個人資料

存檔