让界面传递故事：游戏界面的叙事设计

本文首发以下公众号：

网易雷火UX用户体验中心

网易雷火UX用户体验中心，涵盖游戏体验设计、用户研究、数据挖掘、数据分析等多个游戏用户体验领域，秉持着“热爱、创新、和用户在一起”的理念，面向在校生和游戏从业者分享行业发展趋势与前沿知识，期待与众多热爱者推进行业生态圈的共同进步。

964篇原创内容

导言：提升界面品质和体验是游戏UI设计师不断追求的目标，而纵观人类艺术发展，无论艺术形态如何变化，其抒发情感，讲述故事的本质没有改变。村上春树在他的处女作中这样说”存在既表达，假如不能表达什么，就等于并不存在，文明就会归零“。作为游戏设计师，我们又该如何表达呢？

一、从游戏场景化设计说起

场景化设计已经是游戏设计行业中的一大共识，2009年当玩家在《Dead Space》中通过手臂上的全景投影来查看地图时，第一次被这种效果震撼。也是从那一刻开始，世界观、代入感、场景化设计、3DUI都成了游戏设计行业中的高频词汇。早在2000年初，主机游戏就已经开始了游戏界面场景化的发展。在2009年一篇名为《Beyond HUD》论文中，正式提出了Diegetic Representation（剧情UI）这一概念，同时还将UI以“是否在剧情中”和“是否在游戏空间中”这两个维度，将游戏UI分为四大类。

《Dead Space》（2008）第一次将场景UI带到了游戏中

Fagerholt, E., & Lorentzon, M. (2009).

UI的情景分类

场景化UI设计几乎成为了高品质UI的代名词，诚然它有着更好的表现力，更好的代入感。但另一方面它也面临着制作难度大、成本高的问题。同时场景化设计也并非适用于所有的游戏类型或界面，例如游戏子系统、弹窗类界面等等。

二、真正打动人的是故事

并不是每个界面都能场景化，所以当我们在设计一个由于各种限制而无法进行场景化表述的界面时，我们该如何增强它的表现力和代入感呢？

场景化只是一种设计方法，而其目的才是我们需要关注的本质。从人类艺术诞生以来，虽然艺术的载体和形式一直在变化，但是其核心都是讲述故事和表述情感。就好比描述生动的小说，虽然没有强烈的视觉冲击，但是依然能够让你产生强烈的临场感。真正打动人的是故事。

三、将叙事融入游戏界面

既然故事本身才是那个有趣的灵魂，那我们应该如何将其融入到我们的界面设计中呢？

叙事要素

叙事要素想必大家都不陌生，人物、时间、地点、事件。一句话概括就是谁在哪里做什么。所以，我们只要在界面中表现或交代清楚这些要素，游戏界面就能够给人带来故事的沉浸感。

1.角色

角色是目前游戏中运用最多的代入方式，无论是活动海报还是主界面的“看板娘”，都能起到很好的吸引玩家眼球的效果。除了展现游戏内容，角色还能够向玩家传递情感，引导情绪。例如《古墓丽影：暗影》中的存档点设计，当玩家触发存档操作后，劳拉会蹲坐在篝火旁，玩家在调整装备和技能的时候能够看到劳拉疲惫但坚定的神情，这与玩家完成战斗之后的状态产生了很好的共情。

《古墓丽影：暗影》存档点设计

角色的运用并不限于模型或是大幅插画，也可以是很小的一个装饰形象。例如百闻牌中的小猫咪，会在提示引导的内容边上出现，当玩家看到她就知道这里有内容需要注意了，给人非常友好的感觉。

《百闻牌》中的猫咪会在所有引导和提示的地方出

2.物件

人物的表现是最能够让玩家带入剧情的方法，但通过对其他物件、环境等要素的展现同样能够起到叙事的效果。例如我们经常能够看到的以书本为载体的UI设计，以及GTA5中独具风味的手机操作（之后被各类游戏争相模仿）。

《哈利波特：觉醒》中的图鉴系统

《GTA5》玩家手机界面

《永远的7日之都》中通过手机来展现玩家的收集系统

3.环境

同样的，使用环境氛围也能够增强界面叙事感。这种方法的好处是不会对显示内容造成过多的干扰，能够适用于更多的通用界面。例如《第五人格》中的起雾效果，就能运用在很多界面之中，甚至成为游戏的一个记忆点。

《第五人格》中使用玻璃起雾的效果来制造恐怖感

《Dishonored 2》中大量运用破碎玻璃来渲染紧张和危险

《刺客信条：起源》中不断浮动的光点，也是刺客信条系列所使用的环境元素

环境要素的运用可以贯穿整个游戏，这是其他要素（人物、物品、事件）无法做到的。它可以是光影、HUD的显示效果、烟雾或是火焰等等。

4.事件

最后一项是事件，它在某种程度上可以说是前三者的结合体。运用事件能够让UI有很强的互动感，让玩家血脉偾张。

《底特律：变人》中的UI小姐姐

《底特律：成人》中当玩家进入游戏、暂停、完成任务时，都会有小姐姐在画面中和玩家互动，留下了令人深刻印象。在游戏结尾你还可以选择是否“放生”她。

《蝙蝠侠：阿卡姆骑士》互动菜单

《蝙蝠侠：阿卡姆骑士》的菜单选项也采用了事件设计，当玩家在选项中来回切换时，背后的蝙蝠侠Pose会来回变换。这一设计在后来的《古墓丽影：暗影》的主菜单中也有同样的运用。

《非人学院》中将举报设计转化为“留校观察”，一下就有趣很多

事件的表现并不是一定要非常具象，例如《非人学院》中的举报设计，就用漫画的形式来表达了校园举报这一事件，同样让互动变得有趣。

手游中我们经常能在抽卡中看到互动事件的设计，例如《阴阳师》、《百闻牌》的画符抽卡，《街霸：对决》的连招抽卡等。合理地运用叙事设计能够增强游戏的魅力，让游戏变得更加鲜活。

叙事原则

既然我们已经了解了UI叙事设计是什么，那在实际运用时我们该注意哪些呢？

1.贴合游戏世界观

好的叙事设计需要贴合游戏的世界观和内容，要将玩家行为转化成游戏剧情的一部分，这样玩家才能真正融入游戏世界。

将玩家行为转变为剧情

2.贴合玩家情绪

“伤心的人别听慢歌”就是这么个道理，当我们设计叙事时也要思考玩家在当前界面所处的情绪，以及我们希望让他感受的氛围。当界面所表述的故事与玩家产生情感共鸣时才能真正刺激到玩家。

《使命召唤16》中的匹配大厅设计为前往战场的情景，充分调动玩家情绪

3.平衡交互可用性

经济学中有一个不可能三角理论，用于描述资本自由流动、货币政策独立和汇率稳定三者之间的特殊关系。UI设计也存在一个不可能三角理论，功能全面、界面简洁和交互便捷这三者无法同时达成，必须至少舍去其中一个。

设计中的“不可能三角”

当我们在设计叙事化界面时，同样需要考虑这个“三角”。物品的装饰是否影响了玩家的信息阅读，互动的模拟带入是否让玩家原本的操作变得糟糕？

再好看的艺术品看久了也会让人厌倦，有时设计本身足够惊艳，但是若频繁被触发也会带来负面的体验。最典型的例子就是抽卡时必须要提供连抽的机制，因为此时老玩家注重的是结果，而非过程中的仪式感。

同样的问题也出现在《炉石传说》的自走棋玩法中。《炉石传说》的打斗环节非常有看头，每张卡牌的打斗表现都做的非常生动，还会有观众的呼喊。但是由于自走棋玩法中打斗的时间越长，玩家拿牌的时间就会越短。所以有很多玩家都选择在开始打斗回合后强行重登游戏，以跳过打斗阶段。

四、用叙事做体验设计的步骤

首先，在开始设计之前我们需要了解设计需求以及系统的功能框架和流程，只有将功能链路都细化整理清楚之后，我们才能开始对体验和表现力进行优化。

Step 1 整理系统结构，找到核心界面

这一步主要是对系统功能和策划案内容进行梳理，并确定我们需要设计的内容。在功能设计的阶段我们更多的关注这个界面上应该具备哪些功能和信息。

清晰的功能划分和流程梳理是叙事设计的必要前提

Step 2 设计故事剧情

确定了各个功能和流程之后，我们就需要为完整的操作流程设计一个合理的游戏剧情解释。这个剧情需要与功能相对应。

案例：在《机动战士阿尔法》中，将吃鸡中的选点+跳伞操作改变成了玩家进入驾驶舱选择目的地，然后机甲弹射的剧情。这一设计就很好的将游戏玩法转变为了游戏故事中的一段剧情，非常符合游戏的特色。

《机动都市阿尔法》中的“跳伞”设计

当我们在设计故事剧情时，需要将其与功能点有机的结合，将功能串联在游戏之中。这里将叙事元素和设计时需要考虑的内容结合在一起总结了8个要素。当我们在设计方案时，按照这样的链路来思考，能够确保方案在故事性和功能性上取得平衡。

叙事界面设计8要素

Step 3 设计界面叙事

当我们得到了一个剧情之后，第三步就是运用界面中的元素来表现它。将8个叙事设计要素展现在界面之中，不断衡量和强化他们之间的关系。

案例1：《机动都市阿尔法》的新手选择界面，虽然没有使用场景化的设计，但是却通过对叙事元素的表现，让玩家能够一下理解这里的操作含义和剧情内容。

《机动都市阿尔法》中的门票设计

相比传统游戏通过弹窗来让玩家选择新手难度，《机动都市阿尔法》的设计就要生动很多。

一般游戏中的新手熟练度选择设计

案例2：《昆特牌》的角斗场界面:。玩家的视角是站在公告栏面前的猎魔人，而每一场战斗都是一个契约。玩家击败9个对手便是完成9个契约，最后拿到报酬。界面中使用火漆来表现玩家的成败，挑战失败火漆就会裂开。我们可以在界面中很好的找到叙事设计的要素。

《昆特牌》角斗场界面

总结

场景化只是游戏设计趋势的表象，实际上它代表了游戏行业越来越重视游戏世界观和故事的设计。游戏叙事与界面设计能够有很多结合的可能，其表现形式也是丰富的。我们在游戏界面设计中其实不单单是完成策划的功能需求，更重要的是去创造吸引玩家的游戏魅力。希望我们能够一起在未来的设计中不断探索和创造真正打动人心的作品。

参考文献

[1]Fagerholt, E., & Lorentzon, M. (2009). Beyond the HUD-user interfaces for increased player immersion in FPS games (Master's thesis).

[2]McAllister, G., & White, G. R. (2015). Video game development and user experience. In Game user experience evaluation (pp. 11-35). Springer, Cham.

[3]Johnson, D., & Wiles, J. (2003). Effective affective user interface design in games. Ergonomics, 46(13-14), 1332-1345.

[4]Rogers, S. (2014). Level Up! The guide to great video game design. John Wiley & Sons.