像素画游戏界面设计要一眼看懂

像素画游戏界面设计要一眼看懂

文本概览：全文约 2,009 字，阅读约 6 分钟。

血条画得再漂亮，玩家打到一半看不清，就是失败的血条。

方法：先按玩法选一种表示生命值的画法，再从颜色、形状、方向这些地方下手，把它改成你游戏独有的样子。

画完检查两件事：激战中一眼能读，平时不抢角色。

先分清两件事：好不好用，好不好看

界面设计可以拆成两层。

一层是体验：玩家用起来顺不顺。存档容易吗？换装备要点几下？想关声音，能不能马上找到？

另一层是界面本身：玩家看得见的那些零件，仪表、字体、图标、菜单。它要守三条规矩：风格统一，贴合游戏气质，好读但不打扰。

这两层分不开。文字小到读不清，是界面没做好，体验跟着变差。反过来，界面画得再精美，菜单套了五层，玩家照样烦。

所以动笔画界面之前，先问一句：玩家会在什么时候看它？

生命值：六种画法，各有代价

生命值几乎是每个游戏都有的界面元素，也最考验取舍。以下示范例举了六种常见画法：心形、圆球、小格子、分段条、实心条、数字。

心形这种大块、独特的形状最有魅力，但不精确，还很占屏幕。数字最精确，可激战时你没空去读一个数。

选哪种，看玩法，不看哪个好看。

判断时问自己一句：玩家看血条的那一刻，手上在忙什么？打得越紧张，越要选扫一眼就懂的形状，别指望他读数；屏幕越挤，越要少用心形这种占地方的画法。

选定以后，你不需要发明第七种画法。只需要改动几个基础元素，比如颜色、形状、方向：让条随血量变色，把条弯成弧，或者干脆竖起来，就已经和别人的游戏不一样了。

有些游戏走得更远。《毁灭战士》（Doom）里，主角的脸会随血量下降越来越青肿、流血。世嘉 Mega Drive 版《阿拉丁》里，生命值看神灯冒出多少烟。

再妙的点子，也得先保证玩家能看懂。

生命值通常是玩家最该盯住的一项状态，它必须随时能读，又永远不该分散注意力。

你大概会在这里栽一次。做了一个很有创意的血量表示，自己越看越满意，拿给朋友试玩，对方打了一会儿问你：“我还剩多少血？”

问题不在朋友。你太熟悉自己的设计了，你看它的时候，脑子里早就有答案。

检查办法：把游戏截图缩到手机大小，只看一秒。说得出还剩多少血，才算过。

弹药、能量、魔法：统一比花哨重要

生命值之外，游戏里还常见各种资源：弹药、能量、魔法。

不管你怎么画，都要回到前面那几条目标，尤其是统一：颜色、形状、大小、字体、摆放位置，守同一套规则。同一个界面里，竖着的能量槽配横着的血条，就会显得很怪。

例外也有。如果你的游戏有一个别家没有的独特机制，给它一个独特的表示方式，反而更直观。

让界面动起来，但别抢戏

界面加动画，看起来很酷。基本原则是：功能第一。

你直接操控一个屏幕上看得见的角色时，最强的反馈通常就显示在角色身上。这时候角落里的血条再跳一段花哨动画，就是在把玩家的视线从该看的地方拽走。

所以画完查第二件事，盯住受击那一下：反应在角色身上，血条只安静地掉一截，才算不抢戏。

适度加一点动画，像上面那张资源动图里子弹一颗颗装回弹匣、电池掉电时从绿变红，玩家通常是欢迎的。

界面是你游戏的门面

界面设计看上去不是做游戏最刺激的部分，做起来却意外地好玩。

要做完一整套风格统一、用着顺手的界面，过程很磨人，可看到它顺顺当当运转起来，满足感很强。

一个游戏的个性和完成度，很多是从界面里透出来的。

这对一个人做游戏的你尤其要紧。角色和关卡你可能已经画得不错，但玩家第一眼看到的，往往是标题菜单和那排血条。它们清楚、统一，你的小游戏就会从“练习作品”变成“一个像样的游戏”。

还没开始做游戏也没关系。给你画过的角色配一排血条、一个资源槽，一张插画就变成了一张“像是游戏截图”的作品。这张图，可能就是你第一款游戏的第一个画面。

总结

1. 先分清体验和界面。

   界面画得再好看，也救不了难用的体验。

2. 生命值按玩法选画法。

   心形有魅力但不精确，数字精确但激战中难读；选定后从颜色、形状、方向下手。

3. 好读，但不抢戏。

   同一界面风格统一；强反馈放在角色身上，界面动画适可而止。

练习：给你正在做的小游戏，或者一张你画过的角色图，配一排生命值和一个资源槽，缩到手机大小，一秒内说得出剩多少血才算过。

参考资料

https://www.slynyrd.com/blog/2020/2/23/pixelblog-26-uxui-design-basics: https://www.slynyrd.com/blog/2020/2/23/pixelblog-26-uxui-design-basics

https://www.slynyrd.com/pixelblog-catalogue: https://www.slynyrd.com/pixelblog-catalogue