遊戲角落設計最佳做法

下列設計最佳做法可確保使用者在不同裝置和平台上透過 YouTube 暢玩遊戲時,都能享有最佳體驗。

除了作業系統元件外,Playables 體驗主要由下列三種元件組成:

  • 遊戲角落動作
  • 遊戲畫布
  • 選單和對話方塊

畫面瀏覽畫面,顯示三個元件的位置

這些遊戲設計最佳做法提供建議,說明如何為遊戲畫布建構遊戲。

調整遊戲大小

請考量下列做法,確保遊戲能適當配合不同螢幕大小和方向調整。

調整遊戲大小,並配合畫布的大小和顯示比例調整 UI。

顯示遊戲未全螢幕

如果遊戲無法完全配合遊戲畫布大小和顯示比例自動調整,請使用上下黑邊或左右黑邊。

觸發捲軸

避免觸發捲軸。捲軸會對遊戲體驗和一般操作造成負面影響。填滿畫布,但不要導致遊戲在畫布內變成可捲動。如果是有意捲動,例如在遊戲 UI 中捲動長長的垂直清單,則可以使用捲軸。理想情況下,遊戲應完全回應可視區域。

遊戲縮放

在不同螢幕解析度下清楚顯示 (不得模糊、像素化或延展)。

確保遊戲 UI (文字、圖示) 在低解析度螢幕 (例如 360x800 行動裝置) 和高解析度螢幕 (例如 3840x2560 電腦螢幕) 上算繪時,都能適當縮放。

並排比較清晰和模糊的獎盃圖示

避免使用低解析度的點陣化素材資源,以免縮放至大螢幕時模糊不清。

字體排版

確保在各種裝置和螢幕尺寸上都能清楚顯示。

遊戲中顯示的文字 (例如按鈕、選單和對話泡泡) 必須在不同裝置和螢幕大小上都能清楚辨識。方法包括自動縮放及調整文字,或是提供使用者調整字型大小的設定。

如果文字小於 18 pt,或是小於 14 pt 的粗體文字,請至少將色彩對比率設為 4.5:1。

如果文字為其他格式,色彩對比率至少須為 3:1。

如需一般參考資料,請參閱 WCAG2.1

使用夠大的字型大小,並確保字體粗細和對比度足夠,方便使用者閱讀。 在本範例中,對比度為 4.48:1。 避免使用小型字體和低對比度顏色。在本例中,對比度為 3.07:1。

互動

本節說明使用者互動和相關元素的最佳做法。

觸控目標

將觸控目標放大,方便使用者互動。

確保觸控目標的大小至少為 48x48 dp,且目標間的間距至少為 8 dp (請參閱 Material Design 指南),方便使用者互動。

在這個範例中,視覺上呈現的按鈕為 24 dp,而隱形的觸控目標包含圖示周圍的 12 dp,可達到 48x48 dp 的觸控目標。

顯示所算繪按鈕的尺寸

在圖示和按鈕周圍新增邊框間距,增加觸控目標大小。

按鈕

為每個按鈕狀態使用專屬樣式:

  • 已啟用
  • 已停用
  • 懸停 (適用於非觸控輸入裝置)
  • 專注
  • 按下

請盡量依階層區分按鈕。舉例來說,「開始」選單中的主要與次要動作按鈕 (請參閱 Google Material 2 設計指南中的按鈕)。

顯示不同的狀態樣式檢視畫面

可區分各按鈕狀態的獨特樣式

鍵盤輸入

為提升遊戲在不同裝置和使用者之間的無障礙程度,除了觸控和滑鼠輸入功能外,也請支援所有遊戲控制項的鍵盤輸入功能,以及畫面導覽功能。

如果遊戲支援鍵盤輸入,請允許使用者使用 Esc 鍵關閉任何遊戲內選單和對話方塊。除了視覺關閉按鈕 (例如頂端角落的 X 圖示) 之外,常見的模式或對話方塊範例包括「設定」選單、「暫停」選單、錯誤訊息和「說明」資訊彈出式視窗。

請勿將任何動作對應至 Esc 鍵的長按操作,因為這個動作是用於在電腦網頁瀏覽器中退出全螢幕模式。

如果遊戲已註冊按鍵監聽器,請勿使用 preventDefault() 搭配 Esc 鍵事件。在 Safari 中進入全螢幕模式時,這會導致遊戲耗用按鍵事件,而不會退出全螢幕模式。

觸覺回饋

建議您視情況使用觸覺回饋 (震動),讓遊戲更有趣、更身歷其境。

重要賽事時刻

本節將介紹遊戲中的重要時刻,這些時刻能為玩家帶來絕佳體驗。

教學課程

加入簡短的教學課程或新手關卡,協助新玩家上手。

新手教學可確保使用者瞭解基本玩法和遊戲要點,以便繼續進行遊戲並享受樂趣。

由於可試玩廣告的目的是讓使用者快速上手,因此請盡量簡化新手上路流程。雖然並非所有遊戲都需要教學課程,但大多數遊戲都適合提供某種形式的新手指引。請考量玩家需要瞭解哪些重要機制、規則和技能,才能順利享受遊戲。

教學課程可採用下列格式:

  • 遊戲開始時的一系列畫面 (或更理想的做法是,在遊戲中適當的時機顯示)
  • 使用者實際玩過的教學課程關卡

暫停

清楚向使用者傳達遊戲狀態。

清楚告知使用者遊戲何時暫停,以及如何繼續遊戲。避免讓使用者以為遊戲已凍結或當機。

顯示「暫停」和「繼續」按鈕

清楚標示遊戲狀態為「已暫停」,並提供明確的動作 (按鈕) 來繼續遊戲。

比賽結束

向使用者說明他們已完成最後一個關卡或遊戲。

如果遊戲有明確的結尾 (例如有限的關卡數量),請清楚向使用者說明這點。避免使用者誤以為遊戲故障或凍結。理想情況下,遊戲會慶祝並恭喜玩家完成遊戲。

音訊

遊戲可分別控制音效、語音和背景音樂的音量。控制項可以包含音量調整滑桿,或個別/同時靜音的切換按鈕。

背景、特效、對話的音訊設定各不相同

無障礙設定

無障礙設計讓使用者能夠瀏覽、瞭解及使用 UI,輕鬆暢玩遊戲。

與網頁和軟體設計不同,遊戲設計沒有業界標準的無障礙指南。如需更多包容性遊戲設計的指南,請參閱遊戲無障礙指南。建議您考慮如何將這些規範套用至遊戲設計。