黑神話的界面如何詮釋東方美學?

2024-10-8    資深UI設計者 隨筆的一些文章

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

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

 

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

關鍵詞:UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司UI交互設計公司、數據可視化設計公司用戶體驗公司、高端網站設計公司

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

分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://sillybuy.com

存檔