游戏开发论坛

 找回密码
 立即注册
搜索
查看: 9773|回复: 0

生存类游戏如何做用户界面设计?从《漫漫长夜》说起

[复制链接]

5万

主题

5万

帖子

8万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
86215
发表于 2021-1-21 10:42:03 | 显示全部楼层 |阅读模式
微信图片_20210121103615.jpg

《漫漫长夜(The Long Dark)》是由Hinterland Studio制作的一款口碑、销量双丰收的生存类游戏,游戏在2014年的众筹阶段就以“生存”+“沙盒”的特性赢得了不少关注度,关于这款游戏有不少值得称道的地方,颇为硬核的慢节奏生存游戏,小团队的游戏开发之道,常年保持更新的销售模式……当然还有它专注于沉浸感的用户界面设计。

近日平面设计师Iuliana U在gamasutra发表了一篇关于《漫漫长夜》用户界面设计的文章,他指出了游戏UI、HUD界面设计上的卓越之处,但也指出了游戏动画效果方面的不足。GameRes对文章进行了编译。

如何在不破坏沉浸感的前提下,向玩家传递十几种不同的状态信息?如何把握玩家主动控制权与未知事件之间的平衡?如何让玩家在游戏过程中不至于感到自己像是戴着一顶平面显示仪?通过对《漫漫长夜(The Long Dark)》的研究,我们也许能够找到一些答案。

《漫漫长夜》是由Hinterland Studio制作的一款第一人称末日生存游戏,游戏旨在模拟真实的灾难后生存环境,营造探索、绝望与孤独的氛围。依靠独特的视觉风格、孤寂的冥思氛围和高水准的游戏打磨,《漫漫长夜》在生存游戏红海中脱颖而出。

游戏的UX和UI在正式发售前经历了数次迭代,目前仍在调整。早期的视觉风格走的是模拟物理对象的路线,四年后,游戏依旧维持极简主义风格。

《漫漫长夜》的基调

  • 主题与游戏理念:生存,孤独。绝望,世界末日,寂静,寒冷,饥饿,自然VS 人类,挣扎,探索
  • 交互方式:直接控制角色
  • 游戏视角:第一人称3D
  • 游戏时间:真实时间,昼夜循环,无暂停功能
  • 主屏幕:HUD,库存
  • 胜负状态:健康值降到0即失败
  • 趣味要素:沉浸,探索,挑战,资源管理
  • 挑战要素:资源稀缺,生存需求随着时间流逝增多,携带数量有限,天气、掠食者的潜在危险,地图庞大、地形多样,行进速度缓慢
  • 视觉要素:3D
  • 视觉呈现:黑、白、蓝的经典冬季配色,独特的字体,大写字母,极简主义,“黑板粉笔画”式的UI元素,突出显示数字与进度,水彩画视觉纹理,风格化的3D物体,棱角分明的物体占多数,在灯光、阴影、轮廓等方面均有体现
  • 色调:冬季主题,黑白蓝相互搭配,较少使用红、黄、蓝、绿。
  • 字体:专门设计的字体,多数文本使用大写,说明文字小写
  • 相似游戏:孤岛惊魂3、森林

字体与色调

微信图片_20210121103621.JPG

《漫漫长夜》主要以蓝色与白色为主,在亮度上互有差异。这为UI的制作带来了一个问题,它们在明亮及黑暗的极端场景中都能清晰显示。制作组用两种颜色来解决这一问题——几乎所用UI元素都用实心的白色显示,搭配高对比度的黑色背景。

表强调的颜色同样维持清冽、柔和的风格,且极少使用。当你留意到游戏中的彩色UI元素的时候你就能理解了,它们并未提供足够高的对比度,尺寸太小则很难被发觉,外加上游戏强调沉浸感的原因,使开发者摒弃了这些花里胡哨的、不必要的颜色、背景及装饰。

微信图片_20210121103622.JPG

游戏的绝大部分信息都采用文本形式,开发者为此特地创建了一种字体,该字体拥有不同的字母高度与样式。多数情况下采用大写字母,搭配常规的说明内容与附加信息。颜色旨在传达文本信息的重要性,而字体样式则起到了辅助作用。

在以上设计中我们可以得出一些经验:

  • 保证用户界面与游戏内视觉风格的一致性;
  • 多尝试不同的方法来为游戏找到合适的搭配;
  • 颜色如果不提供任何信息的话,它未必要纳入UI设计的考量中;
  • UI沉浸感的塑造未必要用现实物品来做参考系;
  • UI美学能提供更好的游戏体验及实用性

HUD界面

微信图片_20210121103623.JPG

游戏内多数HUD的设计是围绕实际情况设计的,部分元素会随着时间消失。HUD界面主要分为7个区域:位置、风向、库存、患病情况、行进状态、一般信息以及健康状况。

「位置」简要显示玩家当前所在区域的名称,同时在玩家进入新地区的时候发出提示;「风向」标示风向变化,当玩家站在挡风区或试图勾引掠食者的时候,会弹出图标提示;「库存」显示库存变化,如新入手的材料或即将过期的材料;「患病」区显示玩家可能造成或治愈的伤残信息;「行进状态」有多个图标,用于标示跑步/耐力,蹲伏,斜坡站立,体重,武器状态等;「通用信息」则标示事件通知,如碎冰、徽章、奖励条件等。

「健康状态」则是主屏幕中固定的UI元素,其包含体温、疲劳值、口渴、饥饿以及与指标升降相关的状态5个要素。

游戏中极少使用红色,它们被专门用来指示危险、损坏、警告信息,它们附着在图标上,无需借用文字就能向玩家传达信息。

微信图片_20210121103624.JPG

在此我们能学到的一项重要经验就是把指示器的利用率最大化,将数值条做成圆形裹在图标上以节省空间,大图标不仅具备视觉享受还易于理解。另外,条形UI通常缺少用于示意的数字,虽然玩家可以在菜单中找到相应信息,但在HUD界面不需要显示,有时候数字反而会让玩家更难以理解状态的上升or下降。

所有UI元素组都应有一套不同的样式来做区分:区域文字大于位置文字以便于标示区域的大小;掠食者比挡风的图标更大、更显眼,以便于突出重要性;「患病」用不同颜色表示重要程度,红为危险,黄为警告,白为次要;每个UI元素的颜色/透明度/纹理大小/形状都需要能与玩家有效沟通。

微信图片_20210121103626.JPG

鉴于《漫漫长夜》这些年来一直在改进,它拥有一套令人印象深刻地界面,透过它你能看到一个有总体规划的UI样式、风格是如何帮助游戏保持吸引力的。无论系统增加了什么新功能或作出什么调整,先期的规划能让游戏界面保持一致,它避免各个模块的UI不统一或让HUD界面过于杂乱。

在这里,我们得到的设计经验是:

  • 充分利用色彩心理学来表示游戏状态、情感、影响以及重要程度;
  • 为数值条加入创意成分,用不同的样式获得更有趣的效果;
  • 通过不同的视觉样式来表达不同的信息类型;
  • 制定UI整体原则,在添加新功能或元素时遵循该原则;

此外,这一套HUD界面还有什么可以改进的吗?

微信图片_20210121103627.JPG

首先从各UI元素的摆放位置说起,屏幕左上角的空间应该得到更多的关注,目前它只用于标明区域名称,这一信息对游戏而言并不重要且可在地图中获取,可以考虑把重要的UI元素放在此处。

风向指示图标可以考虑水平放置以减少空间,该组别的各个元素虽然都与空气流动状况有关,但看起来更像是彼此独立的事件,可以考虑用红、黄、白三种颜色来表示掠食者的吸引力程度。

扩大物品图像及数量能够让库存情况更加一目了然,甚至能将它们与左上角的区域名称共用以减少UI的空间。

「患病」可挪移至左侧,这对于玩家来说是至关重要的信息。目前游戏的处理方法是它们会随时间消失,只在「健康状态」栏上显示一个不起眼的标记,这导致玩家可能会忽略严重损害到健康的状况。

「行进状态」的摆放位置与其重要性相适配,但可以考虑重新排列图标来提高效用,比如跑步/蹲伏这对对比明显的图标可以占据同一位置。

「通用信息」中的部分信息可以并入到库存等模块中,确保最关键的信息才会显示于屏幕中央位置。

游戏对健康条的迭代次数最多,它的表现也令人满意。唯一的问题是健康条上缺少增加/减少的指示,提醒玩家健康状态的下滑有助于避免玩家因意外死亡而抱怨。

环形菜单

微信图片_20210121103628.JPG

玩家按住鼠标时,屏幕上会出现一个包含完整HUD信息的环形菜单。与一般的环形菜单一样,该菜单包含了数个常用的功能,中间的按钮可回到上一级。

该类型菜单的优先级高于底部固定的弹出式菜单,设计一个快捷菜单能够屏蔽不必要的UI元素,还能容纳更多的功能选项。

《漫漫长夜》环形菜单的主要选项有光照、食物、武器、设置诱饵、导航、营地、医疗物品、水以及身体状况,二级选项会标示在同一环形切片中,灰色则代表不可使用。

该菜单没有用文字标示,而是采用图标围成一个圈,细致的物品设计以及特有的形状、颜色,即便尺寸不大也能一眼辩出。

玩家也能自行将底部菜单中的功能添加到环形菜单中,它们会自动填入相应的环形切片之下,开发者还为每个选项或物品上方添加了相应的工具提示。

在此处我们能获得的经验是:

  • 确保环形菜单的图标易于识别;每种食物与医疗物品都有易于识别的形状与颜色;
  • 通过环形菜单取代屏幕底部的菜单,减少HUD界面的UI元素;
  • 通过图标而不是文字能够加快导航速度,如果不能完全取缔文字,可以在菜单外部增加提示;

此外,它还有什么可以改进的?

微信图片_20210121103629.JPG

诸如休息、诱饵这一类表示动作的图标与某些物品图标过于相似;而且诱饵选项不易选取,作为一项重要的捕猎功能它应该被放置在能快速触发的位置。

部分物品在无法使用时会被设置为半透明状态,将其改为黑色轮廓更易于理解,且符合整体的UI 风格。

环形菜单还可以单独设置一个常用项目的环形切片,例如水、食物、木炭这些常用的项目,而无需每次都需要点击数次才能访问。

动画

微信图片_20210121103630.JPG

在生存游戏中,沉浸感至关重要。游戏必须有一套相适应的UI、UX,你不能挪用其他的图标或UI元素来呈现游戏的样貌,你必须在与玩家的交流中发挥创意。

动画、声音以及临场的视觉效果在沉浸感的营造上占据重要地位。在《漫漫长夜》中,玩家的视觉会因为某些不利状况变得模糊,腿受伤后角色会跛着脚走路,遇到障碍行进速度会变缓。需要留意声效和语音设计之间的协调性,角色对饥饿、寒冷、疲倦等状态做出相应反应,能大幅度增加沉浸感。

《漫漫长夜》借鉴了不少《孤岛惊魂》系列的UI、交互、动画设计,游戏中有数种不同类型的动物,每种动物都规划了一套行为模式。

当玩家用石头捕获兔子的时候,你可以将其击晕,然后看它在角色手里颤抖不已的模样。尽管玩得多了玩家就会适应这一状况,但头几次依旧会感到惊喜,它们与生存游戏的基调不谋而合。

微信图片_20210121103632.JPG

与野狼的对决旨在检验玩家的反应速度,玩家有数秒的慢速时间选择武器,反应速度越快,遭受的损伤越少。

熊的攻击无法被规避,游戏会进入预置的脚本动画,恢复知觉后玩家身体状态以及库存物品多数受损。

在这里我们获得的经验是:

  • UI/UX设计并不局限于图形,声音与交互也能传达相应的信息;
  • 为不同的动物、资源设计单独的事件,可以增加游戏的玩法、丰富游戏的UX。

但《漫漫长夜》在这方面有相当大的提升空间。

微信图片_20210121103633.JPG

很遗憾,上述图片是《漫漫长夜》仅有的几个沉浸式交互设计。其他内容均由一个图标或进度条表示,以至于不少负面评论都指出《漫漫长夜》是一个“进度条游戏”。

游戏显然需要更多的动画来增加沉浸感。哪怕是使用简单的视角动画来模拟入睡、苏醒的状态都比现在的黑幕淡入要好。像治疗、饮食这些每五分钟执行一次的动作也可以设计简单的动画,而是不用进度条表现。

《孤岛惊魂3》中有不少简短但有效的动画效果,比如收集、剖尸、治疗等动作,它们让玩家能更确切地感受到与游戏对象的交互,还能表现角色的情感,为伤口包扎绷带治疗动画传达疼痛感,迅捷的植物采集动画表现娴熟度,剖尸动画的血腥场面表现生存游戏的绝望。

微信图片_20210121103634.JPG

《漫漫长夜》同样无法显示角色当前的装扮,无论玩家穿多少层衣服或手套,视觉上都是一双套着衬衫袖子的手,对这一情况加以改进能大幅提高游戏的沉浸感,而不是仅仅在屏幕上显示“+5温暖值”。

善于利用摄像机前的双手能为玩家创造更多沉浸感,但《漫漫长夜》的视角里很少出现玩家的身体。《镜之边缘》则是一个正面例子,这是一款专注于攀爬、跳跃的跑酷游戏,你可以从游戏中观察到开发者是如何利用双手与双脚塑造沉浸感的,《漫漫长夜》可以有所借鉴。

微信图片_20210121103635.JPG

总体而言,《漫漫长夜》依旧是生存游戏设计的一个正面例子,它有不少出色的UI/UX设计。

文/浔阳编译
原作者:Iuliana U
原文地址:
https://www.gamasutra.com/blogs/IulianaU/20210112/376097/Long_Dark_Survival_game_HUD_UI.php


您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

作品发布|文章投稿|广告合作|关于本站|游戏开发论坛 ( 闽ICP备17032699号-3 )

GMT+8, 2024-12-22 12:10

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表