游戏基础知识——游戏中HUD与图标设计的规律indienova独立游戏

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

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

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

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

1、道具栏

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

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

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

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

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

2、小地图和大地图

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

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

小地图中会用箭头等效果为玩家指示方向,这样做可以避免玩家频繁打开大地图造成对游戏的“跳脱感”。《细胞分裂》中采用了“目标方向定位”和“目标距离计数”的方式,现在这样的方式也越来越流行,因为除了能够引导玩家不再迷路之外,还提供了距离监控,让玩家有了更强的掌控感。除了用数字进行计数之外,很多游戏也采用了颜色计数,比如较远是红色指示器,中等距离是黄色,较近是绿色这样。

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

3、弹药/资源槽

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

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

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

4、血量槽

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

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

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

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

5、瞄准镜/准心

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

屏幕的左上角通常用来显示非常重要的信息,比如血槽、资源、成就点数等等。因为大多数现代人的阅读习惯是从左往右进行,把重要信息放在左侧的话,玩家对其观察完毕之后会自然而然地把目光直接返回游戏的中心位置,这种符合生理习惯的设计方式会让玩家们感觉较好。

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

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

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

THE END
1.电竞战队解说LOGO设计免费生成器首页智能LOGO生成设计生成设计模板素材LOGO定制服务商标注册查询设计攻略 智能生成 智能LOGO生成印章设计生成徽章设计生成图标设计生成班徽设计生成队徽设计生成 设计模版中心 设计类型品牌VI设计查看所有 设计类型 LOGO设计名片设计招牌/门头包装瓶帖包装袋查看所有 https://www.logomaker.com.cn/logo/industry/53/
2.游戏Logo在线免费制作DesignEvo如果要定制一个自己的游戏logo设计,你需要DesignEvo的帮助。查看这些创意十足的logo模板并应用到你自己的设计中吧。 游戏Logo设计三步法 按照下列步骤轻松定制一个完美的游戏Logo吧。 选择模板 从上千模板中选择你喜爱的设计,并开始制作游戏Logo吧。 添加文本和图标 http://www.designevo.com/cn/create/logos/gaming.html
3.游戏logo设计生成器游戏logo免费设计在线生成免费制作你的游戏logo设计 1.选择 只需输入品牌名称,让我们的AI设计引擎自动生成无限logo创意供您挑选。 2.编辑 找到喜欢的logo创意后轻松在线编辑logo布局,字体和logo图标。我们的智能配色功能还能为您搭配不同的logo配色直到发现您的完美logo设计。 3.下载 https://www.logosc.cn/biaozhi/s%E6%B8%B8%E6%88%8F
4.游戏logo设计游戏logo素材游戏logo图片觅知网为您找到7803个原创游戏logo设计图片,包括游戏logo图片,游戏logo素材,游戏logo海报,游戏logo背景,游戏logo模板源文件下载服务,包含PSD、PNG、JPG、AI、CDR等格式素材,更多关于游戏logo素材、图片、海报、背景、插画、配图、矢量、UI、PS、免抠,模板、艺术字、https://www.51miz.com/so-sucai/201228.html
5.游戏logo图片素材游戏logoPNG设计图片下载熊猫办公网站共为您提供40个游戏logo设计素材以及精品游戏logo图片素材下载,汇集全球精品流行的游戏logo免抠元素完整版模板,下载后直接替换文字图片即可使用,方便快捷的不二选择。https://m.tukuppt.com/sopng/youxilogo.html
6.游戏logo素材游戏logopng图片下载觅元素是设计素材的免费下载网站,提供游戏logo素材,游戏logopng图片等素材免费下载,下载游戏logo素材就来觅元素。https://www.51yuansu.com/sopng/youxilogo.html
7.游戏LOGO图片免费下载游戏LOGO素材游戏LOGO模板千图网为您找到1040张游戏LOGO相关素材,千图网还提供游戏LOGO图片,游戏LOGO素材, 游戏LOGO模板等免费下载服务,千图网是国内专业创意营销服务交易平台,一站式解决企业营销数字化、协同化,实现营销转化效果增长!https://www.58pic.com/tupian/youxiLOGO.html
8.游戏logo图片素材游戏logo图片大全智能精选为您提供丰富的游戏LOGO图片素材,游戏LOGO设计,游戏LOGO创意,游戏LOGO图片素材下载。助力您对于游戏LOGO设计创意的创意设计灵感,充实饱满作品,查找更多设计创意作品选择摄图网下载https://699pic.com/image/youxilogo.html
9.20个伟大的游戏标志logo设计一个好的游戏logo需要什么? - 说到logo的设计,游戏产业有点复杂。公司有logo,通常他们制作的个人游戏也是如此。(在手机游戏领域,个人游戏logo开始被应用图标所取代。)这是独立游戏开发者需要牢记的一个重要区别。你的品牌代表着什么?这个游戏(本质上是一个子品牌)的味道是什么?它们是如何相互联系的呢? http://www.logo-sheji.cn/3113.html
10.教程:游戏LOGO=游戏符号+名字游戏图标设计教程本文详细介绍了游戏Logo的设计过程,包括理解需求、寻找灵感、概念设计、字体与图形表现、上色、质感刻画以及光效补充等步骤。强调了游戏Logo需反映游戏性、风格和目的,并提供了设计方法如字体变形、手绘手稿和拼图技巧。同时,讨论了字体设计的识别性、排版和辅助图形的重要性,以及背景图案与字体的搭配。 https://blog.csdn.net/wangchewen/article/details/120886685
11.游戏UI设计之游戏LOGO与ICON介绍与设计.pptx游戏Logo是游戏品牌形象的重要组成部分,通常由图形、文字、色彩等元素组成,用于标识游戏品牌或产品。定义Logo在游戏UI设计中起着至关重要的作用,它能够传达游戏的核心价值和特点,吸引玩家关注并建立品牌认知度。作用游戏Logo的定义与作用 游戏Icon是游戏界面中的小图标,用于标识游戏内的功能、物品或任务等。Icon在游戏UIhttps://max.book118.com/html/2024/0118/6024115025010035.shtm
12.游戏公会logo设计图其他图标标志图标设计图库游戏公会logo图片,游戏公会logo模板下载,游戏公会logo 游戏i标志 其他 标识标志图标 矢量,游戏公会logo设计素材,昵图网:图片共享和图片交易中心https://www.nipic.com/show/3/84/5481633keb7598e3.html
13.腾讯游戏应用中心重新设计品牌LOGO腾讯游戏应用中心重新设计品牌LOGO 游戏应用中心是QQ空间用户专属的游戏平台,最新、最火、最好玩的游戏一网打尽:角色扮演、模拟经营、射击、棋牌、街机、赛车等各类游戏应有尽有。这里网罗了全平台最全、最给力的游戏礼包,更有积分兑换频道、各类精彩活动为玩家提供丰富给力的奖品。https://www.logonews.cn/gameapp-center-brand-renewal.html
14.游戏图标设计设计思路与绘制步骤图标分类 从表现上:小图标 大图标 小图标:尺寸 16*16 24*24 32*32 48*48 大图标:64*64 128*128 256*256 512*512 游戏图标的分类: 品牌图标(游戏logo) 功能图标 物品图标 装备图标 技能图标 品牌图标,游戏loge,游戏快捷方式,注重识别性和唯一性 https://gwb.tencent.com/community/detail/100970
15.腾讯游戏LOGO图片含义/演变/变迁及品牌介绍腾讯游戏的全新LOGO,以腾讯公司英文首字母“T”和游戏英文首字母“G”的结合为基础,形成一个由四个游戏中常用到的方向键拼合而成的娱乐主题元素。四块按键象征着不同类型的游戏,拼接在一起象征着涵盖所有游戏的大平台。LOGO的设计注重互动感,四个按键上分别设计了反向的箭头,让LOGO更有点击欲,主张随时随地的游戏。http://logoqs.techuangyi.com/show/13211
16.游戏俱乐部logo设计黑色简约风格游戏游戏俱乐部logo设计游戏俱乐部LOGO的设计思路:根据客户需要以简约简单和突出职业特色做出的客户满意的标志设计 关键词:黑色简约风格游戏版权声明:logo设计网所有作品均由本公司及/或权利人授权发布,仅供网友学习交流,未经上传用户书面授权,请勿作他用。若您 的权利被侵害,请联系 fzypzl@outlook.com, 提交 侵权投诉> https://www.shejilogo.com/works/133313.html
17.游戏中的图标怎么设计出来的?附教程游戏中的图标设计思路! 重新加载 在游戏公司研发项目,我们需要给项目组制作相应的游戏UI界面、图标,而图标的设计制作需要和界面的风格和配色相互呼应。 尤其是图片的大小尺寸,往往根据使用不同,绘制尺寸需要300-1500大小,比如正常图标通常是300-500像素就够了,而LOGO、徽章、特卖商品需要绘制1000左右甚至更大尺寸。 https://www.douban.com/note/772572272/
18.阿里巴巴logo设计阿里巴巴品牌logo设计阿里音乐的Logo图标是一个唱片的形象,同时也是阿里的首字母小写“a”,颜色采用了和阿里巴巴集团Logo一样的橙色。 阿里游戏-商标logo设计理念 1月15日,阿里巴巴移动事业群旗下的UC九游正式宣布,UC九游将正式更名“阿里游戏”并将进行公司化运作,UC九游总裁林永颂将出任阿里游戏总裁,移动事业群总裁俞永福亲自挂帅阿里游戏https://www.3wen.com/wenzhang/id/3297.html
19.游戏机LOGO设计Switch任天堂品牌logo设计游戏机LOGO设计欣赏-Switch任天堂商标logo设计理念:游戏机logo设计理念?游戏机标志设计理念?游戏机商标设计理念?游戏机LOGO设计含义?游戏机标志设计含义?游戏机商标设计含义?如何设计游戏机商标?如何设计游戏机标志?如何设计游戏机logo?如何设计游戏机品牌?-诗宸https://www.logo9.net/works/4222.html
20.Logo设计大师您可以使用Logo设计大师创建的徽标做什么? - 为您的公共照片,游戏截图,传单,标签或其他图像添加水印 - 制作海报和传单 - 制作名片 - 制作生日卡片 - 为您的社交媒体,如微博、微信、抖音、QQ的帖子快速签名 - 创建独特个性化锁屏/主屏幕 订阅高级功能: https://apps.apple.com/cn/app/logo-maker-watermark-designer/id1414089730?l=cs
21.网易游戏logo设计图片网易游戏Logo设计由易、指纹、火焰三元素延伸而来,指尖上的温度就是热爱者的态度,用具象化的符号表达玩家、网易与热爱之间的内在情感归属。一切都源于热爱,网易游戏自成立以来一直致力于游戏产品的不断完善与改进,期待能够与玩家产生深的共鸣,除了游戏所带来的快乐,我们希望能够带来更深的情感投入,和真正热爱游戏的玩家http://www.chinauci.cn/appreciation/2272.html
22.NeRa游戏俱乐部LOGO设计欣赏LOGO800收集整理国内外优秀LOGO标志设计案例,为您提供NeRa游戏俱乐部LOGO设计参考、NeRa游戏俱乐部LOGO标志欣赏https://logo800.cn/logosheji-65298.html
23.123标志的微博LOGO设计需求:中式复古风格设计,图标中含有山水元素,同时需要突出行业属性,易于识 展开全文c ?收藏 转发 评论 ?赞 c +关注 123标志 2023-2-21 09:21 来自字体超话 分享一款全新的免费商用字体:标小智龙珠体字体活波动感,关键是免费#字体##LOGO123# 字体超话 ?https://weibo.com/logo123net
24.游戏UI素材游戏界面设计UI图标下载游戏角色称号 LOGO 图标 喜欢: 4 回复: 108 Dota2 界面截屏图包免费参考 149P 喜欢: 0 回复: 33 中西合并 界面小图标素材分享 4P 喜欢: 0 回复: 21 未来星际科幻UI界面图标 18个PSD源文件资源分享 喜欢: 2 回复: 66 游戏卡通风界面小图标素材 447P https://www.byzhihuo.com/forum-57-3.html
25.游戏界面设计的六大原则是什么游戏界面设计主要需要学习Photoshop、Illustrator、Indesign、Fireworks、Dreamweaver、Flash等设计软件和游戏登陆页面、系统界面、游戏Logo设计、图标设计、游戏界面布局、游戏风格设计等等。 哪里可以学游戏界面设计? 想要学习游戏界面设计可以来火星时代。火星时代的课程是专门针对企业岗位需要开设的,在这里,不仅可以学习游戏UI图https://www.hxsd.com/content/30784/
26.设计logo软件logo设计软件下载免费设计logo图案多特软件站为您提供做最新设计logo软件专题,在这里安卓版苹果版等应用应有尽有,找最新设计logo软件就来多特软件站。https://www.duote.com/zt/76rj99/
27.游戏图标(Gamesicons)图标icon免费下载图标图标 元素元素 背景背景 PPTPPT 字体字体 动图动图 模板 在线设计在线设计 样机样机 海报海报 插画插画 UIUI 淘宝淘宝 图库 高清图库高清图库 免费商用(cc0)免费商用(cc0) 版权商用(9元)版权商用(9元) 游戏 美术 图标图标 UIUI 场景场景 角色角色 https://www.aigei.com/view/97495.html
28.logo设计在线logo制作logo设计图片模板在线设计平台Canva可画提供了海量的Logo设计模板,覆盖绝大多数Logo设计场景,只需选择喜欢的模板进行制作,即可轻松在线设计出精美的Logo。https://www.canva.cn/create/create-logo/
29.腾讯游戏logo图片免费下载PNG素材编号1xrildp01图精灵为您提供腾讯游戏logo免费下载,本设计作品为腾讯游戏logo,格式为PNG,尺寸为141x123,下载后直接使用,下载腾讯游戏logo图片素材就到图精灵。https://616pic.com/sucai/1xrildp01.html
30.游戏Logo:图片,在线LOGO生成器游戏Logo 就如同每个刺激的游戏,曲折情节是不可少,引人注目的logo是创建一个游戏和游戏网站的第一要务。要设计出这样的logo,不妨从奇幻想世界中取得灵感,如武器和军械丶飞船丶奇幻配饰丶智能设备和超现实生物等。 色调必须令人难忘。您的logo风格必须与游戏界一致。优先考虑黑暗和明亮的色彩组合,以抓住客户群的注意http://www.logaster.cn/gallery/game-logo/