​

📐 UI 信息密度与技能描述设计：极简与硬核的取舍

核心冲突:

• 極简派 (Minimalist): “别让我读文字，我只想爽。” (适合休闲/动作玩家)
• 硬核派 (Hardcore): “如果你不告诉我具体的倍率和触发概率，我怎么配装？” (适合策略/数值玩家)

Vampirefall 作为混合品类，必须在两者之间走钢丝。

​

1. 三种设计范式 (The Three Paradigms)

​

1.1 图标流 (Icon-Only / Keywords)

• 代表作: Overwatch (游戏内), Brawl Stars.
• 特征: 只显示伤害数值和简短关键词 (“晕眩 1s”)。没有背景故事，没有公式。
• 适用场景: MOBA/FPS 等强实时竞技游戏。
  • 理论支撑: 希克定律 (Hick’s Law)。选择越多/信息越多，决策时间越长。在 0.1秒 决生死的战斗中，没人有空读小作文。

​

1.2 词条流 (Tooltip Soup)

• 代表作: Path of Exile, Diablo 4.
• 特征: 极其详尽。“造成 [150-200] 点物理伤害，并有 30% 几率施加流血，持续 3秒。流血伤害受物理加成影响…”
• 适用场景: Build 驱动的 RPG。
  • 理论支撑: 深度加工理论 (Levels of Processing)。玩家需要深度分析数据才能获得“解题”的快感。模糊的描述（“造成大量伤害”）会被社区喷死。

​

1.3 分层流 (Progressive Disclosure) - 推荐方案

• 代表作: Elden Ring, League of Legends (按Shift显示详情).
• 特征: 默认只显示简略信息，按住特定键或在设置里开启“详细模式”才显示数据。

​

2. Vampirefall 的设计策略：洋葱皮 UI

鉴于我们既有 Roguelike (快节奏) 又有 塔防 (策略)，建议采用 分层展示。

​

Layer 1: 战斗内浮窗 (Combat Tooltip)

• 场景: 鼠标悬停在塔上，或升级 Perk 选择界面。
• 内容: 图标 + 关键词 + 核心差异。
• 格式:

  [烈焰塔] 造成 200 点范围伤害。 被动: 攻击点燃敌人。

• 目的: 3秒内做出决策。

​

Layer 2: 图鉴/背包详情 (Details Panel)

• 场景: 在大厅查看装备，或暂停游戏查看塔属性。
• 内容: 完整公式 + 标签 (Tags)。
• 格式:

  [烈焰塔 MK-II] 基础伤害: 200 (+150% 攻击力) 攻击间隔: 1.5s [点燃]: 每秒造成 20点 火属性伤害，持续 5s。可叠加 3 层。 标签: [建筑], [火], [范围]

​

Layer 3: 关键词百科 (Keyword Glossary)

• 场景: 鼠标悬停在黄色高亮的 [点燃] 关键词上。
• 内容: 解释机制。

  [点燃]: 一种异常状态。受“状态持续时间”词条加成。火+油可以触发爆燃。

​

3. 认知负荷管理理论 (Cognitive Load Theory)

​

3.1 7±2 法则

人脑的工作记忆只能同时处理 5-9 个信息块。

• 错误: 一个技能描述里有 10 个数字。
• 修正: 将“造成 100 基础 + 50 加成 = 150 总伤” 合并显示为 150 (鼠标悬停显示公式)。

​

3.2 颜色编码 (Color Coding)

利用颜色作为第二信息通道，减少文字阅读量。

• 看到 橙色 就知道是火元素，不用读“火属性”三个字。
• 看到 绿色 就知道是治疗/增益。

​

4. 避坑指南

​

4.1 不要用模糊词汇

• Bad: “造成大量伤害”、“小幅提升攻速”。
  • 后果: 玩家会困惑，“大量”是多少？比那个“巨量”少多少？
• Good: “造成 250% 伤害”、“攻速 +15%“。

​

4.2 区分“基础值”与“最终值”

• 很多游戏直接显示基础值（如 100），玩家穿了一身神装进去发现还是显示 100，虽然实际打出了 1000。
• 必须显示计算了玩家当前属性后的最终面板值，并用青色/绿色高亮，表示“这是加成后的结果”。

​

5. 总结

对于 Vampirefall:

1. 战斗中 (选卡): 用 Layer 1。大图标 + 关键词 + 绿色的变化值 (“DPS: 100 -> 150”)。
2. 局外 (配装): 用 Layer 2。详细列出标签和公式，满足数据党的计算欲。
3. 开关: 在设置里加一个选项 [x] 显示高级技能描述，默认关闭。

把选择权交给玩家，让休闲玩家看热闹，硬核玩家看门道。

---

​

📚 扩展阅读与 UX 原则 (References)

​

🧠 认知心理学

• Hick’s Law (Laws of UX)
  • 希克定律: 选项越多，决策时间越长。这是我们为什么要精简战斗 UI 的核心理论依据。
• Miller’s Law (Laws of UX)
  • 米勒定律: 人脑的工作记忆只能处理 7±2 个组块。所以技能描述里不要出现超过 5 个数字。

​

👁️ 界面设计

• 10 Usability Heuristics for User Interface Design (Nielsen Norman Group)
  • UX 设计界的“十诫”。重点阅读 “Visibility of system status” (系统状态可见性) 和 “Recognition rather than recall” (再认优于回忆)。
• Progressive Disclosure (Nielsen Norman Group)
  • 分层展示的理论源头。解释了为什么一开始只给用户看最少的信息，然后按需展开。

​

🎮 游戏 UI 案例

• Game UI Database
  • 全球最大的游戏 UI 截图库。可以在这里搜 Hades, Slay the Spire 的 UI 布局作为参考。
• Elden Ring UI Analysis (推荐搜索相关分析视频)
  • 学习魂系游戏如何用极简的 UI 传达复杂的信息（通过动画、音效而非文字）。