游戲技能樹系統怎么“長” ——全類型技能樹UI設計分析

文丨Poppy 騰訊互動娛樂 交互設計師

導語

本篇文章聚焦于技能樹的UI/UX設計。會從設計原則出發，拆解不同類型的技能樹結構，并結合經典案例分析技能樹系統的UI設計。

一、 前言

技能樹幾乎是所有 RPG、ACT、策略游戲的標配，但并非所有技能樹都好玩。它不僅僅是“升級 → 加點 → 數值變強”，更是玩法引導、玩家個性化構筑與世界觀敘事的重要載體。

對 UI/UX 來說，技能樹的意義在于：

1. 讓玩家快速理解可選項和成長方向；
2. 在視覺和交互層面傳遞“成長感”；
3. 提供清晰的決策支持。

二、 技能樹設計的核心原則

根據 GDKeys, 2020與 Number Analytics, 2025 的觀點，一棵有意義的技能樹需要滿足三個條件：

1. 有影響力的長期選擇：技能點投入應帶來長期且顯著的玩法變化，而非微弱增益。
2. 可表達個性：技能樹應支持不同成長路徑，讓玩家展現獨特風格。
3. 避免枯燥的數值堆疊：技能樹應避免純粹的百分比加成，保證選擇具有體驗差異。

三、技能樹的結構形態

1.線性型

線性型技能樹結構在許多劇情驅動或新手向游戲中廣泛采用，強調逐步引導玩家掌握玩法節奏。在UI設計上，通常采用分頁或分階段呈現的布局，并在未解鎖的劇情階段隱藏具體技能信息，以避免提前暴露內容、保持探索感。

最后生還者 2：需要隨著探索找到培訓手冊（Training Manual）來解鎖新的能力分支，逐條提升的線性流程。

戰神 4 ：奎爺的每種武器都有鏈式技能解鎖路徑，且有些技能只在獲得特別武器和特定劇情節點后才解鎖。

2.分支型

會分出互相獨立的路線，每條路線代表一種玩法/構筑方向。突出選擇與取舍，讓玩家在不同路線間構筑個性化成長方向。在UI呈現上，通常將多個分支放在同一視圖中，確保玩家能夠直觀感受到不同路線之間的對比與權衡。

地平線：分為潛行者、勇者、覓食者的平行分支。

刺客信條：奧德賽 ：同樣三大路線，獵人、戰士、刺客 ，有明確職業差異。

3.網狀型

多見于高自由度和長生命周期的游戲中，提供大量可組合的節點與路線，鼓勵玩家探索、嘗試多樣構筑。但需要提供額外的導航和信息引導以避免迷失。

流放之路：超大規模的被動技能網覆蓋角色各類屬性與玩法方向，玩家可從多個起點出發自由延伸路徑。

無盡空間:采用環狀科技樹結構，科技之間存在多重前置與互通關系，構成高度網狀的組合路線。

4.混合型

技能或能力解鎖不是單純依賴一個技能樹，而是與其他系統緊密綁定（例如武器制作、裝備進化）。

怪物獵人：世界: 武器制作系統與武器進化樹完全綁定，打造新武器推進技能或性能分支。

四、UX結構設計—成長方向引導

1.頁面結構

>>>線性布局

適用場景：單一路徑推進型技能，解鎖順序固定。

UI框架：Tab 聚焦一個技能路徑，節點按順序橫向或縱向排列。

[ 戰神 4 ]

>>>分支布局

適用場景：存在互相獨立的玩法路線或職業方向。

分支少時UI框架：直接并列呈現多個方向。

分支多時UI框架：會做分層級處理，設立集合頁去整合各方向，再進入分支顯示詳情。(這種情況在二級會做快捷切換頁簽處理）

[ 刺客信條：影 ]

[ 看門狗 ]

>>>網狀 / 混合布局

適用場景：技能關系復雜，允許跨方向連接，或與其他系統（如裝備、職業）交織。

網狀UI框架：節點平鋪布局通常配合全局鳥瞰與縮放/拖拽導航，以容納大量技能節點，并確保玩家能夠快速定位目標。此類布局還應提供邊界篩選或條件過濾功能，幫助玩家在復雜結構中高效查找所需節點。

[ 流放之路 ]

[ 無盡空間 ]

混型UI框架：在主干外增加分支或其他模塊入口，可快速跳轉至關聯入口。

[ 怪物獵人：世界 ]

2.節點設計與狀態感知

>>>節點分類

功能屬性分類：根據節點能力和屬性方向進行分類，幫助玩家快速定位方向。UI表現:根據分區顏色/圖標區分。

[ 地平線：西之絕境 ]

節點價值分類：按玩法影響程度劃分節點時，應在視覺層級和交互反饋上重點突出核心節點，讓玩家在瀏覽技能樹時第一時間捕捉到這些高價值目標，并產生明確的投入動機與解鎖期待感。UI表現:視覺層級圖標更突出，動效層級反饋更強烈。

核心節點-顯著改變玩法循環（新增動作、解鎖新機制）

增強節點-強化已有玩法（強度、范圍、持續時間等）

功能節點：非戰斗功能（經濟、探索、支援）

[ 賽博朋克2077 ]

[ 地平線：西之絕境 ]

節點狀態：

已解鎖：優先級-視覺層級最高，突出玩家成就。UI特征-高亮，在集合頁可顯示縮略圖或進度條，強化持續驅動力。

可解鎖：優先級-視覺層級第二，需引導玩家關注。UI特征-半高亮、輕動畫或預提示（閃爍、邊框呼吸）。

未解鎖：優先級-最低，明確表達置灰狀態。UI特征-灰階或鎖圖標。對于劇情相關或需要保密的節點，可隱藏詳細信息，僅顯示鎖定狀態。

[ 星戰絕地：隕落的武士團 ]

在集合頁層級，也可顯示縮略圖節點解鎖進度。

[ 看門狗2 ]

[ 刺客信條：影 ]

路徑狀態：

未解鎖—當技能樹節點關系錯綜復雜時，懸停節點可自動高亮與其相關的前置節點及連線，形成路徑提示，幫助玩家快速理解解鎖條件與依賴關系。

解鎖—當節點被成功解鎖后，其連接路徑隨之點亮形，提供進度的直觀可視化。

[ 星戰絕地：隕落的武士團 ]

3.節點卡片顯示

“節點卡片”本質是技能樹的“決策界面”，它要把價值、條件、狀態和視覺反饋濃縮到一個浮層里。

卡片基礎框架及狀態

[ 刺客信條：幻景 ]

此外，當技能節點數量較少時，也可用固定欄式展示（如側邊欄/底部欄），替代懸浮卡片，保證信息始終可見，減少頻繁點開的交互操作。

[ 黑神話：悟空 ]

五、視覺包裝

技能樹的視覺包裝不僅僅是信息呈現，它往往承載著世界觀氛圍與成長儀式感。優秀的案例會把技能樹本身做成一種“沉浸式的視覺隱喻”。

>>>星戰絕地：幸存者

玩家通過冥想進入技能樹：角色蹲下閉眼，石碑從地面生長而出。石碑的呈現與星戰中的古代遺跡元素相契合，賦予系統一種古老、原始、神圣的質感。

>>>刺客信條：奧德賽

技能樹以星象盤/星系圖的形式呈現。解鎖技能像是在點亮一顆星辰，整個技能盤逐漸鋪展成璀璨的星空。這種設計呼應了古希臘對星象、命運與神話的崇拜，使玩家的成長過程被賦予了命運指引與史詩感。（不過在使用時，因為過度強調視覺包裝，削弱了技能分支的直觀性和目標感，使功能傳遞相對模糊。需做好平衡！）

>>>全面戰爭：三國

每次講技能樹貌似都繞不開的案例，一顆真正的樹。技能樹以水墨樹枝的形式展開。每一個技能點都像枝干上的新芽，隨著成長逐漸蔓延成一棵繁茂的樹，營造出獨特的東方美學氛圍。

>>>冰汽時代

在《冰汽時代》中，技能樹以法典的形式呈現。每一次解鎖節點，都對應著簽署一條法律, 讓玩家感受到歷史見證與制度確立的儀式感。

>>>孤島驚魂3

在《孤島驚魂3》中，技能樹以紋身呈現。每次解鎖技能，角色手臂都會延展新的紋路，最終覆蓋全臂。玩家不僅獲得能力，直觀感受到角色形象的戰士身份的轉變，帶來原始、部落化的儀式感。

六、結束語

技能樹每一個節點都承載著抉擇，每一條分支都延伸著可能性。它既要清晰易懂，讓玩家不至于迷失在復雜系統里；又要富有儀式感，讓成長的過程本身成為一種沉浸。

而作為設計師，我們要做的，就是讓這棵樹既清晰可攀，又足夠動人。畢竟，玩家點亮的不只是技能，更是他們在游戲世界里的故事與足跡。

感謝閱讀，也希望這些案例和思考，能給大家下次的設計靈感帶來一些枝葉的生長。

參考

[1]GDKeys. (2020). Skill Tree Design Principles.

[2]Number Analytics. (2025). Game System Design Reports.

[3]Interface In Game. (n.d.). Retrieved from https://interfaceingame.com

[4]Assassin’s Creed Odyssey Skill Tree Showcase. (YouTube). Retrieved from

https://youtu.be/wDGhsxoRsfE?si=6pyUtGmoj8YD0FCv

[5]Total War Wiki – Reforms. Retrieved from https://totalwar.fandom.com/wiki/Reforms

Reddit. (2019). It takes 405 turns to get a full reform page. Retrieved from

https://www.reddit.com/r/totalwar/comments/c3kkn8/it_takes_405_turns_to_get_a_full_reform_page/

[6]Total War: Three Kingdoms Character Skill Tree Showcase. (YouTube). Retrieved from

https://youtu.be/DfK3zPyN038?si=WWgiSTTjTnqIPJX0

[7]Horizon Forbidden West Skill Tree Overview. (YouTube). Retrieved from

https://youtu.be/yVxW9bC6QmQ?si=6P4nUBegSBmfByVa

[8]Cyberpunk 2077 Perks & Attributes System. (YouTube). Retrieved from

https://youtu.be/4-KHSo_fVg4?si=SyCsfTaowPvsVhwP

[9]Ghost of Tsushima Skill Tree Demonstration. (YouTube). Retrieved from

https://youtu.be/XZhJF8evT_Y?si=tAR5vZCkquKZwsph

[10]Star Wars Jedi: Fallen Order Skill Tree Showcase. (YouTube). Retrieved from

https://youtu.be/zvzxs_rTauo?si=D6xgsbCoeCYJ0RhY

[11]Black Myth: Wukong – All Skill Tree Showcase. (YouTube). Retrieved from

https://www.youtube.com/watch?v=DAJhgMEGW8U

[12]Frostpunk – All Laws (Skill Tree Analogy). (YouTube). Retrieved from

https://youtu.be/X15ajN1IxAE?si=qOttDnZD4yWgJNu