游戏技能树系统怎么“长” ——全类型技能树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