11.4，原型设计

界面原型的设计主要包括三个过程，规划界面类型和主次，绘制界面交互流程图，设计界面原型图。首先，根据前期策划归纳所需设计的界面类型，并分清主次。其次，根据界面主次，确定界面之间的逻辑关系，并添加合理的互动导航，建立起界面的组织关系。最后完成每个界面的内容布局。以下我们以《贪吃神兽》为例介绍这个过程。

一、规划界面类型

首先，根据前期策划，规划所需的界面类型。按照主界面、关卡导图、玩法界面、展示界面和玩家与集体等类型，一项项确定所需的界面或板块。如图11-4-1所示，我们根据《贪吃神兽》的前期策划，可以归纳出所需的界面类型。

（1）主界面和启动页都是必要的，但主界面的重要性远远超过启动页。主界面除了导航还需要展示重要内容，比如关卡导图、成果展示等内容都可以在主界面呈现。

（2）关卡导图界面是不可或缺的，主要解决玩家的收获式发展和故事进程，这是玩家在前期游戏过程中，所要依赖的主要脉络。在世界导图、关卡导图和故事导图这三个层级的导图中，其中底层的故事导图是玩家最常用的，也是以展示为主的界面，其重要性应该超出世界导图。

（3）展示界面需要展示玩家的各种发展，这是玩家持续动力之源，是必须的。展示界面以展示成果为主，导航为辅，因此一般优先展示玩家当前的角色和技能现状，而总览界面虽然必要，但使用频率和重要性较低。展示界面也是有主次的，工具的使用频率较高、竞技成绩的成就感较强，它们都比财富和见识更重要。在《贪吃神兽》中，图鉴展示界面虽然能锦上添花，但并非不可或缺。

                             

图11-4-1，《贪吃神兽》界面原型：界面类型规划

二、绘制交互流程图

其次，根据界面类型以及主次关系，绘制界面交互流程图，确定各个界面之间的逻辑关系。交互流程图专注于互动过程，主要任务是表达界面之间的交互关系和流程，因此界面布局是粗略的，只考虑了按钮等导航内容。

如图11-4-2所示，在绘制流程图时，需要添加合理的导航和箭头来表达交互过程，将所有界面链接起来。导航包括正向导航和反向导航，正向导航是指从顶层界面到底层界面的正向流程，反向导航是指从底层界面返回到顶层界面的反向流程。图中为了方便看清界面之间的逻辑关系，只绘制了正向流程，省略了反向流程。

（1）一个核心：主界面是核心的展示和枢纽，需要展示最重要内容，并且添加导航按钮与其他重要的界面链接起来。如图所示，《贪吃神兽》的主界面选择了故事导图作为展示重点，因此承担了故事导图的职能，需要链接关卡导图和关卡任务。

（2）两步到位：界面交互讲究效率，以主界面为核心，两步之内应该可以到达每个重要界面，这样使得各个页面之间的距离可以保持在三步之内。如图所示，《贪吃神兽》从主界面出发的流程都保持在两步之内。

（3）由点到面：即优先展示最新的、具体的现状内容，再到总体概况。比如主界面优先链接到各个展示界面，然后再链接到总览等界面。

图11-4-2，《贪吃神兽》界面原型：交互流程图。

三、设计界面原型图

最后，确定每个界面的内容，添加相应的导航按钮和面板，对界面进行布局和排版并绘制原型图，完成界面原型设计，如图11-4-3所示。

（1）设计界面的内容展示：根据界面类型，确定每个界面的具体内容，并在界面重要位置进行布置。

（2）设计界面的导航方式：根据交互流程图，配置相应的导航按钮。注意检查从顶层到底层的正向导航和从底层返回顶层反向导航，确保不要有遗漏。《贪吃神兽》采取了底部标签式导航，可以方便各大板块之间的切换。

（3）完成界面原型：根据内容展示和导航方式，设计每个界面的原型图。一般采用规范的线框稿，相当于界面的工程图。界面交互原型是整个游戏界面的总体框架，需要不断迭代更新。

界面原型图完成后，就可以着手设计可运行的游戏演示版本，以便进一步检验策划的可行性并改进完善。

图11-4-3，《贪吃神兽》界面原型