不只是好玩這麼簡單——《超級馬里奧:奧德賽》的交互界面設計

《超級馬里奧:奧德賽》是任天堂遊戲公司2017年發行的開放世界動作冒險遊戲,各個遊戲媒體對這款遊戲給出了幾乎滿分的評價,其關卡設計堪稱教科書級別的存在,用劃時代的偉大作品來形容它絲毫不為過。然而這次我們將從交互界面設計的角度去分析這款遊戲,按照界面類型主要分為功能菜單界面、遊戲主界面、地圖界面、交易界面、關卡選擇界面這五個分析對象,並在最後提出一些自己的看法。


1.功能菜單界面

遊戲的功能菜單界面主要在兩處出現:一是登錄遊戲時的主菜單,二是遊戲進行時打開的菜單。它幫助玩家進行開始、保存、讀取、查看教程、系統設置等基礎操作。

由於遊戲進行狀態的不同,個別功能會有所差異,但整體上基本相同。

①菜單選項對應的馬里奧形象

選擇不同的選項,右側的馬里奧形象會發生改變,增加了界面的趣味性。

每一個選項所對應的馬里奧形象都是有含義的,比如「從頭開始」選項對應的馬里奧帶著一頂普通的帽子,這符合遊戲一開始馬里奧那頂小紅帽能力未覺醒的設定。

②關於菜單選項的字體

  • 菜單所選用的字體為方正粗圓/細圓簡體,兩種字體代表了選項信息的主次關係。
  • 菜單選項的字體並不是水平排布的,而是有著3°的傾斜角,這樣設計使得菜單呈現出一種微妙的透視感。
  • 在選擇停留的狀態下,會出現一塊帶有輕投影效果的白色圓角矩形在文字下層,字體的大小顏色也會發生變化,這樣的設計是為了模擬卡片浮起的效果,突出選項所要表達的信息。

這樣的設計會在遊戲中出現文字選項的地方經常出現。

③選中狀態下的動效

  • 馬里奧的小紅帽作為貫穿整個遊戲的關鍵道具,是遊戲界面中非常重要的符號。在選擇停留的狀態下,小紅帽會不斷晃動,彷彿要飛出去一般,並且在一定時間不操作的情況下,小紅帽會睜開眼睛,這個細節讓人會心一笑。

  • 當玩家對選項進行確認操作時,這裡會出現小紅帽飛出的動效。然後白色圓角矩形隨著小紅帽飛出的路線逐漸變為灰色。

這裡選中狀態的動效,在遊戲中很多地方都會應用到。

這些小動效不僅充滿了趣味性,還和整個遊戲的風格、玩法相契合,這種設計思路值得我們在很多遊戲的交互界面設計中去借鑒。

2.遊戲主界面

玩家接觸頻率最高的界面,這部分界面的主要功能是向玩家傳遞遊戲內的重要信息,比如生命值、貨幣數量、位置等。

①信息布局

主要分為左、右上角兩塊信息區域,區域內的信息都是遊戲中最關鍵的信息。

左上角區域的信息包括金幣(遊戲中最常見的貨幣)、特殊幣(最常見的金幣以及用於兌換服裝等特殊道具)以及月亮(用於通關的關鍵道具,圖中的虛線圓框代表通過當前關卡所需要的月亮數量)的數量。右上角區域的信息包括生命值(當數值減少時圖標會震動,以此提醒玩家注意生命值的變化)、快捷鍵(功能菜單和地圖這兩個在遊戲中需要時常打開的選項)以及方向指示。

根據人的視覺習慣,對於界面上文本信息處理通常是從左往右、從上往下的,因此最高優先順序的信息應該在左上方,其次是右上方。奧德賽將貨幣、生命值等關鍵信息放置於屏幕左右上方,因此整體來說布局是合理的。

疑問:我認為在這款遊戲中,生命值和位置信息相對於貨幣信息來說優先順序應該更高,而且很多遊戲都是將生命值信息放置於左上角,那麼區域1和區域2互相調換會不會更加合理一些呢?

3.地圖界面

對於一個路痴玩家而言,地圖是我不得不時常打開的界面。

  • 遊戲運用擬物化的設計,將地圖做成「旅行手冊」展開的樣子,玩家可以通過手柄遙感動態放縮和移動地圖,彷彿真的是在某個旅遊景點裡觀看手冊,這也是這款遊戲中我最喜歡的設計之一。
  • 地圖採用浮窗界面而不是全屏界面,這樣減輕了玩家在遊戲中的迷失感,加強玩家對遊戲節奏的把控。

4.交易界面

作為一款動作冒險遊戲,奧德賽並沒有像角色扮演類遊戲那樣龐大複雜的交易系統,但對於熱愛收集的玩家而言,交易環節依然是遊戲過程中不可忽視的體驗。

  • 金幣和特殊貨幣的交易界面通過不同的顏色背景區分開來,選中狀態下的商品背景色也是如此。
  • 已購買商品的圖像顏色會淡化,並且在標價處會顯示「已擁有」,同未購買商品明確區分開來。

  • 購買確認時,文字選項的交互反饋同功能菜單部分相同,其中略微不同的地方在於沒有被選擇的選項也會有一個半透明的矩形在文字下層,這是為了提高實際遊戲場景中文字選項的辨識度。

5.關卡選擇界面

雖然奧德賽被稱作開放世界,但其本質還是由一個個地圖關卡組成的遊戲,玩家需要了解當前的遊戲進度,同時也需要在這些地圖關卡之間移動來完成之前未完成的目標。

①所選地圖關卡的總覽圖。

②關卡挑戰進度。對於將要前往的關卡,關卡文字會被白色矩形框高亮顯示。這裡的設計很像地鐵線路圖,十分生動直觀。

③將關卡挑戰進度以場景化的形式表現出來,通過「奧德賽」號飛船的位置和運行軌跡直觀地表現出當前遊戲進度。

④顯示當前所收集的月亮總數。

6.其他

一些關於我對這款遊戲在交互方面的想法。

①補充

  • 3D向2D場景的轉換,這種交互維度的變化讓很多第一次體驗奧德賽的玩家感到驚喜甚至是懷念(8bit時代的馬里奧),從心理層面讓玩家感知到這個遊戲品牌的延續性。

  • 當玩家獲得遊戲中的關鍵道具「月亮」時,遊戲會出現相應的界面來強化玩家的成就感,這種令人愉悅的反饋是鼓勵玩家不斷探索的動力之一。

關於交互體驗方面,這款遊戲值得分析討論的遠不止這些……

②總結

遊戲交互設計師不僅要從交互的層面去考慮遊戲的界面,更要從遊戲自身的角度去分析,結合遊戲本身的類型、風格、玩法等要素,賦予它有別於其他遊戲交互界面的「氣質」。

  • 合理的

奧德賽整個遊戲的交互界面設計是極為克制的,我的第一感覺就是乾淨,信息層級清晰明確,信息的呈現形式也是統一高效的扁平化,在遊戲過程中很難出現不知道該如何操作的情況。這也符合任天堂創造這款遊戲的初衷——讓玩家更加專註於冒險本身。

  • 細節豐富的

遊戲中很多交互場景都是充滿趣味性的,即便是主菜單頁面的背景,也是時刻在運動著的遊戲地圖,還有界面中無處不在的「小紅帽」,以及做成「旅行手冊」的地圖界面等,這些細節不僅有趣,而且和整個遊戲的玩法、風格相符。

  • 多樣化的

除了界面的交互之外,奧德賽這款遊戲基於Switch手柄的體感交互以及遊戲中角色與場景產生的交互都充滿了趣味性,比如通過手柄震動來感知寶藏的存在,又或者當角色跳躍過程中撞到障礙物會倒地暈眩等,這些交互方式從多個層面給玩家帶來前所未有的沉浸感。


這次分析對於《超級馬里奧:奧德賽》這款神作來說只是冰山一角,它帶給我們的樂趣是無法估量的,正如IGN對這款遊戲的評價:任天堂總是能給我們帶來不一樣的馬里奧,《超級馬里奧:奧德賽》再一次保證了這樣一種承諾,這次他提煉出了系列遊戲的樂趣,融合進了新的意想不到的玩法,這是屬於一代人的傑作。

謝謝您的耐心觀看!

推薦閱讀:

《馬里奧奧德賽》遊戲體驗
超級馬里奧:奧德賽的幾個速通視頻
《超級馬力歐:奧德賽》初玩評測——任天堂的願望終於實現

TAG:超級馬力歐:奧德賽 |