The Devision - User Interface style guide
这份PPT截图出自reddit分享，推测是育碧内部流出资料，分辨率很低而且内容不全。但依然很有价值，似乎没有看到相关的翻译，我就先斗胆简单翻译一下，可以对照网址配图来看。
网址：https://imgur.com/gallery/Y2HV1
0. 目录
《全境封锁》是一款开放世界、在线、合作的角色扮演射击游戏，注重玩家在游戏世界中的沉浸感。
这份指南会帮助你理解《全境封锁》UI的艺术风格和全局视觉。本指南包含了如何设计优秀三维空间UI的典型案例，确保UI在提供迷人视觉体验的同时，能有效传达信息。
我们建议你在开始UI开发工作前熟悉这份指南。
- 1.核心支柱
- 2.定义UI
- 3.定义Tech
- 4.定义样式/风格
- 5.视觉要素
- 6.颜色和不透明度
- 7.文本和可读性
- 8.图标风格
- 9.着色器
- 10.摄像机
- 11.运动和动画
- 菜单系统
1. 核心支柱
朴素
UI应该尽可能地小、清晰且不占屏幕。移除所有不必要的装饰元素并强调单一明晰的焦点，可以让UI方案更好理解（注：见视觉要素部分）。简单的几何图形和干净的线条可以让小型图标和符号更清晰好认（注：见图标风格部分）。可以的话就别用文本，这会让UI更具空间感，也更直观。
直观易懂
玩家通过UI来定位、阅读和处理重要信息时，应该毫不费劲（注：见可读性标准部分）。哪怕有一定距离，在任何光照条件下，相关重要信息都应该能随时查看并清楚辨别。
功能性
每个UI元素都应该明确服务于它的设计目的。举个例子，一个地图的首要目的就是为玩家指路。如果这个地图没能做到这点，那么这些UI元素也就是失败的。
一致性
不同UI元素间的引导和交互应该基于输入、美术和反馈来达成统一（注：见动画部分）。尽管系统很可能又大又复杂还没被摸清楚，UI也应该让可能存在的交互最少，并保证这些交互方案都是相同的，来让玩家感觉像在家里一样舒适。
Diagetic
（译者注：这个词指游戏中附着在游戏世界中场景或物品上的UI信息）
UI能最大程度发挥作用的地方也就是游戏世界本身了。这会让玩家在游戏中保持好奇心，无缝融合游戏体验中的所有UI。UI元素应该表现地像是被玩家角色意识到并与之进行了互动一般。UI不仅要传递关键信息，还要作为视觉效果来优化体验，并为游戏叙事提示现状。
“我们在《全境封锁》中创造的独特且难忘的游戏体验，最终是为了创造沉浸感。”
沉浸感
阻止对当前场景外的认知会让沉浸感最大化。遵循核心支柱设计、将UI整合进游戏世界、开发出直观而合理的设计，这最终会创造出令人沉浸的游戏体验。
2. 定义UI
2.1 （Diagetic）游戏内用户界面
Meta用户界面
《全境封锁》尽力减少meta UI，或者说看起来像是显示在类似传统HUD的二维平板上的UI。meta UI也包括屏幕特效、伤害指示和屏幕外标记。
空间用户界面
空间UI是那些以三维形式存在于游戏世界中的UI，例如按钮图标、帮助提示和玩家状态。这些UI元素虽然以三维形式存在，但和游戏叙事无关，只是提醒玩家还在“游戏”中。
游戏内UI
《全境封锁》的UI的设计目的是要开发出一个完善的、与玩家息息相关的游戏内用户界面体验。游戏内界面会为讲述故事提示现状，也能确实地呆在那里以保证玩家沉浸在虚拟世界中。
这份指南通过把UI设定成The Division Shades操作系统的一部分，来鼓励设计师把所有UI都设计进游戏内。
2.2 立体思考
传统UI设计依赖于二维出身的平面设计原则。作用在三维空间中意味着要利用z轴来强化二维层面的认知。
将z轴吸收
适当使用z轴有助于理解和聚焦内容。立体设计的另一个优势是它可以和一个空间以及其中的物体产生交互，因此降低了在游戏世界中把信息串联起来的难度。
确保可读性
如果过量使用或是在z轴上移动了太多元素，会降低可读性并破坏网格。避免重叠透明物体造成的不必要的紊乱。不过当可读性没那么重要时，可以用堆叠表现出列表和堆积的感觉。
3. 定义Tech
3.1 这个OS是什么
Shade Tech的操作系统旨在作为用户的可靠伙伴，关注用户的周遭环境和人身安全。
（注-Shades：指国土战略局（SHD）的秘密特工们。他们的任务是调查发生在黑色星期五后的暴动。）
The MysTech OS可以不断地与周遭环境互动并收集信息，展现对外部世界的无缝整合。
操作系统会即时向环境附加视觉信息，以帮助用户认知环境并与之交互，从而增强现实。
（注-Mys：瑞典语名词。非正式用语，意指“cosiness舒适、care照料、comfort舒服”。）
Logo
点和线是最基础的视觉元素，反映了数据的二进制特征。
标语
该操作系统会增强用户的现实来帮助其理解当前环境并与之交互。
3.2 这个OS在哪里
The Shade装置
The Division特工们配备了一系列装备以做好应对各种场合的准备。连接着OS的腕表和肩环可以启动他们周围环境里的points和links。
虹膜显示
Shade特工们配备的视网膜显示技术可以让UI可视化。通过这种视觉增强手段，特工会看到用户界面被正确地投射出来并融合进环境中。
4. 定义风格
4.1 程序生成设计
- 精确
- 无机
- 立体
- 灵活
程序生成设计会展现数据信息的可视化效果。为了让软件更快地运行且便于调整，编程的标准操作需要简化，并使用生成系统来让更复杂的系统可视化。
一段计算机程序是如何让一片区域或一个对象可视化的？
设计方案应该精确、基于简单图形并以立体呈现：用线和点来构建场景与指示方向。
尽管OS基于场景信息生成的图案飞来飞去/忙作一团，处理过的风格样式也要看着很简单。这同样要求风格样式有更多的灵活性：在任何场景或光照中，设计都应该可行。
4.2 行为信息图
- 明亮通透
- 行为
- 精准
- 基础
工程原理图通常会使用线条来表示行为和动作范围。比起描绘体积形状，OS的风格样式应该更基础一些——描绘动作位移。结果就是，要用明亮而通透的原理图来描绘行为。
如何用行为信息图的OS风格样式来可视化一个机械臂？
这个精准而机械化的样式结合了一位艺术家的精心设计。他创造出明确的层级并为此添加了权重，还对透明度做了区分。最后产生的“信息图”应该迅速明确地展现角色的重要信息，还不能在视觉上遮挡环境。
4.3 有瑕疵的软件
- 短暂故障
- 连续
- 瑕疵
MYSTECH OS是以未完成的状态被紧急投入使用，来应对曼哈顿发生的事件的。
尽管OS应该不能描绘出复杂有机的图形，但作为替代它能用几何体和线条拟合出来。它能留意到位移并推断出方向，但它在视觉上做不到完美。
“《全境封锁》里的世界已经撕裂了，而且正因如此，技术本身也未能幸免遇难。”
序列动画应该表现得像是在加载信息，而不是立刻跳出来。这种短暂的“故障”应该在UI出现和消失时发生，而且the tech也应该偶尔失灵或者像是被干扰一样。见Darpa Shader
色彩偏移是一种应用于屏幕上的视觉效果，在整体上创造出一种在镜头界面中的故障感。
5. 视觉要素
5.1 点、线条和图形
- 绘制明亮通透的图形
- 强化导航路径
- 用动画引导视线
点和线可以绘制场景和物体且不至于杂乱。它们能连接开始点和结束点来强化导航路径，也能通过序列动画引导视线。
为此，点和线会统治MysTech OS的视觉语言。这同样也反应了数据的二进制特征，和作为游戏UI构建基础的节点系统。
一个点定义了一个地点、一个物体或是一个瞬间。它也是携带着数值或信息的“节点”，代表了开始或结束。
（注——提示：点应该永远面向摄像机。）
一条线定义了一段位移、一处空间或一段距离。它也代表了传输、动作和方向，是点与点之间的连结。
（注——提示：所有的线条都要通过不透明化来融入游戏世界。）
6. 颜色
6.1 暖色VS冷色：主题色
“The Shades特工们代表了温暖和希望，以对抗故事背景中冷酷和荒芜的曼哈顿。”
正值大雪的冬季，曼哈顿的视觉环境被冰冷所占据。特工们代表了温暖和希望，体现了这点的正是这个充满生机的橙色圆环。
主题色——橙色和白色。
橙色和白色是UI主体部分的主题色。白色代表中立，而橙色代表高亮，保守场合也被用于制造焦点。
全境封锁橙——RGB：255/127/0
温暖/希望/被选中/高亮
暖白——RGB：244/255/255
默认UI/中立
6.2 次要色
“当保守地被用到的时候，次要色可以提示现状并把注意力转向特定元素或动作。”
次要色——演出色
次要色应该能通过正面或负面的强调方式提示现状并传达信息。
次要色同样也会应用在生命值条上来区分敌我。当与玩家角色有关的动作——经验获取或现状交互——发生时，橙色会被大量使用。
（译者吐槽：红色和橙色很接近导致我在游戏中经常看错，搞得自己紧张兮兮。）
敌对红——RGB:255/48/0
负面
健康绿——RGB:140/200/60
正面
盟友蓝绿——RGB:71/230/220
7. 文本和可读性
7.1 立体文本
作为应用在三维空间中的二维文本，面对移动中的摄像机，挑战集中在了确保可读性上。
- 特定角度的文本是不好读的
- 文本大小会随距离改变
- 背景的颜色和数值的不同
下面的部分会作为指南，通过展示Borda系字体每种粗细和大小的最佳使用方式，和使用z轴加强可读性，来保证文本在理想距离下依然可读。
(注——强制：重要的信息应该能被轻易接触而且总是可读。)
Borda Light
细字形，只在非常大时有用。
在游戏世界中缩放会造成困难。
Borda Regular
轻字形，在大标题处有用。
Borda Medium
用途最多的字形，适合用在游戏世界中的缩放文本。
名字和伤害数字。
Borda Heavy
Borda Medium的加粗版本，适合对文本进行强调。可以被缩放到很小而且依然可读。适合重要的数字，例如HUD的弹药数或是重击伤害数字。
和摄像机的角度不能超过35°
(注——提示：有关字形粗细的设计理念，是要保证不同大小的字形的整体粗细保持在一个相近范围里。细的字体更大而粗的字体更小，就能让粗细保证接近。)
7.2 图层和后期处理
z轴不仅要用来强化可读性，还要把注意力引导至重要信息上。
1+2+3 文本图层的突破效果
复合文本应该由三层组成，每层为一个目的服务。最终结合的效果应该能强化可读性，并有一种3D投影的感觉。
1 主要文本图层
向前投影
白色/某种颜色（.88不透明度）
颜色由当前状况决定。（例如，伤害数字、混合区域、正面和负面数值）
2 阴影文本图层
位于文本稍后
昏黑（.33不透明度）
这个图层通过像是在光照背景中投下阴影一样来强化可读性。这个图层应该一直存在。
3 幽灵文本图层
很后面
昏白（.11不透明度）
模糊底衬
通过和背景的强对比来强化可读性。应该被用在重要信息上。（按钮交互、任务重点）
- 染色底衬
- 黑色（.33不透明度）
让文本在光亮环境中可见。 - 某种颜色（.66不透明度）
短暂出现以吸引注意力。（获得经验值、交互）
- 黑色（.33不透明度）
8. 着色器和视觉效果
着色器能提供重要的视觉效果，通过和世界和游戏内物体交互，更深层次地优化UI效果。（例如，边缘几何结构、高亮强调、屏幕效果）
《全境封锁》的UI是对传统信息图形和视觉效果的一种独特混合。
对原始信息图形（通过UI表现的关键游戏演出信息）和视觉效果（通过着色器）的均匀混合能很好地将视觉冲击感融合进游戏世界。
风格样式
着色器应该尽可能地接近UI美术风格，遵循上文提到的视觉元素和风格样式指导（立体、明亮通透、最小化、灵活、即时）。
故障
瞬时故障是着色器的一种强有力的风格元素。因为这些系统如此复杂，OS的瑕疵会更显而易见，故障发生也应该偶尔出现。
9. 图标风格
9.1 创作图标
- 纯白色
- 风格化的简化
- 没有梯度
- 5%的屏幕占比且依然可读
使用图标是《全境封锁》减少游戏世界、HUD和菜单中的文本数量的重要手段。标志应该清晰易懂，在小尺寸下依然易读。
设计清晰图标的标准案例应该保证小尺寸下的实线不会太细，而整个标志应该看着像一块固态平板。
10. 摄像机
10.1 角色即王
玩家是一个隐形的观众，偷偷看着角色和他的UI。这些信息能被摄像机收录，但它们其实总是和角色相关联，并一直朝向着角色。
固定UI
这种UI以一种软连接的方式被固定在摄像机上，但被设计成会朝向角色。这种UI可以保证重要信息被固定在屏幕上一直可读，特别是在需要引导的时候。
相关摄像机
HUD
大地图
主菜单
物品栏
战利品栏
游戏世界UI
这种UI以一种硬连接的方式固定在游戏世界的某个地点（骨架、物体）上，但一直朝向摄像机来保证可读性。这种UI会随着碰撞、动画和瞄准在屏幕上移动。这种UI也应该根据角色采取掩护的位置进行镜像翻转。
相关摄像机
1 默认摄像机
2 瞄准视角
3 室内默认摄像机
4 室内瞄准视角
5 低掩体左右
6 低掩体瞄准左右
7 低掩体边缘左右
8 低掩体边缘瞄准左右
9 高掩体左右
10 高掩体边缘左右
11 高掩体边缘瞄准左右
12 死亡和倒下
后记
这份文档毕竟只是流出资料，很遗憾还有很多tips被遮挡无法翻译，最后两章的内容也缺失了。
不过无论如何，这个指南依然非常有价值，值得慢慢研究。