優質Web3設計案例，這將是Web3時代的設計趨勢！

Sponsor

未來已來，以太坊前幾天完成了2.0的合并，互聯網正在從web2時代向web3轉變，除了web3之外，元宇宙也愈演愈熱，在這雙重的趨勢影響下，從一些國外的設計網站也可以明顯看到設計趨勢也正在發生著變化。

在這個夏天，我也加入了web3這個大隊列，經過幾個月的學習及了解，梳理了一些與web3、元宇宙相關的設計趨勢，跟大家進行一次長文多圖的分享。

一、設計風格

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

1.光感設計

電腦的大屏化及高清化，可以讓更多設計的質感表現得更加淋漓盡致，因此，一種全新的設計風格正在席卷各大設計網站，同時我們也可以從一些web3的網站看到這類的風格。這是一種區別于常規的漸變風格、彌散風格、毛玻璃等等類型的全新風格。

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

網站案例

細節的體現

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

2.賽博朋克

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

理解一種風格，我們首先得理解這個概念

賽博朋克（英文: Cyberpunk，又譯“電馭叛客”是“控制論”（Cybernetics）與“朋克”（Punk）的結合詞，以信息技術為主體的科幻故事之分支。它的故事背景大都創建于“低端生活與高等科技的結合”（Combination of Low life and High tech），普遍擁有先進的科學技術，再以一定程度崩壞的社會結構做對比。

?

這種對比沖突的視覺感受，很適合用來表達web3、元宇宙與現實的差異感，因此，我們在behance上也看到了越來越多的這類UI（網頁）的作品出現，可以更“夸張”的表達設計，讓web3的人類直觀的感受到與web2扁平化時代的視覺差異。

3.像素電子風

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

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

二、標題文字設計

在大趨勢的影響下，文字的設計也有些許變化，整體會更迎合web3的表達，可以看到更具有未來感、科技感的表現。

1.大寫粗體

在web3相關的網站（比如mask、galxe、setinmerge、cosmos）能夠直觀的看到粗體標題字依舊流行，但相比之前的會更粗。

2.賽博質感漸變字體

配合光感設計和賽博朋克的風格表現，整體的標題會利用很多質感表達和對比表達的技法。

3.融合對比

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

4.個性化字體

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

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

三、更有趣的鼠標行為

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

四、游戲化、場景化設計

web3的主戰場發生在電腦端，這就意味著，設計上有更大的發揮空間，在3D空間設計的加持下，場景化設計可以更加具有創造力。

1.豐富的場景化背景

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

2.游戲化場景化的UI設計

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

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

web3作為技術變革推動的產物，很多時候需要疊加科技感的外在表現，設計作為虛擬世界和物理世界的橋梁，為了讓用戶更好的理解來自虛擬世界的信息，可視化的信息圖譜可以更好的表現產品的質感。

1.可視化UI設計

結合界面設計的可視化UI，可以表達出界面滿滿的科技感及未來感

2.VR、AR、HUD

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

3.全息影像視覺呈現

4、多感體驗

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

，時長00:35

寫在最后

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

來源：ID設計站（ID：IDfor_all）

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。