選擇藝術風格

選擇藝術風格 是為您的 UI 元素規劃美學方向的過程。開始設計過程時選擇藝術風格非常重要，因為藝術風格提供了可供參考的視覺基本規則，以確保您的 UI 直觀地向玩家提供有關他們在遊戲中可以做什麼的信息。

使用 示例激光標籤遊戲 .rbxl 文件作為參考，本節用戶界面課程將向您展示如何根據遊戲類型做出有意義的決策，以設計您的 UI 元素，包括以下指導：

• 根據您希望在遊戲中向玩家傳達的內容，識別必要的 UI 元素。
• 選擇強化特定類型顏色慣例的顏色主題，這些顏色對您的受眾來說是直觀的。
• 概述在任何屏幕尺寸上都易於辨識的簡單圖標。
• 建立與不同玩家工作流程的可能性相匹配的按鈕順序。
• 確定一個文本系統，以確保在目標設備上可讀性。

完成本節後，您將學會如何設計您希望通過 UI 向玩家傳達的信息的結構和流程。

識別您的 UI 元素

為您的 UI 選擇藝術風格的第一步是識別您需要哪些 UI 元素，以便傳達您希望向受眾傳遞的各種信息。在設計過程的開始進行這項工作至關重要，因為它使您能夠根據 UI 元素的功能目的對其進行分類，根據玩家何時與每個 UI 元素互動做出語義決策，並計劃在整個遊戲中重用 UI 元素的位置。

有許多不同的方法可以頭腦風暴哪些 UI 元素對您的遊戲需求是必要的，但建議您首先想像玩家在加入遊戲時需要知道什麼。例如，當玩家打開示例激光標籤遊戲時，他們可能會問自己以下問題：

• 遊戲的目標是什麼？
• 我怎麼知道誰在我的隊伍中？
• 我如何跟蹤我隊伍的得分？
• 我如何選擇一把激光槍？
• 我怎麼知道激光槍射出激光的地方？
• 如果我在移動設備上，我怎麼開槍？
• 在我射出激光後，什麼時候可以再次射擊？
• 我怎麼知道我何時開始回合？
• 我怎麼知道我成功用激光槍標記了某人？
• 我怎麼知道敵隊何時成功標記了我？

通過使用這些問題來理解玩家成功所需的關鍵信息，您可以將示例激光標籤遊戲的 UI 需求分為三類：

1. 有關遊戲目標的信息。
2. 有關激光槍的信息。
3. 有關玩家狀態的信息。

將遊戲的 UI 需求分類是有幫助的，因為您可以圍繞每個分組制定藝術風格，以強化每個類別需要教會玩家的信息。例如，如果您希望您的 UI 告訴玩家有關角色健康狀態的行動，您可能會選擇一種優先使用綠色和/或加號圖標的藝術風格，以便玩家能夠快速識別其功能。

在您將遊戲的 UI 需求分類後，您可以創建一個必要的 UI 元素列表，以滿足每個類別的要求。為了演示，示例激光標籤遊戲使用以下 UI 元素表來解決之前列出的潛在玩家問題。當您在本教程中進行時，UI 課程將繼續參考此列表並突出與每個 UI 元素類別相關的主要設計決策。

現在您已經擁有了遊戲的 UI 元素列表，是時候開始為每組 UI 元素做出風格和語義選擇，首先從顏色主題開始。

選擇顏色主題

顏色主題，或顏色調色板，是一組顏色，每種顏色通過在您的遊戲中一致的應用來傳達信息，例如使用明亮的顏色來指示某物是可選的。將顏色主題應用於您的 UI 元素非常重要，特別是當您依賴於遊戲類型中的顏色慣例時，因為這使玩家能夠快速理解您的 UI，幾乎不需要努力。

在 環境藝術課程 中，激光標籤環境的每一半從上到下的視圖中進行顏色編碼，以區分地圖上每個隊伍的各自重生區域：薄荷綠 用於在地圖左側組成的隊伍，康乃馨粉紅 用於在地圖右側組成的隊伍。這些特定顏色是有用的，因為它們是 互補的，這意味著它們彼此對比良好，使玩家能夠輕鬆掃描周圍環境並定位自己，無論他們面對建築的哪個方向。

示例激光標籤遊戲在其 UI 中使用相同的顏色主題來突出與每個隊伍相關的信息，例如每個玩家在 3D 空間中的隊伍指示器，或覆蓋在屏幕上的隊伍得分追蹤器。這種一致性幫助玩家能夠在快節奏的第一人稱射擊遊戲中快速理解有關遊戲目標的信息，特別是當玩家需要在穿越環境時做出快速決策。

在為您自己的遊戲選擇顏色主題時，請考慮以下幾點：

• 顏色主題的強度依賴於幫助玩家在每種顏色和其功能之間快速建立心理聯繫。因此，限制您的顏色主題 以僅突出您希望玩家與 UI 元素相關聯的關鍵信息。
• 為了確保色盲玩家能夠理解您的顏色主題的信息，不要僅依賴顏色 來區分 UI 元素。相反，將顏色與圖標、形狀和/或動畫結合，以確保您的 UI 能夠有效地與每位玩家進行交流。
• 您的 UI 可讀性比美觀更重要。因此，優先考慮簡單的 UI，其顏色在 3D 世界中的明亮和黑暗元素上都保持可讀性。

為了強調最後一點的指導，示例激光標籤遊戲幾乎所有其他覆蓋在 2D 屏幕上的 UI 元素都使用黑色和白色的中性色。黑色和白色彼此對比良好，並且在屏幕的其餘部分顯示出色彩繽紛的 3D 環境時，易於閱讀。

概述簡單圖標

圖標 是代表遊戲中某個動作、物體或概念的符號。概述簡單且直觀的圖標非常重要，因為最終結果使玩家能夠輕鬆識別他們能夠做什麼以及您希望通過 UI 告訴他們什麼，而不使用文本，這可能會使屏幕變得雜亂，並使注意力從重要內容中轉移。這一過程在您的受眾使用小屏幕的移動設備訪問遊戲時尤為重要。

理想的簡單圖標應該與您的 3D 元素有明顯的風格區別，同時仍然與您遊戲的整體世界相輔相成。例如，在 環境藝術課程 的最終環境中，模塊化和道具 3D 資產具有乾淨的高科技藝術風格，使用帶有柔和圓角的矩形形狀。從地板上的斜面面板到天花板上的近圓形窗戶，沒有任何東西包含尖銳的邊緣。

為了補充這種藝術風格，同時保持獨特，您將在本教程後面學習製作的所有 UI 元素都包括未來主義的美學和圓角，而不與環境中的 3D 資產的形狀語言相匹配。這使每個圖標的含義在 2D 和 3D 空間中都與其他信息區分開來。

為了演示這一概念，請參見示例激光標籤遊戲中告訴玩家他們的激光槍在屏幕上射擊位置的準星和允許玩家在移動設備上射擊激光槍的按鈕的以下兩張圖片。這兩個圖標都包含柔和的角度，以與整體世界保持一致，但它們的六邊形和圓形形狀使它們與玩家在遊戲中可能將圖標與之聯繫的任何事物區分開來。

在為您自己的遊戲概述簡單圖標時，請考慮以下幾點：

• 簡單圖標即使在小時也能保持可讀性。因此，限制圖標上的細節，以免在移動設備屏幕上變得無法識別。
• 圖標是強大的，因為它們可以傳達信息，無論玩家的語言如何。只要不影響玩家對您的 UI 的理解，用圖標替換不必要的文本，以改善本地化工作。
• 許多同類型遊戲使用風格相似的圖標，例如代表力量的劍圖標或代表魔法的燒瓶圖標。擁抱您遊戲類型中的象徵主義，以便玩家能夠在沒有額外指導的情況下理解您的圖標。

如果您不知道在您遊戲的類型中常見的圖標類型，可以查看 遊戲 UI 數據庫。這個免費的 UI 設計師資源工具包括來自數百款不同類型遊戲的截圖，您可以在設計過程中參考。

建立互動順序

互動順序 是玩家可以與您的 UI 進行互動的順序。由於屏幕上通常有多個可互動的 UI 元素，因此建立直觀的互動順序對於幫助玩家在導航各種工作流程時做出決策非常重要。

工作流程中通常有三種類型的互動：

• 主要互動 – 玩家最有可能執行的動作。
• 次要互動 – 玩家可能會執行的替代主要動作。
• 第三互動 – 玩家最不可能執行的動作。

每種類型的互動必須根據玩家執行該動作的可能性具有不同程度的視覺強調。為了說明這一概念，請檢查以下示例激光標籤遊戲中選擇激光槍的工作流程的互動順序圖像，其中 A 代表主要互動，B 代表次要互動，C 代表第三互動。

在這個工作流程中，玩家最有可能執行的動作是選擇兩種不同類型的激光槍，因此激光槍按鈕比設計中的任何其他可互動元素都要大得多。這種視覺強調吸引了玩家的注意力，並將他們的目光引向整體 UI 元素的中間。在玩家做出決定後，工作流程中的邏輯下一步是確認他們的選擇並開始回合。因此，SELECT 按鈕直接位於主要互動的下方。

雖然不太可能，但玩家可能不知道他們可以選擇其中一個激光槍按鈕來表達他們想使用的激光槍。為了幫助這種情況，玩家可以利用兩個箭頭第三按鈕在選擇之間循環。這些按鈕是微妙的，並且比主要和次要互動的元素小得多，但對於需要指導的玩家來說，它們也是可感知的。

如果您將這些主要、次要和第三互動放置在不同的互動順序中，例如將 SELECT 按鈕與左箭頭按鈕互換，玩家將無法清楚地了解他們需要做出的選擇順序。因此，除了按鈕順序的視覺強調外，有效的工作流程遵循 視覺層次結構，引導玩家按照他們可能掃描信息的方向進行理想的決策順序，例如從上到下和從左到右。

在為您自己的遊戲建立工作流程的互動順序時，請考慮以下幾點：

• 玩家需要清楚了解何時可以與您的 UI 互動以執行動作。因此，建議您 為可互動的 UI 元素提供至少一種視覺反饋，例如在聚焦時顯示輪廓或改變按鈕的大小、顏色或動畫。
• 如果可互動的 UI 元素上的標籤模糊或在同一工作流程中彼此相似，玩家可能會誤解如何完成某個動作或過程。為了避免負面的玩家體驗，創建清晰、簡潔且彼此區分的標籤。
• 如果互動 UI 元素過大，可能會分散屏幕上其他重要信息的注意力。相反，如果它們過小，則可能難以閱讀或難以選擇，特別是在移動設備上如果它們靠得太近。因此，檢查您可互動的 UI 元素在各種屏幕尺寸上的大小是至關重要的。

在 在 Studio 中實現 中，您將學習如何使用 UIAspectRatioConstraint 對象來確保 UI 元素在玩家訪問您的遊戲時保持特定的長寬比。除了使您的設計過程更容易外，這種技術還可以幫助您滿足網頁內容可及性指南的 觸控目標大小和間距 建議，為互動 UI 元素創建至少 9x9 毫米的觸控區域。

確定文本系統

文本系統 是一組有關您 UI 中所有單詞的字體和樣式的規則，例如「始終加粗標題」或「在引用健康統計時使用綠色字體」。在設計過程的早期確定文本系統使您能夠擁有一個可以在整個遊戲中一致應用的結構，以便玩家在尋找所需信息時知道該期待什麼。

雖然文本系統可能會根據遊戲的類型或 3D 世界的要求而有所不同，但所有文本系統必須遵循的最重要規則是 確保您的所有 UI 文本清晰且易於閱讀。通過將此規則作為與您的文本系統相關的所有決策的基礎，您可以通過考慮玩家可能與您的文本互動的不同方式來改善玩家的可及性和用戶體驗，例如：

• 玩家可能使用的設備來訪問您的遊戲。
• 玩家可能閱讀的本地化文本的語言。
• 屏幕文本背後可能存在的背景。

例如，當玩家被標記出局時，以下屏幕響應設計根據玩家的設備縮放到較小或較大的字體大小，並在英語文本的兩側留有足夠的空間，以便容納翻譯較長的語言，並包含對比背景，以便玩家無論背景顏色如何都能閱讀文本。

在為您自己的遊戲確定文本系統時，請考慮以下幾點：

• 當文本與其背景的噪音混合時，閱讀會變得困難。為了提高 UI 的可讀性，在對比顏色上顯示文本或使用描邊。
• 如果您不為不同設備縮放文本，文本將佔用過多空間或在玩家的屏幕上變得小而難以辨認。為了捕捉文本中的差異，在設計過程中在多個設備上測試您的設計。
• 當您將單詞本地化為其他語言時，可能會超出您原始設計的範圍。為了改善設計的組成，參考文本在屏幕上可能佔用的最大空間。
• 雖然某些字體可以符合您遊戲的美學，但在大量文本中可能難以閱讀。因此，儘量少用風格化文本，例如用於標題或警報文本。

一旦您為 UI 的藝術風格制定了計劃，您就可以進入教程的下一部分，學習如何為各種玩家工作流程中的每個元素進行線框設計。