Metlivi 部落格

如何在緊湊的遊戲介面中同時清晰呈現寵物控制項與角色

對於圍繞寵物角色設計的小螢幕遊戲，若要保持角色清晰可見，可以保留一個開闊的遊戲區域、僅在其邊緣放置必要控制項，並根據當前操作動態調整次要控制項。先從主要互動所需的最少控制項組合開始，然後檢查在各種螢幕尺寸和裝置安全區域下，角色、觸控目標以及重要狀態提示是否均清晰可見。

2026年10月15日閱讀時間 6 分鐘作者：Metlivi Editorial Team
開啟產品返回文章庫
第 1 節

確定哪些內容必須保留在螢幕上

列出玩家在核心遊戲循環中需要的資訊和操作。第一輪實用的篩選可能包括：寵物、一項主要操作（如餵食或玩耍），以及一個明確顯示該操作是否可用的精簡指示器。將設定、收藏以及較少使用的操作移至次級選單或簡短的情境面板中。這是一種設計方法，而非絕對規則：如果一款遊戲的核心玩法是在多個操作之間進行選擇，則可能需要同時顯示更多控制項。

在配置控制項之前，先為角色劃定明確的視覺區域。保持其輪廓和表情等核心部分清晰可辨，並避免在其上方放置按鈕或標籤。如果某項操作需要直接觸碰寵物，請確保該互動區域暢通無阻；如果控制項疊加在遊戲場景之上，請確保它們不會遮擋玩家需要看到的角色部分。Apple 的遊戲控制項指南建議，只要能直接與遊戲物件互動，就應盡量減少虛擬控制項（遊戲控制項）。

第 2 節

圍繞遊戲區域放置主要控制項

將常用操作群組化放置在易於觸及的位置，並將次要操作移至較遠處或收納於選單中。在觸控螢幕上，請避免將按鈕過度集中在玩家手部容易遮擋寵物的區域。Apple 建議將常用觸控控制項放置在大拇指附近，並將次要控制項放置在螢幕頂部附近；其指南還指出應考慮舒適的操作範圍以及裝置邊界。應將這些建議視為在目標裝置和螢幕方向上進行測試的起點，而非所有遊戲都適用的固定版面配置。

讓視覺圖示保持精簡，但不要縮小實際的觸控目標大小。Apple 建議在其平台上，常用控制項的尺寸至少應為 44 x 44 點，次要控制項至少應為 28 x 28 點。Android 建議互動式觸控目標至少應為 48 x 48 與密度無關的像素 (dp)。這些是特定平台的測量標準，因此請使用相應平台的單位和指南，而不是將這些數值混用（Apple 遊戲控制項、Android 無障礙指南）。控制項之間應保留足夠的間距以防誤觸，特別是當兩種操作會產生截然不同的結果時。

第 3 節

確保角色在介面背景中清晰可辨

寵物在技術上可能仍顯示在螢幕上，但當控制項、標籤或裝飾性面板過於搶眼時，就很難被注意到。次要介面元素應採用較為克制的視覺權重：使用小圖示、簡短標籤，以及僅覆蓋必要空間的面板。在最關鍵的操作過程中，確保角色的面部和其他重要細節清晰可見。如果文字或圖示下方的遊戲場景會發生變化，可以考慮使用微弱的底色或外框，以便在不添加大塊不透明面板的情況下保持介面的易讀性。

在場景的明亮與暗部區域同時檢查文字和圖示。在某個背景上效果良好的對比度，可能會在寵物移動或場景切換時消失。對於文字，W3C 的 WCAG 指南規定標準尺寸文字的對比度應為 4.5:1，大文字則為 3:1。WCAG 是網頁內容指南而非專門的遊戲規則，但其對比度閾值可作為檢查多變背景下介面文字的實用參考（W3C 對比度指南）。不要單純依靠顏色來傳達某個操作不可用；還應在視覺上改變其標籤、形狀或狀態。

第 4 節

僅在需要時顯示控制項

如果常駐控制項佔用過多空間，可以在玩家開啟選單或選取寵物時再顯示可選操作。隱藏當前狀態下不可用的操作，並在按下控制項時顯示明確的狀態變化。Apple 特別建議根據遊戲情境動態調整虛擬控制項的顯示，包括隱藏無關的控制項並讓使用中的控制項更加醒目。一個實用的模式是保持主要操作立即可用，並在玩家選取後彈出的小選單中展示相關選項，選取完畢後選單即自動關閉。

確保狀態變化具備可預測性。如果控制項在玩家正準備使用時突然消失，會造成混淆，因此請僅對那些其可用性可從當前狀態中明確判斷的操作使用隱藏/顯示行為。如果某個按鈕變為停用狀態，請標明該狀態，並在必要時簡要說明原因。避免讓展開的選單遮擋寵物的面部或玩家下一步需要點擊的區域。

第 5 節

適配安全區域與螢幕形狀

設計時應以可用區域為基準，而非僅僅依據螢幕的外邊框矩形。瀏海、相機挖孔、系統列和手勢區域可能會遮擋邊緣附近的重要控制項。Apple 的版面配置指南將安全區域定義為有助於防止內容與介面元素及裝置硬體特徵重疊的區域。Android 同樣建議遵循系統列、手勢和螢幕挖孔的內邊距，並讓關鍵控制項遠離挖孔區域（Apple 版面配置指南、Android 滿版設計指南）。背景插畫可以延伸至螢幕邊緣，而互動元素則應保留內縮間距。

不要假定一種緊湊的排版能適用於所有顯示比例。應將控制項錨定到可用區域，並在可用寬度改變時自動調整間距或群組排列。Android 針對 Unity 的遊戲指南建議使用安全區域 API，並支援不同的顯示尺寸與外觀比例。僅在遊戲支援直向或橫向模式時測試相應版面，若在支援範圍內，請在裝置旋轉、視窗大小調整或摺疊螢幕開合後重新檢查（Android Unity 遊戲大螢幕適配指南）。

第 6 節

在實際遊戲過程中檢查版面配置

靜態模型無法展示玩家的手指在操作過程中會遮擋哪些區域。請在預期的實體螢幕尺寸下檢視介面，然後嘗試進行主要操作，同時注意是否有角色細節被遮擋、點擊落空，以及控制項是否與系統功能重疊。使用所支援的最小螢幕以及更寬或更高的螢幕比例重複此項檢查。如果條件允許，可以請不熟悉該版面配置的人嘗試完成主要任務，並觀察他們在哪裡點擊、猶豫或看不到寵物。

為每種支援的版面配置使用簡短的合格/不合格檢驗清單：

  • 在主要操作期間，寵物保持可見，包括其臉部或其他關鍵細節。

  • 主要操作觸手可及，具有明確的按下狀態，且不與其他目標重疊。

  • 標籤和重要狀態提示在動態變化的場景背景下始終清晰可讀。

  • 沒有關鍵控制項位於挖孔、系統列或手勢區域下方。

  • 開啟次要控制項不會遮擋下一步操作所需的角色部分或遊戲區域。

如果某項檢查未通過，請一次只修改一處：移除低優先順序的元素、在遵守安全內邊距的前提下將控制項移向遊戲區域邊緣，或者僅在需要時顯示次要操作。然後重新測試相同的互動。這樣更容易判斷該改動是真正解決了可見度問題，還是僅僅將問題轉移到了其他地方。

第 7 節

參考資料

相關閱讀

繼續探索這個主題

部落格庫瀏覽 Metlivi 文章庫。Metlivi 產品探索 Metlivi 產品系列。Metlivi 常見問題閱讀 Metlivi 常見問題。