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

导读:在游戏中,无论是手游/端游/主机游,窗口界面的数量都十分巨大,上一期,网易游戏学院推送了窗口界面的类型以及交互设计的规范:《如何做好窗口界面的交互设计?你需要了解这些规范

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

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

一、窗口界面关闭方式

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

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)连续多条动画之间是否有衔接(多条走马灯播放时是否需要重新呼出公告栏等。)

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

本文来自网易游戏学院,本文观点不代表GameLook立场,转载请联系原作者。

关注微信