游戏常识科普(游戏基础知识游戏中HUD与图标设计的规律)(1)

HUD是Heads-up Display的缩写,原本指飞机上配备的平视显示器,它会把重要的仪表信息以光学字符和图形的形式进行显示,投影在驾驶员的正前方,这样就不会分散操作者的注意力。

游戏常识科普(游戏基础知识游戏中HUD与图标设计的规律)(2)

而在一款游戏中,HUD是游戏世界与玩家交互最有效的方式,能够用视觉效果向玩家传达信息的元素都可以称之为HUD.设计师常用的HUD元素是画中画小屏幕以及各种图标。它们负责向玩家传达各种关键信息,告诉玩家应该做什么,应该去哪里。

今天要和大家聊的就是游戏中常见的HUD和图标设计。


一、常见的几个HUD元素

不同游戏有着不同的HUD元素,在这一节我们选择讨论一些较为常见和通用的HUD元素,希望能够起到抛砖引玉的作用。

1、道具栏

游戏常识科普(游戏基础知识游戏中HUD与图标设计的规律)(3)

《两个世界2》中的道具栏

这是角色扮演和冒险类游戏的主要部分,道具栏可以让玩家查看并使用游戏过程中收集到的物品。钥匙、药水、任务物品还有武器装备,这些全都是道具栏中的常见物品。

因为玩家往往需要快捷地使用道具栏中的某些物品,比如药水或者投掷物,所以现在的游戏中经常可以把道具拖曳到快捷键位上便于使用。

如同本节开头《两个世界2》的游戏截图,现在储物箱系统正在逐渐被弱化,玩家们背包的容量越来越大,这可以让玩家们很方便地查看他们辛苦收集到的战利品。当然,储物箱对于有“负重”概念的游戏来说还是非常关键的(比如《质量效应3》中异能者携带重型武器会导致技能充能CD变慢,所以大家伙们只能呆在仓库里,而主角携带小巧的轻型武器)。

道具图标的设计可以用统一只占一格的图标,也可以采用较为“逼真”的大小不同的图标,这其实从另一方面反应了制作者的游戏设计理念——给予玩家对道具的选择空间能够有多大,玩家是否在道具携带上需要花费更多的脑力来进行筹划。

游戏常识科普(游戏基础知识游戏中HUD与图标设计的规律)(4)

《生化危机2重制版》的道具界面,大型武器“占地”较多

对于有松鼠病(酷爱收集)的玩家,很多游戏内会提供额外的永久存放处(比如以前GTA里面的车库),毕竟没人愿意随便丢弃那些千辛万苦弄来的东西。


2、小地图和大地图

大小地图系统从诞生到现在给玩家提供了越来越多的细节,可以显示游戏中关键事件的位置或者勾勒出当前场地的大致情况。游戏中大小地图的设计现在往往包含下面的几个要点。

设计师会在地图上做一些图例,玩家们可以在打开地图的时候一样就看出哪些是任务,哪些是传送点,哪些是出入口,哪些又是关键道具的所在地。

游戏常识科普(游戏基础知识游戏中HUD与图标设计的规律)(5)

《魔兽世界》中的地图,黄色叹号代表任务,右侧黄点代表传送点

小地图中会用箭头等效果为玩家指示方向,这样做可以避免玩家频繁打开大地图造成对游戏的“跳脱感”。《细胞分裂》中采用了“目标方向定位”和“目标距离计数”的方式,

游戏常识科普(游戏基础知识游戏中HUD与图标设计的规律)(6)

《细胞分裂:断罪》中对目标位置进行计数

现在这样的方式也越来越流行,因为除了能够引导玩家不再迷路之外,还提供了距离监控,让玩家有了更强的掌控感。除了用数字进行计数之外,很多游戏也采用了颜色计数,比如较远是红色指示器,中等距离是黄色,较近是绿色这样。

游戏地图的视觉效果往往也会根据游戏题材来进行变更,比如剑与魔法的世界地图会画在羊皮纸上,科幻题材的游戏可以使用高科技的全息显示(比如本文后续将会提到的《死亡空间》),就算是大小地图系统也不能够破坏游戏视觉风格的一致性。


3、弹药/资源槽

无论是弹药还是法力值或者是怒气,它们都是关键的战斗资源,所以需要把它们放在一个比较醒目的位置。

《幽灵行动4:未来战士》中采用了非常聪明的做法,把关键的一些信息直接以浮动的形式显示在了主角身边,相比放在左下或者右下更加便于查看,该作的HUD设计亮点还有很多,在此就不一一赘述。

游戏常识科普(游戏基础知识游戏中HUD与图标设计的规律)(7)

《幽灵行动4:未来战士》独具特色的HUD设计

另外就算玩家已经处于弹药无限的状态,仍然有必要继续显示武器弹药,因为这还可以提示玩家正在使用的武器是什么,《合金弹头》系列就是一个例子。

游戏常识科普(游戏基础知识游戏中HUD与图标设计的规律)(8)

由于没有武器图标,《合金弹头》中可以根据弹药量对武器进行区分


4、血量槽

多数游戏需要血量槽来提示玩家还能存活多久,在所有HUD元素中,血量槽不仅重要,并且形象根据游戏不同也会变得五花八门。

血量槽通常是红色或者绿色填充的长条形或者图标,当然也可以设计得更具特色,比如《忍者龟:曼哈顿变种》的血量槽就是披萨饼。

游戏常识科普(游戏基础知识游戏中HUD与图标设计的规律)(9)

《忍者龟:曼哈顿变种》左上角以披萨饼的方式表现血量

血量槽同时还可以用不同的颜色表现护盾、屏障,当这些防护手段被击破之后才会伤害到角色血量。

游戏常识科普(游戏基础知识游戏中HUD与图标设计的规律)(10)

《质量效应3》中紫色显示的屏障被打破之后才会开始消耗生命值

当代游戏设计理念中,除了传统的“玩家受到伤害扣除血量”之外,越来越注重对恢复的设计。不少新游戏里玩家在一段时间不受到任何伤害之后都会开始恢复血量或者护盾,《守望先锋》里的禅雅塔和《光晕》里的士官长就是例子。

另外“受伤”除了用扣除血量表现以外,用别的一些特效表现玩家的受伤状态也给游戏增色不少,像是《神秘海域》系列里玩家一旦受到伤害屏幕就会变暗,并且配上沉重的心跳声。


5、瞄准镜/准心

瞄准镜/准心可以帮助玩家锁定射程内的目标,瞄准镜的种类从简单到复杂应有尽有,可以是一个红色的激光点,也可以是复杂的提供目标血量、武器等信息的追踪系统。

游戏常识科普(游戏基础知识游戏中HUD与图标设计的规律)(11)

《幽灵行动4:未来战士》(左),CS1.6(右)

值得一提的是,没有任何一款游戏应该使用白色的瞄准镜/准心,因为这会让它们在一些场景下难以看清。

不少游戏还采用了当玩家瞄准正确的时候瞄准镜的中心或者准心会变色的设定,给玩家开火的提示,这可以作为玩家是否应该开火的重要线索,毕竟多数游戏里子弹并不是无限使用的。


二、游戏中图标设计的通用原则

游戏常识科普(游戏基础知识游戏中HUD与图标设计的规律)(12)

图标丰富的《魔兽世界》

很多游戏都包涵有大量的图标,它们可以表现道具装备、技能、可收集的材料,等等。这些琳琅满目的图标告诉了玩家他们会有多钟选择的权利,有很多事情可以去做,又有很多东西等待他们去探索。

多数游戏中的图标制作都会遵循下面的这些常见规律。

1、图标颜色必须符合代表事物的属性,比如红色调的火球术,蓝色调的寒冰箭。有的游戏中颜色甚至代表了某种特殊的意义,比如给玩家“引路”的图标颜色被统一,或者是某一个角色的技能有自己的专属色调,这些都让图标看起来是一个系列的。

游戏常识科普(游戏基础知识游戏中HUD与图标设计的规律)(13)

《激战2》中骷髅和暗绿色为主的死灵法师图标

游戏常识科普(游戏基础知识游戏中HUD与图标设计的规律)(14)

《英雄联盟》中触手和海洋颜色为主题的俄洛伊图标


2、通常不在图标上使用文字,因为首先要考虑到需要按照不同分辨率让其进行自适应,其次还要面对字太小让人看不清楚的问题,所以很少见在图标上使用文字的情况。


3、也没有游戏在设计图标的时候把多种视觉元素(比如文本 字符 logo)堆砌在一个图标上面。因为设计师们知道这会让本来就不大的图标显得更加凌乱。


4、几乎所有的游戏都会给图标描上边框,让它们从游戏背景中脱离出来。你可以想象如果把这些游戏图标的边框去掉会怎么样……

游戏常识科普(游戏基础知识游戏中HUD与图标设计的规律)(15)

《阿玛拉王国》中给图标描了圆形的边框


5、通常玩家把鼠标移动到图标上之后,会显示出一段图标代表物的较详细的介绍。如果需要通过点击等操作才能调出详情界面的话,无疑会消耗玩家的耐心。

游戏常识科普(游戏基础知识游戏中HUD与图标设计的规律)(16)


6、某些关键图标被选择的时候,会有一些反应和变化,比如变色或者声音。这是对玩家们操作的一种反馈,让玩家确认是否做那个操作以及操作是否成功,如果没有这些反馈的话玩家肯定会一头雾水。

游戏常识科普(游戏基础知识游戏中HUD与图标设计的规律)(17)

《魔兽争霸3》中选择同一个编队中不同单位头像会有相应提示


7、现在一些游戏的图标有了一定的“吸引力”,也就是在图标附近进行操作,哪怕点歪了或者在触摸屏上按歪了,但操作一样会正确执行,这在并不以操作精度见长的手游时代更加多见。


8、有很多游戏图标已经形成了“不成文的规定”,比如十字标志、红心、食物、饮料代表治疗物品;1UP代表加一条命;感叹号和问号代表可互动的NPC;金币代表可以获得的游戏货币;手柄或者键盘标志常用作QTE事件的提示。

游戏常识科普(游戏基础知识游戏中HUD与图标设计的规律)(18)

经典的“1UP”


三、HUD元素的摆放位置

那么有了如此多的图标和HUD元素,通常它们会出现在哪里呢?下面我们用一张大螺丝的图作为例子,你可以把这只大螺丝想象成任何游戏中的怪物,包括FPS,ACG,TPS,还有本体MMORPG.

游戏常识科普(游戏基础知识游戏中HUD与图标设计的规律)(19)

如上图所示,通常来说游戏画面中间和附近的区域被称为“安全区域”,在正常游戏过程当中,设计师们会尽量确保这个区域的图像不会模糊或者变花,因为这里是显示游戏中所有关键行为发生的区域,所以在默认状态下,一般不把HUD放在这里,当然了,准心、瞄准指示器除外。

那么当遇到需要全屏幕显示的HUD元素该怎么处理呢?《死亡空间》这部作品就以教科书级别的方式告诉了我们——做成半透明的全息屏幕!讲道理《死亡空间》的HUD设计真心称得上是“艺术”~

游戏常识科普(游戏基础知识游戏中HUD与图标设计的规律)(20)

这种设计不仅美观有科技质感,完美契合游戏的题材,并且不会让玩家有从游戏世界脱离出来的感觉,也不会让路痴玩家们产生困惑——“我具体是在哪啊……”反观传统游戏的全屏HUD切换方式就会有这些毛病。

游戏常识科普(游戏基础知识游戏中HUD与图标设计的规律)(21)

传统游戏切出地图的方式会有跳脱感,图为《猎鹿人》

屏幕的左上角通常用来显示非常重要的信息,比如血槽、资源、成就点数等等。

游戏常识科普(游戏基础知识游戏中HUD与图标设计的规律)(22)

血量等关键信息显示在屏幕左上角,图为《巫师:狂猎》

因为大多数现代人的阅读习惯是从左往右进行,把重要信息放在左侧的话,玩家对其观察完毕之后会自然而然地把目光直接返回游戏的中心位置,这种符合生理习惯的设计方式会让玩家们感觉较好。

HUD元素、图标放在底部位置也是常见的方式。

游戏常识科普(游戏基础知识游戏中HUD与图标设计的规律)(23)

假设HUD元素放在底部的话,也还不错

但有一个问题,如果不注意的话可能对游戏会产生毁灭性的打击,那就是玩家们的显示器是否会根据游戏自动校准,这一点处理不慎会引起很多麻烦,在论坛上经常会看见有人因为稀奇古怪的分辨率设置导致游戏底部的图像无法看清而发帖求助,所以现在越来越多的游戏在设计靠底部信息的时候会给它们预留一个“安全位置”确保这些关键元素能够正常显示,同样也有越来越多的游戏已经自带了屏幕校准的选项。

对于当代机制和系统越来越复杂的游戏来说,比较大的挑战之一就是如何把大量的HUD元素、图标科学、美观地放到界面上,有的游戏选择挤占大量的屏幕空间,但效果非常糟糕,这让屏幕看起来显得比实际感觉要小,空间不仅会显得拥挤,有时候甚至会显得“幽闭”,下图中是《篝火:被遗忘的土地》的界面,

游戏常识科普(游戏基础知识游戏中HUD与图标设计的规律)(24)

《篝火:被遗忘的土地》略显拥挤的画面是一个小瑕疵

游戏本身素质不错,但小有遗憾的是HUD界面设计上还有待改进,至少不应该让画面显得这么拥挤。

但元素这么多,一股脑放到屏幕上又显得拥挤,到底如何是好呢?《魔兽世界》中玩家对界面插件的应用其实是不错的例子,通过插件,玩家可以自主选择隐藏哪些图标,哪些图标又放在靠近中央的位置进行凸显。

游戏常识科普(游戏基础知识游戏中HUD与图标设计的规律)(25)

同一种职业,通过查件可以调整出不一样的HUD样式

后续或许会有更多能让玩家自主布局HUD界面的游戏和我们见面。


以上就是本次对游戏中HUD和图标设计的讨论,我们下次再见~

,