内容来自腾讯游戏大学《真经阁》专栏。
《明日方舟》是今年游戏市场最受关注的二次元产品，无论是美术题材还是战斗玩法都具有一定的标杆性特征。其实除此之外，它的UI/UX设计也值得一提。在本文中，腾讯IEG互动娱乐事业群/互动娱乐发行线讲师AJ将从六个不同的角度进行分析。
总结《明日方舟》(以下简称“方舟”)上线两个多月了。其出色的美术风格，国产游戏少有的世界观题材，以及重二次元玩家和塔防战略爱好者们津津乐道的格斗玩法，得到了行业内外众多前辈的解读和评价。
但对于作者来说，当我第一次通过PRTS访问罗德岛时，亮点是它的UI ——，它唤醒了我对许多游戏的记忆和对一些设计风格的怀旧。随着游戏体验的深入，方舟的页面交互和扎实的平面设计功底深得我心，所以决定写一篇记录，分享一下对方舟界面设计的一些认知和思考。
我将从以下六个不同的角度来分析方舟UI/UX的特点，更多的是对比和发散穿插其中，所以描述的重点有时会跳出方舟本身，有些内容涉及到动态效果、氛围、艺术和延伸话题的讨论，可能超出了页面和交互的定义。我会尽量保证扩展有一定的参考点。这六点是：
1.Dieg Etic界面式主广告牌观看投影的设计如何增强沉浸感？
2.流畅设计式的设计思路的多重纹理是在哪些细节中勾勒出来的？
3.如何追求扁平化界面后的交互空间和内容深度？
4.风格化的装饰字体如何同时成功表达古典骑士精神和科幻军旅风格？
5.焦距控制、底图处理等基础平面设计技术如何塑造统一的视觉识别？
6.有哪些减少页面层数，构建场景化系统架构的切入技巧？
最后笔者会分享一些游戏过程中有趣的发现，谈谈我个人对方舟的页面和交互未来的展望。
1.Diegetic界面风格主广告牌的观看投影设计如何增强沉浸感？与“画面内”相对应的是“画面外”。如果这个词很陌生，那么“画外音”一定是我们日常生活中很熟悉的形象元素。所谓画外，即场景中的某个信息单元只呈现给观众(玩家)，不呈现给剧中人物。在大多数游戏界面中，用来向玩家展示他们需要时刻了解的信息的界面通常以HUD(平视显示器)的形式出现，比如格斗游戏《拳王》中双方的血条和怒气值。
而“画中画界面”则试图以同样的方式将画面中的角色所能看到的信息展现给玩家，从而打破玩家与游戏角色“隔着一个屏幕”的舒适区，增强沉浸感。
最近给人印象深刻的一个例子是《Apex 英雄》中枪支的弹药数量指示方法，它不像大多数FPS游戏那样出现在单个角方块中，而是显示在每个枪支瞄准镜侧面的弹药状态面板上。不同的枪屏幕面板不一样，子弹的指示也成了枪的特点之一。另一种情况是《生化危机》。在困难模式中，角色的血量由屏幕的整体颜色和模糊的视觉来表示。伤势越严重越不清楚。此外，摇动强度越大，角色的真实迹象被模拟。
《方舟》中出现画中界面的案例并不多，但最直观最熟悉的还是游戏的主看板。根据剧情，医生第一次操作岛务时，人并不在罗德岛，而是通过一个名为PRTS(PRMitive Rhodes Island Terminal Service)的系统进行远程访问，所以这种状态通过一个类似钢铁侠头盔的悬浮投影界面得到了很好的凸显。
这个界面和《全境封锁》中人物的物品栏界面一模一样。全息投影、虚拟指示窗、高科技瞄准设备与后启示录科幻战争联想密切相关，主题中方舟的共性成为了这样设计的原因。当手机设备的电量、信号、时间信息以统一的样式放入相应的悬浮窗口，3354方舟在陀螺仪的感应下整体移动，一开始就给玩家提供了强烈的沉浸感。
当然，作为一款二次开发策略手游，它的几个系统是分离的，在小屏幕上对可用性的关注远在审美之上。画中界面元素的表现是不能和端游大作相比的。关于Diegetic接口，笔者首先从EA的《死亡空间》了解到。在2013年的GDC上，时任EA Visceral Games UI总监的迪诺伊格纳西奥(Dino Ignacio)详细展示了游戏的开发过程，探讨了各个团队在提供更具沉浸感的画面方面的尝试，并对Skeuomorphs的概念如何贯穿游戏UI设计进行了深入分析。这个后面也会简单提到。
二、流畅设计式的设计思路的多重质感是在哪些细节中勾勒出来的？
Fluent Design是微软在2017年提出的一个设计系统。据说这个设计系统将为其产品愿景提供跨多平台运行的能力，照顾到当时众多大型产品中零散的设计风格。
在最初的介绍视频中，整个设计风格被拆解为以下五个方面：光线、深度、运动动作、材质材料、比例比例。通过规范指导，我们可以知道每个分类在底层系统设计中的具体意义；但就我个人的理解，其本质的视觉表现是“拟像”的简化，核心是“肌理”。
如何设计一个流畅的元素？首先在现实世界中找到这种元素最有代表性的材质，重现这种材质的质感，剥离这种质感的细节，最后在交互中加入光照的变化和强调的方式。到目前为止，已经设计了一个基本的Fluent组件的可视化表示。
在众多材料选择中，磨砂玻璃自Windows 7时代以来一直是微软最青睐的元素。原因很明显：在不同的光线环境和重叠的物体中，它所代表的“背景虚化”效果不同于一般的渐变，色彩组合更柔和，能与画面中锐化的部分(如文字)产生鲜明的对比。在Fluent系统中，背景虚化仍然在面板风格层次中占据重要地位，但进一步改进为“亚克力材质”风格，通过模拟Alec板来构建视觉层次。
方舟UI的一个突出特点就是极高的级别对比度。除了高质量的平面设计思路和符合世界观的警戒色、亮色加持，也是很多地方使用背景虚化效果突出屏幕需要关注的交互部分的原因之一。模糊的另一个好处是它的覆盖范围：模糊特定界面的背景，并在其上添加一个新的页面组件，会让玩家“看到”前面的页面被下面覆盖了。这个后面会再提到。
作为如何创建Fluent组件的示例，描述了作者“选择材料和剥离细节”的核心思想。结果实际上是物体的“积木”:积木作为儿童的启蒙玩具，需要承担认知(识别)的功能，同时还要保持其可玩性特征。关于艺术层面对质感的追求，日本画家@池袋幸弘早前发表了一组自己的实践手稿，充分体现了材质核心差异的魅力。
最后，提到UI上光线的使用。由于方舟是一款手游，所以没有办法交互悬停指针，除了陀螺仪，在灯光控制上似乎也没有太大的想象空间。目前游戏中所有刻意进行光照的地方，多为静态地图而非即时渲染(比如签到日历的背光效果和领取物质奖励时的后光圈)。预计未来会有更多的产品在UI层面开始考虑原本在建模阶段考虑的底纹照明。界面性能越好，操作指导的可能性就越大。
三、扁平化界面后如何追求交互空间和内容深度？
开个玩笑，微软在Fluent系统中特意强调了深度和比例这两个要素。其实无非是之前整个Windows系统级界面都是扁平化的，这成为了扁平化最大的误区：扁平化的出发点是减少页面上与交互无关的细节，提高产品使用效率，加强设计元素的视觉统一性。如果简单理解为“平”，会导致学习成本更高，画面失焦。
自从材质设计的概念提出，iOS 11推出以来，三轴“卡影圆角”的扁平化设计已经广为人知。方舟没有越狱，卡设计在采购中心、基础设施等很多页面都有使用。卡片搭配阴影的目的是为了形成层次。简而言之，你越想抓住用户的元素，你就离他们越近，在界面层上对应的高度就越高。这是展平和突出页面深度的方法之一。
在战斗章节选择界面中，白色粗边框的章节主题地图像打印出来的照片一样夹在弦上。如果你仔细看，你会发现页面周围有一圈投影。这种效应在摄影中称为渐晕效应，最初来源于由于遮光或镜头排列的问题，图像中心的亮度和饱和度高于周围，也就是所谓的“热点效应”。在现代平面设计中，作为一种创意效果，添加到画面中，突出页面中央的信息。实际上，在于方舟有很多这样的设计。这样就突出了页面中的卡片元素，视觉层次清晰分明。
搜索界面加入的视差效果也是亮点之一。当各代理本身的大小(暗示距离)存在差异时，加入视差可以塑造透视感，与整体平面设计元素一脉相承，可以说是很有思想的。当然，笔者认为这里可以使用骨骼动画粒子效果的美术加持，让一个主剂每次都更加突出，重现预热宣传pv里面的风格。
4.风格化的装饰字体如何同时成功表达古典骑士精神和科幻军旅风格？
方舟页面给人的第一印象很明显的特点就是使用了大量的serif字体，但实际上serif字体并不是游戏中使用最广泛的字体。在主面板中，衬线更多的是以中文衬线的形式出现，由于其笔画粗细差异显著，可读性相当高。以“警戒”为意图，与未来的浮窗和工厂Gnaku风格插画形成统一的产业连接。
这种设计风格在类似的《少女前线》中也有相同的呈现，后者因为其背景特点，甚至更依赖于这种字体带来的复古金属感。也正是这种类似的设定，使得很多玩家因为制作猫海的特殊经历，在拿到方舟后，呐喊面板的设计与少谦息息相关。
拉丁风格使用serif时，风格的变化会更加严谨，所以使用时需要区分。它的出现可以追溯到古罗马。经过不断的发展和演绎，风格区分因人而异。我喜欢把它分成以下四种基本类型：
1.古罗马的
2.文艺复兴(旧式)
3.过渡期的
4.现代的
在整体的变化中，衬线的粗细和笔画的区别越来越大，肩部的弧度切角越来越直，体现了背后刻字技术的专业化和细致化，排版风格从传统的手写向现代印刷转变。从这个发展路径可以看出，衬线拉丁风格其实是风格丰富的。“衬线字体代表古典和严谨；无衬线字体代表了现代标准的偏差。著名的现代衬线字体，如迪多特、博多尼，充满了犀利的现代感，同时保留了精致的衬线装饰，是时尚界的首选。
我很喜欢战斗章节的选择页面，里面五个章节的主题地图就像专辑封面一样。局部失焦和高亮颜色的减淡水印，配合经典的衬线字体，有着独特的魅力。即便如此，这五张图还是能体现出方舟设计风格的不统一。
前言、第一章和第二章以及后面两章使用的英文字体有明显的区别。3354以第一章为例，经过对几种OCR工具和作者经验的交叉检验，《邪时》选择了Source Han Sans(对应思源宋体，典型的现代衬线)。这种现代的衬线字体略显不太古典，感觉是为了协调。
此外，背景人物塔卢拉的礼服具有经典欧洲皇家服装的褶领设计，以及其使用冷兵器的武器风格.现代字体更加格格不入。最后，画面中异物感最强的是俄语“”的最下面两行
在随后两个章节的主题图和方舟第一个活动《骑兵与猎人》KV中有了新的内容，选用了更偏向旧体的字体图拉真，并对间距进行了缩进，进一步降低了汉字的粗细，既提高了协调性，也提高了与插图的匹配度。
后来笔者查阅了一些早在方舟测试前2017年就流出的资料。估计当时的VI设定是用现代字体(甚至无衬线)来搭配技术先进、奇形怪状的移动城市龙门，而用更古典的字体来搭配切尔诺伯格、乌萨斯等老牌城邦。这个设计理念可以在即将到来的第五章plot PV中看到。以龙门为核心舞台的篇章中，复古骑士短暂落幕，代表赛博风格的点阵、无人机、精钢、无衬线字体开始活跃。
Bender，基础设施系统中常见的工业伪等距字体，也是Ark中比较有特色的字体之一(“伪”是因为它看起来像现代的等距，但实际上只有少数字符是等距的)。它的加入让整个基础设施系统的科技风格硬核化，不然玩家真以为自己在玩“天灾避难所”(笑)。
最后，我想说一下中英文结合的设计方法。以笔者自身经验来看，中英文(或多语种)文字搭配设计总能“好看”，大部分场景都考虑了装饰。大致原因是字体种类不单调，外文字符的组合给人一种莫名的强迫感。这可能是因为我们童年接触到的多语种文字的商品大多是进口的稀有材料(比如日本的零食或者医院的静脉药袋)，所以这种认知是潜移默化植入的；另外，科幻启蒙小说和电影多来自国外，所以把西方语言和“科技感”联系在一起是完全正常的。
方舟的大量组件中加入了英文内容，无论是界面层面的装饰文字，还是各种基础美术资源中的设计，处处彰显硬核风格。各种剂型和药物的描述和说明在相当程度上为SCP基金会的临床写作氛围铺平了道路。在这样的配置下，现在的剧情对话展开，显得刻意而无力。完全没有塑造人物性格的能力，只是用来传位，急需改进。
5.焦距控制、底图处理等基础平面设计技术如何塑造统一的视觉识别？
关于页面深度的讨论，前面已经提到了，描述更多的是基于平面页面组件之间的层次关系和交互视角。此外，方舟还通过焦距控制和统一的风格化底图处理，在静态设计层面增加了页面深度(多层次画面)和内容深度(传达信息)的表达。
先举个页面外的例子：以第一次进入采购中心时楼山的介绍插画为例。在光线的设置上，亮度溢出的背景中心配合人物插画本身的光影处理，用多个散射的水平光线在一个平面上表现一个多光源的三维空间；关于元素的重叠：人物前后多处装饰文字突出元素间的立体关系；最后，在焦距的控制上：通过失焦背景突出画面的中心，对一些前景元素做更多的边缘失焦处理，使人物的前后纵深得到体现。
笔者认为，失焦前景取景自从iPhone的人像模式推出后，迅速得到普及，现在已经成为人们日常生活中常用的拍照方式。随着大众接受度的提高，设计师有了更多的空间来处理“模糊”的增强效果。
重叠的元素和丰富的页面表达是平面设计中最基本也是不可避免的环节。不同的信息层在不同的位置排序，核心永远是突出的主题，使其与整体VI更加统一。常见的方法如局部覆盖、色块的透明处理、光影的浮雕效果等。都是方舟界面中常见的，比较有特色的有：
1.噪点和卡通点纸风格的底图处理方式，增强了画面的精细度，在所有视觉出口都能看到；
2.局部不稳定的马赛克，用梗创造信息暗示，为故事铺垫。
根据作者看漫画速写本的模糊记忆，点胶纸应该是各种类型的，比如各种图案或者特殊的浅灰度做背景。目前，方舟最常用的设计是分散的点和条纹。前者相当于低密度高粒度版本的颗粒效果。可以用在基础部件(如按钮)中，使留白不显得单薄，用在各种卡片的背景或平面设计的底图中，可以提高对比度。后者主要是指粗条纹，类似于警戒线风格以显示设计的工业感。这种底图处理风格在游戏内外都有着惊人的一致性。
局部的马赛克设计可以在特工报告的界面(动态)、灭绝行动的背景图(静态)等地方找到，很多注意到的玩家应该能立刻反应出“不同步”，这已经有十年的历史了。在《刺客信条》三部曲中，每当人物记忆模糊或者连接不稳定的时候，场景就会进入类似的状态。基于“释放神经递质”等线索.建立连接”，Amia的背景故事和PV资料中提到方舟加载游戏时，作者估计玩家在游戏中实际上并没有扮演医生本人的角色，而是作为一个独立的个体，通过使用系统访问医生的记忆(就像Desmond使用Animus访问祖先的记忆片段，metagame)。这里不做过多猜测，期待后续情节的延伸。
整体而言，方舟有着非常严格的视觉规范和鲜明的品牌特色，这是统一嵌入高度风格化的视觉单元，并严格控制所有材料出口的结果。平面设计风格是一个不断进化的渐进过程。在最新的章节拓展预告中，陆续加入了很多新元素，但依然可以找到原有风格的进化点。
6.有哪些切入式融合的技巧减少了页面层数，构建了基于场景的系统架构？
这一部分主要包括三个方面，从而探讨Ark如何通过减少页面的层次和切换次数，以及在必要的时候提供适当的快捷方式，将系统的学习成本降到最低。我们知道方舟在三次测试中口碑一落千丈，其中一个核心槽点就是新手指导的时候，聚在一起灌输各种系统化的游戏，让玩家必须掌握15个游戏，认识7种货币，近百种资料，才算前言不搭后语。这部分属于新手引导的节奏设置问题，我们暂且不谈，只关注界面设计。它们是：
1.剪切到剪切动画反映了页面的自然切换逻辑；
2.风格化的堆叠浮动窗口和局部位移，以减少页面层次；
3.系统功能之外的全局项目导航和空间连接。
在《方舟》中，每一个需要页面切换的地方都加入了过场动画，根据页面之间的实际逻辑选择动画效果。比如两个独立系统之间使用简单的暗淡出，而逻辑相关的关卡主题和关卡选择之间有明显的放大缩小效果。当进入一个需要一定时间加载资源的系统，比如基础设施，除了动画效果之外还会显示插图，减少玩家感知的等待时间。
在上面毛玻璃背景虚化效果的描述中提到，方舟经常使用背景虚化来覆盖浮动窗口，以减少玩家对突然跳出的新页面的阻力。有些二级系统直接通过呼出原页面来增强玩家对页面导航的控制。比如签到、邮件、通知、设置等页面的呼出电话都覆盖在原页面上；在基础设施系统中，设施的主题颜色进一步增强了页面的从属关系。
除了浮动窗口，一个元素的局部位移形成新的信息显示空间也是简化信息层次的常用交互方式。最经典的例子就是代理的修炼页面3354中的每一个可点击的按钮都没有被引导到一个全新的页面。而是与代理信息页面保持联系：升级-遍历淡入动画、升级-角色位移、关卡-角色位移、升级技能-页面背景不变、查看天赋-弹出透明浮动窗口、查看职业详情-弹出毛玻璃弹出、查看属性详情-数值直接向右扩展、查看背景故事-角色位移、查看时尚-弹出毛玻璃弹出窗口.加上页面拖拽滑动可以直接实现五线谱的切换。玩家从来没有在复杂的培养体系中离开过同一块画布。我觉得这是方舟互动最典范的界面之一。
最后，系统导航分为两部分：
1.全局快捷方式；
2.系统场景包装。
第一部分主要是针对复杂的材料树很难让玩家记住每个物品的等级和输出方式的问题。相比制作独立的游戏内插画，游戏增加了全局指令链功能，任何物品图标出现的地方，都可以直接跳转到对应的掉落关卡，查看对应的掉落概率。这种组件化的设计大大降低了玩家开发科技树的学习成本，甚至在完全了解材料的层级关系之前就可以收集开发。
第二部分是页面左上角的主界面按钮。玩家可以通过这个导航快速进入任何系统，而不用回到枯燥的面板再进入。这个导航条的独特之处在于，它的系统并不是分散的，而是被放置在“罗德岛”的不同区域，这是一个建造在倒置的鲸骨上的“方舟”。通过给每个系统一种空间连接和包装，玩家的交互路径更具代入感，产生身临其境的游戏记忆。
七。页面和交互的未来前景。
一款制作精良的产品，值得更多的回眸和遐想。在此，笔者也希望提出一些关于方舟界面交互未来改进空间的观点。以下建议只是单纯从经验角度提出，没有考虑可行性，对培训来说不够。
1.界面元素对玩家操作的反馈有待提高。
对玩家持续稳定的刺激是保证其游戏流量的重要基础。对于非本地页面以静态为主的Ark来说，很难在视觉层面提供足够的持续刺激和互动双向反馈。Ark的解决方案之一是在界面中加入大量明显的粒子效果来突出页面细节，比如面板右上角的光线变化，管道中溢出的烟雾，散落的灰尘和雪花，以及一些代表自然灾害的地图中散射的光影等。3354在这个动作下，增强了画面的呼吸感，提升了游戏的整体质量。
但粒子效果图并没有因为玩家的操作输入而改变，最终的印象似乎是在欣赏一部细腻生动的电影，而不是在体验一场互动游戏。如果粒子效果可以随着玩家的操作输入而变化，比如在章节选择界面，拉动章节卡可以改变一些灰尘的飞行路径，产生阻挡和冲击效果，整体的反馈会增强很多。
2.页面交互方式的多样性还有提升空间。
一定程度上，页面关系和系统连接的流畅掩盖了方舟在人机交互选择上的保守。点击按钮是最常见、最常规的交互方式，但存在体验单调的问题。现代产品设计中的很多新尝试，比如拖拽、旋钮、缩放、匹配触觉效果，甚至多指或屏幕边缘操作，都只在办公室外的大部分静态页面中使用。
事实上，Ark的设计风格非常适合嵌入更现代的交互方式，尤其是在大量使用传统GUI组件的系统中，比如人员列表和基础设施系统。几个简单的脑洞：比如在编队管理页面，允许拖拽卡片改变特工的排列位置和选择；确认贸易站订单时，可直接上/下滑动接受或删除订单卡片并配合一定的缩放动画；在调整制造站的生产能力时，使用旋钮或滑块组件的交互便利性将远远超过当前经典的4拾取器模式[max-min]。这些都是目前优化交互节奏，改善点击操作带来的黏手感的一些可能。
3.其他有趣的发现
芯片搜索任务卡上的题注是“运动学习|由深层心态提供动力”。运动学习理论是认知研究框架的核心，它讨论的是个体学习一项技能时的心理结构、场景干预因素、影响效率的行为、先天能力不足等问题。无论是复杂身体能力(如运动、使用乐器)的学习，还是持续身体应激反应的调节，都有系统的拆解分析。
有意思的是，在机器学习算法和脑机接口技术成熟的未来，传统的认知理论可能会被迁移和融合，人体掌握新技能的过程会被无限缩短，甚至有可能通过“插入芯片”来实现。就此，认为游戏需要芯片来设置军官的晋升，但这个项目的名称仍然被定义为运动学习而不是机器学习，这暗示了对人类边界的讨论。3354在电子大脑盛行截肢和假体重建、吸毒的科幻未来，人类通过自身意志形成的行为认知会有多大
诚然，《方舟》是一款结合了一些经典文学意图作为背景考证的二次元游戏，其主题比赛博朋克更倾向于废土。后者以其自身的先锋派性质，应该可以在一个未来的温床中，对跨地域的种族、性别和人类意识做出更多的思考。所以我很期待明年的《赛博朋克2077》。
结语明日方舟是手游领域非常难得的产品，有着极高的艺术品质追求和高度统一的视觉标准。通过观察和拆解，可以发现隐藏在“好看”背后的先进设计理念。它的成功绝对不是惊喜，也不是偶然。方舟的运营和受众捕捉层面有足够多的案例值得分析和学习，它的页面和互动最终会成为一个好玩法的载体。虽然不会是主角，但还是有不可替代的作用。
就作者而言，界面是系统逻辑与人的意志输入之间唯一的纽带和窗口。我们看到的每一个像素，每一次轻微的眼球运动，每一次手指操作，都是依靠界面来传达信息输入，并期望它返回我们预期的结果。到目前为止，我们看到了《荒野大镖客》电影模式下的“无UI”界面思想，也看到了《女神异闻录 5》将界面作为其艺术风格核心演绎环节的极端案例。人机交互的进步是对人的感知接触点和信息处理能力的不断探索，未来会更加多样化，更加精细化。
暂无讨论，说说你的看法吧
