選擇藝術風格

*此內容是使用 AI(Beta 測試版)翻譯,可能含有錯誤。若要以英文檢視此頁面,請按一下這裡

選擇藝術風格 是規劃您介面元素的美感方向的過程。與一種藝術風格開始設計過程是很重要的,因為藝術風格提供了視覺地圖規則,您可以參考以確保您的介面提供玩家關於他們在您體驗中可以做什麼的信息。

使用 樣本雷射標籤體驗.rbxl 檔案作為參考,本用戶介面課程的此部分向您展示如何根據體驗類型對您的 UI 元素進行有意義的決定,包括指導如何:

  • 依照您想對玩家通過整個體驗傳達的內容來識別必要的用戶介面元素。
  • 選擇一個顏色主題,強化與您的觀眾相關的顏色規範,使其直觀易懂。
  • 概述易於在任何畫面尺寸下辨認的簡單圖示。
  • 建立一個按鈕順序,符合不同玩家工作流程的可能性。
  • 確定一種文字系統,可確保目標裝置上的可讀性。

完成此部分後,您將學習如何設計通過體驗內的介面傳達給玩家的信息的結構和流程。

識別您的 UI 元素

選擇您介面上的藝術風格的第一步是確定您需要的 UI 元素,以傳達您想要傳達給觀眾的各種類型的資訊。在設計過程的開始進行這項工作非常重要,因為它可以讓您根據功能目的將 UI 元素分類,依照玩家將與每個 UI 元素互動的時間和地點做出意義決定,並計畫在您的體驗中重複使用 UI 元素。

有許多不同的方法來腦力激盪哪些 UI 元素對您的遊戲需求至關重要,但建議從盤算玩家在體驗加入時需要知道什麼開始。例如,當玩家開啟樣本雷射標籤體驗時,他們可能會問自己以下問題:

  • 體驗的目標是什麼?
  • 我如何知道誰在我的團隊中?
  • 我如何追蹤我團隊的分數?
  • 我如何選擇爆破器?
  • 我怎麼知道爆破器射出雷射的地方?
  • 如果我在移動裝置上,我如何射擊我的爆破器?
  • 在我射出雷射之後,我什麼時候可以再射出?
  • 我怎麼知道何時開始回合?
  • 我怎麼知道當我成功標記某人使用我的爆破器時?
  • 我怎麼知道敵方團隊成功標記我時?

透過使用這些問題來理解玩家成功所需的資訊,你可以將樣本雷射標籤體驗的介面需求分為三類:

  1. 有關體驗目標的資訊。
  2. 關於爆破器的資訊。
  3. 關於玩家狀態的資訊。

將體驗的使用者介面需求分類是有用的,因為您可以在每個分類周圍形式化您的藝術風格,以強化每個類別需要傳授給玩家的資訊。例如,如果您希望您的用戶介面告知玩家哪些行動可以關於他們角色的健康狀狀態,您可能會選擇一種將綠色和/或加號圖示優先的用戶介面元素風格,以便玩家快速識別他們的功能。

排序完經驗的使用者介面需求後,您可以創建每個類別的需求所需的使用者介面元素清單。為了展示,樣本雷射標籤體驗使用以下介面元素表來處理以前的潛在玩家問題列表。當您進行此教學時,介面教學課程會繼續參考此列表,並強調與每個類別的 UI 元素相關的主要設計決定。

類別使用者介面元素
關於體驗目標的資訊
  • 目標提示
  • 團隊點數追蹤器
  • 團隊指標
關於爆破器的資訊
  • 爆破器選擇器
  • 十字髮型
  • 命中標記
  • 冷卻計時器
  • 對於移動設備的射擊按鈕
關於玩家狀態的資訊
  • 當玩家加入或重新加入回合時,強制場地畫面顯示
  • 當玩家被標記退出時,重生屏幕
  • 當敵方玩家被標記時的指標

現在您已經擁有了體驗的 UI 元素清單,是時候開始為每個組合的 UI 元素做出風格和意義選擇了,從顏色主題開始。

選擇顏色主題

A 顏色主題 或顏色調色板是一組顏色,每個顏色都通過在體驗中一致應用傳達一個訊息,例如使用明亮的顏色來指示何時可選擇某些物品。將顏色主題應用於您的介面元素是很重要的,尤其是當您依賴體驗類別內的顏色規範時,因為它可以讓玩家快速理解您的介面,並付出最少的努力。

環境藝術課程 中,每半激光標籤環境的顏色來自頂向下的視圖來區分哪個區域的地圖靠近每個團隊的生成區: 薄荷 對於在地圖左側組裝的隊伍,和 玫瑰粉色 對於在地圖右側組裝的隊伍。這些特定顏色有用,因為它們是 互補 ,這意味著它們之間的對比很好,並且讓玩家輕鬆掃描環境並自我定位,無論他們面對建造築物的方向如何。

The door on the mint green side of the map.
淺藍綠色
The door on the carnation pink side of the map.
玫瑰粉色

樣本雷射標籤體驗會在介面使用相同的顏色主題來突出屬於每個團隊的資訊,例如每位玩家的團隊指示器在 3D 空間內,或是覆蓋屏幕的團隊點追蹤器。這種一致性可以幫助玩家在第一人稱射擊體驗快節奏的遊戲期間快速理解有關體驗目標的信息,特別是玩家在穿越環境時需要做出快速決定。

樣本雷射標籤體驗中的團隊點數追蹤預覽。

當選擇自己體驗的顏色主題時,請考慮以追蹤中因素:

  • 顏色主題的強度依賴於幫助玩家快速地將每種顏色和其功能進行聯繫。因此, 限制您的顏色主題 僅強調您希望玩家與您的介面元素關聯的關鍵信息。
  • 為了確保色盲玩家能夠理解您的顏色主題的訊息, 不要總是依靠顏色來區分UI元素 。取而代之,將顏色與圖示、形狀和/或動畫結合,以確保您的介面與每個玩家有效溝通。
  • 對您的使用者介面來說,讀取性更重要過美觀。因此, 優先考慮簡單的用戶介面 ,使用顏色來區分 3D 世界中的亮色和黑色元素。

為了強調最後一點中的指導方針,樣本雷射標籤體驗使用黑白中立顏色覆蓋2D螢幕的幾乎所有其他介面元素。黑色和白色對比很好,而且畫面上的其他部分顯示了彩色的 3D 環境,因此很容易讀取。

簡要說明圖示

圖示 是代表體驗中的動作、對物件或概念的符號。簡化和直觀的圖示很重要,因為最終結果讓玩家輕鬆認識他們能夠做什麼以及你想告訴他們的內容,而不需要使用文字,這可能會凌亂屏幕並吸引注意力離開重要內容。如果您的受眾使用移動設備上的小螢幕存取您的體驗,這個過程更為重要。

簡單的圖示應該具有與您的 3D 元素不同的風格,同時仍然補充您體驗的整體世界。例如,在 環境藝術課程 的最終環境中,兩種模組化和物件 3D 資產都有一種清潔、高科技的藝術風格,使用了長方形狀態的柔和圓弧角。從地板上的邊緣板到天花板上的近圓形窗戶,沒有任何東西包含鋒利的邊緣。

為了補充這種藝術風格,同時仍然保持獨特性,本教學中所學到的所有介面元素都包含未來主義的美感和圓角,而不匹配環境中的 3D 資產的形狀語言。這樣可以使每個圖示的意義與 2D 和 3D 空間中的其他資訊區分開來。

要展示此概念,請參閱以下兩張來自十字線標示的樣本雷射標籤體驗的圖像,告知玩家他們的爆破器在屏幕上射擊的位置,以及允許玩家在移動設備上射擊爆破器的按鈕。兩個圖示都包含軟角度,以便與整個世界保持一致,但它們的六角形和圓形形狀將它們與玩家在體驗中可能聯繫的任何東西區分開。

當為自己的體驗繪製簡單的圖示時,請考慮以追蹤中因素:

  • 簡單的圖示即使體積很小也可以讀取。因此, 限制你的圖示上的細節 ,這些細節在手機螢幕上將無法辨認。
  • 圖示很強大,因為無論玩家使用哪種語言,它們都能傳達訊息。只要不影響玩家對您的 UI 理解, 將不需要的文字替換為圖示 來提高本地化努力。
  • 許多相同類別的經驗使用具有相似風格的圖示,例如代表力量的劍圖示或代表魔法的杯子圖示。 擁抱你體驗類別內的象徵符號 讓玩家無需額外指引即可理解你的圖示。

如果您不知道哪些類型的圖示在體驗類別中最常見,請查看 遊戲用戶介面資料庫。用於 UI 設計師的免費資源工具包括來自不同類別的數百個遊戲的截圖,您可以在設計過程中參考。

建立互動訂單

一個 互動順序 是玩家與您的介面可以進行互動的順序。由於畫面上經常有多個可互動的使用者介面元素,因此建立直觀的互動順序很重要,以幫助玩家在瀏覽各種工作流程時做出決定。

一般來說,工作流程中有三種類型的互動:

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

每種互動類型必須有不同的視覺強調程度,取決於玩家是否有可能執行該動作。為了說明這個概念,請查看以下圖像的工作流程互動訂單,選擇樣本雷射標籤體驗中的爆破器,其中 A 代表主要互動、B 代表次要互動、C 代表第三互動。

在此工作流程中,玩家最可能執行的行動是選擇兩種不同類型的爆破器之一,因此爆破器按鈕比設計中的其他可互動元素要大得多。這種視覺強調的水平吸引玩家的注意力,將他們的眼睛帶到整體 UI 元素的中心。玩家做出決定之後,工作流程的下一步驟是確認他們的選擇並開始回合。因此,選擇按鈕直接位於主要互動之下。

雖然不太可能,玩家可能不知道他們可以選擇一個爆破按鈕來通知他們想使用哪個爆破器。為了在這種情況下提供幫助,玩家可以使用兩個箭頭三級按鈕來在選擇之間循環。這些按鈕微妙且比主要和次要互動元素小得多,但它們也是可以讓玩家感知的,告訴他們他們能夠執行哪些行動。

如果您將這些主要、次要和支援互動放置在不同的互動順序中,例如將 SELECT 按鈕與左箭頭按鈕交換,玩家將無法清楚地確定他們需要做的選擇順序。因此,除了按鈕順序的視覺強調外,有效的工作流程會遵循一個 視覺階層 ,引導玩家通過他們可能掃描資訊的方向來進行理想的決策順序,例如從上到下和左到右。

這設計的成功在於,對於熟悉左至右和右至左語言的玩家來說,這是自然的!

當在自己的體驗中設定工作流程的互動順序時,請考慮以追蹤中因素:

  • 玩家需要清楚地理解何時可以與您的介面互動執行操作。因此,建議 為互動用戶介面元素提供至少一種視覺反饋形式 ,例如顯示輪廓或在焦點時變更按鈕的大小、顏色或動畫。
  • 如果可互動的使用者介面元素上的標籤模棉或相似於同一工作流程中的其他標籤,玩家可能會誤解如何完成一個行動或過程。為了避免負面玩家體驗, 創建清清除、明確且與其他不同的標籤
  • 如果互動用戶介面元素過大,它們可能會分散屏幕上其他重要信息。相反,如果它們太小,可能難以閱讀或選擇,尤其是在移動設備上靠近時。因此,必須 檢查各種畫面尺寸下您互動的 UI 元素的大小

在工作室中實裝 中,您將學習如何使用 UIAspectRatioConstraint 對象來確保介面元素保持特定的比例,無論玩家使用哪種裝置存取您的體驗。除了讓您的設計過程變得更簡單外,這種技巧也可以幫助您遵守網站內容無障礙指引的 觸摸目標尺寸和間距 建議,創建一個在移動設備上至少為 9x9 毫米的互動用戶介面區域。

決定文字系統

A 文字系統 是一組關於字體和風格的規則,適用於您介面上所有的字詞,例如「永遠使用粗體標題」或「在引用健康狀態時使用綠色字體」。在設計過程的早期決定文字系統,可以讓您擁有一個結構,可以在整個體驗過程中一致應用,讓玩家知道在尋找他們需要的資訊時應該期待什麼。

雖然文字系統可以根據體驗類型或3D世界需求而變化,但所有文字系統必須遵循的最重要規則是 確保所有的用戶介面文字清晰且易於閱讀 。使用此規則作為與文字系統相關的所有決定的基礎,您可以考慮玩家與您的文字互動的不同方式來改善玩家閱讀您的介面的可訪問性和用戶體驗,例如:

  • 裝置玩家可以使用來存取您的體驗。
  • 玩家可以閱讀本地化文字的語言。
  • 在畫面上的文字背後的可能基礎背景。

例如,當玩家被標籤時的下列螢幕回應設計會依據玩家的裝置縮放到較小或較大的字體尺寸,包含英文文字兩側足夠的空間以容納長翻譯的語言,並包含對比背景,因此玩家無論背景顏色是什麼,都可以閱讀文字。

當決定為自己的體驗設置文字系統時,請考慮以追蹤中因素:

  • 文字在融入其背景噪音時難以閱讀。為了改善您的介面使用者介面的可讀性, 在對比色上顯示文字或使用線條
  • 如果您未對文字進行不同裝置的縮放,文字將占用過多空間或在玩家的屏幕上變得模糊和難以辨認。若要檢查文字中的差異, 在設計過程中測試您的設計在多個裝置上 整個設計過程。
  • 當你將它們本地化到其他語言時,單詞可以超出原始設計,擴展到其他語言。要改善設計的組成, 參考你的文字在畫面上可以佔用最多空間
  • 雖然有些字體可以滿足您的體驗美感,但它們可能難以以大量讀取。因此, 以簡潔的方式使用裝飾文字 ,例如用於標題或警告文字。

一旦您有了UI的藝術風格計畫,您可以進入教學的下一部分來學習如何在各種玩家工作流程中設計每個元素的布局。