未來已來，以太坊前幾天完成了2.0的合并，互聯(lián)網正在從web2時代向web3轉變，除了web3之外，元宇宙也愈演愈熱，在這雙重的趨勢影響下，從一些國外的設計網站也可以明顯看到設計趨勢也正在發(fā)生著變化。
在這個夏天，我也加入了web3這個大隊列，經過幾個月的學習及了解，梳理了一些與web3、元宇宙相關的設計趨勢，跟大家進行一次長文多圖的分享。喜歡記得收藏與轉發(fā)哦！
一、設計風格web2的時代，主要是移動端的時代，在2013年蘋果退出了iOS7扁平化設計風格之后，整個行業(yè)也在跟隨著變化，這10年間是一個扁平化的設計時代。隨著web3的到來，從移動端設備再回歸到電腦PC，設計上可以做的事情也就更多了，整個設計風格也有了一些新的變化。
1.光感設計電腦的大屏化及高清化，可以讓更多設計的質感表現(xiàn)得更加淋漓盡致，因此，一種全新的設計風格正在席卷各大設計網站，同時我們也可以從一些web3的網站看到這類的風格。這是一種區(qū)別于常規(guī)的漸變風格、彌散風格、毛玻璃等等類型的全新風格。質感的表現(xiàn)更加趨向光影影響之后的虛擬寫實化表現(xiàn)，我把它定義為光感設計（lightning design），光感設計風格自然流露著未來感、科技感，特別適合元宇宙、web3、NFT等內容的調性。我們通過一些案例來感受下：
網站案例

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

結合動效光感的設計除了靜態(tài)的光感表達，還可以看到很多結合動效設計的光感表達。

2.賽博朋克在早兩年，賽博朋克的風格就已經開始流行起來了，但更多是被應用在插畫、電影影像、海報、游戲、動漫之類。

理解一種風格，我們首先得理解這個概念賽博朋克（英文: Cyberpunk，又譯“電馭叛客”是“控制論”（Cybernetics）與“朋克”（Punk）的結合詞，以信息技術為主體的科幻故事之分支。它的故事背景大都創(chuàng)建于“低端生活與高等科技的結合”（Combination of Low life and High tech），普遍擁有先進的科學技術，再以一定程度崩壞的社會結構做對比。
這種對比沖突的視覺感受，很適合用來表達web3、元宇宙與現(xiàn)實的差異感，因此，我們在behance上也看到了越來越多的這類UI（網頁）的作品出現(xiàn)，可以更“夸張”的表達設計，讓web3的人類直觀的感受到與web2扁平化時代的視覺差異。

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

除了一些網站的設計，像素風格也是很多NFT會采用的風格之一

二、標題文字設計在大趨勢的影響下，文字的設計也有些許變化，整體會更迎合web3的表達，可以看到更具有未來感、科技感的表現(xiàn)。
1.大寫粗體在web3相關的網站（比如mask、galxe、setinmerge、cosmos）能夠直觀的看到粗體標題字依舊流行，但相比之前的會更粗。

2.賽博質感漸變字體配合光感設計和賽博朋克的風格表現(xiàn)，整體的標題會利用很多質感表達和對比表達的技法。

3.融合對比融合對比的方式有比較多種，常見的是使用漸變色、單色等方法對部分文字進行強調，線面結合、或者在細節(jié)結構中變化。

4.個性化字體還可以從一些設計作品中看到一些更個性化的設計，比如：更具未來感的字體、像素字體、機甲風字體

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

三、更有趣的鼠標行為電腦端的回歸，就有很多可以設計的細節(jié)點，比如鼠標的光標，基于three.js的加持，很多web3的網站，在鼠標的設計上，結合hover、點擊、移動、滑動等操作也做了很多創(chuàng)新類的設計。

?

四、游戲化、場景化設計web3的主戰(zhàn)場發(fā)生在電腦端，這就意味著，設計上有更大的發(fā)揮空間，在3D空間設計的加持下，場景化設計可以更加具有創(chuàng)造力。
1.豐富的場景化背景在背景中融合入3D或者插圖等設計，讓整個界面更具有視覺的廠里，抓住用戶的視覺感官。

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

五、未來可視化信息視覺（全息影像）web3作為技術變革推動的產物，很多時候需要疊加科技感的外在表現(xiàn)，設計作為虛擬世界和物理世界的橋梁，為了讓用戶更好的理解來自虛擬世界的信息，可視化的信息圖譜可以更好的表現(xiàn)產品的質感。
1.可視化UI設計結合界面設計的可視化UI，可以表達出界面滿滿的科技感及未來感

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

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

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

? ? ? ?

寫在最后

趨勢僅僅能作為我們日常工作中的輔助，讓我們拓寬眼界，但更多需要設計師們自己消化，學以致用，多把復雜的信息轉化成為自己的知識，這樣你也會從一個初級的設計師慢慢往高級設計師轉變。喜歡記得收藏與轉發(fā)哦！

本文內容為轉載 僅供個人學習使用