2022年網(wǎng)頁(yè)UI/UX設(shè)計(jì)趨勢(shì)：從行為設(shè)計(jì)到復(fù)古UI

時(shí)間：2023-10-08 04:06:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-10-08 04:06:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

2022年網(wǎng)頁(yè)UI/UX設(shè)計(jì)趨勢(shì)：從行為設(shè)計(jì)到復(fù)古UI：流行的設(shè)計(jì)和創(chuàng)新的UX和UI方法很快就會(huì)變得疲倦和過(guò)度，因此掌握最新的網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)對(duì)于保持領(lǐng)先地位至關(guān)重要。涵蓋從行為設(shè)計(jì)到復(fù)古 UI 的方方面面，我們將在來(lái)年看到的網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)有望將過(guò)去久經(jīng)考驗(yàn)的設(shè)計(jì)元素與未來(lái)的技術(shù)相結(jié)合，產(chǎn)生一些真正令人興奮的新發(fā)展。

1. 行為設(shè)計(jì)

行為設(shè)計(jì)就是使用視覺(jué)線索來(lái)塑造用戶行為。將創(chuàng)意設(shè)計(jì)與科學(xué)數(shù)據(jù)相結(jié)合，它使設(shè)計(jì)師能夠更好地了解用戶的想法，從而更有效地影響他們的行為方式。

這種方法通常用于創(chuàng)建產(chǎn)品和應(yīng)用程序，幫助用戶完成一些事情，例如達(dá)到健身目標(biāo)、培養(yǎng)技能或保持日常習(xí)慣。行為設(shè)計(jì)采用諸如稀缺性之類的技術(shù)——比如在酒店預(yù)訂網(wǎng)站上“只剩下一間房間”——以及 CAR 模型——一種基于提示、行動(dòng)和獎(jiǎng)勵(lì)的策略。

許多產(chǎn)品都采用了行為設(shè)計(jì)思維，包括流行的冥想應(yīng)用Headspace。該平臺(tái)的成功在很大程度上取決于它通過(guò)鼓勵(lì)訂閱者每天冥想來(lái)保持訂閱者活躍的能力。技術(shù)包括個(gè)性化的每日播放列表、統(tǒng)計(jì)數(shù)據(jù)和冥想歷史，甚至允許用戶與“好友”同步時(shí)間表。Headspace 是數(shù)字產(chǎn)品的一個(gè)很好的例子，它了解用戶的行為以及如何激勵(lì)他們參與。

“從知道何時(shí)給植物澆水到確保洗手至少 20 秒，到 2022 年，我們可以預(yù)期數(shù)字產(chǎn)品和人工智能對(duì)行為設(shè)計(jì)的持續(xù)需求，以加強(qiáng)行為并幫助人們養(yǎng)成習(xí)慣，”解釋說(shuō)Envato 的高級(jí)產(chǎn)品設(shè)計(jì)師 Viv Wu?！叭藗冎灰蕾嚾諝v提醒和書(shū)面筆記的日子已經(jīng)一去不復(fù)返了。在這個(gè)競(jìng)爭(zhēng)日益激烈的市場(chǎng)中，企業(yè)不斷收集人們的數(shù)據(jù)并監(jiān)控用戶行為，為用戶創(chuàng)造價(jià)值并提高產(chǎn)品參與度，但我們?cè)撛谀睦飫澢褰缦弈?？?


因?yàn)樾袨榭茖W(xué)可以成為塑造人們選擇和行為的強(qiáng)大工具。這種方法存在一些倫理問(wèn)題，但隨著行為設(shè)計(jì)的流行，希望設(shè)計(jì)行業(yè)繼續(xù)將其用作積極的影響，而不是操縱用戶。

要在您自己的 UX 或 UI 中使用行為設(shè)計(jì)，請(qǐng)查看Elements 上的 usedesignspace 的行為說(shuō)明或CodeCanyon 上的WoWonder Android Messenger – WoWonder Social Script 移動(dòng)應(yīng)用程序。

2. 復(fù)雜的漸變

雖然漸變可能不是一個(gè)新趨勢(shì)，但隨著時(shí)間的推移，它們肯定已經(jīng)走了很長(zhǎng)一段路。復(fù)雜漸變是視頻和網(wǎng)頁(yè)設(shè)計(jì)中出現(xiàn)的最新發(fā)展之一，通常用于增加平面圖像的深度。

您可以在這個(gè)平面設(shè)計(jì)組合中看到復(fù)雜漸變的使用，它使用橙色、粉紅色、紫色和藍(lán)色色調(diào)的空靈混合來(lái)增加溫暖和深度。創(chuàng)意機(jī)構(gòu)Zeus Jones在其網(wǎng)站上使用了類似的效果，設(shè)計(jì)從單色漸變?yōu)椴噬?br>
Envato UX 設(shè)計(jì)師 Sean Feehan 說(shuō)：“漸變?cè)诳赡艿募夹g(shù)執(zhí)行方面取得了長(zhǎng)足的進(jìn)步?！?“這導(dǎo)致了創(chuàng)意社區(qū)通過(guò)運(yùn)動(dòng)、不規(guī)則和多色混合進(jìn)行了令人興奮的探索和發(fā)展。”

要為自己嘗試復(fù)雜的漸變，請(qǐng)使用melantic 的 Gradient Tumblr Theme 之類的東西。它是完全可定制的——你需要做的就是上傳你自己的背景圖片，選擇你的顏色組合并開(kāi)始將它們變成漸變。在漸變背景和紋理方面，試試Sko4 的十個(gè)超級(jí)生動(dòng)的可調(diào)漸變集合。

3. 大字體和現(xiàn)代襯線

排版是UI 設(shè)計(jì)中一個(gè)非常重要的元素，我們看到了一些排版趨勢(shì)的發(fā)展。

大字體

首先，大字體回來(lái)了，而且比以往任何時(shí)候都好。

具有旨在產(chǎn)生影響的大而粗體的字母，大字體可以在網(wǎng)頁(yè)設(shè)計(jì)中做出令人印象深刻的視覺(jué)陳述——尤其是與更簡(jiǎn)約的設(shè)計(jì)或布局相結(jié)合時(shí)。選擇更大尺寸的文本可以很好地創(chuàng)造引人注目的第一印象，也可以將其他設(shè)計(jì)元素聯(lián)系在一起。

“隨著設(shè)計(jì)傾向于更小的離網(wǎng)布局，大排版有助于將它們聯(lián)系在一起并提供簡(jiǎn)單的品牌影響，”Envato 內(nèi)容專家 Vail Joy 解釋道。

法國(guó)老佛爺百貨公司的導(dǎo)航菜單采用中性、大膽的字體——讓品牌的大標(biāo)志在主頁(yè)的中央脫穎而出。這與豎切出的圖像，配對(duì)的說(shuō)明圖標(biāo)，和單色的調(diào)色板，創(chuàng)建了一個(gè)狡猾的，拼貼的感覺(jué)。

使用這個(gè)Tobel – Elated-Themes 的現(xiàn)代家具店– Elementor 的電子商務(wù)主題，將大而大膽的排版融入您的網(wǎng)站。專為室內(nèi)設(shè)計(jì)或家具店而設(shè)計(jì)，是一種現(xiàn)代而別致的大型類型。

當(dāng)代襯線

在字體范圍的另一端，當(dāng)代襯線字體也有一段時(shí)間。

融合了傳統(tǒng)襯線的精致裝飾元素和優(yōu)雅的華麗，現(xiàn)代襯線還搭配有趣、復(fù)雜的漸變，打造時(shí)尚現(xiàn)代的外觀。例如，品牌戰(zhàn)略家查理·奧斯本 (Charlie Osborne) 的這個(gè)網(wǎng)站采用微妙的襯線樣式，這是頁(yè)面的英雄字體，同時(shí)也優(yōu)雅地低調(diào)。

為了在您的作品中加入現(xiàn)代襯線字體，這款Black Delights – Elegant Serif by mokatype使用環(huán)狀連字并散發(fā)出精致的風(fēng)格。非常適合引用或徽標(biāo)，它是一種引人注目的類型，可以讓您的設(shè)計(jì)與眾不同。

4. UI 中的復(fù)古設(shè)計(jì)

繼續(xù)我們對(duì)所有復(fù)古事物的癡迷，復(fù)古 UI 現(xiàn)在正在網(wǎng)頁(yè)設(shè)計(jì)中起飛。

70 年代靈感的橢圓形和拱形邊框半徑

我們看到的第一個(gè)復(fù)古趨勢(shì)是“橢圓形和拱形邊框半徑”。這種風(fēng)格涉及將圖像裁剪成橢圓形和拱形，具有與圖像稍微分開(kāi)的細(xì)邊框，反映拱門或橢圓形。

“這種趨勢(shì)在時(shí)尚和作品集展示中很流行，是對(duì) 70 年代復(fù)古雜志布局的一種致敬，”Vail Joy 說(shuō)?！八ǔＥc大地色調(diào)相結(jié)合?！?

您可以在Farhan Fauzan 的 Photo Studio 網(wǎng)站上看到這種趨勢(shì)。拱門讓人聯(lián)想到獨(dú)立的鏡子，以微妙而經(jīng)典的方式展示攝影作品。

要在您自己的時(shí)尚或生活方式網(wǎng)站上獲得 70 年代的優(yōu)雅外觀，請(qǐng)嘗試這款JewellryWear – Jewellery Store 由energythemes Elementor Template Kit 設(shè)計(jì)，具有適合電子商務(wù)商店的復(fù)古布局。

90 年代垃圾用戶界面

下一個(gè)在 UI 中卷土重來(lái)的復(fù)古趨勢(shì)是90 年代懷舊。90 年代的審美有很多值得喜愛(ài)的地方——包括視頻游戲、VHS 和故障效果、閃閃發(fā)光的泡泡字體，以及朋克和銳舞文化。最近，隨著許多90 年代趨勢(shì)重新浮出水面，我們看到垃圾美學(xué)在 UI 設(shè)計(jì)中重新出現(xiàn)。

一個(gè)很好的例子是時(shí)尚圣經(jīng)網(wǎng)站Nylon。數(shù)字出版物以女性化和低調(diào)的方式處理垃圾搖滾，紋理背景讓人聯(lián)想到樂(lè)隊(duì)海報(bào)以及寶麗來(lái)風(fēng)格的圖像布局、拼貼畫(huà)和手繪細(xì)節(jié)。

要在您的網(wǎng)頁(yè)設(shè)計(jì)中變得垃圾，請(qǐng)嘗試使用 Digital_infusion 的這些Vector Grunge 紋理。這個(gè)包含 29 種重垃圾紋理的集合承諾即使是最干凈的網(wǎng)站也會(huì)變得粗糙，以獲得真實(shí)的 90 年代外觀和感覺(jué)。

5. 本地桌面應(yīng)用卷土重來(lái)

明年，我們期待原生桌面應(yīng)用程序繼續(xù)大放異彩。這些應(yīng)用程序安裝在您的桌面上并在本地訪問(wèn) - 想想 Microsoft Office 套件而不是在線 Office 365 - 許多軟件公司現(xiàn)在選擇創(chuàng)建本地桌面應(yīng)用程序，其用戶體驗(yàn)與其流行的 Web 版本相當(dāng)。

但在日益在線的世界中，為什么公司要離線使用他們的應(yīng)用程序？根據(jù) Envato 產(chǎn)品設(shè)計(jì)師 Raouf Araji 的說(shuō)法，桌面用戶體驗(yàn)實(shí)際上有很多好處。

“一些公司選擇創(chuàng)建原生桌面應(yīng)用程序，其用戶體驗(yàn)與其流行的網(wǎng)絡(luò)瀏覽器版本相當(dāng)，”Raouf 解釋說(shuō)?！坝脩趔w驗(yàn)的好處包括性能的提升、與操作系統(tǒng)的通知系統(tǒng)集成的能力，以及在從瀏覽器中其他選項(xiàng)卡式窗口的干擾中移除時(shí)提高焦點(diǎn)?！?br>
一個(gè)很好的例子是基于 Web 的圖形編輯器和原型設(shè)計(jì)工具——Figma。該軟件的原生桌面版本包括一項(xiàng)名為 Figma Mirror 的功能，它允許您在所有 iOS 設(shè)備上從 Figma 桌面應(yīng)用程序?qū)崟r(shí)查看您的設(shè)計(jì)。

6. 更無(wú)縫的應(yīng)用內(nèi)通信

隨著我們中的許多人繼續(xù)在家工作，遠(yuǎn)程和面對(duì)面協(xié)作的混合方法變得越來(lái)越必要。因此，應(yīng)用內(nèi)通信需要更加無(wú)縫和引人入勝。

產(chǎn)品設(shè)計(jì)師正在迎接改善應(yīng)用內(nèi)通信的挑戰(zhàn)——尤其是在 SaaS 和技術(shù)領(lǐng)域，在這些領(lǐng)域，明顯努力使應(yīng)用內(nèi)協(xié)作更加連貫和更加“人性化”。

再次以 Figma 為例，該公司現(xiàn)在為其在線白板 FigJam引入了“High Five”功能。這使團(tuán)隊(duì)合作的用戶可以在處理文件時(shí)一起慶祝成就、問(wèn)候其他隊(duì)友或引起同事的注意。它最終會(huì)消失，類似于在視頻通話軟件中舉手。

7.3D設(shè)計(jì)

雖然不一定是新趨勢(shì)，但3D 設(shè)計(jì)在網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域繼續(xù)蓬勃發(fā)展。3D 圖形越來(lái)越多地用于 UI 以增強(qiáng) Web 界面并為網(wǎng)站添加引人注目的元素。

3D 設(shè)計(jì)使用計(jì)算機(jī)建模軟件創(chuàng)建具有 3D 外觀的對(duì)象，也是平面設(shè)計(jì)、排版和數(shù)字藝術(shù)的流行趨勢(shì)。從專業(yè)網(wǎng)站到個(gè)人投資組合，它隨處可見(jiàn)。

“雖然 3D 已經(jīng)存在一段時(shí)間了，但現(xiàn)在它可以更無(wú)縫地集成到設(shè)計(jì)中，”Envato 高級(jí)設(shè)計(jì)師 John Kappa 解釋說(shuō)?！皬某錆M活力的明亮多彩元素到超逼真的抽象設(shè)計(jì)，3D 就在這里，它讓一切變得流行起來(lái)！”

查看 John 作品集中的一些作品——從這盒伊索酒瓶到這個(gè)爆炸性的閃光信息——看看 3D 設(shè)計(jì)如何真正提升您的網(wǎng)頁(yè)設(shè)計(jì)游戲。

Envato 作者PixelSquid360是創(chuàng)建可塑 3D 對(duì)象的大師。從像這部卡通渲染的復(fù)古電視這樣的回歸，到這個(gè)鍍鉻的Gold Skul l，有很多 3D 對(duì)象可以在Envato Elements上玩。

可在

復(fù)古電視
通過(guò)PixelSquid360在Pixelsquid
得到

英國(guó)電話亭
通過(guò)PixelSquid360在Pixelsquid
得到

金頭骨
通過(guò)PixelSquid360在Pixelsquid
得到

8. DIY 網(wǎng)站建設(shè)者

最后但并非最不重要的一點(diǎn)是，DIY 網(wǎng)站構(gòu)建器和頁(yè)面構(gòu)建工具在網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域越來(lái)越受歡迎，可幫助那些沒(méi)有經(jīng)驗(yàn)或經(jīng)驗(yàn)有限的人建立并運(yùn)行網(wǎng)站。Tuts+ 網(wǎng)頁(yè)設(shè)計(jì)編輯 Ian Yates 表示，這些平臺(tái)正在變得更易于訪問(wèn)和用戶友好，轉(zhuǎn)向無(wú)代碼方法。

“在 2022 年，我將看到網(wǎng)頁(yè)設(shè)計(jì)作為一門手藝不斷變化的格局；尤其是用于構(gòu)建網(wǎng)站、使其在線并在此過(guò)程中賺取收入的首選工具，”伊恩解釋說(shuō)?！白罱蛻粲押玫钠脚_(tái)已經(jīng)淹沒(méi)了專業(yè)的網(wǎng)頁(yè)設(shè)計(jì)場(chǎng)景；自由職業(yè)者和內(nèi)部部門都越來(lái)越傾向于他們的方向。

可在

Kaleo - 創(chuàng)意組合模板套件
通過(guò)deTheme在模板套件
得到

Encore - 多用途業(yè)務(wù)模板套件
通過(guò)deTheme在模板套件
得到

Faber - 科技公司 Elementor 模板套件
通過(guò)deTheme在模板套件
得到

為什么會(huì)這樣？隨著對(duì)新網(wǎng)站的期望變得越來(lái)越復(fù)雜，易用性是一個(gè)顯而易見(jiàn)的原因?？蛻襞c設(shè)計(jì)師的合作是另一種，加上圍繞工具本身的支持、增長(zhǎng)和社區(qū)?？焖贋g覽 TikTok 上的#webdesign，就會(huì)發(fā)現(xiàn)年輕設(shè)計(jì)師在各個(gè)地方都在尋求無(wú)需代碼的方法。

無(wú)論哪種方式，他們的成功都已經(jīng)醞釀了一段時(shí)間。網(wǎng)站建設(shè)者在各地都享有廣泛報(bào)道的融資輪次和 IPO，預(yù)計(jì)從現(xiàn)在到 2027 年，該行業(yè)的復(fù)合年增長(zhǎng)率將達(dá)到 8%。因此，至少這是一個(gè)值得關(guān)注的領(lǐng)域?！?br>
Elementor 是網(wǎng)頁(yè)設(shè)計(jì)師和非專業(yè)人士最喜歡的頁(yè)面構(gòu)建器。您可以通過(guò)訪問(wèn)ThemeForest上的各種 Elementor 模板套件來(lái)開(kāi)始使用 Elementor ，例如BimberOnline 的這個(gè)Influence Marketing 模板套件，它具有直觀的布局、鮮艷的色彩和高影響力。

Faber - 科技公司 Elementor 模板套件
由deTheme
得到

內(nèi)部 – 室內(nèi)設(shè)計(jì)和建筑模板套件
由jegtheme
得到

影響營(yíng)銷 - SEO 和數(shù)字代理 Elementor 模板套件
通過(guò)BimberOnline
得到




這是我們精選的2022 年您可以期待看到更多的頂級(jí)網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)。從完美的粗體字體到 UX 和 UI 套件、網(wǎng)站模板和主題，Envato Elements擁有您創(chuàng)建無(wú)縫、流暢和美觀的用戶體驗(yàn)。當(dāng)您在這里時(shí)，請(qǐng)不要忘記查看我們的 2022 年平面設(shè)計(jì)趨勢(shì)和營(yíng)銷趨勢(shì)！