导言：提升界(jie)面品质和体验是游(you)戏UI设计师不(bu)断追求的目标，而纵观人(ren)类艺术发展，无论艺术形态如何变(bian)化，其抒发情感，讲述故事的(de)本质没有改变。村上春树在他的处女(nu)作中这样说”存在既表达，假如不(bu)能表达什么，就等于并不存在，文明就会归零“。作为游戏设(she)计师，我们又该(gai)如何表达呢？
一、从游(you)戏场景化设计说起
场景化设计已经是游(you)戏设计行业中的一大共识，2009年当玩家在《Dead Space》中(zhong)通过手臂上的全景(jing)投影来查看地图时，第一(yi)次被这种效果震撼。也(ye)是从那一刻开始，世(shi)界观、代入感、场景(jing)化设计、3DUI都成了游戏设计行业中的高频(pin)词汇。早在2000年(nian)初，主机游戏就已(yi)经开始了游戏界(jie)面场景化的发展(zhan)。在2009年一篇名为《Beyond HUD》论文中，正式提出(chu)了Diegetic Representation（剧情(qing)UI）这一概念，同时还将UI以“是否在剧情中”和“是否在游(you)戏空间中”这两个维度，将游戏UI分为四大类。
《Dead Space》（2008）第一次将场景(jing)UI带到了游戏中
Fagerholt, E., & Lorentzon, M. (2009).
UI的情景分类
场景化UI设计几乎成为了高(gao)品质UI的代名词，诚然它有着更好的(de)表现力，更好的代入感。但另(ling)一方面它也面临着制作难度大、成本(ben)高的问题。同时场景化设(she)计也并非适用于(yu)所有的游戏类型或界面，例如游戏(xi)子系统、弹窗类界面等等。
二、真正打动人的是故事
并(bing)不是每个界面都能场景化，所以当(dang)我们在设计一个由于各(ge)种限制而无法进行场景化(hua)表述的界面时，我们该如何(he)增强它的表现力和代入感呢？
场景化只(zhi)是一种设计方法，而其目的才是我们需要关注的本质。从(cong)人类艺术诞生以来，虽然艺(yi)术的载体和形式一直在变(bian)化，但是其核心都是讲述故事和(he)表述情感。就好比描述生动(dong)的小说，虽然没有强烈的视觉冲击，但(dan)是依然能够让你产生强烈的临(lin)场感。真正打动人的是故事。
三、将叙事融入游戏界(jie)面
既然故事本身才是那个有趣的灵魂(hun)，那我们应该如何将其融(rong)入到我们的界面设计中呢(ne)？
叙(xu)事要素
叙事要(yao)素想必大家都不陌生(sheng)，人物、时间、地点、事件。一句话(hua)概括就是谁在哪里做什(shi)么。所以，我们只要在界面中表现(xian)或交代清楚这些要素，游戏界面就能够(gou)给人带来故事的沉浸(jin)感。
1.角色
角色是目前游(you)戏中运用最多的代入方式，无(wu)论是活动海报还是主界面的“看板娘”，都能起到很好的(de)吸引玩家眼球的(de)效果。除了展现游戏内(nei)容，角色还能够向玩(wan)家传递情感，引导情绪。例如《古(gu)墓丽影：暗影》中的存档点(dian)设计，当玩家触发存档操作后，劳拉会蹲坐在篝(gou)火旁，玩家在调整装备和技能的时候能(neng)够看到劳拉疲惫但坚定的(de)神情，这与玩家完成战斗(dou)之后的状态产生了(le)很好的共情。
《古(gu)墓丽影：暗影》存档点设计
角色的运(yun)用并不限于模型或是大幅(fu)插画，也可以是很小的一个装饰形象。例如百闻牌中的小猫(mao)咪，会在提示引导的内容边(bian)上出现，当玩家看到她就知道这里有内(nei)容需要注意了，给人(ren)非常友好的感觉。
《百闻牌》中的(de)猫咪会在所有引(yin)导和提示的地方出
2.物件
人物的表现是(shi)最能够让玩家带入剧情的(de)方法，但通过对其他物件、环境等要(yao)素的展现同样能够起到叙事的效果(guo)。例如我们经常能够看(kan)到的以书本为载体的UI设(she)计，以及GTA5中独具风味(wei)的手机操作（之后(hou)被各类游戏争相(xiang)模仿）。
《哈利(li)波特：觉醒》中的图鉴系统
《GTA5》玩家(jia)手机界面
《永远的7日之都》中通过手机来展(zhan)现玩家的收集系统
1003.环境
同样的(de)，使用环境氛围也能够增(zeng)强界面叙事感。这种方(fang)法的好处是不会对显示内容造(zao)成过多的干扰，能够适用(yong)于更多的通用界面。例如《第五(wu)人格》中的起雾效果，就能运用在很多(duo)界面之中，甚至成为游戏的一个记(ji)忆点。
《第五人(ren)格》中使用玻璃起雾的效果来(lai)制造恐怖感
《Dishonored 2》中大量运用(yong)破碎玻璃来渲染紧张和危险
《刺客信条：起源》中不断(duan)浮动的光点，也(ye)是刺客信条系列所使用的环境元素
环境要(yao)素的运用可以贯穿整个游戏，这(zhe)是其他要素（人物、物品、事件）无法做到的。它可以(yi)是光影、HUD的显示效果、烟(yan)雾或是火焰等等(deng)。
4.事件
最(zui)后一项是事件，它在某种(zhong)程度上可以说是前三者(zhe)的结合体。运用事件(jian)能够让UI有很强的互动(dong)感，让玩家血脉偾张(zhang)。
《底特律：变人》中(zhong)的UI小姐姐
《底特律：成人(ren)》中当玩家进入游戏、暂停、完成(cheng)任务时，都会有小姐姐在画面(mian)中和玩家互动，留(liu)下了令人深刻印(yin)象。在游戏结尾你还可以(yi)选择是否“放生”她。
《蝙蝠侠：阿卡姆骑士》互动菜单(dan)
《蝙蝠(fu)侠：阿卡姆骑士》的菜单选项也采用了(le)事件设计，当玩(wan)家在选项中来回切换时，背后的蝙(bian)蝠侠Pose会来回变换。这一设计在(zai)后来的《古墓丽影：暗影》的主菜单中也有同样的运用(yong)。
《非人(ren)学院》中将举报设计转化为(wei)“留校观察”，一(yi)下就有趣很多
事件的表现并(bing)不是一定要非常具象，例如《非人学院(yuan)》中的举报设计，就用漫画(hua)的形式来表达了校园举报这一事件，同(tong)样让互动变得有趣。
手游中我们经常能在(zai)抽卡中看到互动事件的设(she)计，例如《阴阳师》、《百(bai)闻牌》的画符抽卡(ka)，《街霸：对决》的连招抽卡等(deng)。合理地运用叙事设计能(neng)够增强游戏的魅力，让(rang)游戏变得更加鲜活。
叙事原则
既然我们已经(jing)了解了UI叙事设计是(shi)什么，那在实际运用时我们该注意哪些(xie)呢？
1.贴合游戏世界观
好的叙事设计需要贴合(he)游戏的世界观和(he)内容，要将玩家行(xing)为转化成游戏剧情(qing)的一部分，这样玩家才能真正融入游戏(xi)世界。
将玩家行为转(zhuan)变为剧情
2.贴合玩家情绪
“伤心的人别听慢(man)歌”就是这么个道(dao)理，当我们设计叙事时也要思考玩家在(zai)当前界面所处的情绪，以及我们希(xi)望让他感受的氛围。当界面所表述(shu)的故事与玩家产生(sheng)情感共鸣时才能真(zhen)正刺激到玩家。
《使(shi)命召唤16》中的匹配大(da)厅设计为前往战场的情景，充(chong)分调动玩家情绪
3.平衡交互可用性
经济学中有一个(ge)不可能三角理论，用于描(miao)述资本自由流动、货币政策(ce)独立和汇率稳定三者之间(jian)的特殊关系。UI设计也存在一个不可(ke)能三角理论，功能全面、界面(mian)简洁和交互便捷这三者无法同(tong)时达成，必须至(zhi)少舍去其中一个。
设计中(zhong)的“不可能三角”
当我们在设计叙事化(hua)界面时，同样需要考虑(lu)这个“三角”。物(wu)品的装饰是否影响了玩家的信息阅读，互动的模拟带入是否让玩家原本的操作(zuo)变得糟糕？
再(zai)好看的艺术品看久了也会让(rang)人厌倦，有时设计本身足够惊艳，但是(shi)若频繁被触发也(ye)会带来负面的体验。最典型的(de)例子就是抽卡时必须要提供连抽的(de)机制，因为此时(shi)老玩家注重的是(shi)结果，而非过程中(zhong)的仪式感。
同样的问题也出现(xian)在《炉石传说》的自走(zou)棋玩法中。《炉石传说》的打斗环节非(fei)常有看头，每张卡牌的打斗表现都做的(de)非常生动，还会有观众的呼喊。但是由(you)于自走棋玩法中打斗的时间越(yue)长，玩家拿牌的时间就会越短。所(suo)以有很多玩家都选择(ze)在开始打斗回合后强行重登游(you)戏，以跳过打斗(dou)阶段。
四、用叙事做体验设(she)计的步骤
首先，在开始设计之(zhi)前我们需要了解设计需求以及(ji)系统的功能框架和流程，只(zhi)有将功能链路都细化整(zheng)理清楚之后，我们才能开始对(dui)体验和表现力进行优化。
Step 1 整理系统结构，找(zhao)到核心界面
这一步主要是对系统功能和(he)策划案内容进行梳(shu)理，并确定我们需要设计的内容(rong)。在功能设计的阶段我们更多的关注(zhu)这个界面上应该具备哪些功能和(he)信息。
清晰的功(gong)能划分和流程梳理是叙事设(she)计的必要前提
Step 2 设计故事剧情
确定了(le)各个功能和流程(cheng)之后，我们就需要为(wei)完整的操作流程设计一个合理(li)的游戏剧情解释。这个剧情需要与功(gong)能相对应。
案例：在《机动战士阿(a)尔法》中，将吃鸡中的选(xuan)点+跳伞操作改变成了玩家进入驾驶舱(cang)选择目的地，然后机(ji)甲弹射的剧情。这一(yi)设计就很好的将游戏玩法转变为了游(you)戏故事中的一段剧情，非常符合游戏(xi)的特色。
《机动都市阿尔法》中的“跳伞”设(she)计
当我们在设计(ji)故事剧情时，需要将其与功能点有机(ji)的结合，将功能串联在游戏之中。这里将叙事元素和设计时需要考虑(lu)的内容结合在一起总结了8个要素。当(dang)我们在设计方案(an)时，按照这样的链路(lu)来思考，能够确保方案在故事性和(he)功能性上取得平衡。
叙事界面设计8要素
Step 3 设计界面叙事
当我(wo)们得到了一个剧情(qing)之后，第三步就是运用(yong)界面中的元素来(lai)表现它。将8个叙事设(she)计要素展现在界面之中，不断(duan)衡量和强化他们之间的关(guan)系。
案例1：《机动都市阿(a)尔法》的新手选(xuan)择界面，虽然没有使用场景化(hua)的设计，但是却通过对叙事元素(su)的表现，让玩家能够一下理解这里的操(cao)作含义和剧情内容。
《机动都市阿尔法》中(zhong)的门票设计
相比传统游戏通(tong)过弹窗来让玩家选择新手难度，《机(ji)动都市阿尔法》的设计就要生(sheng)动很多。
一般游戏中的新手熟练度(du)选择设计
案例2：《昆特牌》的角斗场界面:。玩(wan)家的视角是站在公告(gao)栏面前的猎魔人，而(er)每一场战斗都是一(yi)个契约。玩家击败9个(ge)对手便是完成9个契约，最后拿(na)到报酬。界面中使用火漆来表现玩(wan)家的成败，挑战失败火漆就(jiu)会裂开。我们可以在界面中很好(hao)的找到叙事设计的要素。
《昆特牌》角斗场界面
总(zong)结
场景化只(zhi)是游戏设计趋势的表(biao)象，实际上它代表了游戏行业越来越重(zhong)视游戏世界观和故事的(de)设计。游戏叙事与界面(mian)设计能够有很多(duo)结合的可能，其表现形式也是(shi)丰富的。我们在游戏界面设计中(zhong)其实不单单是完成策划(hua)的功能需求，更重要(yao)的是去创造吸引玩家的游戏魅(mei)力。希望我们能够一(yi)起在未来的设计中不断探(tan)索和创造真正打动人(ren)心的作品。
