【遊戲交互設計】古登堡圖:視覺流在設計中的應用

一、什麼是古登堡圖

古登堡圖(Gutenberg Diagram)又稱對角線平衡法則(Diagonal Balance),由14世紀西方活字印刷術的發明人約翰·古騰堡提出。古登堡圖表將要畫面顯示的東西分成了四個象限:

1.第一視覺區(Primary Optical Area):左上方,讀者首先注意到的地方。

2.最終視覺區(Final Optical Area):右下方,視覺流程的終點。

3.強閒置區(Strong Follow Area):右上方,較少被注意到。

4.弱閒置區(Weak Follow Area):左下方,最少被注意到。

根據這個圖,讀者的視線很自然就會以從左上方掃到右下方,並且每次掃視都沿着一條方向軸開始從左到右看。這條方向軸是以對齊的元素,文本行或者一些明顯的元素構成的水平線。除非有特別的視覺強調,強弱閒置區都在這條閱讀路徑之外,很少能被注意到。古登堡圖揭示了一個實用的視覺軌跡規律:閱讀引力是從上到下,從左到右。當然,這個規律只適用於習慣文字以從左到右水平形式書寫的讀者,若是以古代中國人的閱讀習慣可能就不適用了。

二、古登堡圖在設計中的實際應用

古登堡圖的應用範圍非常廣泛,幾乎所有涉及視覺設計的地方都可見古登堡圖的應用痕跡。根據古登堡圖所揭示的規律,畫面可採取上下結構,左右結構,或者綜合運用。

自上而下的界面設計

按照從上到下的閱讀引力,視覺終端在界面的正下方。因此一般的劇情動畫文案都是在畫面的最下方,如圖1。玩家觀看完主體畫面後視線即很自然地向下掃視,不需過多的思考。若把劇情動畫文案置於畫面的正上方,則玩家會感到閱讀的吃力,忽略了畫面的主體性。

圖1《任天堂明星大亂鬥》
圖2反例

在上下的畫面結構中,則需要先在畫面上方提供玩家操作前需預知的信息,需要操作的按鈕一般放在下方,以便玩家在閱讀完界面信息後即時作出選擇。若先出現操作,後提供預需信息,則大大提高了認知成本,玩家容易迷惑。

如下圖3《輻射76》,界面上方即提供玩家的先決信息:達到5級被允許與其他玩家作戰,從而引出下方的操作選項:選擇和盟友/陌生人/敵人進行作戰,下方的小文字則是補充各個選項的不同之處,整個畫面按照從上到下的閱讀引力,十分清晰。若將先決信息-達到5級被允許與其他玩家作戰放在界面下方,則玩家會首先陷入疑惑之中,而後看到界面最下方纔能明白此界面的用意。

圖3《輻射76》
圖4反例

如圖5,主體顯示了玩家當前的升級信息,同時下方的按鈕提醒玩家可以繼續進行升級,玩家可以根據升級的屬性和所需經驗進行是否進行繼續升級操作的判斷。若將界面元素順序調轉,如圖6,則玩家需要上下掃視,不斷思考。

圖5《泰亞史詩》
圖6反例 

自左向右的界面設計

由於閱讀引力是從左向右的,在採取左右結構的界面設計中,設計師一般按照想凸顯的視覺層級從左向右排布,以順應玩家的閱讀流。

如圖7的角色查看界面,設計師將切換操作項放在左邊,將信息展示項放在右邊,玩家即可按照切換角色-人物形象-人物屬性的閱讀順序進行觀看。若排布順序同圖8:人物形象-人物角色-切換角色,則玩家就會按照此閱讀順序進行理解,需要先閱讀完默認顯示的人物才能進行切換操作。

圖7《古劍奇譚三》
圖8反例

1635c2dd9e6f92e91ba8b1616dc3c734-sz_51579.jpg

對於運營較久的遊戲而言,新商品的展示、刺激到位,自然也就不愁付費了。

綜合運用的界面設計

綜合運用古登堡圖,畫面可以劃分成若干個區域,每個區域內部亦滿足閱讀引力的規律。按照對角線平衡法則(即古登堡圖),閱讀的終端將停在顯示區域的右下方,這就不難解釋爲什麼當前多數易用的界面操作按鈕均處於畫面右下方或正下方了。

在圖9解鎖島嶼的界面中,不難看出閱讀引力是從左到右的,左邊選擇島嶼,右邊顯示島嶼的屬性和操作。而在右邊的區域中,上方顯示島嶼事務的文字信息,而下方則爲此區域的重點:前往島嶼和留在目前位置的操作。此界面的最終操作終端即爲其閱讀終端:界面的右下方。

而圖10,玩家的第一視覺爲已選擇島嶼中的可選擇事務,閱讀終端爲選擇島嶼,玩家在對某個特定島嶼進行操作時,就需要來回閱讀,不利於玩家的操作效率。

3cabaf5d93f7dad9bc04ce0569a89e58-sz_36476.jpg
圖9《侏羅紀世界:進化》
7df53182f924a3f5e422c97d7f6a74aa-sz_31231.jpg
圖10反例

而在圖11《夢想世界》的圖鑑界面中,左邊是操作切換區,右邊是信息展示區,閱讀順序也是從左到右。在每個區域中,上方爲選擇切換,下方爲對應的頁面展示。圖中寵物裝飾的勾選功能,作爲一個不常用的模塊,則放在了右上角的強閒置區,以免分散玩家的注意力。若重新排布元素同圖12,則寵物裝飾成爲玩家第一眼就能注意到的選項,重要度被放大。可選擇的圖鑑放在右側,閱讀流和心理模型有所矛盾,增加玩家的認知成本。

圖12反例

不適用的特殊情況

雖然古登堡圖所揭示的閱讀規律是普遍適用的,但是爲了突破常規或達到一種強烈的衝擊,古登堡圖所揭示的視覺規律經常被設計師所顛覆。常用的顛覆方法爲採用特別醒目的形象,或者大小顏色更爲鮮明搶眼的元素置於閒置區,從而改變玩家的閱讀順序。

69580f77e4ccce4b10f57876345a0653-sz_63896.jpg
圖13《荒野大鏢客·救贖2》

圖7中,右邊區域中西部牛仔的形象十分凸顯,一下子就把玩家的注意力引到角色及他看着的槍支上,而後纔看到左邊的文字。玩家首先感受到了這個遊戲的緊張和壓迫感,引起了興趣後才注意到遊戲名字,也是一個先聲奪人的好設計。

3f3b3c2ff19ab96e49e9bb6f81967007-sz_38476.jpg
圖14《這就是警察2》

圖8界面大體色調較爲灰暗,而畫面的右上方則用了飽和度十分高的白色和橙色大字強調遊戲的名字。玩家第一眼就能掃視到遊戲的名字,而後才注意到左方的警察和右下方的犯人,這個設計的意圖和上文《荒野大嫖客2》完全相反,但都是顛覆古登堡圖的設計好例子。

古登堡圖貫穿於界面設計的每個角落,只要謹記閱讀引力的順序:從上到下,從左到右,綜合閱讀流來排布視覺層級,即能做出合理的設計。但設計師也不能侷限於古登堡圖的規律中,要善用規律並結合其他設計知識做出打動人心的設計。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章