一個(gè)游戲大體可以分為“輔助大廳”和“核心玩法”兩塊。

我劃分是否為“大廳”的方法比較粗暴：一般不涉及游戲玩法的進(jìn)程。

所以大廳的交互也更接近產(chǎn)品交互。

以《塞爾達(dá)：曠野之息》為例：

輔助大廳

不同于社交性游戲，《塞爾達(dá)：曠野之息》作為單機(jī)RPG游戲，沒有太多有輔助功能（社交、商城、郵件等），所以它的“大廳”也十分簡(jiǎn)單。

同時(shí)因?yàn)檫@個(gè)大廳承載的功能比較弱，所以在視覺和交互上也簡(jiǎn)單設(shè)計(jì)，避免了玩家浪費(fèi)過多精力在上面。

《塞爾達(dá)》的“大廳”只有幾個(gè)簡(jiǎn)單按鈕

《塞爾達(dá)》存檔頁面

核心玩法

從大廳進(jìn)入“塞爾達(dá)世界”中，就算進(jìn)入了核心玩法。

《塞爾達(dá)》主界面

除了主界面，地圖、背包在《塞爾達(dá)》里也屬于核心玩法內(nèi)容里的，它們相對(duì)于大廳界面的設(shè)計(jì)樣式，明顯裝飾性更強(qiáng)，交互方式也和游戲玩法契合：

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

《塞爾達(dá)》地圖界面

上一篇文章講了“輔助大廳”上產(chǎn)品和游戲的異同《游戲輔助大廳界面的設(shè)計(jì)精髓——給玩家傳遞一個(gè)故事》。

今天講一講“核心玩法”上的交互。核心玩法是一個(gè)游戲區(qū)分其他其他游戲的核心內(nèi)容，也是游戲與產(chǎn)品之間差異最大的內(nèi)容。

我把游戲玩法的交互分為“骨”、“肉”、“魂”3個(gè)部分來講述。

「骨」指“骨骼”，即信息架構(gòu)、布局等結(jié)構(gòu)內(nèi)容。

「肉」指“皮膚”，即視覺、故事等視覺內(nèi)容。

「魂」指“感受”，即交互、體驗(yàn)感等體驗(yàn)內(nèi)容。

骨

和產(chǎn)品一樣，游戲界面也需要從搭建頁面框架開始，就像搭建骨骼。

但游戲界面的骨骼相對(duì)產(chǎn)品復(fù)雜。

[縱向骨——層級(jí)]

產(chǎn)品單一界面的層級(jí)比較少，層級(jí)結(jié)構(gòu)也相對(duì)固定。

主要由「主體內(nèi)容（背景層）」、「頂欄+導(dǎo)航欄」、「彈出層」3個(gè)層級(jí)構(gòu)成。

信息多則用瀑布流滑動(dòng)，有分頁則并入導(dǎo)航欄中。

但游戲單一界面就可能含有非常多的層級(jí)。

即使是這個(gè)看起來簡(jiǎn)單的頁面，也可能拆出十幾個(gè)層級(jí)來：

游戲單頁面層級(jí)可以粗糙歸為：

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

同時(shí)每個(gè)層內(nèi)部又可以細(xì)分成更多組成層。

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

《開心消消樂》界面簡(jiǎn)單，背景層、操作層、信息層、彈出層、特效也應(yīng)有盡有

既然游戲界面層級(jí)多，不同信息出現(xiàn)時(shí)機(jī)不同，那應(yīng)該怎么梳理？

之前讀過一位騰訊游戲交互設(shè)計(jì)師的文章，從中獲得了啟發(fā)。

體驗(yàn)至上的時(shí)代，交互設(shè)計(jì)師能為游戲做點(diǎn)什么？

講故事能讓設(shè)計(jì)師清楚玩家與單局的每個(gè)環(huán)節(jié)的接觸點(diǎn)，把接觸點(diǎn)轉(zhuǎn)化為相應(yīng)的界面信息。

因?yàn)榻换ゲ皇窃诠适禄A(chǔ)上強(qiáng)加的形式，而是貫穿于故事之中，是玩家行為的轉(zhuǎn)化形式，一個(gè)閉環(huán)的故事才能保障游戲進(jìn)程的連貫性。

根據(jù)典型的任務(wù)流程和玩家選擇權(quán)重來設(shè)計(jì)信息架構(gòu)，以及安排界面信息。信息的提供以玩家常用的任務(wù)流程為藍(lán)本，而非傳統(tǒng)的功能屬性。

以文章里所說的“講故事”方法，我嘗試做了《第五人格》屠夫的任務(wù)故事（因?yàn)樵牡呐鋱D太模糊了，也找不到清晰圖片）。

通過講故事，列出了玩家在每個(gè)階段的接觸點(diǎn)，并把它們轉(zhuǎn)化為了信息或操作。

因?yàn)橛螒蝽撁娴暮苌倌軌蛳癞a(chǎn)品一樣瀑布滾動(dòng)，所以在小小的頁面內(nèi)，難免出現(xiàn)不同內(nèi)容位于同一個(gè)位置的情況，所以要梳理好：

1.層級(jí)主次關(guān)系——以安排以后的空間位置

2.層級(jí)的前后順序——同時(shí)出現(xiàn)多個(gè)信息時(shí)的疊加情況

3.層級(jí)間的互斥關(guān)系——因?yàn)樾畔⒍喽s，要盡可能梳理清楚信息間的共存和互斥等情況

用交互文檔梳理頁面層級(jí)

[橫向骨——布局]

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

如果你在一個(gè)產(chǎn)品頁面放十幾個(gè)按鈕，很容易被其他交互設(shè)計(jì)師詬病。

但在游戲的成熟頁面有十幾二十幾個(gè)操作按鈕卻不少見。

游戲界面和產(chǎn)品界面布局的明顯差別

1.按鈕多、信息多

游戲本身操作維度多，而且難瀑布流滾動(dòng)，所以經(jīng)常所有操作都要在一屏內(nèi)展示；

《鎮(zhèn)魔曲》——常?？梢砸姷絉PG游戲的滿屏操作按鈕和信息

2.按鈕、信息樣式多變

產(chǎn)品很注重規(guī)范化，經(jīng)常所有按鈕都是一個(gè)樣子；但是游戲?yàn)榱嗽鰪?qiáng)代入感和趣味性，常對(duì)按鈕、信息進(jìn)行特殊設(shè)計(jì)；

《陰陽師》的商店里，將每個(gè)門鋪按鈕都做進(jìn)了場(chǎng)景里

3.位置布局靈活

每個(gè)游戲的界面和信息都可能是完全不同的，這也決定了游戲難像產(chǎn)品一樣有固定的信息區(qū)位，需要針對(duì)每個(gè)游戲單獨(dú)去規(guī)劃；

4.功能擴(kuò)展可能性高

游戲比起產(chǎn)品更經(jīng)常進(jìn)行功能擴(kuò)展，所以在規(guī)劃布局的最開始，也要求前期盡量把擴(kuò)展的可能都考慮到；

5.交互方式彈性大

比起產(chǎn)品，游戲有更多的交互方式，例如經(jīng)典的雙輪盤拖拽交互（產(chǎn)品中比較少見）、競(jìng)速類游戲里的重力感應(yīng)交互方式等；

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

做游戲界面交互時(shí)的注意點(diǎn)

針對(duì)游戲界面的這些特點(diǎn)，在做交互的時(shí)候，要注意以下幾個(gè)點(diǎn)：

1.區(qū)域規(guī)劃

因?yàn)樾畔⒌膹?fù)雜，所以在頁面上盡早規(guī)劃好信息區(qū)域和操作區(qū)域。

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

也方便之后相似功能擴(kuò)展。

《夢(mèng)幻西游》主界面

《夢(mèng)幻西游》戰(zhàn)斗界面

2.按鈕、信息層級(jí)分級(jí)

一個(gè)界面十幾個(gè)按鈕一定有一些是核心操作按鈕，一些是輔助性按鈕。

信息也是一樣的。

所以將操作和信息主次進(jìn)行分級(jí)，將操作、視覺熱區(qū)給核心內(nèi)容。

《荒野行動(dòng)》

3.信息收納

有時(shí)一些操作不方便放在界面上，又不能沒有。

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

例如最直觀的收納方式，《陰陽師》庭院底部的按鈕可以收納進(jìn)卷軸里：

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

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

但是我覺得這里做的不是很合理，因?yàn)槔锩嬗幸恍┍容^常用的鏈接操作，所以這個(gè)收納功能就比較擺設(shè)了，只是樣式做得比較有趣。

那什么適合進(jìn)行收納？

-①不常用的功能

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

-②有明確先后層級(jí)關(guān)系的操作

比如MOBA游戲的信號(hào)，就會(huì)在點(diǎn)擊信號(hào)按鈕后才出現(xiàn)。

《決戰(zhàn)平安京》打信號(hào)