選擇一個藝術風格

選擇一種藝術風格 是設計您的 UI 元素的藝術方向的過程。 重要的是，選擇一種藝術風格，因為藝術風格提供視覺地面規則，您可以參考來確保您的 UI 提供對玩家的資訊是相當直觀的。

使用 示例雷射標籤體驗.rbxl 文件作為參考，這個用戶界面課程的這個部分會顯示您如何根據您的體驗類型設計您的 UI 元素的方法，包括指南：

• 根據您想要和玩體驗通信的內容，識別必要的 UI 元素。
• 選擇一個強化音樂類別的顏色主題，這使您的觀眾對音樂類別更有意圖地進行選擇。
• 提供一些簡單的圖示，即使是在任何尺寸的螢幕上也很容易讀取。
• 建立按鈕順序，以符合不同玩家工作流程的機率。
• 確定一個確保在目標裝置上可靠的文字系統。

完成此部分後，您將學會設計您想要與玩體驗通訊的資訊結構和流程。

識別您的 UI 元素

選擇一種藝術風格為您的 UI 時的第一個步驟是確定您需要的 UI 元素來溝通您想要與觀眾交流的各種資訊類型。 在設計過程的開始是關鍵，因為它允許您根據目標和玩家在每個 UI 元素上交互的地方來分類 UI 元素的功能目的。 並且計劃在您的體驗中重用 UI 元

有很多不同的方法可以讓您討論哪些 UI 元素是遊戲玩法需求的必要，但建議您從想像玩家加入您的體驗開始。例如，當玩家開啟示例雷射標籤體驗時，他們可能會提出以下問題：

• 體驗的目標是什麼？
• 我如何知道誰在我的團隊中？
• 我如何跟蹤我的團隊成績？
• 我如何選擇一個噴氣器？
• 我如何知道雷射射擊哪裡？
• 如果我在移動設裝置上，我要如何使用我的槍枝？
• 我射擊雷射後，可以在什麼時候再射擊？
• 我如何知道回合即將開始？
• 我如何知道我成功標記某人的噴氣槍時？
• 我如何知道敵方隊伍成功標記我？

使用這些問題來了解玩家成功的需求是什麼資訊，您可以將樣本雷射標籤體驗的 UI 需求分為三個類別：

1. 體驗目標的資訊。
2. 有關雷射的資訊。
3. 玩家狀態的信息。

將您的體驗的 UI 需要分類為類別是有幫助的，因為您可以在每個組合中形式化您的藝術風格，以強化每個類別需要傳授玩家的信息。例如，如果您想要您的 UI 告訴玩家關於角色健康狀態的行動，您可以選擇一種藝術風格，以優先考慮綠色和/或正向圖示以便玩家快速辨識

您排舉您的體驗的 UI 需求進行分類後，您可以創建一個需要滿足每個類別要求的 UI 元素清單。 要示範的範例雷射標籤體驗使用以下表格來處理每個類別的玩家問題。 當您通過此教學工作時，UI 教程會繼續以此清單來重要的設計決定來重要的設計決定。

現在您有一個清單的 UI 元素為您的體驗，是時候開始對每個群組的 UI 元素進行造型和語義選擇，從顏色主題開始。

選擇一個顏色主題

顏色主題 或顏色調色板是您使用體驗中一致應用的一種選擇，這些顏色通過在您的體驗中一致的應用來傳達訊息，例如使用明亮的顏色表示當前選項。應用顏色主題到您的UI元素是重要的，特別是您依賴體驗中的顏色約定，因為它讓玩家快速了解您的UI，並

在 環境藝術課程 中，每個半區域的雷射標籤環境都由上到下的視角來分辨地圖哪個區域附近的雷射標籤： mint

樣本雷射標籤體驗使用此同一顏色主題在其 UI 中展示與每個團隊相關的資訊，例如每個玩家的團隊指示器在 3D 空間中，或是環繞屏幕的團隊點追蹤器。這一一致性可以幫助玩家快速了解體驗目標的目標，特別是玩家在�������

選擇顏色主題為您自己的體驗時，請考慮以下方面：

• 顏色主題的力量基於幫助玩家在每個顏色和其功能之間建立快速的 mental 協會。因此， 將您的顏色主題限制為僅幫助玩家與您的 UI 元素 associates 。
• 為確保玩家失明可以理解您的顏色主題的訊息， 不要完全依賴顏色 來區分 UI 元素。相反，結合顏色和圖示、形狀和/或動畫來確保您的 UI 與每個玩家有效溝通。
• 您的用戶界面應該是最重要的，因為它直接影響用戶是否能夠清楚地讀取 3D 世界中的光源和黑暗源。因此， 盡量將簡單的 UI 優先 使用顏色，以便在光源和黑暗源之間保持閱讀。

為了突出上一點的指引，示例雷射標籤體驗使用黑白雙色的顏色來為大多數的 2D 螢幕元素覆蓋 2D 屏幕。黑色和白色的對比很好，因為它們是一個完整的閱讀模式，因此剩下的屏幕顯示的 3D 環境是一個完整的閱讀模式。

簡單地圖示

圖示是代表體驗中的一個動作、對物件或概念的符號。簡潔明快的圖示很重要，因為它讓玩家容易辨識自己能做的事和你想要傳達給他們的內容。這個過程對於使用移動設備上的小螢幕來存取體驗的觀眾尤為重要。這個

簡單的圖示通常會在您的 3D 元素上保持與您的整個體驗世界的區別，而且仍然與您的體驗世界的整體風格相協調。例如，在 環境藝術教程 的最終環境中，模組和佈件 3D 資產都有一種清潔、圓滑的形式，使用方形形��

要在保持獨一無二的藝術風格的同時，還能保持獨特，所有在此教學中學習的 UI 元素包含未來的美感和圓形角度，而不會與環境中的 3D 資產的形狀語言相匹配。這使每個圖示的意義與其他空間訊無處不在。

要示範此概念，請從示例雷射標籤體驗的衝擊箭頭告訴玩家其雷射發射在畫面上的位置，並且允許玩家在移動設備上射擊雷射。 兩個圖示都包含軟角度以與整個世界保持一致，但它們的六邊形和圓形形狀讓它們與任何玩家可以在體驗中協助他

當您為自己的體驗簡化圖示時，請考慮以下方面：

• 簡單的圖示即使是小，也能清楚地顯示。因此，在移動設備屏幕上顯示 您的圖示 的限制細節。
• 圖示是強大的，因為它們可以傳達訊息，不論玩家的語言。 在玩家對您的 UI 無法理解的情況下，用圖示取代不必要的文字來改善本地化努力。 * 許多體驗相同類型的體驗使用相同的圖示，例如代表力量的劍，或代表魔法的魔杯。 內含體驗的符號學在體驗中的體驗者可以了解您的圖示，而不需要額外的導引。 為玩家提供更清晰的體驗。

如果您不知道體驗的體驗類類別中哪些圖示是常見的，請查查看 《Game UI Database》。這是免費資源工具，可以包含來自數百個不同階級的遊戲截圖，您可以在設計過程中參考。

建立交互程序

互動順序 是玩家可以與您的 UI 互動的順序。隨著在屏幕上有多個可以互動的 UI 元素，因此很重要確立一個直觀的互動順序來幫助玩家做出決定，而不是在各種工作流程中嘗試。

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

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

每種互動類型都必須有不同的視覺強調等級，取決於玩家是否執行此操動作。為了說明此概念，請查看以下圖像的互動程序，以便為工作流程選擇示例雷射標籤體驗中的 Blaster，其中 A 代表主要互動，B 代表次要互動，C 代表第三互動。

在這個工作流程中，玩家最有可能執行的動作是選擇兩種不同類型的雷射之間，因此雷射按鈕比任何其他交互元素都大得多。這個視覺重點會吸引玩家的注意，並將他們的目光放在整個設計中的中間。 當玩家做出選擇後，工作流程的下一個直接步�

雖然不太可能，但玩家可能不知道他們可以選擇其中一個衝擊按鈕來溝通他們想要使用哪一個衝擊按鈕。 為了在這種情況下提供幫助，玩家可以使用兩個箭頭減級按鈕來在選擇之間採取行動。 這些按鈕是潛行的，但也是玩家

如果您將這些主要、次要和第三級互動放置在不同的互動順序中，例如將 SELECT 按鈕與左箭頭按鈕交換，玩家就沒有清晰的方向在選擇順序中所需要做的選擇。為此，在按鈕順序的視覺重點之外，有效的工作流程會跟隨一個 <

當建立自己的體驗中的交互順序時，請考慮以追蹤中內容：

• 玩家需要明確地了解當他們與您的 UI 互動時可以執行哪些操作。因此，建議您提供至少一種視覺反饋形式對互動可交互的 UI 元素，例如顯示側邊欄或變更按鈕大小、顏色或動畫當它在專注點上。
• 如果可交互元素上的標籤與其他玩家在同一個工作流程中模糊或相似，玩家可能會誤解如何完成一個操作或過程。為了避免負面玩家體驗，請創建清清除、明確、區別的標籤。 在標籤上建立清晰、明確、區別的標籤 。
• 如果互動使用者介面元素太大，它們可能會從其他重要信息上屏幕上分散。反之，如果它們太小，它們可能會很難讀取或選擇，尤其是在移動設備上靠近時。因此，為了此目的，您必須 檢視屏幕大小上的互動使用者介面元素大小 。

在 在 Studio 實現 中，您將學習如何使用 UIAspectRatioConstraint 對象來確保 UI 元素維持特定的外觀比例，無論玩家使用哪個設備來存取您的體驗。 此外，這種技術也可以幫助您達到 Web 內容可��

確定一個文字系統

文字系統 是一個關於字體和風格的規則組，包括「總是強調標題」或「使用綠色字體時參考健康狀態」等內容，這些內容可以在您的UI中的所有字體上使用。 早期在設計過程中確定文字系統可以讓您有一個可以一致在您的體驗中使用的結構，因此玩家可以

雖然文字系統可以依據體驗的階級或3D世界需求而變化，但所有文字系統必須遵守的最重要規則是 確保您的UI文字清晰和容易讀取 。通過使用此規則作為所有與文字系統相關的決策的基礎，您可以改善玩家閱讀您的UI時考慮到玩家與文

• 玩家可以使用設備來存取您的體驗。
• 玩家可以閱讀您的本地文字的語言。
• 可能在屏幕上的文字的背景。

舉例來說，當玩家被標記為退出時，畫面的回應設計將依照玩家的設裝置大小調整為更小或更大的字體尺寸，並且包含足夠的空間在兩個英文字元之間，以便能夠適應更長的文字語言，並且包含一個對稱的背景，以便玩家可以閱讀文字，無論是背景中的任何顏色。

當確定為自己的體驗選擇文字系統時，請考慮以下方面：

• 文字難以讀取，當它與背景的噪音混亂時。若要改善您的 UI 的可讀取度，請 在對比顏色上方顯示文字或使用一個線條顯示 。
• 如果您為不同的設備調整文字大小，文字會否佔太多空間或變小並且難以讀取在玩家的屏幕上。為了發現設計中的不合理，請在設計過程中在多個設備上測試您的設計。
• 您可以在本地化文字到其他語言時延伸您的原始設計。要改善您的設計的結構，請參閱「 在屏幕上您的文字可以佔用的空間 」。
• 雖然有些字體可以適合您的體驗的美感，但它們可能很難在大量讀取時讀取。因此， 使用體驗最佳化的文字 ，例如標題或警告文字。

一旦您有對 UI 元素樣式的計劃，就可以移動到下一個教學區塊，以學習如何在各種玩家工作流程中擷取每個元素的布局。