像素画 UI 按钮设计：从简单形状到可交互状态

你有没有盯着自己游戏的界面想过：哪里不对劲？

很多时候问题出在按钮上——够不够好看、有没有把“正常 / 悬停 / 按下”等状态都画出来。

这篇教程我会用像素风为例，一步步把“更好看、更好用”的按钮做出来：先定形状和层级，再加边框、圆角、阴影，最后做齐四种交互状态。

先做一个简单形状

先用一个 48×16 像素的色块当底板，上面写“Go”，就是一个最基础的按钮。

界面上按钮有主次之分，一般一个画面只强调一个主操作。

主按钮要在视觉上更突出，次要、再次要的按钮依次弱一点。

下面同一段文字、同一套颜色，只靠粗细和对比就能分出阅读顺序：

文案要清晰

主操作按钮上的字最好直接说清“要做什么”，用动词、短词，比如“开始游戏”用“Play”而不是含糊的“Go”。

整款游戏的按钮用词风格也建议统一。

加边框，让用户知道“可以点”

加一圈边框会让按钮更像“真实可按的控件”，也更容易被注意到。

链接是“跳转”，按钮是“执行操作”，用边框把按钮和链接区分开，能减少误点。

圆角让气质更友好

圆角在心理学上会显得更柔和、好接近；尖角则偏硬、偏严肃。

做给家庭或儿童向的游戏可以多加点圆角；偏恐怖、严肃的可以少用或不用。给像素按钮加一点圆角，整体会友好不少。

用阴影增加层次

真实按钮是可以“按下去”的，用阴影表现立体感，按下时再配合位移或颜色变化，交互感会更强。

四种状态缺一不可

除了“默认样子”，还要考虑三种交互状态：

  • Normal：可点击、未聚焦
  • Focus：用键盘等聚焦到该按钮时
  • Hover：鼠标悬停
  • Active：按下瞬间

下面用 13 帧把 Normal、Hover、Active 做成了小动画，设计时可以对照动画十二法则来微调。

不推荐用“Disabled 灰掉”当主要反馈：玩家看不到“为什么不能点、要怎么才能点”。

尽量用点击后的提示（例如“请先完成某某”）代替单纯禁用。

参考案例

下面几张是其他游戏里的像素风按钮，风格不一，但都兼顾了辨识度和状态反馈。

做的时候可以既保留自己风格，又注意对比度、状态、尺寸等可用性。

小结

像素风 UI 按钮要既好看又好用：从简单形状和主次层级开始，加上清晰文案、边框、圆角、阴影，再把 Normal / Focus / Hover / Active 四种状态画清楚，必要时用短动画强化反馈。

少依赖“灰掉”的 Disabled，多给玩家明确提示。这样你的界面就会又统一又耐看。