黑神话的界面如何诠释东方美学?

2024-10-8    资深UI设计者 随笔的一些文章

 
 
​​当我们提到《黑神话:悟空》,大多数人首先想到的是其极致的角色和场景美术,确实,它的建模和渲染效果无可挑剔。然而,很多人可能没注意到,《黑神话》在界面设计上同样有着惊人的细节,堪称细节狂魔!
 
作为从业多年的游戏视觉设计师,今天,我们就来聊聊《黑神话》的界面视觉设计,看看它是都用到了哪些”表面功夫” 来诠释东方美学,以及它是如何用
东方元素
去暗示
游戏功能
的。
黑神话的界面如何诠释东方美学?
 
 
相信大家已经不止一次见过这张《黑神话》的媒体评分汇总图。
黑神话的界面如何诠释东方美学?
 
 
作为主机游戏彰显荣誉的喜报,一般来说,游戏公司都会根据游戏风格进行一定的视觉化设计。
 
比如《战神5》的评分汇总图中,媒体评分数字就仿照卢恩符文的字符结构。和《战神5》的北欧主题形成了视觉化的统一。
黑神话的界面如何诠释东方美学?
 
 
而《黑神话》媒体评分数字的边框设计则直接取材自游戏中的灵光点(升级加点)
黑神话的界面如何诠释东方美学?
 
 
周围乍一看像树枝的图形元素,取材于咱们中国传统图形中的火纹。
 
古人认为火焰就是天空中太阳的象征,是自然力量的体现,比如《周礼·冬官· 考工记·画缋》中提到:“火以圜”,这里的“圜”即指圆环的形状,也象征天体。
 
所以在许多诸如青铜器,壁画和工艺品上,我们都能看到这种环绕圆形的火焰图纹装饰,这种带圆的火纹也被叫做“火焰珠纹”或者“火焰龙珠纹”,其火焰的方向往往与龙的动势相对应,呈东南方向。
黑神话的界面如何诠释东方美学?
 
 
但其实还有有一种火势向正上方的
摩尼火纹
,从名字上不难看出是从
佛像背光
上汲取的灵感,让这一图形充满了佛教的象征意义。
黑神话的界面如何诠释东方美学?
 
 
在佛教中,火焰象征智慧,而佛像背光中的火焰纹则象征佛陀的光辉与佛法的普照。
 
在技能树的界面上,三个阶段的技能图标同样被设计成这种样式。
黑神话的界面如何诠释东方美学?
 
 
不仅如此,游戏中还隐藏着很多你可能玩了几周目都不太可能发现的设计细节。
 
仔细看看灵光点数字背后的图案,三个重复的图形,每个图形是不是有点像是如意的形状。
黑神话的界面如何诠释东方美学?
 
 
这种图形纹样全称为
“如意式云头纹”
,因形似灵芝的头部,又称“灵芝云”。古代灵芝被视为仙草,象征吉祥长寿,因此如意的头部设计往往采用灵芝的造型。
 
此外,仔细观察已开悟的按钮,你会发现其中暗藏着
回形纹
,中心的图形巧妙地构成了佛教的万字符。
黑神话的界面如何诠释东方美学?
 
 
黑神话的界面如何诠释东方美学?
 
 
这些精妙的设计不仅体现了游戏满满的诚意和
“表面功夫”
,还体现了游戏界面在扁平风格下极高的完成度和文化背景。因此,在界面视觉设计中,
图形
其实是我们深入细化界面的一个绝佳载体,并且也能夹带一些文化背景的“私货”进去。
 
若继续深挖黑神话中的图形,我们会发现其设计的
“里子”
同样耐人寻味,其设计绝非是
“绣花枕头”
黑神话的界面如何诠释东方美学?
 
 
《黑神话》设计的
“里子”
正是游戏中使用的视觉元素与功能暗示上的完美结合。它的设计并不仅仅追求美观,还暗示了界面或图形的功能与意图,体现了设计师对传统东方元素意义的挖掘。
 
例如,加成道具的背景底板图案被设计为桃子的剪影,这并非随意为之。
 
桃子在中国传统文化中象征健康与长寿,这与加成道具提升血量和体力的功能完美契合。
黑神话的界面如何诠释东方美学?
 
 
再看
“灵光点”
,也就是游戏中的技能点图标。从图形上来看,它与道教中的“三花聚顶”概念相呼应,三个水滴状图形向中心汇聚。
黑神话的界面如何诠释东方美学?
 
 
三花聚顶指的是通过修炼精、气、神,使三者能量在头顶汇聚,达到身心统一与升华的境界,这恰好契合游戏中技能点用于提升角色能力的功能。
 
除此之外,图标旁的三个装饰点也象征着孙悟空在
三星洞
中学习各种神通法术,这与技能点用于提升技能的设定不谋而合。
 
同时,该图标也和下图佛教中心的三太极标志有着几分相似。这巧妙融汇了道教与佛教的元素,也与《西游记》中多宗教融合的文化内涵相呼应。
黑神话的界面如何诠释东方美学?
 
 
界面背景上的每幅画也都十分考究,例如在
修行界面
中,背景使用了菩提老祖教授孙悟空本领的壁画,这让背景所传达的含义与界面提升角色技能的功能相契合。
黑神话的界面如何诠释东方美学?
 
 
画家王怡新绘制的壁画:《盘中之谜》
画家王怡新绘制的壁画:《盘中之谜》
 
在第二关狮驼岭的隐藏地图中,我们也能看到这幅壁画。这幅画运用工笔重彩技法,线条细腻、设色典雅。
黑神话的界面如何诠释东方美学?
 
 
而在
游记界面
,也就是游戏的故事图鉴系统,背景画名为
《真经有价》
,再现了唐僧师徒四人在灵山为阿傩、伽叶奉上贿赂后,换得真经却发现经书是空白的,最终返回灵山,用紫金钵换取真正有字的经书的典故。也表示了师徒四人历经九九八十一难,最终取得真经的情景。
黑神话的界面如何诠释东方美学?
 
 
画家王宇为绘制的:《真经有价》
画家王宇为绘制的:《真经有价》
 
 的确《黑神话》的视觉设计充满了无数的细节与隐喻,但一个优秀的设计真的只是简单地往上
堆叠元素
吗?
黑神话的界面如何诠释东方美学?
 
 
答案当然是否定的,《黑神话》的设计可以说是十分克制且思路清晰。
 
在此前的试玩版中,我们看到的界面有些杂乱,物品栏和角色属性的配色过于花哨,还显得有些凌乱,称不上优秀。然而,在正式版中,这些问题得到了极大的改善,而这一切都归功于设计的克制。
上图为测试版
上图为测试版
 
设计师克制了不同色相的使用。在道具栏中,未选中的道具不再像之前那样色彩斑斓,而是仅用一个小横条来表示品质。(想起了被策划拿枪指着让把品质底板做显眼的恐惧)
 
只有当道具被选中时,才会显示完整的品质颜色,并且用色也变得更加干净、清新。
上图为正式版
上图为正式版
 
这样的设计不仅让玩家能够更加专注于当前选中的道具,还提升了视觉的高级感,同时提升了功能的体验和视觉的效果。
 
这也体现了设计师在用户体验上做
“减法”
的清晰思路。
 
在战斗界面的迭代上我们也能看到类似的
“减法”
 
老版本在角色变身后,界面左右都有特殊的图形装饰。
左图为碧尘、右图为广智变身后的血条
左图为碧尘、右图为广智变身后的血条
 
在正式版中,左边血条上的特殊图形被去掉了,换成了统一的烟云效果。
上图为正式版的统一烟云血条
上图为正式版的统一烟云血条
 
 
为什么设计师要这样做呢?
 
老版本中左下角的图标表意不明,几乎只是起到了装饰作用,无法提供有价值的功能提示。而右下角的变身角色图形则已经具备了展示当前变身角色的功能,半身像的设计也有更强的角色辨识度。
黑神话的界面如何诠释东方美学?
 
 
新版本在此基础上进一步优化,明确了界面各区域的功能分布。玩家只需关注左下角的血条信息,右下角则专注于变身角色的状态,这种清晰的界面布局大大提升了游戏的用户体验。
黑神话的界面如何诠释东方美学?
 
 
 
‍那为什么设计成烟云的造型?
 
这其实是在和角色变身时的特效做关联,让角色特效和界面图形有更多的呼应。‍‍
黑神话的界面如何诠释东方美学?
 
 
变身广智的烟云特效
 
如果对比历代版本的截图与正式版,我们可以清晰地看到许多显而易见的界面优化。这也说明了,界面设计往往需要在多个版本中不断地迭代更新,才能最终打磨出理想的效果。‍
黑神话的界面如何诠释东方美学?
 
 
‍《黑神话:悟空》的发布,毫无疑问将成为中国游戏发展史上的重要里程碑。它不仅凭借出色的视觉效果和创新的玩法赢得了全球玩家的广泛赞誉,游戏界面设计也同样充满了独特的魅力。
 
表面上,界面中运用了大量的文化符号,但如果深入探究其“里子”,你会发现设计师对传统元素背后意义与界面功能的巧妙融合。
 
通过精准的设计“减法”迭代,游戏的用户体验得到了极大提升。每一个细节,都彰显了设计师的匠心独运与创造力。
黑神话的界面如何诠释东方美学?
 
 
设计之路从来不是一帆风顺,就像《西游记》中孙悟空护送师父西天取经的旅程一样,充满了重重挑战和艰难险阻。
 
然而,正如孙悟空一路上不断找人相助、借用各种法宝来化解危机一样,我们的目标就是帮助更多的“
设计取经人
”,突破九九八十一难,最终成功取得属于你们的“真经”!
 
 

作者:叶子学堂
链接:https://www.zcool.com.cn/article/ZMTYzNDE3Ng==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

 

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司

银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

分享本文至:

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档