《明日方舟》UX分析：游戏UI如何塑造轻盈友好的体验？

《明日方舟》已经火了一年了，相信大家早已有所耳闻。从UX角度上来说，《明日方舟》的视觉及交互体验都达到了一个比较高的水准，有很多值得我们学习的亮点。

今天我们从体验的角度出发，看看《明日方舟》作为一款二次元、重世界观的休闲手游，是如何打造“轻盈而友好”的界面体验的，也借此向大家分享一下UX相关的理论。

一.如何营造简洁轻盈的交互体验

何为轻盈？

轻盈既是一种物理属性，又是一种心理感受。指没有层层叠叠的界面堆积，玩家能全神贯注地将注意力集中在玩法和当前任务中。

1.控制界面物理深度

界面的物理深度是指，单系统内玩家执行一个任务，最多可以打开的界面数量。

明日方舟在全局范围内，将绝大部分界面流程的深度都控制在2-3层以内，少数界面可以达到4层。

一般的操作界面，如编队、出战等，深度全都控制在2-3层以内。↑

一些复杂的核心系统，如角色、家园系统的极少数分支，层级才能拓展到4层。↑

这种浅层级可以防止玩家迷失在层层的界面跳转中，为整个游戏轻盈的交互体验奠定了基础。

（注：系统间的跳转不能算作同一个层级，流程引导性界面也不算，比如出战流程）

2.控制界面感官深度

明日方舟要维持3层以内的系统深度，但是系统的复杂度又不可避免，那么必然要做的就是浅而广的设计，即界面之间跳转少，单个界面信息和操作多。为了降低玩家的认知负担，此时就要控制界面的感官深度。

控制感官深度是指在操作复杂度不变的情况下，让玩家无法察觉到界面的堆叠和跳转。明日方舟主要采用了以下方法。

*使用主体关联+动效的方式弱化界面跳转感

当玩家从界面A进入界面B的时候，A和B的界面主体始终是同一个，同时有流畅的转场动效来衔接两者。这样可以使玩家感觉界面并没有产生堆叠跳转，仅仅只是信息在切换而已。

明日方舟的角色界面，当玩家从详情界面转入精英、潜能或者技能等次级界面的时候，界面的主体始终是角色。

另外一个比较经典的案例就是阴阳师，从庭院到角色列表，再到角色详情，在感官上仅仅只发生了空间关系的变化，并没有界面在堆叠，体验十分流畅。

*使用互斥面板收纳信息

如果二级界面信息较少，且一级界面具有良好的延展性，二级界面就可以包装成互斥面板的形式，让玩家通过点击按钮来切换两者。感官上仅仅只是新内容替代了旧内容，界面并没有发生堆叠跳转。

明日方舟的合成玉兑换、招募说明、角色资料等等模块均使用了互斥面板的形式。

大型的MMORPG最喜欢使用这种方法来减少界面的堆叠。比如《轩辕剑龙舞云山》。

*使用侧边面板将支线操作收起来

当二级界面的信息和操作过多，已经无法使用互斥面板来表达时，侧边面板是一个很好的选择。侧边面板从侧边滑出，只占据小面积的屏幕，不会羽化、遮盖当前界面。用这种“临时面板”的样式来承载支线操作，可以有效降低感官层级。

明日方舟的家园、战斗等系统都大量使用了侧边面板来弱化界面的跳转。

侧边面板可以说是《梦幻西游3D》的最爱。为了顺应大屏幕的发展趋势（侧边更易点击），同时减少界面对玩家游戏行为的打断，不仅二级界面，许多一级界面也都做成了侧边面板的形式。

3.界面弱打断

在游戏中最让人感到打断和出戏的，莫过于各种各样的通知，Tips、Toast、跑马灯...他们在界面中堂而皇之地贯穿而过，是破坏轻盈体验的因素之一。

尽管这些交互组件已经有了约定俗成的设计方法，但是明日方舟仍旧对他们进行了别致的轻盈化处理。

*跟随型的道具tips

虽然tips内容的复杂度无法改变，但是明日方舟把tips做成跟道具图标紧紧相依的形态，最大限度地保留了tips的指向性，同时又降低了tips浮层对当前界面的打断感。

*通知区域集成到右上角

明日方舟将各类通知有别于常地集中在了屏幕右上的空间，不强制霸占界面的核心位置，把界面空间和玩家注意力交还给游戏本身。

反观《狐妖小红娘》的toast提示，弹出时直接遮盖了界面最重要的中下部位，强制玩家进行阅读，剧情对话、聊天、挂机等等重要信息都被遮盖、打断了。

二.以人为本，提供更友好界面体验

何为友好？

友好即易用，当界面满足了“可用”要求之后，设计师需要为玩家提供更加方便的操作和贴心的服务来提升界面的友好度。

1.为不同类型的玩家提供不同的操作

设计师在设计之初就应该考虑到系统界面的使用者之间的差异，是小白还是大佬？是土豪还是平民？是队长还是队员？多视角的设计可以保证不同类型玩家在同一界面中的良好体验。

明日方舟的家装界面，即为专家提供了细致的自定义操作，也为懒人提供了快速布置的功能。

另外一些我们司空见惯的设计，也是基于这个原则诞生的，比如寻访一次和寻访十次（平民和大R）。

2.为玩家提供贴合场景的操作

*为机械化场景提供快捷操作

当玩家的游戏时间越来越长，界面操作变得高频、重复且机械时，提供快捷操作势在必行。

明日方舟的家园系统很好地预判了老玩家的操作情景——隔一段时间再上线，进入家园只为快速收取奖励、管理角色。

批量领取物资

当建筑产出了物资，玩家可以通过点击对应建筑来进行收取。游戏后期，玩家的建筑越来越多，逐一点击十分麻烦，此时玩家可以唤出总览模式，直接在底部的总览中进行批量领取操作。

批量管理角色

左上角的进驻总览功能可以帮助玩家批量管理建筑中的角色，一键移除全部角色的功能准确预估了玩家的主要行为——看到标红疲劳的角色，必定会将他们移除。

《剑网3：指尖江湖》的悬赏系统，由于玩家每天必做十连悬赏，在后期的更新中加入了一键领取悬赏奖励的功能。

*同时提供一对一和批量操作

同一个玩家面对同一个系统界面，在不同的场景下会有不同的操作需求。比如编队界面的编辑操作就有两种场景：一是玩家创建一个全新的队伍（批量操作），二是根据不同关卡灵活调整已有阵容（一对一操作）。

大部分游戏都是采用一刀切的方式，玩家编队的方式始终只有一种。明日方舟一方面保留了对队伍槽位一对一的操作，另一方面又提供了沉浸式的快捷编队。玩家进入快捷编队界面，将摆脱单槽位的编辑限制，直接在角色列表中自由选取角色。

3.模块化设计：降低玩家学习成本

模块化设计是一种站在巨人肩膀上的设计方式。设计者通过沿用已有的界面布局、复用现成的界面或者模块来进行设计，保证玩家在整个游戏中体验的一致，降低玩家的学习和认知成本。

明日方舟使用了大量的模块化设计，保证玩家只需要学习一次，便可将操作方法融会贯通到其他的界面中。

模式通用：不同系统之间采用相同的布局结构

*有关资源兑换与道具数值变化的界面，均采用“当前数值>>最终数值”的模式。

*当一个操作涉及选取多个对象时，采用左侧详情，右侧列表的模式。

*竖排长列表的子对象，信息与按钮呈左右结构，按钮位于面板的末尾并与面板融为一体。

界面通用：同一个界面样式被各种系统复用。

*角色选择界面的样式通用于编队、战前准备和家园等系统。

*外装查看界面样式通用于换外装、商城外装展示。

4.就近原则：减少玩家操作成本

*通屏界面+超大的按钮

让操作按钮贴近玩家手指所在的位置，可以减少玩家手指的物理移动路径。

通屏的二次确认界面最早是出现在《秘宝猎人》手游中（据我所知），这种新颖的布局充分考虑到了玩家双手握持手机的情形，靠近屏幕边缘且具有超大响应区域的确认和取消按钮操作起来非常方便。

我们可以在许多游戏中看到这种模式的变体。

*紧跟手指的二级操作

让流程中的操作按钮or面板集中在同一个区域，既可以减少玩家手指的点击成本，又可以减少玩家的视线转折，让体验更沉浸。

明日方舟的家园/制造站界面中，玩家选择完数量之后，二次确认流程直接在玩家当前的操作区域出现。此时玩家的眼睛、手指也刚好集中在右下角这个位置，任务体验十分流程。

这也是一种大屏幕手机下的设计趋势，在ios系统的APP中已经被广泛使用。比如知乎的删除二次确认。

三.结语

《明日方舟》里面还有很多值得探讨的好设计，大家可以根据我提出的思路按图索骥，会有很多具有启发性的发现哦！