|
|
导语
本篇文章聚焦于技能树的UI/UX设计。会从设计原则出发，拆解不同类型的技能树结构，并结合经典案例分析技能树系统的UI设计。
一、 前言
技能树几乎是所有 RPG、ACT、策略游戏的标配，但并非所有技能树都好玩。它不仅仅是“升级 → 加点 → 数值变强”，更是玩法引导、玩家个性化构筑与世界观叙事的重要载体。
对 UI/UX 来说，技能树的意义在于：
- 让玩家快速理解可选项和成长方向；
- 在视觉和交互层面传递“成长感”；
- 提供清晰的决策支持。
二、 技能树设计的核心原则
根据 GDKeys, 2020与 Number Analytics, 2025 的观点，一棵有意义的技能树需要满足三个条件：
- 有影响力的长期选择：技能点投入应带来长期且显著的玩法变化，而非微弱增益。
- 可表达个性：技能树应支持不同成长路径，让玩家展现独特风格。
- 避免枯燥的数值堆叠：技能树应避免纯粹的百分比加成，保证选择具有体验差异。
三、技能树的结构形态
1.线性型
线性型技能树结构在许多剧情驱动或新手向游戏中广泛采用，强调逐步引导玩家掌握玩法节奏。在UI设计上，通常采用分页或分阶段呈现的布局，并在未解锁的剧情阶段隐藏具体技能信息，以避免提前暴露内容、保持探索感。
最后生还者 2： 需要随着探索找到培训手册（Training Manual）来解锁新的能力分支，逐条提升的线性流程。
战神 4 ：奎爷的每种武器都有链式技能解锁路径，且有些技能只在获得特别武器和特定剧情节点后才解锁。
2.分支型
会分出互相独立的路线，每条路线代表一种玩法/构筑方向。突出选择与取舍，让玩家在不同路线间构筑个性化成长方向。在UI呈现上，通常将多个分支放在同一视图中，确保玩家能够直观感受到不同路线之间的对比与权衡。
地平线： 分为潜行者、勇者、觅食者的平行分支。
刺客信条：奥德赛 ：同样三大路线，猎人、战士、刺客 ，有明确职业差异。
3.网状型
多见于高自由度和长生命周期的游戏中，提供大量可组合的节点与路线，鼓励玩家探索、尝试多样构筑。但需要提供额外的导航和信息引导以避免迷失。
流放之路： 超大规模的被动技能网覆盖角色各类属性与玩法方向，玩家可从多个起点出发自由延伸路径。
无尽空间: 采用环状科技树结构，科技之间存在多重前置与互通关系，构成高度网状的组合路线。
4.混合型
技能或能力解锁不是单纯依赖一个技能树，而是与其他系统紧密绑定（例如武器制作、装备进化）。
怪物猎人：世界: 武器制作系统与武器进化树完全绑定，打造新武器推进技能或性能分支。
四、UX结构设计—成长方向引导
1.页面结构
>>>线性布局
适用场景：单一路径推进型技能，解锁顺序固定。
UI框架： Tab 聚焦一个技能路径，节点按顺序横向或纵向排列。
[ 战神 4 ]
>>>分支布局
适用场景：存在互相独立的玩法路线或职业方向。
分支少时UI框架：直接并列呈现多个方向。
[ Generation Zero ]
分支多时UI框架：会做分层级处理，设立集合页去整合各方向，再进入分支显示详情。(这种情况在二级会做快捷切换页签处理）
[ 刺客信条：影 ]
[ 看门狗 ]
>>>网状 / 混合布局
适用场景：技能关系复杂，允许跨方向连接，或与其他系统（如装备、职业）交织。
网状UI框架：节点平铺布局通常配合全局鸟瞰与缩放/拖拽导航，以容纳大量技能节点，并确保玩家能够快速定位目标。此类布局还应提供边界筛选或条件过滤功能，帮助玩家在复杂结构中高效查找所需节点。
[ 流放之路 ]
[ 无尽空间 ]
混型UI框架：在主干外增加分支或其他模块入口，可快速跳转至关联入口。
[ 怪物猎人：世界 ]
2.节点设计与状态感知
>>>节点分类
功能属性分类：根据节点能力和属性方向进行分类，帮助玩家快速定位方向。UI表现: 根据分区颜色/图标区分。
[ 地平线：西之绝境 ]
节点价值分类：按玩法影响程度划分节点时，应在视觉层级和交互反馈上重点突出核心节点，让玩家在浏览技能树时第一时间捕捉到这些高价值目标，并产生明确的投入动机与解锁期待感。UI表现: 视觉层级图标更突出，动效层级反馈更强烈。
核心节点-显著改变玩法循环（新增动作、解锁新机制）
增强节点-强化已有玩法（强度、范围、持续时间等）
功能节点：非战斗功能（经济、探索、支援）
[ 赛博朋克2077 ]
[ 地平线：西之绝境 ]
节点状态：
已解锁：优先级-视觉层级最高，突出玩家成就。UI特征-高亮，在集合页可显示缩略图或进度条，强化持续驱动力。
可解锁：优先级-视觉层级第二，需引导玩家关注。UI特征-半高亮、轻动画或预提示（闪烁、边框呼吸）。
未解锁： 优先级-最低，明确表达置灰状态。UI特征-灰阶或锁图标。对于剧情相关或需要保密的节点，可隐藏详细信息，仅显示锁定状态。
[ 星战绝地：陨落的武士团 ]
在集合页层级，也可显示缩略图节点解锁进度。
[ 看门狗2 ]
[ 刺客信条：影 ]
路径状态：
未解锁—当技能树节点关系错综复杂时，悬停节点可自动高亮与其相关的前置节点及连线，形成路径提示，帮助玩家快速理解解锁条件与依赖关系。
[ 赛博朋克2077 ]
解锁—当节点被成功解锁后，其连接路径随之点亮形，提供进度的直观可视化。
[ 星战绝地：陨落的武士团 ]
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
文/Poppy 腾讯互动娱乐 交互设计师
原文：https://mp.weixin.qq.com/s/VpMKBnSViFXew5StvYBcJw
|
|
发表于 
