跳過導覽
學習設計

什麼是遊戲 UI?遊戲介面設計的完整入門指南

按 A 鍵繼續

當我們想到電玩遊戲時,通常會想到動畫和角色設計。但沒有好的 UI 設計,任何遊戲都不完整,甚至無法使用。沒錯!電玩遊戲產業中,UI 設計師的發展空間很大,您很快就會明白為什麼。

準備好從玩家變成嶄露頭角的遊戲介面設計師了嗎?您只需要這份指南和一些值得信賴的遊戲 UI 設計軟體 — 例如 Sketch

選擇一個存檔槽開始。

Load/Save screen of All of You featuring three empty save slots

Alike Studio 的 All of You 的載入/儲存畫面,透過 遊戲 UI 資料庫 取得。此圖像僅供教育用途。

提示:什麼是遊戲 UI?

首先,我們先來談談什麼是遊戲 UI。簡而言之,遊戲介面設計的重點在於創造視覺提示,幫助使用者在任何電玩遊戲中遵循預期的行動方針。想想螢幕上的指示,例如「按 X 鍵開啟」或周圍環境的地圖。

當然,遊戲介面設計遠不止於此,而且它是一個隨著新技術和平台不斷發展的領域。例如,為使用控制器的 Xbox 設計遊戲,與設計完全以觸控螢幕為主的行動遊戲截然不同。

我們稍後會更深入地探討這些概念。但首先,讓我們先全面了解遊戲設計流程。

遊戲設計大亂鬥:UX 與 UI 的相遇

與設計領域中的大多數情況一樣,只要有 UI 設計師 的地方,您很可能會找到他們的 UX 夥伴。

以下是這些角色在電玩遊戲設計中的合作方式

首先,UX 設計師會規劃玩家的旅程。他們通常會建立 模型線框圖,詳細說明這些步驟以及每個決定可能導致玩家走向何方。在此階段,UX 設計師的一個良好經驗法則是只包含絕對必要的步驟和決策點。

接下來,UI 設計師將開始使用顏色、排版、內容階層和形狀等元素來建立語義語言,使這些步驟盡可能直觀且吸引人。目標是讓玩家能夠快速且自信地做出決定 — 當然,除非您想誤導他們 😉

自始至終,UX 和 UI 設計師將與動態圖形設計師密切合作,他們將開始思考如何為我們熟悉且喜愛的角色選擇畫面、地圖和技能樹製作動畫。

雖然我們可以花幾個小時討論遊戲設計的各個方面,但今天選擇的角色是「遊戲 UI 設計師」。因此,讓我們來看看他們的故事情節包含哪些內容。

您已選擇遊戲 UI 設計師

13 Sentinels character selection screen

來自 Atlus《十三機兵防衛圈》的角色畫面,取自遊戲介面資料庫。此圖片僅供教育用途。

想看更多優秀遊戲介面設計的範例嗎?不妨看看遊戲介面資料庫——該團隊已經從近 1,000 款遊戲中精選了超過 41,000 張螢幕截圖,相信您一定能找到一些靈感。

第一個任務:理解遊戲介面設計中的介面組成

在遊戲介面設計中,視覺呈現方式主要分為四種類型:敘事性、非敘事性、空間性以及後設性。要成為一名優秀的遊戲介面設計師,首先必須了解這些類型的含義,以及如何有效地運用它們。讓我們來一一拆解。

敘事性:遊戲角色看得見或聽得見,且符合故事脈絡的介面元素。例如:螢幕可見的手機、全息影像和其他未來科技裝置。

非敘事性:存在於遊戲或故事之外,只有玩家才能看到的介面元素。例如:選單畫面、任務視窗和生命值條。

空間性:在遊戲空間中呈現,但遊戲角色看不見的介面元素。例如:標示敵人的角色輪廓、顯示投擲物落點的箭頭和文字標籤。

後設性:與遊戲相關,但在遊戲空間中沒有具體呈現的介面元素。例如:滾動的文字或顯示玩家生命值狀態變化的彩色覆蓋。

以下是如何區分這四種類型視覺呈現的快速指南。

第二個任務:遊戲介面設計實戰

正如我們所見,許多電玩遊戲元素實際上都屬於使用者介面設計的範疇。介面設計師負責設計從生命值條到角色選擇和物品欄畫面等所有內容。但有一個地方幾乎完全由介面元素組成:那就是 HUD,或稱抬頭顯示器。

您可以將 HUD 視為一個容納各種介面元素的疊加層。玩家可以在遊戲過程中在這裡找到他們所需的大部分資訊。為了更好地理解這一點,讓我們來看一下《女神異聞錄 5》的這個例子。

Scene in Persona 5 featuring the HUD as game UI example

來自 Atlus《女神異聞錄 5》的遊戲畫面,取自遊戲介面資料庫。此圖片僅供教育用途。

在這裡,您可以看到 HUD 如何在右下角顯示主角的生命值和耐力條,角色周圍有一個動作選單,甚至在右上角還有一些文字提示,提醒玩家下一步行動。

正如 Game Maker's Toolkit 的這一集所解釋的,我們可以將大多數 HUD 元素歸類為儀表或預覽。

儀表,例如生命值條和地圖,可以幫助玩家了解遊戲中當前正在發生的事情以及可能發生的事情。這些介面元素旨在幫助玩家做出明智的、全局性的決策。

預覽,例如指示您按下 X 鍵打開門的文字圖層或顯示物品落點的拋物線,讓玩家了解其動作的即時效果。其目的是讓玩家對下一步行動感到安心。

您還可以透過介面元素來增加或降低遊戲的難度。仔細想想,玩家接收的大多數提示都是透過 HUD 顯示的。通常,在選擇簡單、普通和困難模式時,您實際上是在選擇螢幕上顯示的 HUD 提示數量。除此之外,可能還會增加敵人的生命值。

第三個任務:選擇遊戲介面設計軟體

好了,課程就到這裡!我們已經涵蓋了一些遊戲 UI 設計的基礎知識,現在該開始實際操作了。我們應該如何以及從哪裡開始創造下一個排行榜冠軍的電玩遊戲呢?對於 UI 設計師來說,一切都從選擇合適的遊戲 UI 設計軟體開始。

除了滿足您基本的 UI 設計需求,例如圖層列表、樣式工具和向量編輯之外,以下還有一些需要注意的必要功能:

  • 能夠建立可重複使用元素的庫,以便您可以儲存從同一血條的不同版本到各種大小的地圖等任何內容。想像一下您可以節省多少時間!
  • 具備原型設計功能,讓您可以使用覆蓋將 UX 設計師的線框稿賦予生命,並預覽 UI 的實際運作。
  • 提供協作選項,以便您在微調設計時可以與 UX 設計師和其他團隊成員一起工作。
  • 擁有適當的交付工具,讓您的開發人員可以輕鬆地將您的設計轉換成功能齊全的電玩遊戲。
準備好嘗試遊戲 UI 設計了嗎?Sketch 可以幫助您 — 而且您可以免費開始使用

懶人包:

  • 遊戲 UI 的重點在於創造視覺提示,幫助玩家在任何電玩遊戲中遵循預期的行動方向。
  • 這些提示可以是劇情內、劇情外、空間或元數據的。
  • HUD(抬頭顯示器)是一個功能強大的覆蓋層,在遊戲過程中包含許多這些提示,尤其是儀表和預覽。
  • 遊戲 UI 設計師與 UX 設計師和動態圖形設計師密切合作。
  • 合適的遊戲 UI 設計軟體將具備原型設計、協作、交付和可重複使用元素等功能。

以上就是全部內容!希望您學到了一些關於遊戲 UI 設計的知識,並且準備好親自嘗試一下。如果沒有… 也許我們只是提供了一些您下次玩最喜歡的電玩遊戲時,再也無法忽視的細節。

那麼,您覺得如何?

Request dialogue game UI from Undertale

來自Undertale的場景,經由遊戲 UI 資料庫提供。此圖片僅供教育用途。

您可能也喜歡

免費試用 Sketch

無論您是 Sketch 的新手,還是回來查看新功能,我們都能讓您在幾分鐘內設定好並準備好進行最佳工作。

免費開始使用
免費開始使用