Web3 和元宇宙愈發(fā)火熱的當(dāng)下，相關(guān)的設(shè)計(jì)趨勢(shì)也值得關(guān)注，本文總結(jié)了5種Web3和元宇宙影響下的設(shè)計(jì)趨勢(shì)，對(duì)相關(guān)領(lǐng)域感興趣的設(shè)計(jì)師記得收藏下。

未來已來，以太坊前幾天完成了 2.0 的合并，互聯(lián)網(wǎng)正在從 web2 時(shí)代向 web3 轉(zhuǎn)變，除了 web3 之外，元宇宙也愈演愈熱，在這雙重的趨勢(shì)影響下，從一些國(guó)外的設(shè)計(jì)網(wǎng)站也可以明顯看到設(shè)計(jì)趨勢(shì)也正在發(fā)生著變化。

在這個(gè)夏天，我也加入了 web3 這個(gè)大隊(duì)列，經(jīng)過幾個(gè)月的學(xué)習(xí)及了解，梳理了一些與 web3、元宇宙相關(guān)的設(shè)計(jì)趨勢(shì)，跟大家進(jìn)行一次長(zhǎng)文多圖的分享。

不知道什么是元宇宙的設(shè)計(jì)師，先看這篇：

一、設(shè)計(jì)風(fēng)格

web2 的時(shí)代，主要是移動(dòng)端的時(shí)代，在 2013 年蘋果推出了 iOS7 扁平化設(shè)計(jì)風(fēng)格之后，整個(gè)行業(yè)也在跟隨著變化，這 10 年間是一個(gè)扁平化的設(shè)計(jì)時(shí)代。隨著 web3 的到來，從移動(dòng)端設(shè)備再回歸到電腦 PC，設(shè)計(jì)上可以做的事情也就更多了，整個(gè)設(shè)計(jì)風(fēng)格也有了一些新的變化。

1. 光感設(shè)計(jì)

電腦的大屏化及高清化，可以讓更多設(shè)計(jì)的質(zhì)感表現(xiàn)得更加淋漓盡致，因此，一種全新的設(shè)計(jì)風(fēng)格正在席卷各大設(shè)計(jì)網(wǎng)站，同時(shí)我們也可以從一些 web3 的網(wǎng)站看到這類的風(fēng)格。這是一種區(qū)別于常規(guī)的漸變風(fēng)格、彌散風(fēng)格、毛玻璃等等類型的全新風(fēng)格。

質(zhì)感的表現(xiàn)更加趨向光影影響之后的虛擬寫實(shí)化表現(xiàn)，我把它定義為光感設(shè)計(jì)（lightning design），光感設(shè)計(jì)風(fēng)格自然流露著未來感、科技感，特別適合元宇宙、web3、NFT 等內(nèi)容的調(diào)性。我們通過一些案例來感受下：

網(wǎng)站案例

細(xì)節(jié)的體現(xiàn)

除了大感覺的光感表現(xiàn)，很多細(xì)節(jié)還會(huì)體現(xiàn)在文字的設(shè)計(jì)、按鈕設(shè)計(jì)、邊框細(xì)節(jié)等等。

結(jié)合動(dòng)效光感的設(shè)計(jì)

除了靜態(tài)的光感表達(dá)，還可以看到很多結(jié)合動(dòng)效設(shè)計(jì)的光感表達(dá)。

2. 賽博朋克

在早兩年，賽博朋克的風(fēng)格就已經(jīng)開始流行起來了，但更多是被應(yīng)用在插畫、電影影像、海報(bào)、游戲、動(dòng)漫之類。

理解一種風(fēng)格，我們首先得理解這個(gè)概念：

這種對(duì)比沖突的視覺感受，很適合用來表達(dá) web3、元宇宙與現(xiàn)實(shí)的差異感，因此，我們?cè)?behance 上也看到了越來越多的這類 UI（網(wǎng)頁(yè)）的作品出現(xiàn)，可以更“夸張”的表達(dá)設(shè)計(jì)，讓 web3 的人類直觀的感受到與 web2 扁平化時(shí)代的視覺差異。

3. 像素電子風(fēng)

在梳理趨勢(shì)的過程中，發(fā)現(xiàn)很多 web3 的鏈游會(huì)采用這種風(fēng)格。像素風(fēng)格本身就具有很好的趣味性，可以讓玩家感受到濃濃的復(fù)古電子感調(diào)性，同時(shí)也符合復(fù)古設(shè)計(jì)的大趨勢(shì)。

除了一些網(wǎng)站的設(shè)計(jì)，像素風(fēng)格也是很多 NFT 會(huì)采用的風(fēng)格之一

二、標(biāo)題文字設(shè)計(jì)

在大趨勢(shì)的影響下，文字的設(shè)計(jì)也有些許變化，整體會(huì)更迎合 web3 的表達(dá)，可以看到更具有未來感、科技感的表現(xiàn)。

1. 大寫粗體

在 web3 相關(guān)的網(wǎng)站（比如 mask、galxe、setinmerge、cosmos）能夠直觀的看到粗體標(biāo)題字依舊流行，但相比之前的會(huì)更粗。

2. 賽博質(zhì)感漸變字體

配合光感設(shè)計(jì)和賽博朋克的風(fēng)格表現(xiàn)，整體的標(biāo)題會(huì)利用很多質(zhì)感表達(dá)和對(duì)比表達(dá)的技法。

3. 融合對(duì)比

融合對(duì)比的方式有比較多種，常見的是使用漸變色、單色等方法對(duì)部分文字進(jìn)行強(qiáng)調(diào)，線面結(jié)合、或者在細(xì)節(jié)結(jié)構(gòu)中變化。

4. 個(gè)性化字體

還可以從一些設(shè)計(jì)作品中看到一些更個(gè)性化的設(shè)計(jì)，比如：更具未來感的字體、像素字體、機(jī)甲風(fēng)字體

這里推薦幾個(gè)常用的英文粗體：Gotham、Montserrat、Barlow、BladeRunnerMovie、Airbus Special，中文的話可以考慮使用：方正超粗黑或者漢儀超粗黑。

三、更有趣的鼠標(biāo)行為

電腦端的回歸，就有很多可以設(shè)計(jì)的細(xì)節(jié)點(diǎn)，比如鼠標(biāo)的光標(biāo)，基于 three.js 的加持，很多 web3 的網(wǎng)站，在鼠標(biāo)的設(shè)計(jì)上，結(jié)合 hover、點(diǎn)擊、移動(dòng)、滑動(dòng)等操作也做了很多創(chuàng)新類的設(shè)計(jì)。

四、游戲化、場(chǎng)景化設(shè)計(jì)

web3 的主戰(zhàn)場(chǎng)發(fā)生在電腦端，這就意味著，設(shè)計(jì)上有更大的發(fā)揮空間，在 3D 空間設(shè)計(jì)的加持下，場(chǎng)景化設(shè)計(jì)可以更加具有創(chuàng)造力。

1. 豐富的場(chǎng)景化背景

在背景中融合入 3D 或者插圖等設(shè)計(jì)，讓整個(gè)界面更具有視覺的廠里，抓住用戶的視覺感官。

2. 游戲化場(chǎng)景化的 UI 設(shè)計(jì)

在 Web3 的網(wǎng)頁(yè)設(shè)計(jì)，我們可以看到越來越多偏向游戲質(zhì)感設(shè)計(jì)的 UI，甚至有的網(wǎng)站就完全是場(chǎng)景化的表現(xiàn)，特別是在 web3 的大環(huán)境下，VR、AR 的盛行，也讓 UI 有更多可以表現(xiàn)的機(jī)會(huì)。

五、未來可視化信息視覺（全息影像）

web3 作為技術(shù)變革推動(dòng)的產(chǎn)物，很多時(shí)候需要疊加科技感的外在表現(xiàn)，設(shè)計(jì)作為虛擬世界和物理世界的橋梁，為了讓用戶更好的理解來自虛擬世界的信息，可視化的信息圖譜可以更好的表現(xiàn)產(chǎn)品的質(zhì)感。

1. 可視化 UI 設(shè)計(jì)

結(jié)合界面設(shè)計(jì)的可視化 UI，可以表達(dá)出界面滿滿的科技感及未來感

2. VR、AR、HUD

VR、AR 作為元宇宙的主流呈現(xiàn)模式，在 2023 年 Web3 的世界也會(huì)越來越趨于成熟，這 2 年也不斷涌現(xiàn)這方面的設(shè)計(jì)師作品，加上 HUD 的加持，讓全息的視效表達(dá)更加完善。

3. 全息影像視覺呈現(xiàn)

4. 多感體驗(yàn)

元宇宙的盛行，加上 VR/AR 的加持下，Web3 的注定要成為一場(chǎng)聲光電的設(shè)計(jì)革命，區(qū)別于 web2 只有視覺感官的 3D 體驗(yàn)，web3 的 3D 體驗(yàn)還會(huì)加入觸覺、聽覺、嗅覺等體驗(yàn)。尤其是電腦端，視覺與聽覺的配合也變得更加成熟。

寫在最后

趨勢(shì)僅僅能作為我們?nèi)粘９ぷ髦械妮o助，讓我們拓寬眼界，但更多需要設(shè)計(jì)師們自己消化，學(xué)以致用，多把復(fù)雜的信息轉(zhuǎn)化成為自己的知識(shí)，這樣你也會(huì)從一個(gè)初級(jí)的設(shè)計(jì)師慢慢往高級(jí)設(shè)計(jì)師轉(zhuǎn)變。

歡迎關(guān)注作者微信公眾號(hào)：「ID設(shè)計(jì)站」