黑神話的界面如何詮釋東方美學(xué)?

2024-10-8    資深UI設(shè)計者

 
 
??當我們提到《黑神話:悟空》,大多數(shù)人首先想到的是其極致的角色和場景美術(shù),確實,它的建模和渲染效果無可挑剔。然而,很多人可能沒注意到,《黑神話》在界面設(shè)計上同樣有著驚人的細節(jié),堪稱細節(jié)狂魔!
 
作為從業(yè)多年的游戲視覺設(shè)計師,今天,我們就來聊聊《黑神話》的界面視覺設(shè)計,看看它是都用到了哪些”表面功夫” 來詮釋東方美學(xué),以及它是如何用
東方元素
去暗示
游戲功能
的。
黑神話的界面如何詮釋東方美學(xué)?
 
 
相信大家已經(jīng)不止一次見過這張《黑神話》的媒體評分匯總圖。
黑神話的界面如何詮釋東方美學(xué)?
 
 
作為主機游戲彰顯榮譽的喜報,一般來說,游戲公司都會根據(jù)游戲風(fēng)格進行一定的視覺化設(shè)計。
 
比如《戰(zhàn)神5》的評分匯總圖中,媒體評分數(shù)字就仿照盧恩符文的字符結(jié)構(gòu)。和《戰(zhàn)神5》的北歐主題形成了視覺化的統(tǒng)一。
黑神話的界面如何詮釋東方美學(xué)?
 
 
而《黑神話》媒體評分數(shù)字的邊框設(shè)計則直接取材自游戲中的靈光點(升級加點)
黑神話的界面如何詮釋東方美學(xué)?
 
 
周圍乍一看像樹枝的圖形元素,取材于咱們中國傳統(tǒng)圖形中的火紋。
 
古人認為火焰就是天空中太陽的象征,是自然力量的體現(xiàn),比如《周禮·冬官· 考工記·畫繢》中提到:“火以圜”,這里的“圜”即指圓環(huán)的形狀,也象征天體。
 
所以在許多諸如青銅器,壁畫和工藝品上,我們都能看到這種環(huán)繞圓形的火焰圖紋裝飾,這種帶圓的火紋也被叫做“火焰珠紋”或者“火焰龍珠紋”,其火焰的方向往往與龍的動勢相對應(yīng),呈東南方向。
黑神話的界面如何詮釋東方美學(xué)?
 
 
但其實還有有一種火勢向正上方的
摩尼火紋
,從名字上不難看出是從
佛像背光
上汲取的靈感,讓這一圖形充滿了佛教的象征意義。
黑神話的界面如何詮釋東方美學(xué)?
 
 
在佛教中,火焰象征智慧,而佛像背光中的火焰紋則象征佛陀的光輝與佛法的普照。
 
在技能樹的界面上,三個階段的技能圖標同樣被設(shè)計成這種樣式。
黑神話的界面如何詮釋東方美學(xué)?
 
 
不僅如此,游戲中還隱藏著很多你可能玩了幾周目都不太可能發(fā)現(xiàn)的設(shè)計細節(jié)。
 
仔細看看靈光點數(shù)字背后的圖案,三個重復(fù)的圖形,每個圖形是不是有點像是如意的形狀。
黑神話的界面如何詮釋東方美學(xué)?
 
 
這種圖形紋樣全稱為
“如意式云頭紋”
,因形似靈芝的頭部,又稱“靈芝云”。古代靈芝被視為仙草,象征吉祥長壽,因此如意的頭部設(shè)計往往采用靈芝的造型。
 
此外,仔細觀察已開悟的按鈕,你會發(fā)現(xiàn)其中暗藏著
回形紋
,中心的圖形巧妙地構(gòu)成了佛教的萬字符。
黑神話的界面如何詮釋東方美學(xué)?
 
 
黑神話的界面如何詮釋東方美學(xué)?
 
 
這些精妙的設(shè)計不僅體現(xiàn)了游戲滿滿的誠意和
“表面功夫”
,還體現(xiàn)了游戲界面在扁平風(fēng)格下極高的完成度和文化背景。因此,在界面視覺設(shè)計中,
圖形
其實是我們深入細化界面的一個絕佳載體,并且也能夾帶一些文化背景的“私貨”進去。
 
若繼續(xù)深挖黑神話中的圖形,我們會發(fā)現(xiàn)其設(shè)計的
“里子”
同樣耐人尋味,其設(shè)計絕非是
“繡花枕頭”
。
黑神話的界面如何詮釋東方美學(xué)?
 
 
《黑神話》設(shè)計的
“里子”
正是游戲中使用的視覺元素與功能暗示上的完美結(jié)合。它的設(shè)計并不僅僅追求美觀,還暗示了界面或圖形的功能與意圖,體現(xiàn)了設(shè)計師對傳統(tǒng)東方元素意義的挖掘。
 
例如,加成道具的背景底板圖案被設(shè)計為桃子的剪影,這并非隨意為之。
 
桃子在中國傳統(tǒng)文化中象征健康與長壽,這與加成道具提升血量和體力的功能完美契合。
黑神話的界面如何詮釋東方美學(xué)?
 
 
再看
“靈光點”
,也就是游戲中的技能點圖標。從圖形上來看,它與道教中的“三花聚頂”概念相呼應(yīng),三個水滴狀圖形向中心匯聚。
黑神話的界面如何詮釋東方美學(xué)?
 
 
三花聚頂指的是通過修煉精、氣、神,使三者能量在頭頂匯聚,達到身心統(tǒng)一與升華的境界,這恰好契合游戲中技能點用于提升角色能力的功能。
 
除此之外,圖標旁的三個裝飾點也象征著孫悟空在
三星洞
中學(xué)習(xí)各種神通法術(shù),這與技能點用于提升技能的設(shè)定不謀而合。
 
同時,該圖標也和下圖佛教中心的三太極標志有著幾分相似。這巧妙融匯了道教與佛教的元素,也與《西游記》中多宗教融合的文化內(nèi)涵相呼應(yīng)。
黑神話的界面如何詮釋東方美學(xué)?
 
 
界面背景上的每幅畫也都十分考究,例如在
修行界面
中,背景使用了菩提老祖教授孫悟空本領(lǐng)的壁畫,這讓背景所傳達的含義與界面提升角色技能的功能相契合。
黑神話的界面如何詮釋東方美學(xué)?
 
 
畫家王怡新繪制的壁畫:《盤中之謎》
畫家王怡新繪制的壁畫:《盤中之謎》
 
在第二關(guān)獅駝嶺的隱藏地圖中,我們也能看到這幅壁畫。這幅畫運用工筆重彩技法,線條細膩、設(shè)色典雅。
黑神話的界面如何詮釋東方美學(xué)?
 
 
而在
游記界面
,也就是游戲的故事圖鑒系統(tǒng),背景畫名為
《真經(jīng)有價》
,再現(xiàn)了唐僧師徒四人在靈山為阿儺、伽葉奉上賄賂后,換得真經(jīng)卻發(fā)現(xiàn)經(jīng)書是空白的,最終返回靈山,用紫金缽換取真正有字的經(jīng)書的典故。也表示了師徒四人歷經(jīng)九九八十一難,最終取得真經(jīng)的情景。
黑神話的界面如何詮釋東方美學(xué)?
 
 
畫家王宇為繪制的:《真經(jīng)有價》
畫家王宇為繪制的:《真經(jīng)有價》
 
 的確《黑神話》的視覺設(shè)計充滿了無數(shù)的細節(jié)與隱喻,但一個優(yōu)秀的設(shè)計真的只是簡單地往上
堆疊元素
嗎?
黑神話的界面如何詮釋東方美學(xué)?
 
 
答案當然是否定的,《黑神話》的設(shè)計可以說是十分克制且思路清晰。
 
在此前的試玩版中,我們看到的界面有些雜亂,物品欄和角色屬性的配色過于花哨,還顯得有些凌亂,稱不上優(yōu)秀。然而,在正式版中,這些問題得到了極大的改善,而這一切都歸功于設(shè)計的克制。
上圖為測試版
上圖為測試版
 
設(shè)計師克制了不同色相的使用。在道具欄中,未選中的道具不再像之前那樣色彩斑斕,而是僅用一個小橫條來表示品質(zhì)。(想起了被策劃拿槍指著讓把品質(zhì)底板做顯眼的恐懼)
 
只有當?shù)谰弑贿x中時,才會顯示完整的品質(zhì)顏色,并且用色也變得更加干凈、清新。
上圖為正式版
上圖為正式版
 
這樣的設(shè)計不僅讓玩家能夠更加專注于當前選中的道具,還提升了視覺的高級感,同時提升了功能的體驗和視覺的效果。
 
這也體現(xiàn)了設(shè)計師在用戶體驗上做
“減法”
的清晰思路。
 
在戰(zhàn)斗界面的迭代上我們也能看到類似的
“減法”
 
老版本在角色變身后,界面左右都有特殊的圖形裝飾。
左圖為碧塵、右圖為廣智變身后的血條
左圖為碧塵、右圖為廣智變身后的血條
 
在正式版中,左邊血條上的特殊圖形被去掉了,換成了統(tǒng)一的煙云效果。
上圖為正式版的統(tǒng)一煙云血條
上圖為正式版的統(tǒng)一煙云血條
 
 
為什么設(shè)計師要這樣做呢?
 
老版本中左下角的圖標表意不明,幾乎只是起到了裝飾作用,無法提供有價值的功能提示。而右下角的變身角色圖形則已經(jīng)具備了展示當前變身角色的功能,半身像的設(shè)計也有更強的角色辨識度。
黑神話的界面如何詮釋東方美學(xué)?
 
 
新版本在此基礎(chǔ)上進一步優(yōu)化,明確了界面各區(qū)域的功能分布。玩家只需關(guān)注左下角的血條信息,右下角則專注于變身角色的狀態(tài),這種清晰的界面布局大大提升了游戲的用戶體驗。
黑神話的界面如何詮釋東方美學(xué)?
 
 
 
‍那為什么設(shè)計成煙云的造型?
 
這其實是在和角色變身時的特效做關(guān)聯(lián),讓角色特效和界面圖形有更多的呼應(yīng)。‍‍
黑神話的界面如何詮釋東方美學(xué)?
 
 
變身廣智的煙云特效
 
如果對比歷代版本的截圖與正式版,我們可以清晰地看到許多顯而易見的界面優(yōu)化。這也說明了,界面設(shè)計往往需要在多個版本中不斷地迭代更新,才能最終打磨出理想的效果。‍
黑神話的界面如何詮釋東方美學(xué)?
 
 
‍《黑神話:悟空》的發(fā)布,毫無疑問將成為中國游戲發(fā)展史上的重要里程碑。它不僅憑借出色的視覺效果和創(chuàng)新的玩法贏得了全球玩家的廣泛贊譽,游戲界面設(shè)計也同樣充滿了獨特的魅力。
 
表面上,界面中運用了大量的文化符號,但如果深入探究其“里子”,你會發(fā)現(xiàn)設(shè)計師對傳統(tǒng)元素背后意義與界面功能的巧妙融合。
 
通過精準的設(shè)計“減法”迭代,游戲的用戶體驗得到了極大提升。每一個細節(jié),都彰顯了設(shè)計師的匠心獨運與創(chuàng)造力。
黑神話的界面如何詮釋東方美學(xué)?
 
 
設(shè)計之路從來不是一帆風(fēng)順,就像《西游記》中孫悟空護送師父西天取經(jīng)的旅程一樣,充滿了重重挑戰(zhàn)和艱難險阻。
 
然而,正如孫悟空一路上不斷找人相助、借用各種法寶來化解危機一樣,我們的目標就是幫助更多的“
設(shè)計取經(jīng)人
”,突破九九八十一難,最終成功取得屬于你們的“真經(jīng)”!
 
 

作者:葉子學(xué)堂
鏈接:https://www.zcool.com.cn/article/ZMTYzNDE3Ng==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

 

藍藍設(shè)計(m.sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

關(guān)鍵詞:UI咨詢、UI設(shè)計服務(wù)公司軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司

銀行金融軟件UI界面設(shè)計、能源及監(jiān)控軟件UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件UI界面設(shè)計、醫(yī)療行業(yè)軟件UI界面設(shè)計、教育行業(yè)軟件UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)、軟件wpf開發(fā)軟件vue開發(fā)

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://m.sillybuy.com

存檔