【游戏交互设计】古登堡图：视觉流在设计中的应用NetEaseGame的博客-

一、什么是古登堡图

古登堡图（Gutenberg Diagram）又称对角线平衡法则（Diagonal Balance），由14世纪西方活字印刷术的发明人约翰·古腾堡提出。古登堡图表将要画面显示的东西分成了四个象限：

1.第一视觉区(Primary Optical Area)：左上方，读者首先注意到的地方。

2.最终视觉区(Final Optical Area)：右下方，视觉流程的终点。

3.强闲置区(Strong Follow Area)：右上方，较少被注意到。

4.弱闲置区(Weak Follow Area)：左下方，最少被注意到。

根据这个图，读者的视线很自然就会以从左上方扫到右下方，并且每次扫视都沿着一条方向轴开始从左到右看。这条方向轴是以对齐的元素，文本行或者一些明显的元素构成的水平线。除非有特别的视觉强调，强弱闲置区都在这条阅读路径之外，很少能被注意到。古登堡图揭示了一个实用的视觉轨迹规律：阅读引力是从上到下，从左到右。当然，这个规律只适用于习惯文字以从左到右水平形式书写的读者，若是以古代中国人的阅读习惯可能就不适用了。

二、古登堡图在设计中的实际应用

古登堡图的应用范围非常广泛，几乎所有涉及视觉设计的地方都可见古登堡图的应用痕迹。根据古登堡图所揭示的规律，画面可采取上下结构，左右结构，或者综合运用。

自上而下的界面设计

按照从上到下的阅读引力，视觉终端在界面的正下方。因此一般的剧情动画文案都是在画面的最下方，如图1。玩家观看完主体画面后视线即很自然地向下扫视，不需过多的思考。若把剧情动画文案置于画面的正上方，则玩家会感到阅读的吃力，忽略了画面的主体性。

在上下的画面结构中，则需要先在画面上方提供玩家操作前需预知的信息，需要操作的按钮一般放在下方，以便玩家在阅读完界面信息后即时作出选择。若先出现操作，后提供预需信息，则大大提高了认知成本，玩家容易迷惑。

如下图3《辐射76》，界面上方即提供玩家的先决信息：达到5级被允许与其他玩家作战，从而引出下方的操作选项：选择和盟友/陌生人/敌人进行作战，下方的小文字则是补充各个选项的不同之处，整个画面按照从上到下的阅读引力，十分清晰。若将先决信息-达到5级被允许与其他玩家作战放在界面下方，则玩家会首先陷入疑惑之中，而后看到界面最下方才能明白此界面的用意。

如图5，主体显示了玩家当前的升级信息，同时下方的按钮提醒玩家可以继续进行升级，玩家可以根据升级的属性和所需经验进行是否进行继续升级操作的判断。若将界面元素顺序调转，如图6，则玩家需要上下扫视，不断思考。

自左向右的界面设计

由于阅读引力是从左向右的，在采取左右结构的界面设计中，设计师一般按照想凸显的视觉层级从左向右排布，以顺应玩家的阅读流。

如图7的角色查看界面，设计师将切换操作项放在左边，将信息展示项放在右边，玩家即可按照切换角色-人物形象-人物属性的阅读顺序进行观看。若排布顺序同图8：人物形象-人物角色-切换角色，则玩家就会按照此阅读顺序进行理解，需要先阅读完默认显示的人物才能进行切换操作。

对于运营较久的游戏而言，新商品的展示、刺激到位，自然也就不愁付费了。

综合运用的界面设计

综合运用古登堡图，画面可以划分成若干个区域，每个区域内部亦满足阅读引力的规律。按照对角线平衡法则（即古登堡图），阅读的终端将停在显示区域的右下方，这就不难解释为什么当前多数易用的界面操作按钮均处于画面右下方或正下方了。

在图9解锁岛屿的界面中，不难看出阅读引力是从左到右的，左边选择岛屿，右边显示岛屿的属性和操作。而在右边的区域中，上方显示岛屿事务的文字信息，而下方则为此区域的重点：前往岛屿和留在目前位置的操作。此界面的最终操作终端即为其阅读终端：界面的右下方。

而图10，玩家的第一视觉为已选择岛屿中的可选择事务，阅读终端为选择岛屿，玩家在对某个特定岛屿进行操作时，就需要来回阅读，不利于玩家的操作效率。

而在图11《梦想世界》的图鉴界面中，左边是操作切换区，右边是信息展示区，阅读顺序也是从左到右。在每个区域中，上方为选择切换，下方为对应的页面展示。图中宠物装饰的勾选功能，作为一个不常用的模块，则放在了右上角的强闲置区，以免分散玩家的注意力。若重新排布元素同图12，则宠物装饰成为玩家第一眼就能注意到的选项，重要度被放大。可选择的图鉴放在右侧，阅读流和心理模型有所矛盾，增加玩家的认知成本。

不适用的特殊情况

虽然古登堡图所揭示的阅读规律是普遍适用的，但是为了突破常规或达到一种强烈的冲击，古登堡图所揭示的视觉规律经常被设计师所颠覆。常用的颠覆方法为采用特别醒目的形象，或者大小颜色更为鲜明抢眼的元素置于闲置区，从而改变玩家的阅读顺序。

图7中，右边区域中西部牛仔的形象十分凸显，一下子就把玩家的注意力引到角色及他看着的枪支上，而后才看到左边的文字。玩家首先感受到了这个游戏的紧张和压迫感，引起了兴趣后才注意到游戏名字，也是一个先声夺人的好设计。

图8界面大体色调较为灰暗，而画面的右上方则用了饱和度十分高的白色和橙色大字强调游戏的名字。玩家第一眼就能扫视到游戏的名字，而后才注意到左方的警察和右下方的犯人，这个设计的意图和上文《荒野大嫖客2》完全相反，但都是颠覆古登堡图的设计好例子。

古登堡图贯穿于界面设计的每个角落，只要谨记阅读引力的顺序：从上到下，从左到右，综合阅读流来排布视觉层级，即能做出合理的设计。但设计师也不能局限于古登堡图的规律中，要善用规律并结合其他设计知识做出打动人心的设计。