遊戲輔助大廳介面的設計精髓——給玩家傳遞一個故事

一個遊戲大體可以分為“輔助大廳”和“遊戲玩法”兩塊。

以《風暴英雄》為例：

輔助大廳

《風暴英雄》有各種輔助功能（社交、英雄資訊、商城、錄影等），遊戲大廳用以串聯它們，可以當作一個產品看待。

“輔助大廳”一般不涉及遊戲玩法的程式，互動上也接近產品互動。


當然不是每個遊戲都有“大廳”，或者兩者分得這麼清楚。

以最近熱門的《旅行青蛙》為例子，它的“大廳”和“遊戲”之間並沒有明顯的區分，因為看似輔助的商城和郵件都融入了核心玩法中。

“採集——購買——放置——獲取明信片/手信”和“手信——朋友互動——收取信件”就是《旅行青蛙》的兩種“遊戲互動”內容。

遊戲玩法

《風暴英雄》匹配完成後，會進入一個全屏介面，進入核心玩法環節。

涉及遊戲的核心玩法的互動體驗，以及承載核心玩法的介面互動，則為“遊戲玩法”。

下面主要講一下在“輔助大廳”的互動上，遊戲和產品的異同。


相同點

遊戲大廳可以理解為“輔助玩家更好體驗遊戲、增加粘性的產品”。

所以在基礎互動原則上，大廳互動和產品互動是共通的。

可以看看經典書籍（《About Face》之類）

以下把大廳互動常用到的尼爾森可用性原則進行詳細說明：

狀態可見原則使用者在網頁上的任何操作，頁面應即時給出反饋。“即時”是指，頁面響應時間小於使用者能忍受的等待時間。

遊戲有較多實時拉取的資料（活動、遊戲場景等），難做到“即時”反饋，就需要增加“過渡”。

“過渡”可以分為：載入進度條、載入動畫、分步載入、轉場動畫。

-載入進度條

遊戲不同於產品，體量較大，所以第一次進入會有比較長的載入過程，這時候就需要一個載入條。

載入條結合遊戲元素進行適當的趣味設計，或者增加一些tips或趣味文字，都能幫助降低玩家的焦慮情緒。


-載入動畫

載入進度條是一個明確有終點的動畫，而載入動畫一般是一個迴圈動畫，用在較短的載入場景，或不能明確知道載入所需時間的時候。


-分步載入

活動因為有較多即時拉取的圖片資訊，較長時間才能載入完資訊。

這時候，使用分步載入，優先載入佔用網路資源少的內容，例如框架、文字、預設圖案，再載入圖片內容，就可以降低玩家的等待焦慮。


-過渡動畫

過渡動畫一般用在差異較大的場景間的切換，用和場景結合的過渡動畫，會讓場景間的過渡更加自然。


一致性原則同樣的用語、功能、操作保持一致。

結構上，一個遊戲常常包含很多功能模組（例如好友、聊天、資訊、商城等），比大部分產品更加複雜；一致性上，遊戲又比產品更加強調體驗和風格的一致性（產品功能更核心）。

同時，遊戲開發團隊一般包含多個互動設計師和視覺設計師，每個人負責不同的模組；另外，對設計的靈活性，創新性也有更高的要求。

所以一份詳實的互動文件、視覺文件供設計師間合作溝通，就顯得尤為重要。

很多團隊覺得文件耗費時間，也沒有實際用途，就不去製作。遊戲開發越到後期，功能越多越複雜的時候，因缺乏規範文件，不同設計師的習慣和風格導致的設計差異，也就會越明顯地暴露出來；新增功能因缺乏前期佈局規劃而只能擠在角落。

最後會導致產品不同模組體驗的不一致，需要花費更多的時間去統一。

遊戲互動文件因為比較機密，所以基本在網上難找到完整的，應該寫什麼內容，每個專案也不盡相同，以輔助溝通、規範設計為目吧。

附上個專案我寫的一份遊戲互動文件，希望可以給大家一些參考。

https://www.zcool.com.cn/work/ZMjE0MjI5NDQ=.html


網易設計師：超全面的互動規範設計流程-優設-UISDC：

https://www.uisdc.com/ixd-design-process

易取原則儘可能減少使用者回憶負擔，把可用的操作和選項展示出來。

為了給玩家提供好的體驗，很多遊戲在這一塊上都已經做的很好了。

特別是商城功能，為了抓住玩家“一閃而過的購買慾”，很多遊戲都會簡化中間所有貨幣轉換過程，給玩家提供“一鍵購買”按鈕。


靈活高效原則中級使用者的數量遠高於初級和高階使用者數。為大多數使用者設計，不要低估，也不可輕視，保持靈活高效。

最開始做互動的時候，容易把使用者當成“小白”，還要陷入“使用者至上”的坑裡。

不少產品是提供新功能，同時使用者年齡段廣、特徵較分散（例如，微信、外賣這些針對全年齡段使用者的產品）所以趨向於簡單化設計。

但遊戲一般不是完全創新的，核心玩法總會跟其他遊戲相似（例如各種MMORPG遊戲（在此不得不嘆息一下中國遊戲市場的創新無力）），且目標玩家都有一定的遊戲經驗。

所以做遊戲互動時，不需要把玩家想得太傻，最開始的玩法提示，儘量輕，給玩家自由探索的空間。

人性化幫助原則幫助性提示最好的方式是：無需提示>一次性提示>常駐提示>幫助文件。

因為遊戲在視覺和創意上更加靈活，所以可以用更有趣的方式來提示。

例如《王國保衛戰》裡的難度，低中高分別用了3個不同形象的士兵，玩家一看就清楚知道每個難度的含義提醒，自然貼切。

遊戲提醒還可以通過NPC說話方式表達，也能使提示和場景更加搭配。


差異點

如果說大廳和產品相似，都是以幫助使用者達到某些功能而設計的；那它們最大的不同，可能也就是視覺上的差異了。

視覺風格上的差異，不僅僅是視覺設計師的責任。

“你有故事嗎？”

不知道你有沒有聽過“給你的產品講一個故事”這種說法？

參加廣州創客馬拉松的時候，每個小組只有3分鐘來展示專案，這時候就需要通過“故事”來把產品傳遞給聽眾。故事怎麼講，就顯得尤為重要了。

但在實際的產品研發過程中，很多人都忽略了這一點。

而對遊戲設計來說，“講故事”是非常重要的事情。

產品互動設計師常常更關注功能的設計，頁面的邏輯。但在設計遊戲頁面框架時，GUI小夥伴提醒我：“你想通過這個頁面，講一個什麼故事？”。

每個遊戲都是一個世界，而介面就是將這個世界傳遞給玩家的重要媒介。

所以在遊戲主頁面開始設計前，設計師和策劃們，需要一起構思“給玩家傳遞一個什麼故事”。

以《玩具大亂鬥》為例子，它的故事是：“在玩具城裡舉行了玩具擂臺賽，於是玩具們都來參加比賽”。

雖然只是簡單的一句話，但有了這個故事，介面設計就會表現“擂臺”、“打擂”、“排行榜”、等元素；語言設計就會圍繞“Show Off”、“玩具城市民”等，而不是冰冷的“玩家”；氛圍設計也能緊扣故事，營造出豐饒的玩具城背景和燈光四射的擂臺風格——給玩家傳達出一致的體驗。


再以《女神異聞錄5》為例子，如果玩過就會知道：大廳圍繞地鐵為元素，各種介面都在地鐵站裡切換，再以對比強烈的紅黑色彩，渲染出極具風格的遊戲特色，且貫穿整個遊戲，讓玩家體會到遊戲風格和故事感受，這就是一個優秀的大廳設計。


之後有時間，會再詳細講講“遊戲介面的故事”

“你有創意嗎？”

做產品的時候，幾乎沒有人強調介面設計的“創意”，更傾向於遵守Material design、HIG這些規範來設計。

但是做遊戲互動，你需要花很多精力來思考“怎麼讓設計變得有趣”。

“有趣”一方面是指創意性上的表現，另一方面是對玩家情緒的體悟。

-創意表現

因為遊戲介面設計限制小，圖形元素豐富，視覺表現要求高，所以有很大的空間給互動設計師將功能趣味化。

當然這種創意是要合理的，跟遊戲本身的“故事”搭配。

以《永遠的7日之都》為例子，一般遊戲做功能模組，比較多會一排放在底欄，但《永遠的7日之都》將功能集合成了一個手機介面的樣式，且把這個“手機”編入了遊戲故事中，成為了玩家和神器使之間的“通訊工具”。

這種創意處理能讓遊戲的整體性更強，玩家也更容易沉浸在遊戲的故事裡。


再以《祕寶獵人》為例子，彈窗設計成開啟的書，標籤變成了書頁，比中規中矩的彈窗顯得更趣味。

-情緒體悟

看看下面這個商城設計，大家會覺得如何？


“挺不錯，好看，有商城的氛圍”——大概很多人會這麼覺得。

那再看看下面這個商城設計呢？


我看了之後會心一笑。

後者比前者在對玩家情緒的體會上明顯更上一層——

前者只是做了一個“好看”“像商城”的商城；

而後者，將玩家潛意識裡“萬惡的遊戲開發商，欺騙我們的血汗錢”的情緒，通過對牛佬”外表光鮮，內在販子“的反差醜化，詼諧地表達了出來。

“看你這麼不容易，就贊助一把吧。”

所以，創意的更高階段是在創意裡融入對玩家的情緒體悟。

大廳互動暫且寫到這裡，之後想到會繼續補充的。

下次會講“核心玩法”方面的互動內容，希望大家多多支援～

作者：小黑
專欄地址：https://zhuanlan.zhihu.com/p/31942149