游戏界面设计 (五)表现设计

核心设计 - 结构设计 - 信息设计- 体验设计 - 表现设计

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

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

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

1.带入感

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

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

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

游戏界面设计 (五)表现设计 - 图1

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

游戏界面设计 (五)表现设计 - 图2

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

1.1主题元素

表现主题的方法:

(1)正面表现:选取世界观中特定物件实体/文化符号,与界面融合。

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

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

游戏界面设计 (五)表现设计 - 图3

《灵魂献祭》中,主角发生的游戏内容大多是通过回忆书中的内容进行的,因此游戏中所有界面都做成了书本中页面的样子;玩家加入的组织也有专属的标志并显示在界面上

(2)侧面烘托:使用形状/颜色/明暗等方式暗示主题。

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

游戏界面设计 (五)表现设计 - 图4

《死亡空间》为表现未来科幻世界交互感,大量界面运用了倾斜的LED光屏,banner的造型也容易联想到工业装甲设计

(3)配套支持:文字措辞需要适应游戏主题

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

1.2交互元素

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

游戏界面设计 (五)表现设计 - 图5

塔防《王国保卫战》中,战场之外的装饰元素比如树,动物等点击后均有反应;《炉石传说》里类似设计更多,比如点击战场上的幕布会出现灰尘等

1.3仪式感

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

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

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

游戏界面设计 (五)表现设计 - 图6

《阴阳师》式神召唤界面曾将这种仪式感发扬光大

1.4音效

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

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

(1)贴合交互元件(按钮)的实际形象。

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

(2)根据可交互状态区分音调高低。

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

(3)高频次的非功能性交互元件的音效,做一些随机化。

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

游戏界面设计 (五)表现设计 - 图7

手游《天地劫:幽城再临》中点选玩法章节时会发出随机琴弦声

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

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

2.个性化

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

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

游戏界面设计 (五)表现设计 - 图8

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

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

2.1组合

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

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

游戏界面设计 (五)表现设计 - 图9

《荒野大镖客2》的界面选用了老照片和涂漆风格,图标用了钢笔线稿,组合在一起构成了独一无二的设计

2.3夸张

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

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

游戏界面设计 (五)表现设计 - 图10

《女神异闻录5》作为被二次元项目借鉴个遍的经典案例,大胆将图形和颜色配合,将“时髦,年轻,都市”的理念进行了彻底贯彻

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

游戏界面设计 (五)表现设计 - 图11

卡牌手游《先驱》对P5风格的“模仿”….但没学到精髓,只能说trying so hard

2.3色彩

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

游戏界面设计 (五)表现设计 - 图12

《战地2042》以特定颜色可以引导玩家对游戏的印象,这种方法类似品牌logo的色彩设计

3.体现变化

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

3.1视觉激励

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

游戏界面设计 (五)表现设计 - 图13

品质框如果只区分颜色,那么UI只考虑到了区分信息的层面,如果增加了能多纹理设计使其更赏心悦目,那么则考虑到了视觉激励层面

游戏界面设计 (五)表现设计 - 图14

手游《黑潮之上》的七日签到会将已签到部分最终组成一张图片,玩家会期待最终的成像,这种尝试也是探索界面视觉激励的部分,值得鼓励

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

游戏界面设计 (五)表现设计 - 图15

《原神》的名片本质上是界面的底纹替换,但玩家对社交的需求诞生了这种系统,也是对界面视觉激励的典型体现

3.2呼应内容

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

游戏界面设计 (五)表现设计 - 图16

《炉石传说》狂野模式界面中会出现生长的藤蔓,而其他模式没有

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

4.注意点

4.1识别优先

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

(1)装饰遮挡了重要显示部分(比如装饰遮挡了进度条的开始和结束部分)

(2)将按钮包装得不像可交互元件,和底板相似(也没做动效或特效提示)

(3)需识别的文字和图像没有清晰化处理(比如直接显示在HUD上的文字没有加描边或底板)

(4)装饰比系统信息更显眼(比如页面一半以上用于立绘,按钮和文字排列局促又很小)

(5)界面美术精致但太难懂,这点对手游来说比较不利(比如和主题不相关或风格不符的图像/文字)

4.2宗教和组织

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

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

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

游戏界面设计 (五)表现设计 - 图17

Konami的《寂静岭》系列中的护士怪帽子上都没有添加红十字标识;就个人经历来说,日企也一般习惯对这类可能产生纠纷的元素进行抹去处理

4.3品味区分

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

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

游戏界面设计 (五)表现设计 - 图18

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

游戏界面设计 (五)表现设计 - 图19

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

(4)越是偏大众向的项目,设计上越需要折中,去掉偏极端的设计(举例:《部落冲突》的怪物设计基本都摈弃了让普罗大众反感的特征,并将其柔化为类人生物,使其更易被接受)

游戏界面设计 (五)表现设计 - 图20

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

5.本章知识框架

游戏界面设计 (五)表现设计 - 图21

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

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


注:本文以上未注明出处的图片均来自于网络,侵删。