UI 和 UX 設計

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


使用者介面 (UI) 結合藝術的視覺設計和以傳訊為中心的信息設計,生成玩家互動的菜單、商店佈局、抬頭顯示器 (HUD) 和其他介面。使用者體驗 (UX) 涉及玩家如何與遊戲互動、如何表達他們的選擇,以及他們如何從一個選擇轉移到下一個選擇。雖然 UI 和 UX 通常協同工作,但 UX 更關注互動性和玩家的體驗,而不是 UI 的視覺和信息設計。

UI

UI 分享關鍵信息,例如生命值、任務目標和價格,讓玩家能夠做出決定並導航遊戲。因為它通常是遊戲與玩家溝通的主要方式,所以 UI 對玩家的體驗至關重要。設計不良的 UI 可能會使玩家感到困惑和沮喪,並導致低留存率,而設計精良的 UI 則可以促進參與度和變現。有效設計的 UI 運用以下原則:

  • 優先排序
  • 注意力
  • 視覺語言
  • 約定
  • 一致性

優先排序

首先分享最重要的信息稱為_信息層次結構_。這在玩家經常根據有限的信息集做出瞬時決策的遊戲中尤其重要。在優先排序 UI 時,確定對玩家體驗至關重要的內容,並確保它既可及且易於找到。考慮這些問題:

  • 玩家此刻正在做什麼?
  • 他們最需要知道或能訪問的最重要的事情是什麼?
  • 他們需要做出什麼選擇?
  • 他們需要什麼信息來做這些選擇?
  • 他們將多頻繁地參與這些選擇?

重要的信息和功能會根據玩家所扮演的角色、他們在 3D 世界中的位置以及他們持有的物品等因素發生變化。UI 可以設計成僅呈現符合上下文的信息——根據每個上下文中有用的內容更換按鈕和信息。這確保玩家始終擁有他們所需的內容,而不會被多餘的內容所困擾。

示例

不相關的元素可能會造成困惑和分散注意力。Spellbound RPG 擁有乾淨、簡約的 UI,這對於移動介面尤為重要,因為小屏幕很容易被過多的按鈕、螢幕和文本所淹沒。

未選擇的圓形 Items 按鈕的特寫,帶有棕色書本圖標。背景環境是棕色的泥土和一片雪。
Spellbound RPG 中未選擇的物品
選中的圓形 Items 按鈕的特寫,帶有棕色書本圖標,以及三個額外按鈕,分別代表技能、設備和玩家的牌組。額外按鈕僅在按鈕被選中時顯示。
Spellbound RPG 中選擇的物品

Super Striker League 中,玩家的互動取決於他們是否控制球。失去球權時,玩家可以衝刺和攔截以重新獲得控制權。一旦持球,按鈕會切換為假動作和傳球,使玩家能夠躲避對手並傳球。通過交替這些按鈕,UI 保持上下文的實用性,避免不必要的分心。

Super Striker League 中的上下文按鈕
Super Striker League 中的上下文按鈕

The Survival Game, 中,玩家需要注意他們的健康和飢餓狀態,並能快速訪問地圖、物品和工具。這些信息讓他們能夠做出決策並優先考慮生存行動。如果這些信息或工具難以找到或缺失,生存將變得更加艱難且不必要地沮喪。

The Survival Game 中的 HUD 特徵

注意力

儘管 UI 簡約、優先排序且具上下文,玩家仍可能需要幫助來找到他們所需的內容。UI 設計師可以使用多種視覺工具來捕捉和引導玩家的注意力,例如:

  • 顏色: 明亮的顏色比暗淡的顏色更能吸引注意。對關鍵文本、按鈕和其他元素使用鮮豔的色調,對不太重要的元素使用柔和的色調。這種對比增強了可見性並減少了干擾。
  • 大小: 較大的元素比較小的元素更引人注目且被認為更重要。
  • 空間: 包含大量負空間或填充的元素更容易引起注意。
  • 接近度: 分組的元素暗示了連結。通過將相關的特徵和物品放在一起,玩家可以理解它們之間的關聯,更容易找到它們。
  • 運動: 動畫元素引起注意。即便是微小的運動,也能使一個元素在靜態的元素中脫穎而出。粒子效果、晃動的按鈕和動畫箭頭通常用於指導的教程中。

使用這些工具時要適度。過度使用明亮和動態的元素可能會使玩家感到不知所措和困惑,而不是幫助他們。

示例

Jailbreak 的賽季通行證 UI 中,金黃色的條紋位於賽季通行證專屬圖標的下方,吸引注意力,並使其在視覺上與免費獎勵區分開來。

Jailbreak 的賽季通行證 UI

Dragon Adventures, 中,通過增加大小和分開更多的填充來優先展示最高價值的硬幣包,以區分它與較小的包。

Dragon Adventures 的硬幣包

Tower Defense Simulator 中,大小和接近度都被用來視覺性地分組和區分每日塔皮膚和每日箱子。

Tower Defense Simulator 中的商店

視覺語言

除了指引玩家的注意力到螢幕上最重要的元素外,UI 設計師還會開發視覺語言,幫助玩家理解他們所看到的內容。視覺語言是一套有意識且一致的設計選擇,以便讓玩家一目瞭然地了解元素的目的、狀態、關聯和相關性。這種語言由形狀、顏色和風格等工具組成。視覺語言的一些用途包括:

圖標

圖標可以利用視覺識別來傳達意義和聯繫。例如,與特定數據相關的圖標可能共享相同的顏色調色板和相似的形狀,使玩家能夠識別和理解其功能。

Winds of Fortune 中的玩家統計信息

按鈕

作為玩家輸入的一種常見形式,按鈕必須易於識別。將按鈕放置在容器中,例如圍繞文本或圖標的顏色,使它們與背景區分開來,使它們看起來是可以交互的。添加高光或陰影可以通過暗示 3D 深度來增強它們的觸感吸引力。

BotClash Simulator 中的按鈕

文本

包含重要高層級信息的標題和標題應大於正文文本且更粗體。應考慮在顯示背景顏色時高度可讀且對比良好的顏色。樣式選擇如顏色和粗體可以突出重要信息,例如遊戲內物品、統計或技能。在選擇字體時,始終優先考慮可讀性。

Winds of Fortune 中的服裝商店

一旦視覺語言被設計出來,就可以記錄在_樣式指南_中,這是一組規則和範例,以幫助團隊中的每個人理解如何在整個遊戲中一致地應用這種語言。

約定

約定是許多不同遊戲中普遍應用的設計選擇。一些例子包括:

  • 一個 X 符號的按鈕,按下時關閉對話框
  • 灰色應用於目前不可用的按鈕
  • 一個鎖定圖標覆蓋在按鈕或特徵上,以指示玩家尚未獲得或解鎖該特徵

鑒於其廣泛使用,玩家通常對這種約定非常熟悉。利用這種熟悉感可以使介面更直觀,減少對遊戲特定說明的需求。在你的目標類型中玩遊戲可以幫助識別玩家可能認識的約定。UI 設計師可能會選擇獨特的方法以更好地適應他們的遊戲,但了解這些約定可以幫助他們做出決策。

Arcane Odyssey 中綠色 "健康" 統計的一致性

一致性

無論 UI 設計師做出什麼決策,應該在整個遊戲中一致地應用它們。一致性有助於玩家更高效地學習導航遊戲,並避免困惑和沮喪。

以下是遊戲中 UI 一致性的一些示例:

  • "健康" 統計在所有文本、相關圖標和健康條中均以綠色顯示。
  • 任何 NPC 對話提到遊戲內物品時,均以粗體突出顯示。
  • 關閉按鈕始終是方形的、紅色的,並包含一個白色的 X,僅出現在對話框的右上角。
  • 當玩家無法負擔商店中的物品時,價格以紅色顯示。

這些選擇是故意的,旨在促進玩家的理解和導航。通過一致地應用它們,玩家能夠建立相關元素的聯繫、識別重要物品、發展肌肉記憶、迅速做出明智的選擇,並花更多時間沉浸在遊戲中。

UX

UX 設計涉及玩家如何與遊戲互動、如何表達他們的選擇,以及他們如何從一個選擇轉移到下一個選擇。儘管 UX 通常與使用者介面 (UI) 緊密合作,但它更關注互動性和玩家體驗,而不是 UI 的視覺和信息設計。

理解玩家

UX 設計師的主要目標是創建直觀、不干擾且方便玩家使用的互動和流。這一過程始於理解玩家本身,即遊戲的目標受眾。在識別遊戲的玩家時,考慮以下幾點:

  • 人口統計: 人口統計信息有助於通過揭示有關玩家群體的一般性信息來告知設計選擇。例如,年輕玩家通常更可能在移動設備或平板電腦上遊玩,而非個人電腦,因此針對該受眾的遊戲通常會優先設計和完善移動使用者體驗。

  • 經驗水平: 開發者可能會選擇為經驗較少的玩家、擁有相當經驗的玩家或介於兩者之間的玩家設計。對於經驗豐富的玩家來說,類似於點擊數字鍵以裝備工具欄中的物品或按 C 鍵來蹲下的互動,可能對於經驗不足的玩家來說並不明顯,並需要額外的提示或訓練。

  • 類型熟悉度: 這與一般經驗水平類似,類型熟悉度反映玩家對特定類型遊戲的經驗水平。率先流行的遊戲,如角色扮演、驚悚生存和第一人稱射擊類遊戲,可能會有許多以前玩過相似類型的潛在玩家。其他類型的遊戲可能會有較少的經驗玩家,但可以通過教程和可用性來克服這種經驗差距。

  • 遊玩風格: 玩家通常偏好特定類型的遊玩風格,範圍從競爭及成就收集到探索和合作。這些偏好不僅在玩家喜好的遊戲機制中體現,也影響 UX 決策。設計師考慮要優先關注哪些互動、要打磨哪些互動,以及要向玩家展示哪些互動。他們還考慮到玩家在進行這些互動時的心態以及他們希望從中激發的情感。

在考慮這些因素並選擇目標玩家群體(或群體)後,通過與他們見面、與他們一起遊玩以及了解他們的目標和偏好來深入了解他們,以更好地告知設計選擇。

設計互動

互動 是允許玩家在遊戲中體驗和表達他們選擇的特徵。UX 設計師希望這些互動是直觀的,並且需要盡量少的解釋。為此,他們利用:

  • 約定
  • 隱喻
  • 反饋

約定

約定 是玩家可能已經熟悉的 UX 設計和原則。

Mermaid Life 中的 "E" 接近提示

約定的例子包括:

  • Roblox 開發者使用的 "E" 接近提示,告訴玩家如果他們站得足夠近,某個物品是可以互動的。
  • "C" 鍵允許玩家的角色蹲下,這樣他們就可以在障礙物下躲避或進入狹小空間。
  • 數字鍵將物品從工具欄裝備到角色的手中以供使用。
  • 走入地面上的圓圈以排隊匹配。

約定在特定的實現或設計選擇因其易用性而變得流行時便會建立起來。例如,使用 "C" 鍵進行蹲下很容易記住,因為它是蹲下這個單詞的首字母,且與玩家用於導航的 WASD 鍵相鄰。這是一種方便且能迅速在壓力下執行的互動,這是因為躲藏或逃避即將來臨的威脅是蹲下的常見用例。

隱喻

隱喻 將一個抽象概念與更熟悉的概念聯繫起來,創造了一種理解的捷徑。在這個來自 Spellbound Wizard RPG 的例子中,施放魔法咒語的行為是通過從牌堆中抽牌來進行的。基於牌組的 UI/UX 將施法的抽象行為具象化,使其沒有現實表達,但玩家可以更輕鬆地相互理解並迅速理解。

Spellbound RPG 中施放的咒語作為卡片

反饋

遊戲與玩家之間的溝通稱為_反饋_。反饋幫助玩家了解他們所採取的行動。它有助於學習遊戲的運行方式,並增加讓功能使用起來更令人滿意的額外層次。反饋的一些例子包括:

  • 敵人播放其 "受擊" 反應動畫,以指示它已受到玩家武器的傷害
  • 按鈕變色以指示懸停、按下和釋放(被選中)狀態
  • 玩家完成購買時播放現金註冊的 "叮噹!" 音效
  • 當玩家完成任務目標時,進度條逐漸填滿

當反饋缺失或不足時,玩家可能不知道自己已經完成了什麼,無法理解效果是好是壞,甚至不知道他們正在使用的功能是否正常運行或出現錯誤。

設計流程

通常,玩家需要多次互動才能完成一個目標。UX 設計師關注玩家如何從一個行動或 UI 畫面或選擇導航到下一個,並確保這些路徑邏輯且方便。

例如,要在 Berry Avenue RP 中裝備一個物品,玩家必須:

  • 找到並點擊角色按鈕
  • 選擇一個物品類別(面部、頭部、頸部等)
  • 滾動找到感興趣的物品
  • 點擊該物品將其裝備到他們的角色上
  • 找到並點擊完成按鈕以退出角色自訂
Berry Avenue RP 中的角色自訂流程

這些步驟一起代表了角色自訂的流程。這個流程簡單明確,裝備物品所需的步驟盡可能少。因為玩家不需要執行多個操作或過多思考他們需要做什麼,這個流程的_摩擦_,即到達目標所需的努力,是很低的。

設計高效、低摩擦的流程需要對使用情境進行仔細考量。這些使用情境可以表達為玩家目標,例如:

  • 希望能快速修改角色
  • 修改時輕鬆找到物品
  • 在選擇前預覽物品
  • 選擇後容易移除物品

這些目標然後指導了功能的 UI 和 UX 設計:

  • 玩家通過 HUD 上的一個顯著按鈕訪問角色自訂功能,並能立即開始將物品裝備到其角色上
  • 標籤將物品分類為便捷類別,搜索字段允許玩家直接搜索物品
  • 物品立即在角色上預覽
  • 玩家可以通過再次點擊它以取消選擇,或在已裝備物品列表中點擊它來移除物品

設計師隨後可以開始布局 UI,計劃玩家完成修改角色目標的步驟。這一過程可以通過使用_流程圖_來輔助,該圖視覺呈現了玩家在導航 UI 時的行動。這些圖表可以幫助識別被忽視的步驟、步驟不清楚或不方便的痛點,以及過大的摩擦。

流程圖範例。
©2026 Roblox Corporation、Roblox、Roblox 標誌及 Powering Imagination 是我們在美國及其他國家地區的部分註冊與未註冊商標。