設計你的佈局 是設計您希望通過 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 變得生動了。