11.2，布局与导航

界面的布局和导航都是形式上的设计，有很多可行的方案。界面布局主要由界面的功能和内容所决定，界面导航主要受内容多寡的影响。

一、界面布局的目的：展示和交互

界面布局的目的有两个：展示和交互，即展示游戏内容和提供交互功能。不同的界面类型，其布局也会不同，以下分别根据主界面、玩法界面、导图界面、展示界面来说明每种界面的布局特点。

1、主界面的布局：展示与导航

主界面属于典型的枢纽式界面，首先最主要的功能就是导航，需要容纳导航按钮和链接；其次是展示功能，主界面是玩家停留最频繁的界面，非常重要，因此要具备很强的展示性。

主界面的布局受界面内容的影响很大，界面容纳的导航元素越多，界面布局越偏向导航枢纽；界面容纳的导航元素越少，界面布局越偏向展示。不同布局的主界面各具特色，可以根据实际重要性来选择合适的布局。

如图11-2-1所示，以《贪吃神兽》为例，分别示范了几种不同的主界面布局，有以剧情故事发展为主要展示的布局方式，也有以玩家角色为主要展示的方式，还有多个不同板块整合在一起展示的综合导航方式。

                             

图11-2-1，《贪吃神兽》主界面的布局：展示与导航。

2、玩法界面的布局：操作的效率

首先，玩法界面属于操作界面，它最重要的功能就是交互，需要随时提供互动道具，帮助玩家完成操作和交互。玩法界面的执行效率是第一位的，要求极高的便利性和准确性，不允许出现误操作，尤其是动作游戏。因此，玩法界面要求简洁，操控的按钮和图标要间距合适，便于操作。

其次，玩法界面是玩家主要的游戏场所，要具有展示性，需要通过画面影音等，给玩家带来深刻体验。

如图11-2-2所示，以《贪吃神兽》为例，从关卡开始到结束的几个界面和面板都简洁，操作方便，没有无关面板。

图11-2-2，《贪吃神兽》玩法界面的布局：操作的效率。

3、关卡导图界面的布局：流程逻辑

导图界面属于流程界面，是按照一定逻辑关系组织起所有的关卡，引导玩家的关卡选择和游戏过程。导图界面的主体内容是关卡，每个关卡也是互动对象。关卡导图界面要求展现关卡之间的逻辑，在此基础上表现一定的展示性。

导图界面需要将关卡整理成不同层级的组织结构，比如按底层导图、区域导图和世界导图分成三个层级。不同层级的重要性不同，玩家首先应该从最底层的关卡导图开始，然后接触更高层级的关卡导图，最后接触最顶层的世界导图。

如图11-2-3所示，以《贪吃神兽》为例，设计了三个层级的关卡关系。最顶层是世界导图，其中包含81个独立世界，每个世界都是随机开启。第二层级是每个世界的关卡导图，由若干独立故事线构成，故事线之间都是随机关系，共同拥有一个收集发展。第三层级是每个故事线的故事导图，展示每个故事、关卡及其进程。

图11-2-3，《贪吃神兽》关卡导图界面的布局：流程逻辑。

4、展示界面的布局：展示

展示界面顾名思义，就是展示玩家的发展，宣扬和彰显玩家的成就。几乎所有见识、财富、工具、功能、成绩、成果等界面，都是展示性的界面，就像一个舞台，展示玩家的各项成就。

展示界面一般采取简洁的导航方式，通过图标切换展示不同的内容。展示界面包括所有道具的总览和具体道具的展示，需要根据版面空间容量和内容的主次来进行布局。

如图11-2-4所示，以《贪吃神兽》为例，玩家开启每个世界都会获得一个神兽，而完成每个世界会获得一个界石（技能），这是玩家发展的重要内容。因此，通过神兽总览界面展示神兽收集进程；用每个神兽的发展界面展示养成现状，包括战力和卡牌池；用界石图鉴展示每个界石的技能以及收集进程。玩家界面主要展示玩家取得的成就总览。

图11-2-4，《贪吃神兽》展示界面的布局。

二、界面导航的目的：内容的隐藏和呈现

界面导航的目的主要是内容的隐藏和呈现，通过导航按钮或链接等方式，让界面可以容纳更多内容，并根据玩家需要显示内容。

屏幕空间是有限的，而界面要呈现的内容是很庞大的。比如游戏的剧情故事，需要几十个关卡，每个关卡讲述不同的故事，这么多内容都要包容在一个故事导图界面里，肯定无法同时呈现它们。又比如玩家收集的道具，每个道具都有多种功能以及详细说明，这些信息都需要包容在一个道具展示界面里，显然也无法同时呈现。

界面导航的目的就是将暂时不需要的内容藏起来，当需要它们时才调出来，设计的关键就是如何巧妙地隐藏内容以及如何方便地呈现它们。界面导航的设计方法很简单，就是计算界面容量，并选择隐藏和显示方式：

（1）计算界面内容总量。将每个界面模块涉及的内容进行累加，估算每个内容所需界面大小，估算所有内容所需的界面总和，大致判断需要多少屏幕界面。

（2）思考最合理的隐藏和展示信息的方式。只有几个页面内容的界面，与几十个页面内容的导航方式是不同的。比如几十个卡牌英雄的图鉴展示界面，如果每个英雄都需要1个页面，那么内容总量很大，需要几十个导航按钮和1种英雄展示页面。可以将几十个图标作为英雄总览界面，并采取弹出子窗口的方式来展示英雄界面。

以下是一些常用的隐藏和呈现方式，可以根据需要有针对性地组合和使用它们。

1、内容滚动

如图11-2-5所示，内容滚动，或内容移动，是非常方便的设计方法，不刻意隐藏内容，将所有内容呈现在一个页面中，让玩家通过滚动屏幕或者滚动栏目的方法，浏览隐藏在屏幕或者栏目之外的内容。滚动能够对付超过一个屏幕的内容，甚至很多屏幕，当然如果版面超过3个屏幕，就会有更好的方式了。

图11-2-5，界面中内容滚动的方式

2、内容折叠

如图11-2-6所示，内容折叠是将内容隐藏起来，保留标题和重要信息，需要查看时再通过标题按钮显示出来。这是对滚动屏幕的优化，这种方式无需跳转就能在一个界面中实现多内容的导览，适合隐藏不多的内容。如果内容过多，就需要采用标签切换方式。

图11-2-6，界面中内容折叠的方式

3、标签切换

如图11-2-7所示，标签切换也是将内容隐藏起来，保留标签按钮作为关键信息提示，需要查看细节时再通过标签按钮显示出来。标签切换与标题折叠不同，标签之间是并列关系，不像标题有先后顺序，可以并列地展示。不管是流程还是并列的内容，标签切换都能胜任。标签有多少，就能隐藏多少内容，而且标签可容纳内容很多，可以解决1个屏幕到几十个屏幕的内容，非常实用。

注意导航和展示的空间矛盾。标签过多也会挤占内容展示的空间，使得展示空间受限，尤其是标签是大图标时。比如几十个英雄图鉴，光英雄图标要占据整个屏幕，图标和内容放在一个屏幕肯定很局促。这时就要借助其他方式，比如子面板、子窗口、子界面等。

图11-2-7，界面中标签切换的方式

4、弹出子面板、子窗口

如图11-2-8所示，子面板和子窗口，是将一些次要信息隐藏起来，通过弹出的信息面板或窗口来呈现。这是对信息内容的补充。适合用来呈现不超过一个屏幕的内容。比如游戏的关卡信息，不可能在关卡地图上直接呈现，就可以借助子面板或子窗口，当玩家点击关卡图标时，会呈现子窗口，展示关卡信息。

图11-2-8，界面中弹出子面板、子窗口的方式

5、子界面

如图11-2-9所示，子界面可以看作全屏的子面板或子窗口，功能与子面板相同，呈现的效果更好。无论子面板、子窗口和子界面，它们都是某一个按钮的子信息，只能呈现与此相关的内容。当关闭面板、窗口和界面或者返回时，都应该回到原先界面。也就是说，子界面中不能存在跳转其他无关界面的按钮。这样做的目的是避免混乱。

图11-2-9，界面中弹出子界面的方式

6、界面跳转

如图11-2-10所示，界面跳转通过导航按钮，从一个界面跳转到另一个界面。这种方式也是一种内容切换，不同界面呈现不同的内容，界面之间的关系较弱。

图11-2-10，界面跳转的方式