文丨Poppy 騰訊互動(dòng)娛樂(lè) 交互設(shè)計(jì)師

導(dǎo)語(yǔ)

本篇文章聚焦于技能樹(shù)的UI/UX設(shè)計(jì)。會(huì)從設(shè)計(jì)原則出發(fā)，拆解不同類型的技能樹(shù)結(jié)構(gòu)，并結(jié)合經(jīng)典案例分析技能樹(shù)系統(tǒng)的UI設(shè)計(jì)。

一、 前言

技能樹(shù)幾乎是所有 RPG、ACT、策略游戲的標(biāo)配，但并非所有技能樹(shù)都好玩。它不僅僅是“升級(jí) → 加點(diǎn) → 數(shù)值變強(qiáng)”，更是玩法引導(dǎo)、玩家個(gè)性化構(gòu)筑與世界觀敘事的重要載體。

對(duì) UI/UX 來(lái)說(shuō)，技能樹(shù)的意義在于：

1. 讓玩家快速理解可選項(xiàng)和成長(zhǎng)方向；
2. 在視覺(jué)和交互層面?zhèn)鬟f“成長(zhǎng)感”；
3. 提供清晰的決策支持。

二、 技能樹(shù)設(shè)計(jì)的核心原則

根據(jù) GDKeys, 2020與 Number Analytics, 2025 的觀點(diǎn)，一棵有意義的技能樹(shù)需要滿足三個(gè)條件：

1. 有影響力的長(zhǎng)期選擇：技能點(diǎn)投入應(yīng)帶來(lái)長(zhǎng)期且顯著的玩法變化，而非微弱增益。
2. 可表達(dá)個(gè)性：技能樹(shù)應(yīng)支持不同成長(zhǎng)路徑，讓玩家展現(xiàn)獨(dú)特風(fēng)格。
3. 避免枯燥的數(shù)值堆疊：技能樹(shù)應(yīng)避免純粹的百分比加成，保證選擇具有體驗(yàn)差異。

三、技能樹(shù)的結(jié)構(gòu)形態(tài)

1.線性型

線性型技能樹(shù)結(jié)構(gòu)在許多劇情驅(qū)動(dòng)或新手向游戲中廣泛采用，強(qiáng)調(diào)逐步引導(dǎo)玩家掌握玩法節(jié)奏。在UI設(shè)計(jì)上，通常采用分頁(yè)或分階段呈現(xiàn)的布局，并在未解鎖的劇情階段隱藏具體技能信息，以避免提前暴露內(nèi)容、保持探索感。

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

戰(zhàn)神 4 ：奎爺?shù)拿糠N武器都有鏈?zhǔn)郊寄芙怄i路徑，且有些技能只在獲得特別武器和特定劇情節(jié)點(diǎn)后才解鎖。

2.分支型

會(huì)分出互相獨(dú)立的路線，每條路線代表一種玩法/構(gòu)筑方向。突出選擇與取舍，讓玩家在不同路線間構(gòu)筑個(gè)性化成長(zhǎng)方向。在UI呈現(xiàn)上，通常將多個(gè)分支放在同一視圖中，確保玩家能夠直觀感受到不同路線之間的對(duì)比與權(quán)衡。

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

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

3.網(wǎng)狀型

多見(jiàn)于高自由度和長(zhǎng)生命周期的游戲中，提供大量可組合的節(jié)點(diǎn)與路線，鼓勵(lì)玩家探索、嘗試多樣構(gòu)筑。但需要提供額外的導(dǎo)航和信息引導(dǎo)以避免迷失。

流放之路：超大規(guī)模的被動(dòng)技能網(wǎng)覆蓋角色各類屬性與玩法方向，玩家可從多個(gè)起點(diǎn)出發(fā)自由延伸路徑。

無(wú)盡空間:采用環(huán)狀科技樹(shù)結(jié)構(gòu)，科技之間存在多重前置與互通關(guān)系，構(gòu)成高度網(wǎng)狀的組合路線。

4.混合型

技能或能力解鎖不是單純依賴一個(gè)技能樹(shù)，而是與其他系統(tǒng)緊密綁定（例如武器制作、裝備進(jìn)化）。

怪物獵人：世界: 武器制作系統(tǒng)與武器進(jìn)化樹(shù)完全綁定，打造新武器推進(jìn)技能或性能分支。

四、UX結(jié)構(gòu)設(shè)計(jì)—成長(zhǎng)方向引導(dǎo)

1.頁(yè)面結(jié)構(gòu)

>>>線性布局

適用場(chǎng)景：?jiǎn)我宦窂酵七M(jìn)型技能，解鎖順序固定。

UI框架：Tab 聚焦一個(gè)技能路徑，節(jié)點(diǎn)按順序橫向或縱向排列。

[ 戰(zhàn)神 4 ]

>>>分支布局

適用場(chǎng)景：存在互相獨(dú)立的玩法路線或職業(yè)方向。

分支少時(shí)UI框架：直接并列呈現(xiàn)多個(gè)方向。

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

[ 刺客信條：影 ]

[ 看門(mén)狗 ]

>>>網(wǎng)狀 / 混合布局

適用場(chǎng)景：技能關(guān)系復(fù)雜，允許跨方向連接，或與其他系統(tǒng)（如裝備、職業(yè)）交織。

網(wǎng)狀UI框架：節(jié)點(diǎn)平鋪布局通常配合全局鳥(niǎo)瞰與縮放/拖拽導(dǎo)航，以容納大量技能節(jié)點(diǎn)，并確保玩家能夠快速定位目標(biāo)。此類布局還應(yīng)提供邊界篩選或條件過(guò)濾功能，幫助玩家在復(fù)雜結(jié)構(gòu)中高效查找所需節(jié)點(diǎn)。

[ 流放之路 ]

[ 無(wú)盡空間 ]

混型UI框架：在主干外增加分支或其他模塊入口，可快速跳轉(zhuǎn)至關(guān)聯(lián)入口。

[ 怪物獵人：世界 ]

2.節(jié)點(diǎn)設(shè)計(jì)與狀態(tài)感知

>>>節(jié)點(diǎn)分類

功能屬性分類：根據(jù)節(jié)點(diǎn)能力和屬性方向進(jìn)行分類，幫助玩家快速定位方向。UI表現(xiàn):根據(jù)分區(qū)顏色/圖標(biāo)區(qū)分。

[ 地平線：西之絕境 ]

節(jié)點(diǎn)價(jià)值分類：按玩法影響程度劃分節(jié)點(diǎn)時(shí)，應(yīng)在視覺(jué)層級(jí)和交互反饋上重點(diǎn)突出核心節(jié)點(diǎn)，讓玩家在瀏覽技能樹(shù)時(shí)第一時(shí)間捕捉到這些高價(jià)值目標(biāo)，并產(chǎn)生明確的投入動(dòng)機(jī)與解鎖期待感。UI表現(xiàn):視覺(jué)層級(jí)圖標(biāo)更突出，動(dòng)效層級(jí)反饋更強(qiáng)烈。

核心節(jié)點(diǎn)-顯著改變玩法循環(huán)（新增動(dòng)作、解鎖新機(jī)制）

增強(qiáng)節(jié)點(diǎn)-強(qiáng)化已有玩法（強(qiáng)度、范圍、持續(xù)時(shí)間等）

功能節(jié)點(diǎn)：非戰(zhàn)斗功能（經(jīng)濟(jì)、探索、支援）

[ 賽博朋克2077 ]

[ 地平線：西之絕境 ]

節(jié)點(diǎn)狀態(tài)：

已解鎖：優(yōu)先級(jí)-視覺(jué)層級(jí)最高，突出玩家成就。UI特征-高亮，在集合頁(yè)可顯示縮略圖或進(jìn)度條，強(qiáng)化持續(xù)驅(qū)動(dòng)力。

可解鎖：優(yōu)先級(jí)-視覺(jué)層級(jí)第二，需引導(dǎo)玩家關(guān)注。UI特征-半高亮、輕動(dòng)畫(huà)或預(yù)提示（閃爍、邊框呼吸）。

未解鎖：優(yōu)先級(jí)-最低，明確表達(dá)置灰狀態(tài)。UI特征-灰階或鎖圖標(biāo)。對(duì)于劇情相關(guān)或需要保密的節(jié)點(diǎn)，可隱藏詳細(xì)信息，僅顯示鎖定狀態(tài)。

[ 星戰(zhàn)絕地：隕落的武士團(tuán) ]

在集合頁(yè)層級(jí)，也可顯示縮略圖節(jié)點(diǎn)解鎖進(jìn)度。

[ 看門(mén)狗2 ]

[ 刺客信條：影 ]

路徑狀態(tài)：

未解鎖—當(dāng)技能樹(shù)節(jié)點(diǎn)關(guān)系錯(cuò)綜復(fù)雜時(shí)，懸停節(jié)點(diǎn)可自動(dòng)高亮與其相關(guān)的前置節(jié)點(diǎn)及連線，形成路徑提示，幫助玩家快速理解解鎖條件與依賴關(guān)系。

解鎖—當(dāng)節(jié)點(diǎn)被成功解鎖后，其連接路徑隨之點(diǎn)亮形，提供進(jìn)度的直觀可視化。

[ 星戰(zhàn)絕地：隕落的武士團(tuán) ]

3.節(jié)點(diǎn)卡片顯示

“節(jié)點(diǎn)卡片”本質(zhì)是技能樹(shù)的“決策界面”，它要把價(jià)值、條件、狀態(tài)和視覺(jué)反饋濃縮到一個(gè)浮層里。

卡片基礎(chǔ)框架及狀態(tài)

[ 刺客信條：幻景 ]

此外，當(dāng)技能節(jié)點(diǎn)數(shù)量較少時(shí)，也可用固定欄式展示（如側(cè)邊欄/底部欄），替代懸浮卡片，保證信息始終可見(jiàn)，減少頻繁點(diǎn)開(kāi)的交互操作。

[ 黑神話：悟空 ]

五、視覺(jué)包裝

技能樹(shù)的視覺(jué)包裝不僅僅是信息呈現(xiàn)，它往往承載著世界觀氛圍與成長(zhǎng)儀式感。優(yōu)秀的案例會(huì)把技能樹(shù)本身做成一種“沉浸式的視覺(jué)隱喻”。

>>>星戰(zhàn)絕地：幸存者

玩家通過(guò)冥想進(jìn)入技能樹(shù)：角色蹲下閉眼，石碑從地面生長(zhǎng)而出。石碑的呈現(xiàn)與星戰(zhàn)中的古代遺跡元素相契合，賦予系統(tǒng)一種古老、原始、神圣的質(zhì)感。

>>>刺客信條：奧德賽

技能樹(shù)以星象盤(pán)/星系圖的形式呈現(xiàn)。解鎖技能像是在點(diǎn)亮一顆星辰，整個(gè)技能盤(pán)逐漸鋪展成璀璨的星空。這種設(shè)計(jì)呼應(yīng)了古希臘對(duì)星象、命運(yùn)與神話的崇拜，使玩家的成長(zhǎng)過(guò)程被賦予了命運(yùn)指引與史詩(shī)感。（不過(guò)在使用時(shí)，因?yàn)檫^(guò)度強(qiáng)調(diào)視覺(jué)包裝，削弱了技能分支的直觀性和目標(biāo)感，使功能傳遞相對(duì)模糊。需做好平衡！）

>>>全面戰(zhàn)爭(zhēng)：三國(guó)

每次講技能樹(shù)貌似都繞不開(kāi)的案例，一顆真正的樹(shù)。技能樹(shù)以水墨樹(shù)枝的形式展開(kāi)。每一個(gè)技能點(diǎn)都像枝干上的新芽，隨著成長(zhǎng)逐漸蔓延成一棵繁茂的樹(shù)，營(yíng)造出獨(dú)特的東方美學(xué)氛圍。

>>>冰汽時(shí)代

在《冰汽時(shí)代》中，技能樹(shù)以法典的形式呈現(xiàn)。每一次解鎖節(jié)點(diǎn)，都對(duì)應(yīng)著簽署一條法律, 讓玩家感受到歷史見(jiàn)證與制度確立的儀式感。

>>>孤島驚魂3

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

六、結(jié)束語(yǔ)

技能樹(shù)每一個(gè)節(jié)點(diǎn)都承載著抉擇，每一條分支都延伸著可能性。它既要清晰易懂，讓玩家不至于迷失在復(fù)雜系統(tǒng)里；又要富有儀式感，讓成長(zhǎng)的過(guò)程本身成為一種沉浸。

而作為設(shè)計(jì)師，我們要做的，就是讓這棵樹(shù)既清晰可攀，又足夠動(dòng)人。畢竟，玩家點(diǎn)亮的不只是技能，更是他們?cè)谟螒蚴澜缋锏墓适屡c足跡。

感謝閱讀，也希望這些案例和思考，能給大家下次的設(shè)計(jì)靈感帶來(lái)一些枝葉的生長(zhǎng)。

參考

[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