窗口界面设计规范：界面关闭方式及界面叠加

导读：在游戏中，无论是手游/端游/主机游，窗口界面的数量都十分巨大，上一期，学院君推送了窗口界面的类型以及交互设计的规范：

《如何做好窗口界面的交互设计？你需要了解这些规范》

本次，网易游戏用户研究中心将继续和大家一起探讨窗口界面关闭方式，以及如何处理界面叠加。

本文选自网易游戏研发系列丛书——《大巧不工：用户体验设计法则》

一、窗口界面关闭方式

每打开一个新界面，都意味着需要有关闭方式来将其关闭，保证玩家在不同的界面之间进行自由地切换。一般情况下，全系统要对关闭方式进行统一规划，这包括：

a)位置统一

按钮的位置统一在界面的某个部位，不可以忽左忽右、忽上忽下；

b)样式统一

通用关闭按钮的尺寸、大小、外观应保持始终一致，除少数需要特殊做表现的界面可以允许稍微不同。同时，按钮的样式要符合玩家的通用认知：如关闭使用叉号，返回使用向左箭头符号；

c)逻辑统一

使用返回或者关闭，应在全系统内进行统一逻辑；除特殊需求外，切忌部分界面使用返回、部分界面使用关闭；

d)特殊关闭方式特殊处理

如果使用手势、3D touch、重力感应、声音输入等特殊关闭方式，必须谨慎使用，并且提供明确新手引导确保玩家学会。

游戏内常用的关闭方式有以下几种：

1)关闭按钮

最常用的关闭方式，除非有明确的设计目的，一般情况下都放置在右上角。设计时要保证比较好点击的相应区域。图标设计一般为叉号，若使用其他符号，需保证玩家易于理解。窗口界面、全屏界面、伪窗口界面中都可以使用。


2)返回按钮

此为iOS应用自带关闭方式，用在有明显上下层级关系的界面中。使用时一般放置在界面的左上角，少数情况会放在右上角。GUI设计时采用的图标应是向左的按钮。

此种关闭类型通常情况下只适用于全屏或者伪窗口界面，窗口界面因其界面形式灵活，比较少使用到。

通常情况下，在界面数量不多的休闲、MOBA、卡牌等游戏中比较适用，但在比较复杂的大型MMO游戏中，因其界面信息量大、层级深，此种关闭方式会让玩家经过多次点击才能回到主界面，不建议使用。

3)通用按钮

许多反馈界面中，会采用通用按钮作为关闭按钮来关闭界面，但这种方式因为界面布局的原因，比较少会作为通用的方式去使用。

4)二次确认窗

通常情况下，二次确认窗因为其本身选项中就带有取消操作，因此允许不显示关闭按钮。但是，如果提供给玩家的选项中并无取消一类的操作的话，则必须要有关闭按钮或者其他系统默认存在的关闭方式。


5)点击界面外空白区域关闭

点击界面外空白区域关闭界面也是一种较为常用的关闭方式，其在游戏中的应用主要有两种方式：

a)只用于反馈提示类信息的关闭，例如升级提示、促销活动等；该类提示不仔细阅读也对游戏进程无影响，方便玩家快速跳过；

b)运用于游戏全局的情况，比如《乱斗西游》。如果需要在游戏全局中使用，必须全系统通用，即所有弹出界面都可以通过点击界面外空白区域关闭界面，并且在前期新手中充分做好引导教学，确保玩家能够发现并熟悉这一套操作流程。也可以在界面底部等不重要区域使用文字提示告知玩家，如“点击界面外空白关闭”。



6)其他手势、3Dtouch、重力感应的方式

原则上不建议使用这些方式作为系统主要的关闭返回方式，这类操作具有隐蔽性，玩家比较难意识到。只建议可以作为少量系统的亮点或辅助方式进行。

如果要使用这种特殊的操作关闭返回方式，必须有非常充分的新手指引，保证玩家能够100%学会关闭界面的方式，并且不会与系统其他的手势、3Dtouch、重力感应的交互形式发生冲突；或提供其他明显的返回关闭方式（如关闭按钮），这些特殊操作只作为快捷方式补充。

二、界面叠加

界面与界面之间，往往都会出现重叠的情况。如何处理叠加层级，需要在设计中期就进行精心规划设计。

1)界面归类分层

在设计界面达到一定体量的时候，需要进行大致的归类。

通常情况下，在一般MMORPG游戏中，界面可以归为以下几个大类别：

公告提示：用以显示全服的公告、个人的提示、战斗力变化等信息；

状态提示：用以显示各种反馈类的提示，如任务完成、等级提升等；

基础界面：包含一二三级界面，各种确认弹窗，成就提示反馈等；

场景提示：挂接在场景中的反馈提示，如掉血跳字；经验获取跳字、自动寻路标识等。


这四大类型界面，位于顶层的通常是公告提示，次一层的是状态提示，接下来是基础界面，最后是场景提示。

当这些界面元素出现的时候，公告提示始终位于最顶层，会盖住等级提升等状态反馈，而等级提升又会覆盖基础界面，基础界面又会覆盖场景提示。（注：本文以常见的MMORPG类型游戏为例进行讨论。其他类型游戏信息量没有这么大的情况下，可自行进行调整设计）

2)每一层的信息处理

根据上文的思路，我们已经对界面进行了4类分层，接下来我们就需要处理每一层内的信息。

首先，我们应当尽量保证，单层内的信息尽量少出现重叠，如在公告提示层，应尽量避免个人信息、全服公告、走马灯公告弹出的时候相互重叠。

如果单层内会有界面重叠的情况，需要有覆盖规则。比如在基础界面层中，三级弹窗应该覆盖在二级面板上，二级面板应该覆盖在一级界面上；并且处理好每一层与下层的关系，如是否叠加黑色半透明底，多层半透明底出现的时候是否只显示最上层一个。


3)跨层信息处理

将所有层级的信息叠加在一起，查看是否会出现重叠的状况，尤其是频繁弹出或长时间持续出现的信息：比如走马灯公告的弹出位置是否会干扰到通用界面上的信息显示；个人信息反馈是否会遮挡自动寻路状态等。

尽量把长时间持续出现的信息（如走马灯、自动寻路等）与其他关键信息错开，放置在界面上比较次要的位置上。尤其要考虑到玩家在进行紧张战斗时的操作体验。


4)结合动态信息进行考虑

部分信息会涉及到动效或动画，比如个人信息弹出的时候有弹出动画，要充分考虑动画弹出的位置、播放次序等问题：

a)动画弹出的时候，是否会发生位移，位移后是否会遮挡其他关键信息；

b)同一位置短时间内弹出多个动画时应如何处理？（播放最新的/次序播放/忽略播放n秒以前的；）

c)连续多条动画之间是否有衔接（多条走马灯播放时是否需要重新呼出公告栏等。）

以上，就为我们总结的窗口界面关闭方式及界面层级处理规范，在实际的操作中，不同目的的界面布局以不同的特征为首要目标，不同形式的界面可以用不同的方法来实现。希望能给大家一点启发。

来源：网易游戏学院
原地址：https://mp.weixin.qq.com/s/rRVNqVyJYzPJIDrW48cvqw