剑与远征高级UI设计师AG：如何设计能让玩家共情的故事化UI

本文出自“莉莉丝游戏”公众号

AG，亢奋型游戏UI设计师（上面配图是为数不多的静态）。曾主导《咔叽探险队》的UI概念设计与落地。于2020年入职莉莉丝游戏，参与《剑与远征》的UI设计工作。

“凡是通过设计让玩家与记忆中的故事产生记忆关联的，就是故事化设计。”

一、UI为什么要做故事化设计？

故事，是生活的比喻。

我们用比喻的方式，将我们对世界，对人生的洞见以故事的形式向他人述说。我们在故事中成长，也将人生日常演绎成故事。

通过设计的叙事手段与玩家的故事经历相结合，不仅能将现有故事丰满和补充，还能增强交互体验的趣味与质量，让玩家更容易对游戏的故事产生共情，从而提升信息的转换效率。

提供想象空间，以少喻多

在我们对不同故事的认知过程中，也建立了一套信息与形象的关联方式。



这种时候不需要讲述整个故事的全貌，我们也能感受到这些形象背后所代表的涵义和引发各种情节的联想。

在UI设计时，同样也能使用这种通过引发联想的形式，去引发玩家对于信息和操作的理解。



在游戏spiritfarer中，砍树的工具被设计成一根相连于猫与主角之间的锯子，在没有其它提示UI的情况下，我仍然会下意识通过左右移动来尝试着操作锯子。

增加趣味性的同时，对现有故事丰满和补充

背景故事的丰满：



梦魇大陆（团本玩法）的背景设定中，描述的是玩家作为被选中的勇士，穿越时间来到信仰丧失的年代，解救城邦、开拓疆土、迎战恶魔的故事。

在AFK的设计语言中，荆棘是恶魔的象征。而在该玩法的设定中，星辰是指引玩家方向的正向概念，设计介绍界面时，设计的思路是把这二者进行结合，将故事的戏剧性冲突进行视觉暗示。

在该玩法的圣物系统设计中，我们可以对比一下有故事化要素和没有该要素的时候，在感受上会有哪些差异。



相比于左侧由星空和山体构成的场景，右侧的内容安排会更具叙事感。

延续至山顶的火光，山顶的柱子和背后祭祀柱以及背后张开双臂的虚影，既增强了整体感受的想象空间，也对梦魇大陆的故事背景进行了视觉信息上的丰满。

圣物星空上的虚影在最初设计时，是希望根据不同的职业显示不同的星辰系天神的形象，但是由于目前的设定中，该系列天神还没全部设计完成，最终选择绘制了一个与当前天神无关的形象。但该设计方式仍为以后拓展预留了空间。

行为目标的补充

对于用户的目标，APP应用和游戏很不一样的一点是：APP是满足人现有的需求，如打车、购物、存钱理财等现实需求，而游戏内的目标却是我们帮助玩家构建的。就像让玩家去屠龙、去冒险、去生存，我们需要一个故事来帮助玩家构建目标。


由于接到该三消需求时，并没有明确的故事包装，与其临时想一个有具体目标的故事包装，我更愿意做一个有开放结局式的故事化设计。这样也利于后续的维护和拓展。

由于该活动主推的英雄是松鼠皮帕，我从皮帕的角色行走动画中提取了他紧张的情绪，做了一个紧张的四处张望的小头像在最新关卡的位置。这样既能与内部的动画呼应，也呈现一种迫切希望向前推进的情绪。这也为该功能往前推关这一任务的目的提供了一个补充和解释的空间。

这是一次UI先行的设计，在开发中期，文案的内容开始接入，在现有表现的基础上，结合迷糊小女巫皮帕的性格，做了一个这样的开场设定：

救救救救救命啊！糊涂小女巫皮帕又闯祸啦！


皮帕有一个大大的次元魔法口袋，里面装满了星界学院老师给的魔法种子。这些种子原本是老师们为了改善沙漠环境而准备的，只要接触到一滴水就会快速生长。而糊涂鬼皮帕不小心把魔法口袋给捅破了一个洞，魔法种子就这么从口袋里漏了出来，伴随着皮帕上窜下跳地脚步撒得整个薄暮丛林到处都是。这些魔法种子落入了丛林肥沃的土壤中，开始疯狂疯狂疯狂疯狂生长！不赶紧采取措施的话，大家的帐篷都要被底下窜出来的植物捅破啦！


幸运的是，冬季的薄暮丛林刚刚降下了一场大雪，大多数种子都被封在了冰中延缓了生长速度。只要敲碎冰块，将种子放回到魔法口袋中，就能避免灾害的扩大！


而不幸的是，我们的糊涂鬼皮帕到现在都没有发现，自己的口袋破了一个洞……


“呜哇呜哇！为什么种子越捡越多啊！”

我们不是每一次都能拿到一份故事化的系统包装，但我们仍可以提前在设计中预留故事化的空间。

二、UI什么时候可以做故事化设计？

当游戏本身有讲故事的需求且玩家注意力仍有剩余时，剩余的空间就是 UI 故事化程度的空间。

游戏的故事是否需要从 UI 层传达，取决于整个游戏的构架中，我们希望玩家如何分配他们的注意力。

尽管玩家的注意力会因为个体的差异，无法被彻底量化成具体的数值，但开发者在进行系统设计时，仍能将注意力的分配预期作为考量的尺度之一。

假设一个玩家能投入的“注意力”总值为：100%，我们希望玩家将多少比例分配在场景与角色演绎上？90%？80%？还是 10%或者 20%？

如果是希望将玩家 90%的注意力集中在场景与角色上，我们能确保在场景与角色的演绎上能吸引玩家 90%的注意力吗？画面的美术质量足够吗？角色的表情与动画能生动到产生代入感吗？

如果不能，那玩家剩余的注意力去哪儿了？

是动听的音乐分散了注意力吗？是玩法机制的趣味性吸引了注意力吗？又或者是各种糟糕的体验吸引了玩家大部分的注意？这些吸引注意力的事情将玩家的 100%注意力瓜分完后，还有剩余吗？

如果还有剩余，那个剩余的部分，才是 UI 故事化的发挥空间。如果没有剩余，在 UI 确保体验顺畅的前提下，再额外增加"故事化"的信息，很容易造成不必要的噪声干扰。

• 在“信息传播”的定义中，传播由信息源、信息、接收者构成。
• 媒介与噪声：从信息源到信息再到接收者，在这转换的过程中，承载信息的媒介、信息流动的速度、接收者的个人状态与能力等等，都会对信息的传播造成影响。
  

在王者荣耀的PVP模块中，战斗画面的信息重要程度最高，在这一过程中玩家没有精力也不应该被“包装”类的信息干扰。

如果游戏开发者们都很明确知道，我们在各个模块的信息量安排，仍然不足以引起玩家的全部注意力，那从 UI 层面对故事进行故事化设计，不仅能很好地将现有故事进行丰满和补充，还能增强交互体验的趣味与质量，让玩家更容易对游戏的故事产生共情。

三、如何做故事化设计

关于在UI上的故事化设计手法有很多，下面将从“冰山原则”和“感受质”两个角度出发，思考如何通过这两个要素让玩家产生对故事的记忆关联。

“冰山原则”的指导意义

“冰山运动之所以雄伟壮观，是因为他只有八分之一在水面上。”

文字与形象是所谓的“八分之一”，而情感和思想是所谓的“八分之七”。

相比于强调“如无必要，勿增实体”的“奥卡姆剃刀”，冰山原则更加强调实体经验的省略——省略的是我们凭经验可以填充想象的部分。最大限度地调动读者的经验参与，使读者感受到作家对自己理解力和经验的信任。

在UI的故事化设计中，我们也可以从这个角度进行思考，用更少更必要的元素去强调更多的情感与思想。

在对某个事物进行设计呈现时，应该时刻思考：对于外框、轮廓、花纹与材质的刻画等等这些“细节”的处理，是希望传达什么？为了实现这个传达，必须要使用当前用的手段吗？有哪些手段是可以舍弃的？是否有更好的方式？

如果当我们反思自身的设计时，发现在"细节"的处理上对最终的传达目标没有明显帮助时，可以考虑将那些“可有可无”的要素进行舍弃，这样既可以有效的为UI的信息腾出空间，也更能在众多的信息要素中显现出我们要传达的内容。

示例：群星之幕

群星之幕是一个通过达成条件去解锁更多资源产出的系统。其中包含多个星座模块，每个星座对应一条成长线。而每个成长线中又包含多个成长点（星座中的星星）。

下面是我最开始摸索方向时做的概念图：


方案A：不过多强调背景的叙事属性，更多强调功能信息传达与交互体验的一致性。每个星座上都将显示该星座拥有多少颗星星，每颗星星又有激活与未激活的状态。

方案BC：虽然传达的内容有所差异，但主旨都是希望通过用壁画的方式去强调界面的叙事属性。星座中的星星也拥有激活与未激活的状态，但是显示区域较小，背景更突出。

我们在组内讨论时，都一致认为，后面的2个方案虽然叙事感更强且在绘制表现上有更大的发挥空间，但是也因为背景的强调，反而会弱化对星座本身的认知。如果在此基础上再对星座进行加强，玩家的注意力反而会因为2个重点信息的同时存在而产生割裂。并且强调背景的叙事属性不仅要花费大量的精力去进行思考和绘制上的叙事安排，后期拓展所需的工作量也是一个令人头疼的问题。

面对自己挖的坑，我开始反思：这个系统的重要程度是否能让它占用足够多的开发资源？是否有必要给“星空”的设定再加一层“壁画”的包装？

基于开发成本和信息优先级的考虑，最终我们放弃了壁画的方案。但执着于叙事化设计的我，仍然希望能保留些许叙事成分在A的设计中。

关于八分之七的思考：

• 从神话感受出发：体现神秘感、增加宗教意味。
• 从现实感受出发：体现天上群星的繁多与闪耀。
• 从信息等级出发：星空<花纹<星座。最终呈现的效果给人的感受应符合信息的分级。
• 从制作成本出发：背景尽可能使用可复用的纹理，减小后续拓展的成本。
• 从感受出发：基于第4条的思考，重复的背景可能会使观众感到审美怕疲劳和无趣，需要用其它的手段弥补这种负面感受。
• 从画风整体性出发：作为AFK游戏里的第一个以星空为主题的界面，没有可参考的绘制对象，需要注意在细节刻画时避免与整体画风过于脱离。
  

关于八分之一的呈现：


背景的呈现：

• 通过对称式的构图、下方举着类似埃及手的人和圣体光外圈，增强与宗教意味的联想。
• 由上往下发散的扭曲花纹和经纬线将分散的图标个体整合成一个整体，增强星图整体性的联想。
• 背景的星空由两张可以四方连续的PNG组成。在拖动操作时，花纹与后方的星空有错层移动的效果，并且偶尔会有流星划过。这些细节不仅增加趣味程度也减小因重复度带来的乏味。
• 增加了AFK特有的排线和噪点式的质感，提升与现有画风的契合度。
  

星座的呈现：

• 在星座图标的绘制上，减少装饰性元素的设计，尽可能只突出一个要素。明度的安排也是将更高的明度留给更符合图标主体的部分。
• 在花纹和星座图标上，都有流动的玻璃质感，但是在特效的质感和播放速率上做了分级，图标更强，背景更弱。
• 在点击星座进入下一级界面时，通过模拟镜头的移动，进一步加强空间感。
• 星座内外星星的连线方式尽可能的接近，减小因界面跳转产生的脱离感。
  

我想可能会有人有疑惑，明明说的是八分之一，但为什么看起来描述的比八分之七还要多。

我的观点是，在使用“只呈现八分之一”的概念时，并非是要刻意减少设计元素，而是应该强调每个设计手段与元素安排自身的存在意义，且要尽可能的在不增加信息干扰的情况下有助于实现我们的最终目的。

文字与形象是所谓的“八分之一”，而情感和思想是所谓的“八分之七”。

感受质

某一现象和思维所附带的感受就是感受质。

感受质是一种内在的、意识可识别的、非表征的特性。

有时感受质会被定义为感官经验，而在别的情况下，如果思想和此类认知也具备显著的特征，那么他们也具有感受质。

比如：想象某种材料的触感、湿度等等。这种想象的过程中所带来的感受，也属于感受质。

相比于用上述的文本去解释什么是感受质。我认为从下面的感觉实验中，或许大家更能体会“感受质”一词的含义。


在看上面这一图像时，能否唤起你自身经验的某种感受？

它的热量、运动轨迹甚至是柴火发出的噼啪声，有在你的脑内进行重现吗？如果是有常年使用柴火土灶经验的人，甚至能感受到一种烟雾熏鼻的错觉。

再看看下面这张：挟土秀平设计的自然木屐。


就算你从未穿过这双青苔木屐，你也一定能想象穿上去时的那种触感与湿度。

如《设计中的设计》一书所说的那样：视觉并非是自足的，而是与其它的感觉知觉联手工作的。

当眼睛捕捉到的复合视觉印象被大脑解读的一刹那，图像便立刻成为一个生动的实体形象。多种感官组合起来的感觉刺激汇聚到一起，在脑子紧密结合，一个心理的图景就这样诞生了。

在任何内容的呈现中，这个内容要么是个特定的感受质，要么就是某种可以分析被这种感受质组成的东西。内容的呈现作为一个事件当然是唯一的，但组成他的感受质却不是。

例如蜂蜜的甜味与糖的甜味并不相同，但都作为甜的感受质出现在我们的认知经验中。


从一个经验到另一个经验时，他们是可以被辨识出来的。就如你能分辨出某糖果的甜味与蜂蜜的甜味并不一致。

上面的两个例子是感受质在知觉经验中比较具体的呈现，除此之外，如拥抱、胃疼、发痒、头晕目眩等等这类经验中，身体的上的复杂感受也属于感受质的呈现。

某些对人而言属于正向感受的感受质，也会被用于设计之中。例如许多懒人设计都会强调被拥抱的感觉，给人一种温暖和安全感的体验。


感受质也存在于对情绪的感受中。

如愉悦、恐惧、爱、悲伤、嫉妒、遗憾、无聊、紧张、痛苦等。


在我们通过颜色去传达情绪或者某种属性时，也正是在调动玩家对于颜色感受质的认知。

就像红色所附带的联想：血、火、热量、危险等感受，尽管每个人因为知觉经验的差异，在感受强度上会有所不同，但大部分人对整体概念的认知并不会有太大差异。因为感受质本身也来自于材料自带的感觉属性（血液和火焰等例子中，红色通常作为固有属性出现）。


感受质在概念上没有强弱之分，但是感受上有。

概念指的是感受质本身，如“疼痛”本身作为一种感受质，所有类型的疼痛都算是“疼痛”这一感受质，但是对疼痛等级的感受却会有明显的强弱之分。


唤起感受质的，不只是视觉形象。


最初在设计徽章这一功能时，既要确保该功能和其它的切页的风格融洽，又要体现出该徽章页面的特殊性，希望以此加强获得徽章时的满足感和刺激玩家的展示欲望。

在设计过程中，我一直在反复思考，这些徽章会给玩家一种什么样的心理感受呢？是硬的？还是软的？温度是冰冷的还是温热的？我们是否可以让玩家感受到这些特性？

于是我向策划提出了“拥有感”的概念，即提升玩家对徽章各种材质属性的认知，来获得玩家对徽章这一存在的认同感，给玩家“这个物品就在我眼前，我手中”的想象暗示。

我们在徽章详情页中，加入了查看部位细节的功能，每处部位的描写都是对该徽章感受质的暗示。给温度、手感、重量这些不易在视觉上传达的信息提供了想象空间。


从玩家的反馈来看，除了从图像的角度去呈现，文本的呈现似乎也是一种可行的方法。

在进行故事化设计时，从感受质的呈现出发，细节将不只是对事物形象的还原，还有心理感受的丰满。

冰山原则是以少喻多的指导方向，对感受质的理解将决定事物呈现的深度。

这二者的结合能为我们在做故事化设计时提供新的观察视角和思考方式。


来源：莉莉丝游戏