網易遊戲設計師:淺析遊戲交互設計五維度

交互設計 設計師 設計 武俠 網易 楚留香 獅覺設計工坊 2019-03-25

隨著市場上游戲品類的不斷豐富,卡牌、RPG、MOBA、大逃殺等遊戲類型在遊戲交互方面也有了更多的表現,隨之而來是玩法與界面的同質化。套皮的遊戲產品已經讓玩家感受到審美疲勞,如何突破常規的界面設計是設計師需要面臨的考驗。

在現有市場的遊戲產品中,由於手遊的系統和玩法逐漸增多,因此延伸出許多子系統給遊戲提供更多的玩法和樂趣,例如熔鍊、技能、任務等功能,然而在滿足了功能需求之後,市場環境也對遊戲的品質提出更高的要求:賦予趣味性的交互形式、在玩家的角度提供沉浸感、符合遊戲情境的交互體驗等等。而遊戲中的交互方式和視覺界面則成為傳達體驗與情感的載體,需要設計師通過品質打磨來傳達給玩家新的體驗。

接下來想嘗試圍繞現有的遊戲界面來分享思考的設計方法,簡單總結了5種設計維度,僅作為拋磚引玉。(以下案例僅針對手遊分析)

深入世界觀情境

總結:深入瞭解世界觀情境去觸動玩家的情感產生共鳴。

設備的升級能夠讓玩家體驗到更精緻的遊戲品質,越來越多的玩家會去關注人物造型、皮膚和界面的表現效果,生動的界面和趣味性交互能夠讓玩家獲得更好的遊戲體驗。

例如通用的領取任務界面,這類任務界面在視覺上能夠展示玩家所需要的功能,也能夠滿足玩家使用體驗。但缺乏與世界觀相結合的設計融入和情感的傳達,整體更傾向功能性的展示。那如何讓界面也去營造情感傳達?

網易遊戲設計師:淺析遊戲交互設計五維度

每個遊戲都有基於自身的世界觀和背景,而設計師更多是在既定的世界觀去探索表達方法。同樣是領取任務的功能界面,《楚留香》在這方面則是融入了與其世界觀相結合的表現方式。在領取任務界面,設計師融入了與其世界觀和情感相呼應的情景來表現。

網易遊戲設計師:淺析遊戲交互設計五維度

網易遊戲設計師:淺析遊戲交互設計五維度

試想一下,我們心中的武俠是一個怎樣的場景?在武俠小說或者電視劇有過這樣的情景描述:高手身輕如燕躍上高處,俯瞰世間繁華。而楚留香正是想把這種情境觸達給玩家。正例如《楚留香》的slogan:「還每個月武俠夢一個真江湖」。以此可以看出遊戲的核心就是想要給玩家傳達快意江湖的武俠情境,而這種情境恰好與領取任務的功能兩者在情感傳達上能夠達成一種共鳴:自豪感與成就感。基於這個情境下將「領取任務」的需求與「高處俯瞰」的情景相匹配,將情感落實到設計上,營造出睥睨江湖的情感觸點。因此深入瞭解遊戲的世界觀能夠站在玩家的角度,挖掘與需求匹配的情感觸點,結合功能嘗試突破新的界面形式。

要點:

  • 強化沉浸感和代入感
  • 尋找情境產生共鳴
  • 情境下的情感觸點

空間推移

總結:可以通過空間轉換的方法替代引導與強化流程體驗。

空間的變換不僅能夠給玩家帶來視覺上衝擊感,也能引導玩家進一步探索。簡單理解就是將遊戲裡面的系統當做一個有前中後間隔的盒子,玩家在不同的界面中切換,就像是在近、中、遠的空間中穿梭,這種表現方式能夠遵循現實的進入/出去現實映射,並且也能起到引導玩家的作用,能夠降低玩家對系統的認知成本。

《決戰平安京》在界面的切換上使用了空間推移的設計方法,首先將整個界面場景營造出一種庭院的室內氛圍,玩家進入系統則像是進入庭院的某個空間,進入的過程還會有進入/退出的動效配合,能夠保持玩家在場景的沉浸感和降低玩家對界面系統的一個認知門檻。

要點:

  • 提供引導反饋
  • 空間關係的體驗
  • 強化探索的遊戲體驗
網易遊戲設計師:淺析遊戲交互設計五維度

△ 平安京主界面

網易遊戲設計師:淺析遊戲交互設計五維度

△ 平安京次級界面

故事化視角

總結:抓住故事主流程設計,讓玩家印象深刻。

故事化視角是使用故事鏡頭的插圖繪製出完整的故事內容,這種方法最初的使用來自電影製作。在用戶體驗設計中,運用故事板的設計方法有幾個優點:

  • 流程:故事化的流程讓遊戲更加合理化,容易產生情感觸點。
  • 同理心:講故事容易讓人印象深刻,感同身受。
  • 參與感:故事容易吸引注意力,好奇心會讓玩家代入角色從而更多的參與流程。

《非人學院》在遊戲內很像在演繹一個故事事件。在遊戲登錄頁是一輛開往學園的列車,當玩家進入遊戲後會有一輛小巴士作為轉場的載體銜接,意味玩家已經到達學園,接下來需要進行測驗考核(選擇戰鬥模式)緊接著是進入站臺(與玩家匹配),列車啟動(匹配到隊友)然後到達場地選擇上場表演的角色(選擇戰鬥角色),最後開始表演(開始戰鬥),表演結束後還會有趣味性採訪(戰鬥結算)。整個故事流程與玩法結合得十分密切,豐富了遊戲趣味性的同時還強化了產品的調性(無厘頭),給玩家帶來多樣的體驗和不一樣的驚喜。

要點:

  • 強化故事主流程
  • 從故事流程中延展設計點
  • 強化探索的遊戲體驗
網易遊戲設計師:淺析遊戲交互設計五維度

△ 非人學園主界面

網易遊戲設計師:淺析遊戲交互設計五維度

△ 非人學園轉場界面

網易遊戲設計師:淺析遊戲交互設計五維度

△ 非人學園結算界面

場景化展示

總結:結合場景化的表現形式打破固有設計,帶給玩家超出預期的驚喜。

當前大部分遊戲的功能界面形式均為平面展示,而當玩家的視角出現反差時,能夠給玩家帶來不一樣的記憶點和新奇感,並且視角上的切換能夠給界面設計提供更多的可能性。在遊戲中通常我們把系統界面分為兩大類型:通用類界面和活動類界面,其中通用類界面需要和遊戲背景、功能玩法強相關,例如《夢幻西遊手遊》的「風物誌」系統則嘗試了用場景化的方式去表現,將相關的系統功能都集合在一個場景化的界面內,讓玩家的視覺產生與現實世界相呼應的感受,更有代入感。

網易遊戲設計師:淺析遊戲交互設計五維度

△ 夢幻西遊手遊風物誌界面

活動類界面可以結合節日背景大開腦洞,例如《楚留香》的七夕節與立夏節等,場景化的表現方式將整個節日活動氛圍渲染得十分出彩,整體的佈局與顏色均可暫時脫離原有的界面風格系統,給玩家制造超出預期的驚喜。

要點:

  • 強化沉浸感
  • 跳出平面設計表現
  • 強形式感的陳列展示
網易遊戲設計師:淺析遊戲交互設計五維度

△ 楚留香七夕活動界面

網易遊戲設計師:淺析遊戲交互設計五維度

△ 楚留香立夏活動界面

細節與微交互

總結:可以在提醒/引導/反饋加上微交互,給玩家制造瞬間的愉悅感。

隨著各類 APP 的成熟發展,微交互越來越多運用在各類產品上。微交互不僅能夠在關鍵的操作起到提醒、反饋作用,還能給用戶帶來超出預期的驚喜感,由於 APP 的包體資源量和功能性所限,大部分 APP 的微交互側重點以準確傳達功能為主,而遊戲所受限制較小(資源數量、引擎等),可以有更多趣味性的微交互與玩家互動。

例如在《楚留香》的福利界面中,設計師通過用花燈的組合來構建引導過程,在點開的瞬間以展開的微動效形式給玩家帶來功能之外的愉悅感,高品質的微交互能夠提高玩家對非遊戲功能的心理感受,從而影響玩家的操作、情緒等。

網易遊戲設計師:淺析遊戲交互設計五維度

△ 楚留香福利活動界面

在《夢幻西遊》嘉年華的活動中,設計師將「仙樂盛典」的玩法主題和小遊戲需求結合,結合古代樂器的使用方式(擂鼓、敲鐘、彈琴等操作)通過微動效的引導反饋給玩家,讓玩家能夠快速進入古代樂器的設定和體驗中。

要點:

  • 提供引導反饋
  • 製造驚喜
  • 增強探索體驗
網易遊戲設計師:淺析遊戲交互設計五維度

△ 夢幻西遊嘉年華活動界面

結語

面對越來越多的遊戲產品,界面不僅僅是簡單的功能呈現,界面所展現的交互方式與視覺成為與玩家互動最直接的載體,就像任天堂的主UX設計師正木義文在新人培訓中提到:任天堂傳達的三個重點之一,將體驗變得有趣,這也是每個遊戲交互設計師的目標。

相關推薦

推薦中...