mcpField
D
design-ui-ux-game

design-ui-ux-game

github.com/fcsouza设计与 UI2497 次安装1 周前更新
代码仓库

关于 design-ui-ux-game

design-ui-ux-game 是面向游戏设计者的类型无关型 UI/UX 设计技能，涵盖 HUD、菜单、反馈、引导和无障碍设计。它侧重即时反馈、循序呈现信息和通过交互教学，并列出常见界面模式与反模式。

主要功能

  1. 01设计 HUD 与菜单系统
  2. 02规划即时视觉和音频反馈
  3. 03以交互引导玩家上手
  4. 04应用无障碍与响应式设计原则
  5. 05使用提示框、进度条和物品栏等模式

适用场景

  1. 01设计游戏 HUD 和设置菜单
  2. 02规划新玩家的交互式引导
  3. 03改善游戏中的状态信息呈现
  4. 04检查界面的无障碍与一致性

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/fcsouza/agent-skills --skill design-ui-ux-game

安装后在 Claude Code 中输入/design-ui-ux-game确认已加载。

附带文件boilerplate/hud-components.tstemplates/accessibility-checklist.md

详细介绍

UI/UX 游戏设计

目的

适用于任何游戏类型的 HUD 模式、菜单系统、反馈循环、新手引导和无障碍设计。与类型无关——无论你是在开发放置点击游戏、MMO 还是益智游戏，相同的原则都适用。

适用场景

触发词：游戏 UI、游戏 UX、HUD、菜单系统、游戏反馈、新手引导、教程、无障碍、游戏界面、通知系统、设置菜单、库存 UI、工具提示、进度条、游戏菜单

前置条件

  • game-design-fundamentals — 反馈循环和玩家动机相关背景

核心原则

Fumito Ueda：“极简主义能放大情感冲击。去掉所有无助于体验的内容。” Jenova Chen：“界面应该隐于无形——玩家应该去感受，而不是阅读。” Shigeru Miyamoto：“优秀的 UI 通过互动来教学，而非说明。”

  1. 少即是多——只展示玩家当下需要的信息；复杂系统采用渐进式呈现（Ueda）
  2. 即时反馈——玩家的每个操作都应立即产生视觉和音频反馈（Chen）
  3. 寓教于做——教程应具有互动性，而非大段文字；最好的教程就是没有教程（Miyamoto）
  4. 一致性带来直觉——处处采用相同模式：相同按钮 = 相同操作，相同颜色 = 相同含义
  5. 无障碍不可妥协——色盲模式、可缩放文本、可重新映射的控制、屏幕阅读器支持
  6. 移动端优先，响应式设计——先针对最小屏幕设计，再逐步适配更大屏幕；触控目标至少为 44px
  7. 状态始终可见——玩家不应疑惑“发生了什么？”——展示生命值、进度、货币和状态

核心 UI 模式

模式使用场景实现方式
HUD 覆盖层始终可见的游戏状态固定位置，占用空间最小化
环形菜单快速选择操作按住或右键触发
标签页导航管理多个系统使用带徽标指示的标签页
模态对话框确认操作、展示重要信息阻断游戏，并要求玩家执行操作
Toast 通知非关键更新自动关闭，可堆叠显示
工具提示上下文详情悬停或长按触发，智能定位
进度条显示进度线性或环形，并标示里程碑
库存网格管理物品拖放、排序、筛选、搜索

新手引导流程

1. First interaction → teach core mechanic (no text, just do it)
2. First reward → show feedback system (number go up, sound, visual)
3. First choice → teach decision-making (two options, clear difference)
4. First failure → teach recovery (low stakes, quick retry)
5. First system unlock → teach progressive disclosure (new tab appears)

交叉引用

  • game-design-fundamentals — 反馈循环和奖励节奏
  • level-design — 教程关卡整合
  • elevenlabs-sound-music — 音频反馈整合

常见陷阱与反模式

  • “UI 大杂烩”——屏幕上同时出现太多元素；玩家无法集中注意力
  • “文字教程”——玩家还没开始行动，就要先读好几页说明
  • “信息隐藏”——关键游戏状态不可见；玩家会感到迷茫
  • “控制方式不一致”——同一个按钮在不同屏幕中执行不同操作
  • “没有反馈”——玩家点击后，200ms 甚至更久都没有任何可见反应
  • “事后才考虑无障碍”——上线后才添加色盲模式；无障碍设计应从一开始就纳入设计

设计师理念

Fumito Ueda（ICO、Shadow of the Colossus）：最好的 UI 隐于无形。在 ICO 中，没有 HUD——玩家握住 Yorda 的手，而这就是界面。你添加的每个 UI 元素，都应该证明其存在的必要性，胜过将其彻底移除的选择。

Jenova Chen（Journey、Flower）：UI 应该建立情感联系，而不是造成信息过载。在 Journey 中，整个“多人游戏 UI”就是另一位玩家的存在。没有生命条、没有名字、没有聊天——只有通过极简界面带来的共同体验。

Shigeru Miyamoto（Mario、Zelda）：最好的教程，是玩家不会察觉到的教程。Super Mario Bros 的 World 1-1 教会玩家奔跑、跳跃、应对敌人、使用强化道具和发现秘密——全程没有一句文字。

参考资料

  • “The Invisible Interface”——Fumito Ueda，GDC 2006
  • “Designing Journey”——Jenova Chen，GDC 2013
  • “Game Feel”——Steve Swink
  • “Don't Make Me Think”——Steve Krug（同样适用于游戏 UI）
  • 为游戏改编的 WCAG 2.1 无障碍指南

评论

支持 Markdown