線框化你的佈局 是設計你希望通過 UI 在各種工作流程中傳達的信息的結構和流程的過程。這個教程的關鍵步驟使你能夠對 UI 元素的排列進行迭代，發現痛點，並在你投入時間和資源於一個不適合你遊戲的有問題的設計之前改善玩家的體驗。
使用 示例激光標籤遊戲 .rbxl 文件作為參考，本部分的用戶界面課程向你展示如何在屏幕上結構化你的 UI 元素，包括以下指導：
- 為你的 UI 計劃一個視覺層次結構，直觀地引導玩家找到他們在遊戲中成功所需的功能和信息。
- 使用基本形狀封鎖 UI 元素，以便檢查你的 UI 元素與 Roblox 的核心 UI 和觸控控制的組合。
- 開發用戶流程，以考慮玩家為達成目標所需採取的必要行動。
完成本部分後，你將學會如何在 Studio 中構建和配置你的 UI，以符合你的藝術風格和線框設計。
計劃視覺層次結構
視覺層次結構是一種組織結構，通過其重要性順序突出 UI 元素。為你遊戲中的不同工作流程計劃視覺層次結構是重要的，因為它為玩家成功完成目標奠定了基礎，這在第一人稱射擊遊戲的快速遊玩中尤其必要，因為目標會隨時變化。
有效的視覺層次結構引導玩家通過他們需要的功能和信息，以滿足你的遊戲需求，根據他們自然在屏幕上查看的地方來完成工作流程。例如，示例激光標籤遊戲的視覺層次結構必須引導玩家通過以下類別的 UI 元素，當他們在地圖上導航並標記敵隊玩家時：
- 有關遊戲目標的信息。
- 有關激光槍的信息。
- 有關玩家狀態的信息。
這些類別在最終設計中在屏幕上的位置突出了它們的重要性順序：
- 第一類別位於 頂部，因為它包含對於如何贏得遊戲最重要的 UI 元素。
- 第二類別佔據了屏幕大部分空間，位於 中間，因為它作為焦點吸引玩家的注意力到 3D 空間中的動作，並且對於遊戲的進行最為重要。
- 第三類別位於 側邊，因為玩家可以在不分散注意力的情況下閱讀這些周邊信息。
對於某些遊戲類型，你只需要一次顯示一類信息，因為在該工作流程中這是唯一對玩家重要的信息。然而，對於第一人稱射擊遊戲，玩家需要同時看到來自多個類別的 UI 元素，因為它們都提供玩家成功所需的信息，例如他們的隊伍得分、激光槍的冷卻時間，以及他們是否被標記出局。
在為你自己遊戲的工作流程計劃視覺層次結構時，考慮以下幾點：
- 如果你將來自不同類別的 UI 元素在屏幕上分組，玩家將不知道該在哪裡尋找他們所需的東西。為了幫助玩家導航你的遊戲，將來自同一類別的 UI 元素分組在一起。
- 如果屏幕上同時有太多類別，玩家可能不知道他們需要關注哪些信息。為了避免讓玩家感到困惑，根據不同的工作流程上下文顯示 UI 元素。
- 同樣，如果每個類別的 UI 元素過多，可能會分散玩家對如何完成某個動作或過程的理解。因此，重要的是要利用你的藝術風格為理想的互動順序提供視覺強調。
有關示例激光標籤遊戲的視覺層次結構的完整回顧，請參見以下表格：
| 類別 | UI 元素 | 視覺層次結構 |
|---|---|---|
| 有關遊戲目標的信息 |
|
|
| 有關激光槍的信息 |
|
|
| 有關玩家狀態的信息 |
|
|
有關在屏幕上優先考慮 UI 元素的更多信息，請參見 UI & UX 設計。
封鎖 UI 元素
現在你已經有了視覺層次結構的概念，你可以使用基本形狀封鎖單個 UI 元素，以便檢查你的自定義 UI 佈局與 Roblox 的核心 UI 在多個設備上的組合。這個過程使你能夠看到你需要在哪裡修改設計，以便在玩家可以用來訪問你的遊戲的所有屏幕尺寸上都有效，例如在移動設備、平板電腦、筆記本電腦和電視屏幕上。
在開始之前，你需要弄清楚在考慮到 Roblox 的核心 UI 時，你的自定義 UI 元素可用的屏幕空間有多少。例如，默認情況下，Roblox 在每個遊戲中顯示以下 UI 元素：
- 遊戲中的玩家列表。
- 角色的生命值條。
- 角色的背包。
- 聊天窗口。
- 捕捉按鈕。
- 角色表情的彈出菜單。
你可以 禁用 任何不符合你自己遊戲的遊玩需求的元素，以節省自定義 UI 的屏幕空間。例如，示例激光標籤遊戲不需要背包，因為玩家只能選擇一把激光槍。然而，如果玩家可以同時選擇多把激光槍，則遊戲可以禁用這個核心 UI，以確保在玩家重生時始終有空間供激光槍選擇器使用，然後提供另一個位置來從你的庫存中選擇。
除了 Roblox 的核心 UI，你還必須考慮 Roblox 的默認觸控控制所需的屏幕空間。例如，當玩家使用移動設備訪問你的遊戲時，虛擬搖桿會顯示在屏幕的左下角，跳躍按鈕會顯示在屏幕的右下角。這確保玩家始終能夠導航你的遊戲，即使他們沒有訪問鍵盤或控制器。
通過考慮 Roblox 的核心 UI 元素對於你的遊戲的遊玩是必要的，以及觸控控制的可能性，你可以在 一個設計 中封鎖你的自定義 UI 元素，這在各種設備上都是自適應的。這一點很重要，因為這意味著在你更新遊戲時，你不需要維護 UI 的不同版本。
為了演示這種方法，請查看以下兩張圖片，展示示例激光標籤遊戲如何為移動和 PC 設備封鎖自定義 UI 元素。這兩張圖片都包括：
- 基本形狀來表示自定義 UI，因為它允許設計在達到最終設計之前輕鬆經過幾次迭代。
- 灰階著色使眼睛能夠跟隨信息，而不會被多彩的背景環境分散注意力。
- 聊天窗口和活躍玩家列表的開放狀態，以查看它們在屏幕上佔據的空間。
- 即使對於 PC 設備不必要的情況下，也為移動控制留出空間。
當你以這種方式設計佈局時，考慮到同時可以存在的 UI 元素數量，你正在為所有潛在的佈局做好未來準備，根據玩家的設備和工作流程。
在為你的佈局封鎖 UI 元素時，考慮以下幾點：
- 你封鎖 UI 的位置和方式會影響佈局的組合。追求平衡和對稱，使你的自定義 UI 元素與 Roblox 的核心 UI 的數量和大小相匹配。
- 與某些移動和平板設備的底部角落相距較遠的 UI 互動要麼不舒服，要麼不可能。將互動元素放置在易於到達的區域，靠近拇指的自然休息位置。
- 當玩家在你的環境中導航時，3D 空間可能會分散他們對屏幕上 UI 的注意力。在各種可能的背景下測試你的佈局，以確保你的屏幕上 UI 元素保持清晰可讀。
開發用戶流程
用戶流程是一組玩家可以在遊戲中完成任務的路徑，例如選擇武器、購買物品或治療角色。用戶流程通常從你預期玩家開始任務的地方開始，並以玩家在任務結束時達到的最終行動或成就結束。此外，有效的用戶流程還考慮到玩家可能希望自行採取的非典型路徑，以達成相同的目標。
以下流程圖顯示了玩家進入並玩示例激光標籤遊戲的用戶流程。當玩家打開遊戲時，他們加入一個大廳。如果回合尚未開始，他們會等待回合循環開始，否則他們會加入當前正在玩遊戲的隊伍。如果結束條件尚未滿足，例如達到時間限制或每隊標記出 10 名玩家，則玩家選擇他們的激光槍，並體驗標記或被敵隊標記的主要遊戲過程，在競技場中裝備新的激光槍，或在被標記出局後重生。一旦玩家滿足結束條件，他們完成回合並再次加入大廳。
為玩家在你的遊戲中可以做的所有事情開發用戶流程是重要的，因為這使你能夠評估你希望他們如何完成任務，並預測你可以在哪裡減輕任何遵循自己路徑的人的痛點。例如，如果你要為示例激光標籤遊戲開發額外的用戶流程，當玩家：
- 在結束條件滿足之前退出回合時會發生什麼？
- 在加入隊伍時離開遊戲？
- 在回合中途接到電話？
- 在回合中斷連接少於 15 秒？
通過可視化玩家在完成任務時可以採取的所有潛在行動或可能發生的場景，你可以更好地確定 UI 元素的佈局如何對他們的體驗產生負面影響，然後在將設計實施到 Studio 之前進行調整。如果任務感覺直觀、不突兀且方便，玩家更有可能在你的遊戲中花時間，並在以後的日期回來。
在為你自己的遊戲開發用戶流程時，考慮以下幾點：
- 你希望玩家在你的遊戲中做的事情和他們想做的事情可能完全不同。最好是與多種類型的玩家測試你的佈局，以了解他們希望採取的路徑以達成目標。
- 流程圖如果試圖在圖表中同時捕捉多個場景，可能會變得難以閱讀且無效。為了專注於每個任務，將流程圖限制為一次一個主要任務。
- 互動模式因玩家使用觸控控制、遊戲手柄或電腦鼠標與你的遊戲互動而異。如果你正在為多個設備設計，為每個設備開發獨特的用戶流程，以便識別痛點並簡化工作流程。
在你最終確定線框設計後，是時候進入 Studio 使你的 UI 變得生動。