編寫您的設計圖

設計您的網路結構和流程是個過程，在各種工作流程中設計信息通過 UI 傳達的結構和流程。這個關鍵的教學步驟允許您在UI元素的結構上反覆使用，發現痛點，並改善玩家體驗，在您投資時間和資源在問題性設計中不起作用的情況下。 使用 示例雷射標籤體驗.rbxl 檔案作為參考，這個用戶界面課程的這個部分會顯示您如何在屏幕上結構您的 UI 元素，包括指南：

• 設計一個直觀地帶遊戲玩家到達成功的體驗所需的視覺階層。
• 使用基本形狀阻止 UI 元素來檢查您的 UI 元素和 Roblox 核心 UI 控控制的組合。
• 開發使用者流程來帶來玩家所需要的行動來達成他們的目標。

完成此部分後，您將學會在 Studio 中建立並設定您的 UI，以尊重您的藝術風格和網格。

設計視覺階級

視覺階層是一個組織結構，它以其重要度的順序顯示 UI 元素。 為您的體驗中不同的工作流程預定視覺階層是重要的，因為這會設置玩家以達成他們的目標，這是特히對於快速射擊體驗中的目標變更從一刻到另一刻非常重要。

有效的視覺階層可以指導玩家熟悉他們所需要的功能和信息，以便在屏幕上自然看來完成工作流程。例如，示例雷射標籤體驗的視覺階層必須指導玩家瀏覽地圖並標記玩家在敵方團隊伍上：

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

這些類別上的位置會在最終設計中的屏幕中顯示，以顯示其優先級：

• 第一個類別在 最上方 因為它包含有關遊戲勝利方式的最重要用戶界面元素。
• 第二類為屏幕空間的大部分，因為它們作為吸引玩家注意3D空間動畫的焦點，並且有最大意義為玩遊戲。
• 第三類是靠近 側邊 ，因為玩家可以閱讀這些邊緣資訊，而不會從遊遊玩體驗中分散注意力。

對於某些體驗類型，您只需要顯示一個類別的資訊，因為這是玩家在該工作流程中最重要的資訊類型。但對於第一人稱射擊體驗，玩家必須同時從多個類別的資訊中查看 UI 元素，因為它們提供了玩家需要成功的所有資訊，例如他們的團隊得分、冷卻期和是否被

計劃工體驗流程的視覺階層時，請考慮以下方面：

• 如果您在屏幕上將不同類別的 UI 元素組合在一起，玩家將不知道該尋找哪些內容。為了幫助玩家導航您的體驗，請 在同一類別中的 UI 元素群組 。
• 如果您在屏幕上有太多類別，玩家可能不知道要注意哪些信息。為了避免擁擠玩家，請在不同的工作流程上顯示 UI 元素上下文。
• 同樣地，如果每個類別有太多 UI 元素，它們可能會讓玩家無法理解完成一個行動或過程的方法。因此，重要的是要使用您的藝術風格為您的理想交互程序提供視覺重點。

對於樣本雷射標籤體驗的視覺階層進行全面檢視，請參閱下列表格：

在 UI 元素上方塊

現在您有了視覺階級的概念，您可以使用基本形狀在個別 UI 元素上方塊，以查看 Roblox 核心 UI 在多個設備上的核心 UI 配置。此過程允許您查看您需要修改的設計，以便在所有尺寸的設備上玩家都可以使用您的體驗，例如在移動、平板電腦、筆記本電腦和電視上。

在開始之前，您需要確認 Roblox 的核心 UI 中可用的螢幕空間是多少，並且考慮到 Roblox 的核心 UI。例如，在預設情況下，Roblox 會顯示以下 UI 元素在每個體驗中：

• 體驗內的玩家列表。
• 角色的生命值。
• 角色的背包。
• 聊天視窗。
• 一個捕捉按鈕。
• 一個流行的角色表情符號 popup 菜單。

您可以 禁用 任何這些不滿足自己體驗要求的元素，以儲存屏幕空間為您自己的體驗提供自訂 UI 。例如，示例雷射標籤體驗不需要背包，因為玩家只有一個能選擇的雷射標籖即可。但如果玩家能選擇多個雷標即

除了 Roblox 的核心使用者介面外，您還必須考慮 Roblox 的預設觸摸控制所需的屏幕空間。例如，當玩家使用移動設裝置存取您的體驗時，會在屏幕左下角顯示一個虛擬拇指棒，並在屏幕右下角顯示一個跳躍按鈕。這確保玩家能夠在任何時候瀏

通過考慮 Roblox 的核心 UI 元素對遊戲體驗的必要性，以及可能會發生的觸控控制，您可以在 一個設計 中將自訂 UI 元素塊在遊戲體驗上更新，這是適應設備間的重要因素。這很重要，因為它表示您不需要維護單獨的 UI 版本，而是在更新您的體驗

為了展示此方法，請查看以下兩個圖像，分別為移動和電腦裝置的自訂 UI 元素展示樣本雷射標籤體驗的方式。兩個圖像包括：

• 基本形狀代表自訂 UI 因為它讓設計容易通過幾個重複之前就可以達到最終設計。
• 為眼睛提供灰色色彩，讓它們可以跟隨資訊，而不會被彩色背景環境的分散
• 聊天窗口和玩家名單的開啟狀態，以便查看畫面上的空間使用率。
• 即使不是為 PC 裝置而設，也能為移動裝置控制提供空間。

當您考慮設計您的布局時，您可以考慮設計在同一時間多少個 UI 元素可以在屏幕上存在。這樣做可以為所有潛在的布局提供未來的保護，並且根據玩家的設備和工作流程來確定布局的未來。

當您為您的設計阻止 UI 元素時，請考慮以追蹤中方法：

• 您在 UI 中方塊的方式可以影響您的結構。 瞄準平衡和對稱 在您自訂 UI 元素的數量和大小上，以及 Roblox 的核心 UI 。
• 與某些移動和平板電腦裝置的底部角落很遠處的 UI 互動是不舒服或不可能的。 將互動元素放置在容易取得位置的區域附近， 靠近自然休息位置的拇指。
• 當玩家瀏覽您的環境時，3D空間可能會從您的畫面用戶界面中分散。 測試您的設計對於各種可能的背景背景進行測試，以確保您的畫面用戶界面元素保持清晰和可讀取。 有關多個設備上的 UI 元素設計和區塊的更多信息，請參閱 位置和尺寸 - 平台間因素。

開發使用者流程

使用者流程是玩家在體驗中完成任務的路線集，例如選擇一個武器、購買一個物道具或治療一個角色。使用者流程通常從玩家預期的位置開始，並且以最終行動或成就達成玩家所在位置的角色。此外，有效的使用者流程也會包含不尋常的路線，玩家可能想要自己完成這個目標。

下圖顯示玩家進入和玩用示例雷射標籤體驗的玩家的使用者流程。當玩家開啟體驗時，他們會加入大廳。如果回合尚未開始，他們會等待回合回合開始，否

開發玩家在您的體驗中可以做的一切的用戶流，因為這讓您評估他們想完成任務的地方和方式，並預測他們可以為任何跟隨自己路線的人帶來的痛點。例如，如果您開發額外的用戶流為示例雷射標籤體驗，玩家：

• 在不滿足最後條件之前退出一回合？
• 加入團隊伍時離開遊戲？
• 在回合中途接到電話？
• 連接到回合的連接斷開了，而且少於 15 秒？

通過視覺化所有潛在的行動、玩家可以執行或場景，您可以更好地確定UI元素的布局如何對玩家造成負面影響，然後在Studio中實現您的設計。如果任務感覺直觀、無妨礙、方便，玩家更有可能在您的體驗中花時間，並在稍後的日期回來。 如果任務感覺直觀、無妨礙、方便，玩

開發自己的體驗時，請考慮以追蹤中方面：

• 您想要玩家在您的體驗中做什麼，以及他們想要做什麼可能是完全不同的。最好將您的結構與多種玩家測試，以了解他們想要達到目標所需的路線。
• 流程圖可能會在圖形中嘗試捕捉多個場景，導致圖形難以讀取。為了將注意力集中在每個任務上， 將流程圖限制為一個主要任務 。
• 玩家是否使用觸摸控制、遊戲手柄或電腦滑鼠與您的體驗交互取決於是否使用。如果您正在設計為多個設備，請 為每個設備開發獨特的使用者流程 ，以便您可以識別痛點並簡化工作流程。

完成設計您的網格後，是時候來到 Studio 並為您的 UI 創造生命。