[中国翻訳]明日方舟joy [中国翻訳]明日方舟joyheitui

《明日方舟》（后文简称「方舟」）上线至今已经超过两个月，其突出的美术风格和国内游戏罕见的世界观题材、为重度二次元玩家和塔防策略爱好者津津乐道的战斗玩法，让行业内外许多前辈纷纷给出了不同的解读和评析。

但对于笔者来说，第一次通过 PRTS 接入罗德岛时最为眼前一亮的却是它的 UI —— 它唤醒了我对于很多游戏的记忆和一些设计风格的思考。随着游戏体验的深入，方舟的页面交互与其扎实的平面设计功底深得我心，因而决定动笔记录，分享一下对方舟在界面设计层面的部分认知和思考。

我将从以下 6 个不同的角度分析方舟 UI/UX 的特点，中间穿插较多的对比与发散，因而描述重点时而会跳出方舟本身，部分内容涉及动效、氛围、美术和外延话题的探讨，可能超出了页面与交互的定义范围，笔者会尽可能地保证延伸都有一定的基准点。这六点是：

• Diegetic Interface 风格的主看板观瞄投影设计如何增强沉浸感？
• 类 Fluent Design 设计思想的多元质感在哪些细节中勾勒？
• 界面扁平化后如何追求交互空间和所承载内容的深度？
• 风格化的装饰字体如何同时成功地表达古典骑士精神与科幻军工风？
• 焦距控制和底图处理等平面设计基础手法如何塑造统一的视觉识别？
• 有哪些过场衔接技巧降低了页面层级的数量，并构建了场景化的系统结构？

最后，笔者会分享一些在游戏过程中的有趣发现，并浅谈个人对于方舟的页面与交互未来的展望。

1 Diegetic Interface 风格的主看板观瞄投影设计如何增强沉浸感？

与「画内界面」相对应的是「画外界面」，如果这个词比较陌生，那「画外音」肯定是我们日常所熟知的影像元素。所谓画外，即场景中的某个信息单元仅仅呈现给观众（玩家），而非呈现给剧中的角色。在多数游戏界面中，用来向玩家展现其所需要时刻知晓的信息的界面通常以 HUD（Heads-up Display）的方式出现，例如格斗游戏《拳王》中双方的血量条、怒气值等组件。

与之相反，「画内界面」则试图把画面中角色所能够看到的信息以相同的方式展现给玩家，从而打破玩家和游戏角色「隔着一个屏幕」的舒适区，增强沉浸感。

最近比较印象深刻的例子是《Apex 英雄》中枪械的弹药数指示方式，其并不像大多数 FPS 游戏一样出现在一个单独的角落方块内，而是显示在每一把枪支瞄镜侧方的弹药状态面板上。不同的枪支屏幕面板不同，子弹的指示方式成为了枪支特性之一。另一个案例是《生化危机》，困难模式下角色的血量通过屏幕的整个颜色和视野模糊程度来指示，受伤情况越严重越看不清楚，加上摇晃力度变大，模拟了角色的真实体征。

方舟中出现画内界面的案例并不多，但最为直观也最为大家熟悉的就是游戏的主看板了。根据剧情，博士第一次操作岛内事务的时候，人并不身处罗德岛中，而是通过一个名为 PRTS（Prmitive Rhodesisland Terminal Service）的系统进行远程接入，所以通过一个仿若钢铁侠头盔内的漂浮投影界面很好地突出了这种状态。

这个界面实在是和《全境封锁》中角色的物品栏界面如出一辙，全息投影、虚拟指示窗、高科技的观瞄设备，这些元素和后启示录科幻战争联想有着密不可分的关系，而方舟在题材上的共通成为了这种设计契合的原因。当手机设备的电量、信号和时间信息都被按照统一风格放入了对应的浮窗中，并且随着陀螺仪的感应整体移动 —— 方舟在一开始就为玩家提供了强大的沉浸感。

当然，作为一款二次元养成战略手游，它的几个系统本身带有分隔，且在小屏幕上对于可用性的关注远在美学之上，画内界面元素的表现并不能和端游大作相提并论。关于 Diegetic Interface，笔者最初是从 EA 的《死亡空间》中深刻体会到的，在 2013 年的 GDC 上，EA Visceral Games 的时任 UI 总监 Dino Ignacio详细地展示了游戏初期的开发历程，探究了各种团队为了提供更多画面沉浸感的尝试，并对 Skeuomorphs（拟物）的概念如何贯穿游戏 UI 设计进行了深入的分析。关于这一点，后文也会简单提到。

2 类 Fluent Design 设计思想的多元质感在哪些细节中勾勒？

Fluent Design 是微软在 2017 年提出的设计系统，这套设计系统据称将为其产品视觉提供贯穿多平台的能力，并对当时分散在多个大产品中的零碎的设计风格进行收束。

在最初的介绍视频中，整个设计风格被拆解成以下五个方面：Light 光线，Depth 深度，Motion 动作，Material 材质，Scale 比例。通过 Specs 指引，我们可以知道每个分类在底层系统设计上的具体意义；但就我个人理解来说，它在视觉上的本质表现是对「拟物」的简化，核心是「质感」。

如何设计一个 Fluent 的元素？首先找到这一元素在现实世界中最具有代表性的材质，重现这一种材质的纹理，剥离这种纹理的细部表现，最后加入光照的变化和交互时的强调方式。到此为止，一个基础 Fluent 组件的视觉呈现便设计完成了。

在众多的材料选择中，微软从 Windows 7 时代开始便极其偏好的要素是毛玻璃（Frosted Glass），理由显而易见：在不同的光线环境和物品重叠下，其所代表的「背景模糊」效果不同于一般的渐变，色彩结合更加柔和，能够和画面中锐化过的部分（如正文）产生鲜明的对比。在 Fluent 系统中，背景模糊仍然在面板样式层面扮演了重要的角色，不过进一步被改进成了「亚克力材料」（Acrylic Material）风格，通过对亚力克板的仿真来构建视觉层级。

方舟的 UI 一个突出特点就是层级对比度极高，这里除了有高质量的平面设计思想和符合世界观的警戒亮色加持之外，多处使用背景模糊效果来突出画面需要关注的交互部分也是原因之一。背景模糊的另外一个好处是它的覆盖特性：对一个特定界面进行背景模糊，再在其上加入新的页面组件，可以让玩家「窥」见之前的页面被覆盖在了下方。关于这点，后文会再次提到。

前面举例如何创作一个 Fluent 组件时，叙述了笔者「提取材质，剥离细部」的核心思路，这样的结果其实是物件的「积木化」：积木作为孩童的启蒙玩具，需要承担认知的功能（辨识度），同时又必须保持其可玩性的特点。关于美术层面的质感追求，日本画师 @池上幸輝 稍早之前公布了一组自己的练手稿，充分体现了材质之间核心差异感的魅力。

最后提一下 UI 上光线的使用。由于方舟是一款手游，因此交互上没有办法做指针悬停效果，在光线控制上除了用陀螺仪似乎没有太多的想象空间。目前游戏内所有对打光有刻意表现的地方多用静态贴图而非即时渲染（例如签到日历的背光效果、得到材料奖励时的背后光圈），期待以后有更多产品能够在 UI 层面就开始考虑 shading & lighting 这些原本在建模阶段才会考虑的元素，界面更好的表现能力意味着更丰富的操作引导可能性。

3 界面扁平化后如何追求交互空间和所承载内容的深度？

开个玩笑，微软刻意强调 Fluent 系统中的 Depth 深度与 Scale 比例这两个元素，其实无非是之前整个 Windows 的系统级界面都太平了 —— 这成为了扁平化最大的误区：扁平的出发点是减少页面中和交互无关的细节，提升产品使用效率，并且加强设计元素的视觉统一性。如果单纯理解为「平」，就会导致用户学习成本增高和画面失焦的后果。

从 Material Design 的概念被提出和 iOS 11 推出开始，扁平化设计三板斧「卡片阴影加圆角」广为人知，方舟没有逃出囹圄，在采购中心、基建等不少页面出都使用了卡片设计。卡片搭配阴影的目的是形成层级，简而言之，越要抓住用户的元素，就摆得离其越近，在界面图层上相对应的高度也就升高。这是扁平化凸显页面深度的方法之一。

在作战章节选择的界面中，加了粗白边框的章节主题图仿佛打印出来的相片一样被夹在细绳上，如果仔细观察，可以发现一圈内投影布于页面周围。这种在摄影领域被称为 vignette effect 的效果最初来源于因遮光物或者透镜排布问题而导致的影像中心的明度和饱和度比四周高的情况，也称为「热点效应」。现代平面设计中多作为一种创意效果加入到画面中，以此来突出页面中心的信息。这个设计实际还存在于方舟的多个页面，通过这种方式来突出页面中的卡片元素，视觉层级清楚分明。

在寻访界面中加入的视差效果也是亮点之一，干员本身有大小区别（暗示远近）的情况下，加入视差可以让透视感成型，这和整体的平面设计要素是一脉相承的，可以说非常走心。当然，笔者认为这里还可以用骨骼动画+粒子效果的美术加持让每次主打的某位干员更加突出，复现预热宣传 pv 里面的样式。

4 风格化的装饰字体如何同时成功地表达古典骑士精神与科幻军工风？

第一印象中，方舟页面明显的特点是使用了大量的衬线字体，但实际上衬线体并不是游戏内最被广泛使用的字型。在主面板中，衬线体更多以中文衬线体的方式出现，因其笔画显著的粗细差异而具有相当的可读性，以「警戒」字型的意向与悬浮视窗、以及远景中的工厂格纳库风插画形成一种统一的工业感联系。

这种设计风格在同类的《少女前线》中也有同样的呈现，后者甚至因其背景特点而更加依赖这种字型所带来的复古金属感，也正是这类似的设定让很多玩家拿到方舟后大呼面板的设计因制作人海猫的特殊经历而与少前密切相关。

当衬线体被用于拉丁文体时，风格的变化会更加严谨一些，因而使用需要作出区分。它的出现可以追溯到古罗马时期，经过不断的发展演绎至今，风格区分因人而异，笔者喜欢分为以下四种基础类型：

未经允许不得转载：大白鲨游戏网 » [中国翻訳]明日方舟joy [中国翻訳]明日方舟joyheitui