24MMM 遊戲 UX/UI 設計【產學合作專案】

摘要

這是我在美國東北大學碩士期間參與的跨領域遊戲開發專案，與 ArtLanguageCode.org 合作，在一個 15+ 人的團隊中擔任 UX/UI 設計師，同時負責將設計導入 Godot 遊戲引擎。

《24MMM》（24 Minute Midnight Movie）是一款受午夜 B 級電影啟發的像素風 2D 故事冒險遊戲，我們接手前一個團隊的開發成果進行體驗優化。經過實際遊玩測試，我發現核心問題不是「功能不夠」而是「操作太複雜」——遊戲大量使用滑鼠右鍵和中鍵，對目標受眾（休閒玩家）來說門檻過高，加上缺乏教學引導，玩家在搞懂操作之前就已經失去耐心。

我主導的設計決策包含：把所有互動統一為滑鼠左鍵操作、用融入劇情的教學事件取代獨立教學畫面、以及設計「生存指南」資訊架構來整合散落的遊戲資訊。這些調整讓玩家能更快進入狀態、專注於探索故事本身。

歡迎繼續閱讀專案細節 ↓

專案背景

《24MMM》的開發採用學期接力制——每一屆團隊接手上一屆的成果，在一個學期內推進遊戲到下一個階段。我們接手時，遊戲已有基本的角色移動、物件互動和道具系統，但玩家體驗上有明顯的問題。

我們的團隊超過 15 人，橫跨 UX/UI 設計、程式工程、視覺設計、關卡設計和故事設計等領域。我的職責是設計並優化遊戲的 UX/UI，同時以 UI 工程師的身分在 Godot 引擎中導入設計、與開發團隊透過 GitHub 協作。

從受眾特性出發，定義核心問題

在動手設計之前，我先定義了這款遊戲的目標受眾：休閒玩家、非動作遊戲玩家、主要使用桌上型電腦遊玩。這個定義直接影響了後續所有設計決策的方向——我們要解決的不是「讓遊戲更有挑戰性」，而是「讓不常玩遊戲的人也能順利上手」。

接著我反覆遊玩前一版遊戲，歸納出兩個核心問題：

操作過於複雜。 遊戲中大量使用滑鼠右鍵甚至中鍵來觸發功能（例如右鍵點擊道具才能使用），這對習慣只用左鍵操作的休閒玩家來說很不直覺，容易在操作上感到挫折。

缺乏教學和視覺引導。 如何開啟各選單、如何與物件互動，都沒有足夠的提示。玩家只能靠反覆查看控制設定來摸索，而大多數休閒玩家不會有這個耐心。

這兩個問題的共同根源是：前一版的設計假設玩家已經熟悉這類遊戲的操作慣例，但我們的目標受眾恰恰不是這樣的人。

設計決策：降低門檻，讓玩家專注於故事

一、所有操作統一為左鍵——消除「猜按哪個鍵」的認知負擔

這是最基礎但影響最大的決策。我把所有需要滑鼠右鍵或中鍵的操作，全部改為左鍵完成。

以道具選單為例，舊版需要右鍵點擊道具才能使用，而且選單本身只有圖示陳列，沒有提供道具的說明資訊。我重新設計了選單，在右側加入資訊面板，玩家左鍵點擊道具就會顯示詳細說明和一個明確的「Use」按鈕。一個操作完成「查看資訊」和「使用道具」兩件事，不需要記住不同按鍵對應不同功能。

這個決策的核心邏輯是：對休閒玩家來說，操作本身不應該成為需要學習的東西。操作越透明，玩家才越能把注意力放在遊戲內容上。

二、在畫面中加入持續可見的視覺引導

舊版中，開啟暫停選單、道具選單等功能全靠記住鍵盤快捷鍵，連常見的 ESC 鍵都沒有被設定。我在測試時自己都經常忘記怎麼開選單或開錯，更別說休閒玩家。

我的做法是在畫面角落設計常駐的選單按鈕，每個按鈕都有圖示和文字標示功能，玩家不需要記住任何快捷鍵就能操作。此外，當玩家角色靠近可互動的物件或 NPC 時，角色頭頂會出現操作提示，告訴玩家「可以做什麼」和「怎麼做」。

這些引導不是額外附加的教學，而是融入遊戲畫面本身的資訊層，讓玩家在任何時刻都能找到「下一步該做什麼」的線索。

三、用劇情事件包裝教學——讓「學操作」變成「玩遊戲」

解決了操作複雜度之後，下一個問題是：玩家第一次進入遊戲時，還是需要一個學習各種機制的過程。傳統做法是做一個獨立的教學關卡或教學畫面，但這往往讓玩家覺得無聊、急著跳過。

我們提出的方案是把教學包裝成遊戲開頭的一系列劇情事件——透過與 NPC 的對話、與遊戲物件的互動、劇情動畫的演出，在推進故事的同時自然地引導玩家熟悉移動、互動、打開選單、使用道具等操作。玩家不會意識到自己「正在被教學」，而是覺得自己「正在經歷故事的開頭」。

這個決策需要 UX 團隊和故事團隊緊密配合，我們一起規劃哪些遊戲機制需要在哪個劇情節點被介紹，確保教學的節奏融入故事的節奏而不突兀。

四、設計「生存指南」——用資訊架構整合散落的遊戲內容

隨著關卡和故事逐漸成形，故事團隊提出了大量角色背景、道具秘密、任務線索等內容，但這些資訊缺乏一個統一的呈現架構。

我的做法是利用既有的選單結構，設計一套稱為「生存指南」的資訊系統：日誌選單整合角色資訊（包含與 NPC 的信任關係）和任務進度；筆記選單則揭示道具背後的故事細節。兩者都用清楚的文字排版讓玩家能輕鬆閱讀大量內容。

此外，我把舊版獨立的任務選單合併進日誌，並新增一個畫面角落的任務提示框，讓玩家在探索大地圖時隨時知道當前目標，不至於迷失方向。

這個設計的思考方式其實跟我後來做 SaaS 產品的資訊架構規劃是一樣的：先釐清使用者在什麼時候需要什麼資訊，再決定資訊該放在哪裡、用什麼方式呈現。

跨職能協作：從 Figma 到 Godot

這個專案中我同時扮演設計師和 UI 工程師兩個角色。在設計端，我在 Figma 上完成 wireframe 並附上導入遊戲引擎所需的規格註解，讓視覺設計師能據此產出符合像素風格的素材。在開發端，我使用 Godot 引擎搭配 Dialogue Manager 套件導入所有 UI 元素，並透過 Git 分支與其他工程師協作。

這段「自己設計、自己導入」的經歷，讓我更能理解設計交付給開發時容易產生的落差，也影響了我後來在工作中與工程師溝通時，會提前考慮技術實作的限制與成本。

成果

操作全面簡化：所有滑鼠互動統一為左鍵，搭配 HUD 按鈕與操作提示，休閒玩家不需要額外學習就能上手
教學融入劇情：開場教學事件讓玩家在推進故事的同時自然熟悉所有遊戲機制
資訊架構整合：生存指南系統統一管理角色、道具、任務資訊，搭配任務提示框引導探索方向
交接文件準備：建立開發文件供下一屆團隊接手，包含 UI 規格、已知問題與建議開發方向

反思

這個專案給我兩個影響深遠的收穫。

第一，在大型跨領域團隊中，「設計決策」不只是設計師的事。教學事件的設計需要故事團隊配合節奏，生存指南需要關卡設計師提供內容結構，每一個 UX 決策都牽涉到其他專業的工作。這讓我第一次體會到跨職能協作的複雜度，也是我後來對專案管理產生興趣的起點。

第二，同時扮演設計師和工程師，讓我更理解「設計到實作」之間的落差。自己導入 UI 的過程中，我發現很多在 Figma 上看起來合理的設計，到了引擎裡會遇到效能、素材規格、互動邏輯等各種限制。這段經歷讓我在後來的工作中，設計時就會主動考慮技術可行性，而不是畫完理想方案再讓工程師想辦法。