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

本文系用户投稿，不代表机核网观点

文章旨在打通一些游戏行业各个不同专业岗位的一些入门知识，希望大家看完多少能有些收获。为了理解方便，会尽可能使用日常语言表述，不准确的地方请大佬们多多包涵。
所有转载请注明出处。
本文将从 
程序：计算机图形技术（Computer Graphics）
策划：游戏体验 UX / 信息的呈现方式 / 信息的优先级 / 平台间UI 适配
美术：画风(Graphics style / Drawing style)  / 声音设计（Sound Design）
国际化市场 / 本地化：不同语言间UI避坑
这四个方面分享一些基础知识和在3D游戏中的 UI 设计方面的应用。这里的 UI 不单纯指玩家屏幕上的血条/弹匣内剩余子弹等 UI 元素，也包括视觉特效VFX / 音效SoundEffect 等其他的一些广义上为玩家提供信息的元素。
程序：计算机图形技术-我们的虚拟三维世界是什么？
三维虚拟世界的基本构成：点-线-三角形
在计算机中所有的三维物体都实际上是由一个一个端点（Vertex）间连接构成一个个小的三角形平面（Triangle），然后这些小三角形又紧密相连，包裹出了一个封闭的物体（又称：网格/Mesh），这才构成了我们看到的虚拟三维世界。
构成关系为： 点  >> 线 >> 三角形 >> 面 >> 物体

玩家观察游戏世界的眼睛：摄像机
在很多游戏引擎中玩家都是通过一个【虚拟的摄像机】来观察游戏世界的，如在第三人称游戏中（如新《战神》/《神秘海域》/《战争机器》/《生化危机》4~6）这个摄像机一般被放置在了玩家的身后并跟随玩家移动的。

大部分第三人称游戏把【摄像机】放在了玩家后方偏右的位置并加入了切换摄像机左右的功能（如《死亡空间》/《PUBG 》等），也有部分游戏（如《雨中冒险2》/《女神异闻录5》/《黑魂》系列等）把【摄像机】放在了玩家后方正中央。
好处是不容易出现 3D眩晕症，所以玩家控制的人物可以快速地大幅度地爬墙/跳跃/钩锁 移动，也可以有回旋斩这类大幅移动人物身体的技能。
缺点是沉浸感不那么好，且玩家胸前的空间是视野盲区，如使用钥匙、换弹等小幅动作较难体现。另外在狭小空间内【摄像机】很容易卡在墙上。
2022年09月27号更新： 默认把【摄像机】放在玩家后方偏右的原因 - 游戏中人物大部分是右撇子，可以尽可能地表现人物的如换弹等手部动作。

在第一人称游戏中这个摄像机一般放在玩家的头部或者胸口位置，典型的有《使命召唤》/《战地》/《CS:GO》等游戏。
好处是沉浸感强，使用钥匙、换弹等小幅动作可以很好体现，射击游戏的精美枪械皮肤的细节也可以很好地展示给玩家。在狭小空间内一般不会出现问题。
缺点是一但玩家出现大幅移动和视角转动，很容易出现3D眩晕。
第三人称射击游戏有个特例是 FromSoftware 的硬核机甲射击游戏《装甲核心V》采用了随着玩家的左右移动，自动移动【摄像机】到左右肩后方的功能。个人推断是为了达到类似【板野马戏 /  板野サーカス 】的视觉效果。
板野马戏：日本动漫中画面中充斥着大量导弹激光等投射物轨迹的画面，参考【视频】

另外还有一种常见摄像机位置是动作游戏中比较常用的第三人称固定视角，如老《战神》/《鬼泣》都是采用了这个系统。这样可以最大限度地展现玩家角色的酷炫的连招和动作，但是要求游戏策划为每个场景单独需要配置【摄像机位置/摄像机轨道】，但是同样的也提供了一些【只有基于视角的谜题】的可能性。
第三人称固定视角主要用于PS2~PS4主机时代的3A动作游戏，2010年后已经较为少见了，但是如今的伪3D独立游戏如《黑帝斯》/《死亡细胞》本质上也可以说时采用的第三人称固定视角的变体。

【UI界面】在这个虚拟空间中的位置

游戏中的UI在逻辑上可以分为3层：
玩家屏幕上的UI元素：如准星 / 血条 / 水滴 / 泥迹等，这层UI元素不受任何其他元素遮挡。（直接显示在上图中的NearZ平面上）
玩家角色身上的UI元素：如第三人称中玩家被打晕时头上的星星/玩家身上背着的背包和道具，第一人称中玩家的手和枪械。这类UI元素偶尔会被雪花/雨水等环境有轻微遮挡。（假设上图中茶壶为玩家人物，这层UI元素就是茶壶上的各种装饰）
场景中的UI元素：如敌人头上的血条/状态栏等。这类UI元素有相当的概率会被墙体或者场景中高亮度光源干扰。（假设上图中茶壶为玩家人物，这层UI元素就是茶壶和FarZ中间的各种其他物体）
为防止场景中的物体对玩家体验造成干扰，常见的渲染技术有：
Object Dithering
Cut-Out View
这两种，简单来说就是不显示遮挡玩家视线的物体。

策划：游戏体验 UX-好的 UI 总是让人意识不到这个 UI 的好
对于游戏策划，特别是战斗/关卡/玩法策划来说，广义上的UI是非常重要的工具和设计元素。UI 可以帮助塑造一个更加真实可信的世界观，以及帮助讲一个更加可信可沉浸的故事。
目前高品质的 UI 有两个主流设计风格（不单纯是视觉风格/画风，稍后会专门解析）
写实 3D：UI 本身就是场景的一部分，如《全境封锁》/《生化危机6》/《死亡空间》等
扁平风格化 UI 的视觉元素和游戏世界观结合，如《女神异闻录5》、老《战神》、《怪物猎人》等
这里比较好的例子有《全境封锁》系列，其中酷炫的结合场景的写实 UI 实际上是有设定成【玩家身上的特殊虹膜显示设备】的。

《生化危机6》则是根据每个人物不同的身份，单独做了一套风格不同的UI。例如艾达王作为长期神龙见首不见尾的间谍，UI设计基于的是手中的透明方块状通讯设备，这一点在剧情CG中也有体现。

苦命怨侣的另一半里昂，因为设定上是政府雇员，UI核心元素则是【智能手机】。值得注意的是虽然 UI 的图标是没有立体感的扁平画风，但是本身UI模拟了一个立体的还会轻微晃动的手机页面。

作为专业反生化危机部队的克里斯，UI上则是使用了类似军用设备中雷达和瞄准镜的【荧光绿色多重圆环】作为UI设计的核心元素。

2022年8月29号 更新：写实风格UI例子 CoD黑色行动 1代

看完了直接融入场景的立体风 UI，我们来看一下化繁为简的扁平风UI。
《女神异闻录5》主角一行人设定上是正义的心灵怪盗，所以这 UI 字体上采用了大量类似剪报和街头涂鸦的设计，其中最出色的设计个人认为是流畅的战斗结束和UI切换时的动画设计。

另外一个扁平风比较出彩的是《怪物猎人》系列，特别是系列早期作品。
《怪物猎人》的UI设计很大程度上参考日本北部阿伊努族的传统纹饰，其中矩形长条、朴素的颜色（深蓝/灰/黑/白/棕）为主要设计元素。

从左上角的时钟、道具图标到正上方血条的标记都是采用了大量的矩形长条作为设计元素。字体也选用的是比较粗短憨厚的像素风字体或《怪物猎人》画风的风格化字体。顺带一提，因为英文字母只有26个、日文平片假名只有46个，所以相对好做风格化字体许多，中文要做风格化字体会累死人的。

2022年08月16日 更新:
UI可以很好的用来进行有冲击力的叙事

战斗信息的呈现方式
在信息呈现上，一般来说单机游戏越休闲、越PVE导向，UI 的设计就可以走风格化、和场景结合、不直观、学习成本高的路线

联机游戏，越电子竞技、越PVP导向，UI 的设计就一般，更直观、更简洁。

信息呈现的优先级
在 FPS 中，一般准星的周围是最高优先级的信息，如《COD 战区》的破甲提示、很多射击游戏的爆头提示和命中提示都是放在这个区域（下图中红色区域）的。展示时间也一般为1秒钟以内。
中间优先级的信息，如小队成员的存活情况、自己的装备信息、计时器等，则一般放在屏幕正下/正上方 (黄色区域），可以常显示/固定时间展示/滚动展示。
最低优先级的信息，如网络情况、小地图等，则一般放在屏幕的4角处或4边处（绿色区域）。一般是常显示。

特别提一下就是不同的【UI组件】 对不同平台的适配性完全不同。
如为了【实现不同道具间切换】这一功能，转轮（ItemWheel）对移动端（按住后拖动）和 主机端（扳机键L1/R1 + 转动摇杆）比较友好，一般单手可以完成，但是这一个简单功能在PC端（TAB键 + 大幅移动鼠标）往往需要左右手同时操作，而鼠标又不像摇杆会自动归位，操作比较繁琐。

相反，《我的世界》 中的每个物品占一格的常显示物品栏（屏幕正下方）对只能使用上下左右十字键的手柄用户很不友好，但是对于可以直接用1~9数字键选择的PC用户或可以直接触屏点选的移动用户来说非常方便。

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

一般来说概念设计/人物设计的画法大的分类有下面2种：
赛璐璐画法：平涂 /Cel painting / Anime drawing style / アニメ塗り（A Ni Me Nu Ri）
油画画法：厚涂 / Oil painting / Thick painting (Impasto) / 厚塗り (A Tsu Nu Ri)
本质上画风【平-厚】是依据画风的偏 【抽象-写实】 的程度进行分类的，每个文化区域有自己不同的一套艺术教育研究体系，很难做到一一对应的翻译。

实际上画风的分类不是一条直线，而更像一个由圆心扩散的一个个同心圆。各个文化地区的写实画风其实比较接近，而【风格化/抽象】画风则各有各的特色，也就离圆心越远。
切换动画效果
除了上文在提到过的 《生化危机6》、《怪物猎人》、《女神异闻录5》等游戏外，下面的几个例子也是 UI 的切换动画做得非常有特色的。

音效
音效常在动作游戏中，和闪光等视觉特效结合，用来帮助玩家判断蓄力技能的时间点，或者反击技能是否成功释放。最大的优点是不需要占用宝贵的屏幕空间，同时也能提供一种多感官刺激。

根据油管的 Scruffy 提出的观点，一些短的相似的旋律（Leitmotif）很容易让人记住，类似于脑中记忆的一个锚点。个人注意到游戏中的也有很多类似的经典音效/语音，如《DOTA2》的“Rampage”或者《英雄联盟》的PentaKill，可以给人很深印象。这块笔者还没有什么积累，权当抛砖引玉，欢迎大神们分享。
UI 国际化/本地化
除了刚才提过的风格化文本：
顺带一提，因为英文字母只有26个、日文平片假名只有46个。所以相对好做风格化字体许多，中文要做风格化字体会累死人的。
游戏出海除了最基本的内容本地化/翻译和合规问题外，还有就是不同 UI 和文本需要适配的问题。如目前国内很多手游的 UI 一开始就是基于中文开发的，是很难兼容较长的英文和其他拉丁语系语言的长文本的。
常见解决方案一般是先基于“【机翻英文文本长度】+【20%~30%冗余长度】”适配UI，这样就有充足的UI空间放其他语言的文本了。这一块，较早出海的手游如《明日方舟》和《少女前线 》做得都很不错。

推荐衍生阅读/参考文档
文献：第三人称视角技术梳理 Third Person Camera View in Games - a record of the most common problems in modern games, solutions taken from new and retro games
文献：计算机图形基础 World, View and Projection Transformation Matrices
文献：全境封锁 UI 设计书 Division UI Guide
文献：专访《茶杯头》制作组：结合文化的本地化是如何做出来的 
Youtube视频：音乐中的Leitmortif(直译为“主旨”这里更形象的说法为“曲调的锚点”) What Makes Mario Music So Catchy?