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

你有没有盯着自己游戏的界面想过：哪里不对劲？很多时候问题出在按钮上——够不够好看、有没有把“正常 / 悬停 / 按下”等状态都画出来。

这篇教程我会用像素风为例，一步步把“更好看、更好用”的按钮做出来：

先定形状和层级，再加边框、圆角、阴影，最后做齐四种交互状态。先做一个简单形状先用一个 48×16 像素的色块当底板，上面写“Go”，就是一个最基础的按钮。

界面上按钮有主次之分，一般一个画面只强调一个主操作。主按钮要在视觉上更突出，次要、再次要的按钮依次弱一点。

下面同一段文字、同一套颜色，只靠粗细和对比就能分出阅读顺序：文案要清晰主操作按钮上的字最好直接说清“要做什么”，用动词、短词，比如“开始游戏”用“Play”而不是含糊的“Go”。整款游戏的按钮用词风格也建议统一。

加边框，让用户知道“可以点”加一圈边框会让按钮更像“真实可按的控件”，也更容易被注意到。链接是“跳转”，按钮是“执行操作”，用边框把按钮和链接区分开，能减少误点。

圆角让气质更友好圆角在心理学上会显得更柔和、好接近；尖角则偏硬、偏严肃。做给家庭或儿童向的游戏可以多加点圆角；偏恐怖、严肃的可以少用或不用。

给像素按钮加一点圆角，整体会友好不少。用阴影增加层次真实按钮是可以“按下去”的，用阴影表现立体感，按下时再配合位移或颜色变化，交互感会更强。

四种状态缺一不可除了“默认样子”，还要考虑三种交互状态：Normal：可点击、未聚焦Focus：用键盘等聚焦到该按钮时Hover：鼠标悬停Active：按下瞬间下面用 13 帧把 Normal、Hover、Active 做成了小动画，设计时可以对照动画十二法则来微调。

不推荐用“Disabled 灰掉”当主要反馈：玩家看不到“为什么不能点、要怎么才能点”。尽量用点击后的提示（例如“请先完成某某”）代替单纯禁用。

参考案例下面几张是其他游戏里的像素风按钮，风格不一，但都兼顾了辨识度和状态反馈。做的时候可以既保留自己风格，又注意对比度、状态、尺寸等可用性。

小结像素风 UI 按钮要既好看又好用：从简单形状和主次层级开始，加上清晰文案、边框、圆角、阴影，再把 Normal / Focus / Hover / Active 四种状态画清楚，必要时用短动画强化反馈。少依赖“灰掉”的 Disabled，多给玩家明确提示。

这样你的界面就会又统一又耐看。