結構:遊戲核心玩法交互之“骨”


一個遊戲大體可以分為“

輔助大廳”和“核心玩法”兩塊。

我劃分是否為“大廳”的方法比較粗暴:一般不涉及遊戲玩法的進程

所以大廳的交互也更接近產品交互。

以《塞爾達:曠野之息》為例:

輔助大廳

不同於社交性遊戲,《塞爾達:曠野之息》作為單機RPG遊戲,沒有太多有輔助功能(社交、商城、郵件等),所以它的“大廳”也十分簡單。

同時因為這個大廳承載的功能比較弱,所以在視覺和交互上也簡單設計,避免了玩家浪費過多精力在上面。


結構:遊戲核心玩法交互之“骨”

《塞爾達》的“大廳”只有幾個簡單按鈕


結構:遊戲核心玩法交互之“骨”

《塞爾達》存檔頁面


核心玩法

從大廳進入“塞爾達世界”中,就算進入了核心玩法。


結構:遊戲核心玩法交互之“骨”

《塞爾達》主界面


除了主界面,地圖、揹包在《塞爾達》裡也屬於核心玩法內容裡的,它們相對於大廳界面的設計樣式,明顯裝飾性更強,交互方式也和遊戲玩法契合:

例如地圖是用“希爾之石”作為打開方式,頁面四周也裝飾了紋理材質,字體用了希爾之石的藍色。


結構:遊戲核心玩法交互之“骨”

《塞爾達》地圖界面


上一篇文章講了“輔助大廳”上產品和遊戲的異同《遊戲輔助大廳界面的設計精髓——給玩家傳遞一個故事》。

今天講一講“核心玩法”上的交互。核心玩法是一個遊戲區分其他其他遊戲的核心內容,也是遊戲與產品之間差異最大的內容

我把遊戲玩法的交互分為“”、“”、“”3個部分來講述。

「骨」“骨骼”,即信息架構、佈局等結構內容。

「肉」“皮膚”,

即視覺、故事等視覺內容。

「魂」“感受”,即交互、體驗感等體驗內容。

和產品一樣,遊戲界面也需要從搭建頁面框架開始,就像搭建骨骼。

但遊戲界面的骨骼相對產品複雜。

[縱向骨——層級]

產品單一界面的層級比較少,層級結構也相對固定。

主要由「主體內容(背景層)」、「頂欄+導航欄」、「彈出層」3個層級構成。

信息多則用瀑布流滑動,有分頁則併入導航欄中。


結構:遊戲核心玩法交互之“骨”


但遊戲單一界面就可能含有非常多的層級。

即使是這個看起來簡單的頁面,也可能拆出十幾個層級來:

遊戲單頁面層級可以粗糙歸為:

背景層、人物層、操作層、信息層、彈出層、特效層

同時每個層內部又可以細分成更多組成層。

層和層之間也存在交插,例如各種信息層、操作層、特效層。


結構:遊戲核心玩法交互之“骨”

《開心消消樂》界面簡單,背景層、操作層、信息層、彈出層、特效也應有盡有


  • 怎麼梳理層級


既然遊戲界面層級多,不同信息出現時機不同,那應該怎麼梳理?

之前讀過一位騰訊遊戲交互設計師的文章,從中獲得了啟發。

體驗至上的時代,交互設計師能為遊戲做點什麼?

講故事能讓設計師清楚玩家與單局的每個環節的接觸點,把接觸點轉化為相應的界面信息。因為交互不是在故事基礎上強加的形式,而是貫穿於故事之中,是玩家行為的轉化形式,一個閉環的故事才能保障遊戲進程的連貫性。


根據典型的任務流程和玩家選擇權重來設計信息架構,以及安排界面信息。信息的提供以玩家常用的任務流程為藍本,而非傳統的功能屬性。

以文章裡所說的“講故事”方法,我嘗試做了《第五人格》屠夫的任務故事(因為原文的配圖太模糊了,也找不到清晰圖片)。

通過講故事,列出了玩家在每個階段的接觸點,並把它們轉化為了信息或操作。


結構:遊戲核心玩法交互之“骨”


因為遊戲頁面的很少能夠像產品一樣瀑布滾動,所以在小小的頁面內,難免出現不同內容位於同一個位置的情況,所以要梳理好:

1.層級主次關係——以安排以後的空間位置

2.層級的前後順序——同時出現多個信息時的疊加情況

3.層級間的互斥關係——因為信息多而雜,要儘可能梳理清楚信息間的共存和互斥等情況


結構:遊戲核心玩法交互之“骨”

用交互文檔梳理頁面層級


[橫向骨——佈局]

產品交互常追求極致的簡單,常常希望一個頁面只有1-2個操作按鈕,讓用戶清晰地知道接下來該如何操作。

如果你在一個產品頁面放十幾個按鈕,很容易被其他交互設計師詬病。

但在遊戲的成熟頁面有十幾二十幾個操作按鈕卻不少見。

遊戲界面和產品界面佈局的明顯差別

1.按鈕多、信息多

遊戲本身操作維度多,而且難瀑布流滾動,所以經常所有操作都要在一屏內展示;


結構:遊戲核心玩法交互之“骨”

《鎮魔曲》——常常可以見到RPG遊戲的滿屏操作按鈕和信息


2.按鈕、信息樣式多變

產品很注重規範化,經常所有按鈕都是一個樣子;但是遊戲為了增強代入感和趣味性,常對按鈕、信息進行特殊設計;


結構:遊戲核心玩法交互之“骨”

《陰陽師》的商店裡,將每個門鋪按鈕都做進了場景裡


3.位置佈局靈活

每個遊戲的界面和信息都可能是完全不同的,這也決定了遊戲難像產品一樣有固定的信息區位,需要針對每個遊戲單獨去規劃;

4.功能擴展可能性高

遊戲比起產品更經常進行功能擴展,所以在規劃佈局的最開始,也要求前期儘量把擴展的可能都考慮到;

5.交互方式彈性大

比起產品,遊戲有更多的交互方式,例如經典的雙輪盤拖拽交互(產品中比較少見)、競速類遊戲裡的重力感應交互方式等;


結構:遊戲核心玩法交互之“骨”

《狂野飆車》用手機左右傾斜(陀螺儀)的方式來控制車的方向


做遊戲界面交互時的注意點

針對遊戲界面的這些特點,在做交互的時候,要注意以下幾個點:

1.區域規劃

因為信息的複雜,所以在頁面上儘早規劃好信息區域和操作區域。

一般是以“左上視覺中心,右下操作中心”為原則。

也方便之後相似功能擴展。


結構:遊戲核心玩法交互之“骨”

《夢幻西遊》主界面


結構:遊戲核心玩法交互之“骨”

《夢幻西遊》戰鬥界面


2.按鈕、信息層級分級

一個界面十幾個按鈕一定有一些是核心操作按鈕,一些是輔助性按鈕。

信息也是一樣的。

所以將操作和信息主次進行分級,將操作、視覺熱區給核心內容。


結構:遊戲核心玩法交互之“骨”

《荒野行動》


3.信息收納

有時一些操作不方便放在界面上,又不能沒有。

大家一般就會想到用類似“下拉菜單”、“抽屜”等方式來「收納」它們。

例如最直觀的收納方式,《陰陽師》庭院底部的按鈕可以收納進卷軸裡:


結構:遊戲核心玩法交互之“骨”

《陰陽師》庭院-底欄展開


結構:遊戲核心玩法交互之“骨”

《陰陽師》庭院-底欄收縮


但是我覺得這裡做的不是很合理,因為裡面有一些比較常用的鏈接操作,所以這個收納功能就比較擺設了,只是樣式做得比較有趣。

那什麼適合進行收納?

-①不常用的功能

比如《惡魔不要啊》底欄的「更多」:


結構:遊戲核心玩法交互之“骨”


-②有明確先後層級關係的操作

比如MOBA遊戲的信號,就會在點擊信號按鈕後才出現。


結構:遊戲核心玩法交互之“骨”

《決戰平安京》打信號


-③會遮擋當前主要關注點的內容

《怪物獵人》主界面右下角就是一個收納按鈕,在操作人物完成任務時,一些當前不需要的按鈕就可以進行收納。


結構:遊戲核心玩法交互之“骨”

《怪物獵人》主界面


4.新交互方式

前面說到,「交互方式彈性大」是遊戲的特點之一。

一般在產品設計中,大家都會避免使用用戶不習慣的操作方式,而遊戲反而是可以去嘗試新交互方式,給玩家帶來新的體驗和樂趣。

例如最開始的時候,遊戲是通過外接設備操作的。到手機遊戲的時候,大家也習慣把「上下左右」的操作映射到屏幕上。


結構:遊戲核心玩法交互之“骨”

不知道什麼遊戲……


後來我們都知道的,有了“顛覆時代”的雙輪盤操作之後,絕大部份需要操作方向的手遊都使用了雙輪盤來操控方向。

本來滿滿當當的4個按鈕,就被融進了一個操作區域裡。

節省了大片空間的同時,解放了操作區域。


結構:遊戲核心玩法交互之“骨”

MOBA競技類《決戰平安京》


還有前面講到的競速遊戲的重力感應操控方向,連按鈕都省了。

怎麼去創造新的交互方式是一個需要不斷往交互的根本去鑽的東西,以後可以說說我自己的一些想法。

以上就是我歸納的,關於產品和遊戲核心玩法界面在「骨」上的一些差別,以後會講到「肉」和「魂」。

專欄地址:

https://zhuanlan.zhihu.com/p/32192628


分享到:


相關文章: