程序员站在游戏策划角度写给美术的 UI 指南

2022-07-01 星期五
文章旨在打通一些游戏行业各个不同专业岗位的一些入门知识，希望大家看完多少能有些收获。为了理解方便，会尽可能使用日常语言表述，不准确的地方请大佬们多多包涵。
所有转载请注明出处。
本文将从
  1. 程序：计算机图形技术（Computer Graphics）
  2. 策划：游戏体验 UX / 信息的呈现方式 / 信息的优先级 / 平台间UI 适配
  3. 美术：画风(Graphics style / Drawing style) / 声音设计（Sound Design）
  4. 国际化市场 / 本地化：不同语言间UI避坑
这四个方面分享一些基础知识和在3D游戏中的 UI 设计方面的应用。这里的 UI 不单纯指玩家屏幕上的血条/弹匣内剩余子弹等 UI 元素，也包括视觉特效VFX / 音效SoundEffect 等其他的一些广义上为玩家提供信息的元素。

程序：计算机图形技术-我们的虚拟三维世界是什么？

三维虚拟世界的基本构成：点-线-三角形
在计算机中所有的三维物体都实际上是由一个一个端点（Vertex）间连接构成一个个小的三角形平面（Triangle），然后这些小三角形又紧密相连，包裹出了一个封闭的物体（又称：网格/Mesh），这才构成了我们看到的虚拟三维世界。
构成关系为： 点 >> 线 >> 三角形 >> 面 >> 物体
左侧：紫色小点为端点Vertex 右侧：黄色为三角形Triangle
玩家观察游戏世界的眼睛：摄像机
在很多游戏引擎中玩家都是通过一个【虚拟的摄像机】来观察游戏世界的，如在第三人称游戏中（如新《战神》/《神秘海域》/《战争机器》/《生化危机》4~6）这个摄像机一般被放置在了玩家的身后并跟随玩家移动的。
射击游戏中常见的摄像机摆放方法
大部分第三人称游戏把【摄像机】放在了玩家后方偏右的位置并加入了切换摄像机左右的功能（如《死亡空间》/《PUBG 》等），也有部分游戏（如《雨中冒险2》/《女神异闻录5》/《黑魂》系列等）把【摄像机】放在了玩家后方正中央。
  • 好处是不容易出现 3D眩晕症，所以玩家控制的人物可以快速地大幅度地爬墙/跳跃/钩锁 移动，也可以有回旋斩这类大幅移动人物身体的技能。
  • 缺点是沉浸感不那么好，且玩家胸前的空间是视野盲区，如使用钥匙、换弹等小幅动作较难体现。另外在狭小空间内【摄像机】很容易卡在墙上。
生化危机4 - 把第三人称射击发扬光大的作品 采用的是 激光指示线准星 + 右后方【摄像机】的组合
女神异闻录5 - 大部分时间人物在画面中心（摄像机在正后方）
在第一人称游戏中这个摄像机一般放在玩家的头部或者胸口位置，典型的有《使命召唤》/《战地》/《CS:GO》等游戏。
  • 好处是沉浸感强，使用钥匙、换弹等小幅动作可以很好体现，射击游戏的精美枪械皮肤的细节也可以很好地展示给玩家。在狭小空间内一般不会出现问题。
  • 缺点是一但玩家出现大幅移动和视角转动，很容易出现3D眩晕。
第三人称射击游戏有个特例是 FromSoftware 的硬核机甲射击游戏《装甲核心V》采用了随着玩家的左右移动，自动移动【摄像机】到左右肩后方的功能。个人推断是为了达到类似【板野马戏 / 板野サーカス 】的视觉效果。
板野马戏：日本动漫中画面中充斥着大量导弹激光等投射物轨迹的画面，参考【视频】
可以看到随着玩家机甲的左右高速移动，玩家较准星（图中圆环）的相对位置发生了改变
另外还有一种常见摄像机位置是动作游戏中比较常用的第三人称固定视角，如老《战神》/《鬼泣》都是采用了这个系统。这样可以最大限度地展现玩家角色的酷炫的连招和动作，但是要求游戏策划为每个场景单独需要配置【摄像机位置/摄像机轨道】，但是同样的也提供了一些【只有基于视角的谜题】的可能性。
第三人称固定视角主要用于PS2~PS4主机时代的3A动作游戏，2010年后已经较为少见了，但是如今的伪3D独立游戏如《黑帝斯》/《死亡细胞》本质上也可以说时采用的第三人称固定视角的变体。
战神3 - 赫拉迷宫关卡 利用了【视觉错觉】的谜题
【UI界面】在这个虚拟空间中的位置
摄像机和显示物体的关系 - 图中茶壶可以视为玩家人物
游戏中的UI在逻辑上可以分为3层：
  • 玩家屏幕上的UI元素：如准星 / 血条 / 水滴 / 泥迹等，这层UI元素不受任何其他元素遮挡。（直接显示在上图中的NearZ平面上）
  • 玩家角色身上的UI元素：如第三人称中玩家被打晕时头上的星星/玩家身上背着的背包和道具，第一人称中玩家的手和枪械。这类UI元素偶尔会被雪花/雨水等环境有轻微遮挡。（假设上图中茶壶为玩家人物，这层UI元素就是茶壶上的各种装饰）
  • 场景中的UI元素：如敌人头上的血条/状态栏等。这类UI元素有相当的概率会被墙体或者场景中高亮度光源干扰。（假设上图中茶壶为玩家人物，这层UI元素就是茶壶和FarZ中间的各种其他物体）
为防止场景中的物体对玩家体验造成干扰，常见的渲染技术有：
  1. Object Dithering
  2. Cut-Out View
这两种，简单来说就是不显示遮挡玩家视线的物体。
荣誉战魂 for Honor 中，对墙面的部分（红框处）进行了切割处理

策划：游戏体验 UX-好的 UI 总是让人意识不到这个 UI 的好

对于游戏策划，特别是战斗/关卡/玩法策划来说，广义上的UI是非常重要的工具和设计元素。UI 可以帮助塑造一个更加真实可信的世界观，以及帮助讲一个更加可信可沉浸的故事。
目前高品质的 UI 有两个主流设计风格（不单纯是视觉风格/画风，稍后会专门解析）
  1. 写实 3D：UI 本身就是场景的一部分，如《全境封锁》/《生化危机6》/《死亡空间》等
  2. 扁平风格化 UI 的视觉元素和游戏世界观结合，如《女神异闻录5》、老《战神》、《怪物猎人》等
这里比较好的例子有《全境封锁》系列，其中酷炫的结合场景的写实 UI 实际上是有设定成【玩家身上的特殊虹膜显示设备】的。
设定 - 橘色类似表盘的特殊显示设备
全境封锁 UI - 类似使用 全息投影/AR 的效果
《生化危机6》则是根据每个人物不同的身份，单独做了一套风格不同的UI。例如艾达王作为长期神龙见首不见尾的间谍，UI设计基于的是手中的透明方块状通讯设备，这一点在剧情CG中也有体现。
生化危机6 艾达王 - 可翻转的透明方块状通讯设备
生化危机6 艾达王 - 右下角UI 采用和通讯设备相同的 【立体 淡蓝色方块】 作为设计元素
苦命怨侣的另一半里昂，因为设定上是政府雇员，UI核心元素则是【智能手机】。值得注意的是虽然 UI 的图标是没有立体感的扁平画风，但是本身UI模拟了一个立体的还会轻微晃动的手机页面。
生化危机 6 身为政府雇员的里昂 - 【UI图标】则用的是基于智能手机的 【扁平 白色 圆角几何图形】作为设计元素
作为专业反生化危机部队的克里斯，UI上则是使用了类似军用设备中雷达和瞄准镜的【荧光绿色多重圆环】作为UI设计的核心元素。
看完了直接融入场景的立体风 UI，我们来看一下化繁为简的扁平风UI。
《女神异闻录5》主角一行人设定上是正义的心灵怪盗，所以这 UI 字体上采用了大量类似剪报和街头涂鸦的设计，其中最出色的设计个人认为是流畅的战斗结束和UI切换时的动画设计。
女神异闻录5 - 动漫画风UI的顶流 拥有个人见过最出色的场景转换动画
另外一个扁平风比较出彩的是《怪物猎人》系列，特别是系列早期作品。
《怪物猎人》的UI设计很大程度上参考日本北部阿伊努族的传统纹饰，其中矩形长条、朴素的颜色（深蓝/灰/黑/白/棕）为主要设计元素。
阿伊努族的传统服装
从左上角的时钟、道具图标到正上方血条的标记都是采用了大量的矩形长条作为设计元素。字体也选用的是比较粗短憨厚的像素风字体或《怪物猎人》画风的风格化字体。顺带一提，因为英文字母只有26个、日文平片假名只有46个，所以相对好做风格化字体许多，中文要做风格化字体会累死人的。
怪物猎人2G 的UI - 整体采用了给人原始部落感觉的比较简单的画风
怪物猎人XX 载入画面 - 右下角的 Now Loading 英文 采用了风格化字体
战斗信息的呈现方式
在信息呈现上，一般来说单机游戏越休闲、越PVE导向，UI 的设计就可以走风格化、和场景结合、不直观、学习成本高的路线
地铁2033 任务菜单 - 依靠 写字板+指南针 呈现任务目标和地点 左侧的4向的投掷物选择轮盘是在主机游戏中非常常见的UI设计
地铁2033 - 大部分废土的枪械都是手工制造的 子弹会暴露在外面，玩家虽然看不到弹匣内准确弹数，但是可以依靠直接观察手中的枪做一个大致的判断
联机游戏，越电子竞技、越PVP导向，UI 的设计就一般，更直观、更简洁。
英雄联盟 - 大量的 数字 文字 和 缩略图标
泰坦陨落 TitanFall 1代就有的在枪的后方加入小的显示屏，显示剩余弹数的功能。
信息呈现的优先级
在 FPS 中，一般准星的周围是最高优先级的信息，如《COD 战区》的破甲提示、很多射击游戏的爆头提示和命中提示都是放在这个区域（下图中红色区域）的。展示时间也一般为1秒钟以内。
中间优先级的信息，如小队成员的存活情况、自己的装备信息、计时器等，则一般放在屏幕正下/正上方 (黄色区域），可以常显示/固定时间展示/滚动展示。
最低优先级的信息，如网络情况、小地图等，则一般放在屏幕的4角处或4边处（绿色区域）。一般是常显示。
韩国Nexon 的新TPS战术射击游戏 Veiled Experts （暂译 蒙面专家）
特别提一下就是不同的【UI组件】 对不同平台的适配性完全不同。
如为了【实现不同道具间切换】这一功能，转轮（ItemWheel）对移动端（按住后拖动）和 主机端（扳机键L1/R1 + 转动摇杆）比较友好，一般单手可以完成，但是这一个简单功能在PC端（TAB键 + 大幅移动鼠标）往往需要左右手同时操作，而鼠标又不像摇杆会自动归位，操作比较繁琐。
荒野大镖客2 Red Dead Redemption 2 - 道具选择转轮
相反，《我的世界》 中的每个物品占一格的常显示物品栏（屏幕正下方）对只能使用上下左右十字键的手柄用户很不友好，但是对于可以直接用1~9数字键选择的PC用户或可以直接触屏点选的移动用户来说非常方便。
添加了 光影Mod 和 小地图Mod 的 我的世界
个人总结的基于【方形按钮】可以派生出的 UI控件 UI Component 和 它们在各个平台的可用性。

美术：画风与颜色-终极目标超越《P5》？

一般来说概念设计/人物设计的画法大的分类有下面2种：
  • 赛璐璐画法：平涂 /Cel painting / Anime drawing style / アニメ塗り（A Ni Me Nu Ri）
  • 油画画法：厚涂 / Oil painting / Thick painting (Impasto) / 厚塗り (A Tsu Nu Ri)
本质上画风【平-厚】是依据画风的偏 【抽象-写实】 的程度进行分类的，每个文化区域有自己不同的一套艺术教育研究体系，很难做到一一对应的翻译。
画风的分类 - 更像从一个点开始扩散的同心圆
实际上画风的分类不是一条直线，而更像一个由圆心扩散的一个个同心圆。各个文化地区的写实画风其实比较接近，而【风格化/抽象】画风则各有各的特色，也就离圆心越远。
切换动画效果
除了上文在提到过的 《生化危机6》、《怪物猎人》、《女神异闻录5》等游戏外，下面的几个例子也是 UI 的切换动画做得非常有特色的。
地铁:离去 - 打开菜单时 人物也会同时打开背包
合金装备V幻痛 - 打开菜单时 BigBoss 会拿出手中通讯器 注意切换菜单时，人物手指也会有相应的动作。
合金装备V幻痛 - 玩家在 返回基地 和 执行任务 载入时 Bigboss 会在直升机中输液 补充能量。玩家这时也可以听录音磁带了解剧情。
音效
音效常在动作游戏中，和闪光等视觉特效结合，用来帮助玩家判断蓄力技能的时间点，或者反击技能是否成功释放。最大的优点是不需要占用宝贵的屏幕空间，同时也能提供一种多感官刺激。
怪物猎人世界 - 大剑蓄力的 “噌” - “噌” - “叮” - “咣” 的音效 想必很多玩家记忆深刻
Dota2 - Rampage！！！的音效场景
根据油管的 Scruffy 提出的观点，一些短的相似的旋律（Leitmotif）很容易让人记住，类似于脑中记忆的一个锚点。个人注意到游戏中的也有很多类似的经典音效/语音，如《DOTA2》的“Rampage”或者《英雄联盟》的PentaKill，可以给人很深印象。这块笔者还没有什么积累，权当抛砖引玉，欢迎大神们分享。

UI 国际化/本地化

除了刚才提过的风格化文本：
顺带一提，因为英文字母只有26个、日文平片假名只有46个。所以相对好做风格化字体许多，中文要做风格化字体会累死人的。
游戏出海除了最基本的内容本地化/翻译和合规问题外，还有就是不同 UI 和文本需要适配的问题。如目前国内很多手游的 UI 一开始就是基于中文开发的，是很难兼容较长的英文和其他拉丁语系语言的长文本的。
常见解决方案一般是先基于“【机翻英文文本长度】+【20%~30%冗余长度】”适配UI，这样就有充足的UI空间放其他语言的文本了。这一块，较早出海的手游如《明日方舟》和《少女前线 》做得都很不错。
明日方舟 Arknight 的英文 UI
明日方舟 Arknight 的中文 UI
最近一年开测的类《逃离塔克夫》手游 萤火突击LostLight 英文的可读性较差
茶杯头 Cuphead 的中文本地化 为很多汉字都设计了新的字体

推荐衍生阅读/参考文档

  5. Youtube视频：音乐中的Leitmortif(直译为“主旨”这里更形象的说法为“曲调的锚点”) What Makes Mario Music So Catchy?
I
原文地址：点击
(xxx)评论