< Return to Video

The Power of Video Game HUDs

  • 0:00 - 0:04
    在《最后生还者》完工前的八个月
  • 0:04 - 0:08
    顽皮狗才开始进行游戏用户界面(UI)的设计
  • 0:09 - 0:15
    根据设计师Alexandria Neonakis所言,虽然一些UI元素已经确定
  • 0:15 - 0:21
    对抬头显示(HUD)的整体设计,以及其他许多意思还没有敲定
  • 0:22 - 0:24
    我觉得这个例子很好地证明了
  • 0:24 - 0:29
    UI往往是游戏开发中最被低估的部分之一
  • 0:29 - 0:32
    它通常作为最细枝末节的部分,在工程的最后才被仓促组合
  • 0:33 - 0:35
    但是,你要问我的看法
  • 0:35 - 0:37
    UI则是决不可轻视的部分
  • 0:37 - 0:42
    它对游戏中的视觉效果、工作机制和操作手感都有决定性的影响
  • 0:42 - 0:45
    那么在这期游戏设计工具箱,
  • 0:45 - 0:49
    我想深挖一下UI与游戏设计之间的交集
  • 0:50 - 0:54
    看看诸如血条和耐力条之类的元素是如何影响我们的游玩的
  • 0:55 - 0:59
    首先需要声明,用户界面(UI)包括一系列的设置
  • 0:59 - 1:03
    比如线上玩家大厅,道具页面,对话选项
  • 1:03 - 1:05
    还有合成目录,以及商店页面,凡此种种
  • 1:05 - 1:13
    但在这个视频中,我只专注于一类UI设计:抬头显示(HUD)
  • 1:13 - 1:18
    也就是那些在你进行各种交互时,都浮于游玩画面之上的元素
  • 1:18 - 1:20
    首先第一个问题肯定是
  • 1:20 - 1:25
    为什么要设计HUD,它为玩家的游玩带来了什么益处
  • 1:25 - 1:30
    为了解决这个问题,我们先将HUD分成两个大块:
  • 1:30 - 1:33
    我称之为『标尺』和『预见』
  • 1:34 - 1:37
    标尺就是那些HUD中比较常想到的部分
  • 1:38 - 1:43
    它们使得游戏信息能尽可能可视化地传递给玩家
  • 1:43 - 1:47
    换句话说,玩家的『生命值』就从代码中的隐藏数值
  • 1:47 - 1:50
    变成了玩家可见的血条
  • 1:50 - 1:58
    而AI的行为也通过视锥,活动轨迹和攻击提示的形式得到了阐明
  • 1:58 - 2:03
    而由于相机视角的限制,某些重要信息的呈现
  • 2:03 - 2:06
    通常也需要借助方位指示和小地图标记等方式
  • 2:07 - 2:12
    标尺的作用主要是帮助玩家了解游戏中现在,或是未来的状态
  • 2:12 - 2:15
    以便他们有意识地做出判断和行动
  • 2:16 - 2:20
    这是来自卡牌构筑游戏《杀戮尖塔》的案例
  • 2:20 - 2:25
    在早期的开发中,敌人并不会给出任何本回合计划行动的提示
  • 2:25 - 2:29
    如此一来,玩家就不清楚这回合究竟应该选择格挡还是攻击
  • 2:29 - 2:31
    在打牌时就显得有些目无章法
  • 2:31 - 2:35
    针对这一问题,设计师Mega Crit就在HUD中加入了
  • 2:35 - 2:37
    能够指示敌人行动意图的标记
  • 2:37 - 2:41
    如此一来玩家就能对手牌的使用作出更优的规划
  • 2:41 - 2:44
    以达成有趣的连击
  • 2:45 - 2:46
    以上我们定义了『标尺』
  • 2:46 - 2:52
    那么『预见』则是对玩家输入某个指令能达成的效果的诠释
  • 2:52 - 2:57
    最简明易懂的例子,大概是在可交互对象上加入的按键图标
  • 2:57 - 2:59
    你懂得,就像按Y键开门
  • 2:59 - 3:01
    按X键上车
  • 3:01 - 3:03
    按E键来跳进万人坑
    press E to jump in mass grave.
  • 3:03 - 3:04
    什么之类的,emm
    What. Uh.
  • 3:04 - 3:08
    不过,预见也可以通过一个抛物线来向玩家
  • 3:08 - 3:09
    显示手雷即将划过的轨迹
  • 3:09 - 3:12
    一个显示物体在你的勾爪范围内的指示
  • 3:13 - 3:15
    或是向你的目标敌人的一个锁定标记
  • 3:15 - 3:20
    以及《XCOM》中你的单位前行路径的箭头
  • 3:21 - 3:23
    简单来说,『预见』提前提示了玩家
  • 3:23 - 3:28
    他们可以进行的某些行动,以及对应的后果
  • 3:28 - 3:30
    这也增加了玩家行动的自信心
  • 3:30 - 3:32
    使他们不至于对未知束手无策
  • 3:33 - 3:36
    很经典的一个案例来自《铲子骑士》
  • 3:36 - 3:40
    在其第三个DLC中的角色,幽灵骑士有着冲刺的能力——
  • 3:40 - 3:44
    也就是它能穿过某些物体并加速冲出另一侧
  • 3:45 - 3:50
    原先,Yacht Club Games只用了几帧细微的动作来提示动作
  • 3:50 - 3:57
    却不想玩家对这个模棱两可的提示的生效时间和角度
  • 3:57 - 4:00
    以及模糊的弹射方向并不买账
  • 4:01 - 4:04
    所以,之后制作组放置了一个简单的标记
  • 4:04 - 4:06
    只有玩家距离足够近,它才会显示
  • 4:06 - 4:11
    它清楚地指示了玩家何时可以按键冲刺
  • 4:11 - 4:15
    以及显示了按下冲刺后的弹射方向
  • 4:15 - 4:22
    据开发者所言,这是“我们能想到呈现冲刺能力最简明的方式”了
  • 4:24 - 4:29
    如你所见,『标尺』和『预见』是两个给予玩家信息的有效手段
  • 4:30 - 4:34
    给予了玩家当前和未来,游戏中的必要信息
  • 4:34 - 4:37
    这使得玩家有足够的自信,流畅地完成交互
  • 4:37 - 4:40
    并作出合理的判断
  • 4:40 - 4:45
    但实际上,游戏程序在后台处理的无数数据
  • 4:45 - 4:48
    都有在UI上呈现的可能——
  • 4:48 - 4:52
    它们都可以作为『预见』的内容呈现
  • 4:52 - 4:56
    那么为什么大部分游戏不会这样做呢?
  • 4:56 - 5:00
    虽然有时向玩家展示某些信息是有用的
  • 5:00 - 5:03
    但向玩家隐藏某些信息同样很重要
  • 5:05 - 5:07
    如果你考虑用户体验(UX)设计——
  • 5:07 - 5:13
    作为指导UI设计的实践和精神内核
  • 5:13 - 5:16
    UX要求我们考虑玩家的“认知负荷”
  • 5:16 - 5:21
    它衡量了人脑在某时某刻所能处理的信息阈值
  • 5:21 - 5:25
    往屏幕中加入过多的无用信息,大大增加了游戏的理解成本
  • 5:26 - 5:28
    同时,眼动追踪技术也表明了
  • 5:28 - 5:32
    人眼需要持续扫视荧幕来同步所有的信息
  • 5:32 - 5:34
    因此,对UI的适当省略
  • 5:34 - 5:41
    删减过度的、重复的、花里胡哨的无用UI能有效地降低认知负荷
  • 5:42 - 5:45
    但这也不意味着“少少益善”
  • 5:45 - 5:48
    实际上优秀的UI能有效降低认知负荷
  • 5:48 - 5:51
    有的游戏中,玩家有着记忆余弹量的要求
  • 5:51 - 5:56
    在极度兴奋的条件下,你不大可能记得刚刚发了六颗还是五颗弹
  • 5:57 - 6:00
    弹匣计数便成了一个很有用的功能
  • 6:00 - 6:03
    于是,设计法则一:合理地调整布局
  • 6:03 - 6:08
    以便屏幕上的信息互相关联,易于理解
  • 6:08 - 6:12
    一个方法是利用人的视觉歧视
  • 6:12 - 6:16
    也就是利用字体的粗细,色彩,大小
  • 6:16 - 6:20
    以及位置和运动,来使某些元素更为突出
  • 6:20 - 6:24
    玩家面对满屏同样大号的闪动信息
  • 6:24 - 6:26
    就很难分清主次
  • 6:26 - 6:28
    而如果没有任何高亮和突出
  • 6:28 - 6:30
    再重要的信息也可能被忽视
  • 6:30 - 6:34
    比如说,《杀手》系列中闯入非法区域的提示
  • 6:34 - 6:40
    这个极其重要的警示在《杀手》(2016)中毫不起眼
  • 6:40 - 6:44
    只是在小地图周围一圈不起眼的标识罢了
  • 6:44 - 6:46
    《杀手2》很好的改进了这一点:
  • 6:46 - 6:48
    警示变为了黄色,
  • 6:48 - 6:50
    并且通过闪过小地图的方式试图吸引玩家的注意
  • 6:51 - 6:56
    《杀手3》则更进了一步,在视觉提示的同时还加入了音效
  • 6:57 - 7:00
    为了帮我们优化视觉元素的分级效率
  • 7:00 - 7:04
    Zach Gage提出了他的“三级阅读”法则
  • 7:05 - 7:10
    这个理论大致覆盖了重要性由高到低的三种文本类型
  • 7:10 - 7:15
    Zach举了他自己的游戏《Spelltower》的例子
  • 7:15 - 7:21
    第一级是游戏的主题元素——每个用于拼写的字母
  • 7:21 - 7:26
    第二级则包含大体规则的信息
  • 7:26 - 7:28
    比如情况最危急的那一列
  • 7:28 - 7:31
    以及消除时能清掉一整行的蓝色附加块
  • 7:32 - 7:37
    第三级是更小、更细微的规则
  • 7:37 - 7:40
    比如某些只能用在更长单词里的字母
  • 7:41 - 7:44
    这样,开发者就能把信息分类
  • 7:44 - 7:48
    并把有关联的相似物给分离出来
  • 7:48 - 7:50
    而随着游戏进程的动态发展
  • 7:50 - 7:54
    不同指令在各个时期也会改变其重要程度
  • 7:55 - 7:57
    Zach指出,《炉石传说》中的卡牌的地位
  • 7:57 - 8:01
    就在抽牌时引人注目的“一级信息”
  • 8:01 - 8:04
    和进入手牌后的“二级”到“三级”信息之间转换
  • 8:06 - 8:09
    另一个为认知减负的方法,就是反思一下
  • 8:10 - 8:14
    是否有必要把所有UI要素一次性罗列出来?
  • 8:14 - 8:16
    回到《恶魔城1》的时代
  • 8:16 - 8:20
    出于某些原因,Boss的血条始终对玩家可见
  • 8:20 - 8:23
    而到了现在,血条基本只有在Boss战开场才会出现了
  • 8:24 - 8:27
    这个原则指导了许多游戏的UI设计
  • 8:27 - 8:31
    在《对马岛之魂》中,只有你的刀出鞘之后血条才会出现
  • 8:31 - 8:36
    这样在探索世界的过程中,你就不会被HUD打扰
  • 8:38 - 8:41
    而另一个深究HUD设计的缘由
  • 8:41 - 8:43
    也是使得业界对其倍加青睐的原因——
  • 8:43 - 8:45
    就是游戏表现力上的加成
  • 8:45 - 8:48
    它使得游戏更显戏剧式和沉浸式
  • 8:48 - 8:52
    并避免了2D组件扰乱3D画面之类的问题
  • 8:52 - 8:57
    那些嚷嚷着UI不可能有趣的家伙大概没玩过《女神异闻录5》
  • 9:02 - 9:05
    明智的做法绝不是删掉所有HUD组件
  • 9:05 - 9:09
    它不一定是降低游戏界面可读性和理解性的妥协
  • 9:10 - 9:14
    而是对合理安排信息展示方式的要求
  • 9:14 - 9:19
    就像刚刚提到的,开发者应该通过隐藏适量的信息来物尽其用
  • 9:19 - 9:23
    另一个方法是增加HUD元素在游戏中的契合度
  • 9:23 - 9:28
    也就是使得他们成为游戏世界观中的客观实在
  • 9:29 - 9:32
    很好的一个例子来自《死亡空间》
  • 9:32 - 9:36
    为了增强这款生存恐怖游戏的沉浸感
  • 9:36 - 9:41
    Visceral Games把大多数HUD信息转化成了游戏世界中的元素
  • 9:41 - 9:47
    艾萨克的生命值和静滞能量都是通过他衣服上的灯管和标尺显示的
  • 9:47 - 9:50
    武器的余弹量也在枪支上得到了显示
  • 9:50 - 9:55
    物品栏之类的元素,也采用了全息投影的设定
  • 9:55 - 9:58
    诸如《银河战士Prime》之类的游戏也提供了例子
  • 9:59 - 10:03
    这个HUD其实和其他射击类没啥不同
  • 10:03 - 10:06
    但是嵌入了萨缪斯的头显中
  • 10:06 - 10:09
    显示时它会仿真地抖动和雾化
  • 10:09 - 10:12
    在某一层面上,它增加了玩家的代入感,以及与角色共情的能力
  • 10:13 - 10:15
    当然这不只与艺术风格和表现力有关
  • 10:16 - 10:20
    它同时也会带来有趣的玩法上的变化
  • 10:20 - 10:25
    在《异形:隔离》中,你会得到这个动作扫描仪
  • 10:25 - 10:28
    这和《使命召唤》之流的小地图
  • 10:28 - 10:31
    但作为一个实实在在的工具,玩家必须要选择
  • 10:31 - 10:35
    你是要获得运动物体的信息,还是要握着把枪
  • 10:35 - 10:37
    这样两难的决策
  • 10:37 - 10:42
    高契合度的HUD并不仅限于血条或是余弹计数
  • 10:42 - 10:44
    它还能以不同的方式融入游戏世界中
  • 10:44 - 10:48
    因为当你更开放地思考,你同样可以在那些
  • 10:48 - 10:52
    并不常作为UI考虑的元素中加入信息
  • 10:52 - 10:55
    比如说在《撞车嘉年华》中你并不需要为车设置一个血条
  • 10:56 - 11:00
    你大可以从它的外观看出,它离报废还有多远
  • 11:00 - 11:03
    《荒野之息》中你难道还需要额外的温度计
  • 11:03 - 11:06
    来显示林克的冷热状态吗?
  • 11:07 - 11:09
    回到最初的《超级马里奥兄弟》
  • 11:09 - 11:12
    马里奥的大小恰当地表现了他的血量
  • 11:13 - 11:20
    另一个省略HUD的目的在于隐藏游戏的部分信息
  • 11:21 - 11:27
    《最后生还者2》中,开始接触的人类敌人习惯大声密谋
  • 11:27 - 11:31
    透露给了玩家他们的想法,和考虑战术的余地
  • 11:32 - 11:38
    但之后就出现了使用哨子和密语交谈的新敌人
  • 11:40 - 11:44
    这种特殊的密语使得玩家失去了规划的余地
  • 11:44 - 11:49
    这类敌人通常给我一种相当难以应对的印象——
  • 11:49 - 11:52
    很大程度上要归因于信息差
  • 11:53 - 11:58
    更进一步,这样的信息差会很大程度上改变玩家的行为
  • 11:59 - 12:03
    《王权》的开发者们在开发初期就遇到了这样的问题
  • 12:04 - 12:07
    原先的游戏中有着你各项状态对应的数值
  • 12:07 - 12:09
    以及你的每个决策所带来的变化
  • 12:09 - 12:14
    在测试中,玩家不约而同地想方设法地优化这些数值
  • 12:14 - 12:16
    并忽略了大部分的文字
  • 12:16 - 12:21
    将UI变为模糊的提示,玩家就会回到读故事——做决策的状态
  • 12:21 - 12:25
    也使得游戏从分析导向,拉回了感性的选择上
  • 12:25 - 12:30
    我觉得这很好地证明了制作者并不需要整个地移除HUD
  • 12:30 - 12:33
    而更应该关注HUD所传递信息的准确性
  • 12:33 - 12:36
    你是想要用具体数值,大致长度,
  • 12:36 - 12:40
    还是屏幕中间的红色圆环来代表体力值?
  • 12:40 - 12:44
    这都取决于设计者希望玩家有何种行为
  • 12:44 - 12:46
    是应该对血量分毫必究
  • 12:46 - 12:49
    还是只是在合适的时候撤回去找掩体?
  • 12:50 - 12:53
    再聊回之前提到的『预见』类HUD
  • 12:53 - 12:57
    它能给予的“后果”越长,信息也就越准确
  • 12:57 - 12:59
    你也就能做出更具有确定性的计划
  • 13:00 - 13:05
    《忍者之印》中,你用刀投向吊灯的一系列后果都能被预见到
  • 13:06 - 13:11
    如果你降低信息的可预见性,或是使行为变得更不准确
  • 13:11 - 13:16
    就会倒逼玩家学习和理解游戏的运作机制
  • 13:16 - 13:18
    就像《幻幻球》一样
  • 13:18 - 13:23
    默认情况下,射击准线只会显示第一发能命中的位置
  • 13:23 - 13:27
    所以你需要心算反弹后的抛物线
  • 13:28 - 13:30
    这也是学习曲线的一部分
  • 13:30 - 13:34
    意味着,游戏中你可以增加预见的弹射次数
  • 13:34 - 13:39
    作为可选的升级项,它很好地体现了预见信息的强大之处
  • 13:39 - 13:42
    话说,你们知道《幻幻球》的玩法也被申请专利了吗?
  • 13:42 - 13:45
    感觉对这类事情的调侃也成了这档节目的一部分了……
  • 13:45 - 13:51
    正因为UI如此强力,很多时候它都成了难度或是辅助模式的一部分
  • 13:52 - 13:56
    想想赛车游戏中的最优路径
  • 13:56 - 13:59
    在高难度下可能就需要你自行生成了
  • 13:59 - 14:03
    不仅在不同模式下,UI能被用于调节难度
  • 14:03 - 14:07
    UI也被用于和其他元素一起,调节整场冒险的难度曲线
  • 14:09 - 14:14
    综上所述,UI对游戏体验有着很重大的影响
  • 14:14 - 14:20
    如果说UI能够支持和推进游玩进程
  • 14:21 - 14:23
    那么,反过来又如何呢?
  • 14:24 - 14:29
    “并不只是游戏设计影响UI,UI也会影响游戏设计”——
  • 14:30 - 14:35
    这最后一个案例,来自策略游戏《陷阵之志》
  • 14:36 - 14:42
    玩家会在回合开始那一刻,预先从小地图上得知敌人的意图
  • 14:42 - 14:45
    这些都作为一个复杂的标志网络的一部分
  • 14:45 - 14:48
    组成了一张敌人的行动网络
  • 14:49 - 14:53
    Subset Games的开发组却发现为了做出这个网络的效果
  • 14:53 - 14:56
    某些敌人和装甲就必须被移除——
  • 14:56 - 14:58
    因为他们难以作为动画被呈现
  • 14:59 - 15:02
    比如能有一系列影响的武器
  • 15:02 - 15:05
    和对复杂区域进行攻击的敌人
  • 15:05 - 15:08
    联合设计师Justin Ma说:“作为游戏设计的法则,
  • 15:09 - 15:13
    我们宁愿放弃有趣的点子来换取表达的准确性”
  • 15:13 - 15:16
    这绝不是这种迭代发生的唯一一个项目
  • 15:16 - 15:20
    比如《炉石传说》中你只能有7个随从
  • 15:20 - 15:23
    也是出于贴合屏幕界面的考虑
  • 15:23 - 15:29
    某些英雄的技能也处于复杂度考虑被修改了
  • 15:29 - 15:33
    事实上,如果一个点子不能清楚传达给玩家
  • 15:33 - 15:36
    那么或许它并不是一个好的机制,或是需要简化
  • 15:37 - 15:40
    UI决不应该作为失败游戏机制的补偿——
  • 15:40 - 15:44
    所以HUD的开发需要与其他项目的开发同步进行
  • 15:44 - 15:46
    而不应该是拖到最后的项目
  • 15:46 - 15:49
    因为就像其他游戏开发的其他部分
  • 15:49 - 15:54
    它绝不该被随意地草草了事,或是一味借鉴“其他游戏”
  • 15:54 - 15:57
    它需要每位设计者的清晰认知,以及一片匠心
  • 15:57 - 16:02
    不妨在评论区聊一聊,你玩过游戏中的超赞UI吧!
  • 16:04 - 16:06
    那么接下来是独立游戏推荐环节——
  • 16:07 - 16:10
    这是《生长之屋》一款网格地图的解谜游戏
  • 16:11 - 16:14
    其中你需要控制不断生长的仙人掌来把一棵植物推进目标里
  • 16:15 - 16:19
    很快,发现靠墙推动你本身的方法大大提高了游玩的复杂度
  • 16:19 - 16:22
    当然,还有更多额外的机制等你发掘
  • 16:22 - 16:27
    这款有趣的解谜胜在它极具吸引力,甚至有些棘手的关卡挑战
  • 16:27 - 16:29
    《生长之屋》已在Steam发售
Title:
The Power of Video Game HUDs
Description:

more » « less
Video Language:
English
Duration:
16:30

Chinese, Simplified subtitles

Revisions