【干货】游戏界面设计 (五)表现设计

关联阅读：

（1）游戏界面设计 (一)核心设计
（2）游戏界面设计 (二)结构设计
（3）游戏界面设计 (三)信息设计
（4）游戏界面设计 (四)体验设计

大多数用户在评价界面时往往会先记起美术表现的程度和特色，稍后才能回忆起使用感受，这暗示了表现设计在界面设计中的重要地位。

策划由于专业所限，无法客观评价美术美丑，但可评估界面美术风格带来的感觉是否满足玩家需要，设计中的独特点在哪，应该采用哪种包装，界面完成度是否足够等。通过沟通此类问题，策划能更容易把控界面质量。

而需要回答以上问题，策划可以和UI美术就“需不需要”和“有没有”【带入感】，【个性化】，【奖励感】，【注意点】四大话题友好地沟通。

一、带入感

界面的带入感指的是让玩家觉得界面表现贴合游戏背景设定，并能让玩家愿意主动沉浸在世界观和故事中。与带入感相对的是功能性，即界面以满足玩家的系统目的为主。（题外话，界面只能增强带入感，但无法带来代入感，后者只能在游玩体验中塑造）

界面的带入感可以帮助塑造世界观，增加作品可信度，进而帮助角色的塑造从而获得玩家的好感。

但不是所有项目的界面都需要承载带入感。游玩体验以关卡场景为主的项目，玩家注意力集中在角色与环境上，界面更应注重功能性，防止体验喧宾夺主（举例：开放世界，硬核动作，箱庭解谜）。


而游玩体验主要是在UI界面上进行的，界面可更注重代入感，以防体验单薄（举例：卡牌，模拟经营，回合制角色扮演）。


确定界面需要带入感后，可参考以下思路：

1.1主题元素

表现主题的方法：

（1）正面表现：选取世界观中特定物件实体/文化符号，与界面融合。

是业界最常见的做法，可取之处在于：玩家在回忆游戏体验时会习惯性地脑内重建该世界观下特征最明显的物件或者符号。如果可以反复强调，则有助于玩家深刻记忆游戏特征，并联想到游玩时的乐趣体验，继而萌发好感。

具体做法上，界面可以：承载在某件特定物件上（如《辐射4》中界面显示在3D终端实体中）；模拟成某件物品的样子（如成就等系统界面会做成书的形状）；将物体/符号置于界面内（如《幻塔》将二级菜单按钮做成六边形暗示科幻世界观）。


（2）侧面烘托：使用形状/颜色/明暗等方式暗示主题。

此方法通过理念而不是实体，塑造出想要的感受或氛围，使玩家能够察觉到处于怎样的世界观。此类方法会组合熟悉的事物来传递主题信息，玩家更能潜移默化地接受设定，并聚焦于游戏本身的内容。


（3）配套支持：文字措辞需要适应游戏主题

此点主要是文案策划注意，文字的修饰需要与界面风格/理念一致。比如轻松活泼的二次元风格游戏界面上可以运用更多口头化的词语。

1.2交互元素

界面上点击互动后只是展示一小段动画，没有系统目的的元件一般称为交互元素。它在世纪初早期作为对带入感的补充在各个游戏中都比较常见。需要打磨品质和界面体验相对重要的项目推荐尝试。


1.3仪式感

界面在达成系统目标之前，增加若干由玩家操作的中间过程，这种过程称为仪式感。它是一种由玩家赋予其达到目标的意义。

可能有人认为仪式感是可以省略的中间过程，但对于二次元向或者年轻化（或者说有一些现实背离倾向）的玩家而言，这种过程可增加其掌控感和沉浸感，甚至还有些玄学式的神秘美感。

界面中的仪式感一般出现在重大变化之前（比如角色养成重大提升，开启新的剧情）。或者重要且不可预测的结果之前（比如抽卡，随机奖励发布）。但说白了这种仪式感本质上还是玩家的操作成本，只是起带入增强作用，不可滥用。


1.4音效

音效是高频次调动听觉感官的重要内容，也是构成带入感不可获取的因素，但因为对收入数据带来的提升不明显而在国内长期受到漠视。音效对带入感有重要意义，值得花费时间打磨，好在近年也越来越受重视。

界面音效的运用注意以下几点：

（1）贴合交互元件（按钮）的实际形象。

即阐述点击后发生了什么事情，如果按钮有具体的形态就使用对应材质的碰撞声。如果按钮为扁平化，则更适合电子合成声。

（2）根据可交互状态区分音调高低。

可点击使用时音调偏高亮，灰态不可使用时音调沉闷。需注意同一个按钮的声源需一致。

（3）高频次的非功能性交互元件的音效，做一些随机化。

一般二次提示框界面为纯功能式的界面，其按键音的功能属性＞情绪属性，必须唯一确定。但非功能类的界面元件，在音效上做一些随机变化能缓解界面使用的单调。


（4）根据界面核心需求分配音效时长。

当界面展示了一个确定结果，且此结果为正面的（比如获得奖励提示，战斗胜利提示）则可以根据程度分配1-2.5秒的音效，帮助情感共鸣；结果为负面时（比如战斗失败提示；强化失败提示）时长需缩短在1.5秒内，防止挫败感发酵。

二、个性化

玩家常说某个游戏界面的美术“有特色”，但又说不上来具体是什么，这种界面中强烈的设计倾向可称为界面表现中的个性化。

个性化不完全等同于美术风格，而是对理念（体验感觉）的选择和凸显。这种理念可以是具体的题材如“自然，科幻，现代”，也可以是抽象的感觉如“极简，动态，潮流，热血”。


界面中的个性化是成本低廉能够定义游戏视觉特色的方法，是一张清晰的对外名片，非常容易抓眼球。但过于强烈的个性化会容易小众（带来更高的理解成本）。

建议世界观设定需要突出的项目可以更注重个性化，而故事背景无需凸显或界面定位为辅助的项目可以减少个性化。如需个性化有以下方法参考：

2.1组合

组合是将某些特定的设计思路或者现有风格有机杂糅在一起成为一种新的风格，并使其贯穿于所有界面中，以突出强调游戏主题或者环境背景。

组合的方法可以根据背景中的时代和地域特征，选择几样有代表性的事物或规则进行融合尝试。这样做好处是可以定义自己独特的风格，非常有利于玩家记忆。


2.2夸张

一些游戏将生活中已有的理念或者原本的设计进行放大，变形，重组，对比或者拉伸，将某种特定感觉进行夸张处理，即可获得更为强烈的个性化效果。

这种处理很能吸引眼球，但不可避免会降低可读性，不太适合大众阅读。所以其他项目借鉴时会进行温和调整。


但如果理念执行不够彻底，就会出现混搭风的别扭界面设计，因此很考验设计师的功底。


2.3色彩

有些游戏会给界面制定一个主色调（有时会搭配一个副色调），并将这种纯粹颜色大面积运用到各种界面的中，以此来建立玩家对主题或者游戏系列（品牌）的认知。此类方法适合比较常见，只是程度各有不同。


三、体现变化

界面表现还有一个作用——体现游戏内容的变化，并带给玩家对应情绪。一般可以分为两种：体现在玩家身上的正面变化（视觉激励），和体现在游戏上的客观变化（呼应内容）。

3.1视觉激励

当玩家达成游戏阶段目标时，除了游戏本身提供的奖励，解锁的新内容，界面对应地也需在画面上给予精神激励，以强化玩家的获得感和期待感，帮助达到沉浸体验或者引导某种行为。比如获得奖励时的提示界面有更精致的纹理细节和光效；高品质道具的流光和特别设计的品质框底图；商业活动界面更丰富的色彩等。



但以上是单向的激励，拓展到双向（社交需求）后，就出现了“名片”“头像框”“卡背”等系统内容。界面美术也可以成为激励玩家产生获得感，奖励感的重要内容，甚至可以成为商品。


3.2呼应内容

项目经历丰富的UI美术知道，像是关卡难度切换的界面往往需要根据难度做几张不同的底图以体现难度变化。这种行为实际上用到了界面变化中呼应内容的原理。


这种界面体现的变化也应遵守同一个风格，并展现进阶感。但目前很多游戏界面因为成本问题并没有大规模应用这种思路，比如玩家晋升不同段位时，普通的UI框会从青铜转变为黄金等。以后也观察下哪家游戏率先会这么做，效果如何。

四、注意点

4.1识别优先

一些UI美术会为了极致的表现效果牺牲识别度，但对玩家实际体验得不偿失。需注意的问题包括不限于：

• 装饰遮挡了重要显示部分（比如装饰遮挡了进度条的开始和结束部分）
• 将按钮包装得不像可交互元件，和底板相似（也没做动效或特效提示）
• 需识别的文字和图像没有清晰化处理（比如直接显示在HUD上的文字没有加描边或底板）
• 装饰比系统信息更显眼（比如页面一半以上用于立绘，按钮和文字排列局促又很小）
• 界面美术精致但太难懂，这点对手游来说比较不利（比如和主题不相关或风格不符的图像/文字）
  

4.2宗教和组织

在国内，对宗教或者历史上真实的组织的刻画都需要慎重避开，如果真需要就侧面展示，做一个可以联想到但又确实不同的东西（甚至疑似也不行）。不然审核分分钟会被打回来，上线还会被带节奏。

即使是发行在国外的项目，也推荐有本地化比较熟悉的人才，不然很难像贝塞斯达一样能做出《德军总部》系列还不至于下架。

因此任何美术资源验收时需要策划稍微把关下，即使是符咒或者用其他文字装饰的贴图也需要美术一应提供其含义。


4.3品味区分

社会上不同阶级和年龄段的玩家拥有不同品味，在UI表现设计时需正确对应：

（1）中年群体80后之前会对直接高亮显眼的图像吸引注意。参考传奇类闪光大翅膀或中老年人表情包。


（2）青少年群体更接受各种色调对比，但饱和度不会设计得太夸张，长时间观看也会很累还有光敏性癫痫风险。参考Q版或者儿童类游戏。


（3）越是偏向东亚文化的玩家，越能接受界面里承载更多信息，但西方刚好相反。

（4）越是偏大众向的项目，设计上越需要折中，去掉偏极端的设计。


以上只是简单举例，后续会总结更多，欢迎补充。

五、本章知识框架


经过策划和UI的共同努力，做出“好看”的界面并不难（当然作为策划，表现上需要多听UI美术的）。整个界面设计的知识点到这里也差不多落幕了。之后我也会就往这个体系里迭代内容，不断完善。

感谢大家的观看，欢迎多提意见，我们在下一个系列里再见。


原文：https://zhuanlan.zhihu.com/p/616025498