北京
像素画 UI 按钮设计：从简单形状到可交互状态
你有没有盯着自己游戏的界面想过：哪里不对劲？
很多时候问题出在按钮上——够不够好看、有没有把“正常 / 悬停 / 按下”等状态都画出来。
这篇教程我会用像素风为例，一步步把“更好看、更好用”的按钮做出来：先定形状和层级，再加边框、圆角、阴影，最后做齐四种交互状态。
先做一个简单形状
先用一个 48×16 像素的色块当底板，上面写“Go”，就是一个最基础的按钮。
界面上按钮有主次之分，一般一个画面只强调一个主操作。
主按钮要在视觉上更突出，次要、再次要的按钮依次弱一点。
下面同一段文字、同一套颜色，只靠粗细和对比就能分出阅读顺序：
文案要清晰
主操作按钮上的字最好直接说清“要做什么”，用动词、短词，比如“开始游戏”用“Play”而不是含糊的“Go”。
整款游戏的按钮用词风格也建议统一。
加边框，让用户知道“可以点”
加一圈边框会让按钮更像“真实可按的控件”，也更容易被注意到。
链接是“跳转”，按钮是“执行操作”，用边框把按钮和链接区分开，能减少误点。
圆角让气质更友好
圆角在心理学上会显得更柔和、好接近；尖角则偏硬、偏严肃。
做给家庭或儿童向的游戏可以多加点圆角；偏恐怖、严肃的可以少用或不用。给像素按钮加一点圆角，整体会友好不少。
用阴影增加层次
真实按钮是可以“按下去”的，用阴影表现立体感，按下时再配合位移或颜色变化，交互感会更强。
四种状态缺一不可
除了“默认样子”，还要考虑三种交互状态：
- Normal：可点击、未聚焦
- Focus：用键盘等聚焦到该按钮时
- Hover：鼠标悬停
- Active：按下瞬间
下面用 13 帧把 Normal、Hover、Active 做成了小动画，设计时可以对照动画十二法则来微调。
不推荐用“Disabled 灰掉”当主要反馈：玩家看不到“为什么不能点、要怎么才能点”。
尽量用点击后的提示（例如“请先完成某某”）代替单纯禁用。
参考案例
下面几张是其他游戏里的像素风按钮，风格不一，但都兼顾了辨识度和状态反馈。
做的时候可以既保留自己风格，又注意对比度、状态、尺寸等可用性。
小结
像素风 UI 按钮要既好看又好用：从简单形状和主次层级开始，加上清晰文案、边框、圆角、阴影，再把 Normal / Focus / Hover / Active 四种状态画清楚，必要时用短动画强化反馈。
少依赖“灰掉”的 Disabled，多给玩家明确提示。这样你的界面就会又统一又耐看。
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
