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

导读：在一个游戏中，窗口界面的数量是十分巨大的，尤其是MMO类型的游戏，需要设计师在一开始就做好相关的规范。

那么，如何处理好各级界面之间的关系以及对应的操作，来保证游戏中所有界面体验的一致性，以及设计时的扩展性呢？本次就带大家来了解窗口界面的设计。

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

1.界面类型

窗口界面在此指的是游戏中除游戏主界面之外的所有界面的总和，如目前的游戏中（无论是横屏/竖屏、手游/端游/主机游），一般会根据占用屏幕的空间，将窗口界面分为以下几种基础界面类型。一般情况下会选择一种类型为主要框架，然后同时使用其他几种作为辅助。

1)窗口

特征：全部信息/控件都放进一个界面底板内，会透出左右或上下的游戏场景，占用屏幕空间较小。

优势：

a)玩家在打开界面的过程中，仍然能够关注到底下的游戏场景信息；
b)玩家没有完全打断的场景游戏体验；
c)信息扁平化，一键关闭返回场景，有安全感；
d)不会涉及到界面跳转，界面层级简单易理解，逻辑清晰；
e)很好地展现功能性强的界面。

劣势：

a)界面四周存在一定空间的浪费；
b)条条框框的东西比较多，界面表现力弱。

适用范围：

a)与场景有较强交互的游戏类型，如MMORPG、SLG、模拟经营等；
b)层级单一、流程性弱的游戏，如休闲小游戏；
c)功能性、逻辑性强的游戏。

设计规范：

a)统一的关闭规则&关闭按钮；
b)背景建议有适当蒙灰处理；
c)如果是MMO可直接选这种。

2)全屏

特征：没有框体结构，控件散布、组织在场景中，场景密不透风，对玩家游戏场景打断性最强。

优势：

a)表现力强，给玩家强烈的视觉体验，视觉效果强；
b)不会造成空间浪费；
c)界面形式发挥空间更多，易于营造更好的视觉效果；
d)单线程——玩家同一时间只关心一件事情。

劣势：

a)设计难度大，信息层级把控要求更高，资源量大；
b)层级深，进入下一级系统操作比较多，不能快速回到主界面，必须经过多级返回，容易层级眩晕；
c)多系统间跳转逻辑奇怪。

适用范围：

a)具有强大世界观或故事背景，强体验性的游戏；
b)核心玩法与界面关联性不强。在游戏玩法外玩家可以长之间关注在界面上；
c)纯界面玩法比较多，系统设定概念化重。

设计规范：

a)注意统一返回方式；
b)提供快捷返回主界面的方法；
c)界面层级不宜过深；
d)做好多系统跳转链接；
e)MMO不建议用。

3)伪窗口

特征：有框体结构，背景为一张静态图片，实际上也是一种全屏界面。

优势：

a)相比起全屏界面，信息更容易归类排布；
b)相比起窗口界面，底图适当地增强代入感；
c)设计难度比全屏界面低，信息主次更清晰；
d)如果背景的场景非常混乱，可遮挡混乱的背景。

劣势：

a)表现力上不如全屏界面；
b)与窗口界面混用易出错：到底哪些要有背景、哪些没有；
c)比起窗口界面，资源量大一些。

适用范围：

a)功能性比较强，没那么注重体验性的游戏；
b)对资源量有要求的游戏；
c)核心玩法与界面关联性不强，在游戏玩法外玩家可以长时间关注在界面上。

设计规范：

a)和窗口界面结合使用的时候，必须定义好哪些要有背景图、哪些用半透明黑色窗口；
b)要避免场景很亮，底板很暗的尴尬（比如场景是白天，一打开界面是深色背景）；
c)界面层级不宜过深；
d)做好多系统跳转链接；
e)MMO不建议用。

4)如何选择

那么，要怎么去选择主要框架界面呢？

a)首先，要看是否有主场景；

这里的主场景指的是，除了核心玩法外，是否有个可交互的游戏世界。因为只有场景作为背景，才能使用窗口类界面作为基础框架。

有主场景的游戏，一般是MMO类、RPG类、SLG类、养成类、部分休闲类游戏（比如《大话西游》、《COC》、《梦幻花园》等），一般可以在三种界面形式中随意选择。

没有主场景的游戏，则可能是MOBA类、FPS类、卡牌类、休闲类、棋牌类游戏，则不可以选择窗口类界面作为基础框架界面。

b)其次，要看玩家与场景的交互程度是否频繁；

在一般的MMO类游戏中，玩家会与场景发生频繁的交互：交接任务、移动、寻路、对话、采集等。玩家可能随时停下当前的界面操作，调整自己的游戏目标。

比如游戏在完成20轮师门任务后，会切回主界面开始另一个新的任务，因此推荐使用对玩家场景交互打断较小的窗口类界面作为基础框架界面。玩家在打开界面的时候仍然能够通过边缘区域来判断自己当前所处的位置、角色状态、是否被攻击、任务是否完成等等，从而随时调整自己的游戏目标。

c)最后，要看游戏类型是否对于代入感有强烈的需求；

《阴阳师》是非常好的例子。作为一个RPG结合卡牌的游戏类型，《阴阳师》虽然在核心战斗外有一个庭院场景，但依然使用了全屏界面，搭配了比较多的伪窗口界面作为基础框架。

这是因为游戏目标在于塑造一个强代入感、强体验性的游戏世界观，使用全屏界面大大提升了这种浸入式体验。

2.界面信息层级

定义好了基本框架后，我们基本上已经选好一级界面形式，需要开始规划基础界面层级。界面层级主要是定义：

a)界面层级数；
b)每级界面的大概尺寸、形式；
c)每级界面之间的关系。

1)界面层级数

界面层级数，确定的是信息架构的深度，确定界面最深可以打开几个界面。

比如我们从A界面打开了B界面，从B界面又打开了C界面，不允许再从C界面上打开其他的界面。ABC之间是层层深入的关系，那么界面级数就是ABC三级。

在信息量不变的情况下，每级承载的信息量就越少，层级就越深；每级承载的信息量越大，层级就越浅。好比容积相同的杯子，杯子的杯口越大，深度就越浅；杯口越小，深度越深。UI设计师需要为自己的系统设计合适的杯子，装下这么多信息量。

需要注意的是：

a)通常情况下，界面级数越深，信息量越少；
b)最后一级一般是二次确认框；
c)可以存在不同尺寸的同级界面（比如二级界面可以根据需要设计几种不同尺寸的）；
d)跳转不同系统并不计算在层级内（比如养成装备的时候缺少材料，跳转到商城，但养成装备和商城其实都属于一级界面）。

建议界面层级不要超过3~4级。一级界面承载一个系统的主要信息，二级界面承担这个系统的某一个功能，三级界面承担二次确认框等提示。特殊情况下根据需要再添加一级。

有一种特殊情况：流程引导性界面。比如，从主界面匹配进入战斗的流程，虽然视觉上看是处于同一级的，但玩家经历了下一步的操作，其实是属于三个层级。

通常情况下，在项目之初，我们缺少大量的系统设定文档，很难预估系统会需要多少层级界面。可以按照通用管理做3级，并定义好大概的尺寸，做设计的时候尽量往三级界面上去套用，如果套用不上，再进行添加/修改。

也可以根据特定的游戏类型，预想好一个典型的流程（比如为MOBA游戏预想好匹配流程），以此作为切入点进行设计。

2)每级界面的关系

思考和定义每层界面直接的关系规则，有助于设计师更合理的做设计，包括：

a)不同级界面的关系

如果我们从A界面打开B界面，那么A是应该消失还是铺在底下？

如果B采用的是窗口界面，需要考虑到是否需要使用黑色不透明蒙版?

不透明蒙版的不透明度是多少？是否允许多个不透明蒙版叠加在一起？是否允许点击空白的地方关闭界面？

b)同级界面的关系

即如果我们从A1界面跳转到A2界面，那么关闭A2的时候是返回主界面还是返回A1？

c)一些通用组件的关系：比如财富栏是否跟随界面？

处理好这些关系和功能逻辑，让玩家能够在操作中去等区分整个界面的层级关系，从而带来好的游戏体验。

实际上，窗口界面的数量巨大，设计规则也大有门道，此处只列举一些基础的设计规则，在实际的操作中，不同目的的界面布局以不同的特征为首要目标，不同形式的界面可以用不同的方法来实现。这需要设计师在平时多观察多积累，学以致用。