<GameUE>关于按钮设计的6条建议

按钮是游戏界面中出场率最高的控件，因为使用情景不同，应用上更复杂。

在制作设计规范时，很多设计师只是单一的关注按钮尺寸，在很多情景下会发现规范并不太容易落地。

“尺寸感觉太小，我怕玩家点不到？”

“这个要放左边还是右边？”

“信息很重要，是不是该用红颜色？”

设计师与策划经常各执一词，在努力说服对方上浪费时间。所以我总结了一些设计建议，希望可以减少类似的沟通成本。

1. 建立按钮分级与应用规范

游戏界面是由不同信息组成，信息分级能够帮助玩家快速找到视觉重点。

根据不同的交互诉求，通常按钮会被定义为四级，分别对应不同的视觉权重。

如下图：

为了避免信息交互层级混乱，建议为各级别按钮制定使用规范。

· 一级：核心养成类的执行按钮

适用一级面板，用于核心玩法入口或启动重要级高的功能。

· 二级：交互执行按钮或非核心养成功能

适用于二级弹窗面板，或存在一级按钮的界面中，作为次级交互逻辑使用。

· 三级：尺寸较小的交互执行按钮

适用于空间限制或同一类型按钮在界面大量重复出现的面板中。

· 四级：最小尺寸的交互执行按钮

三级弹窗适用，也适用于最弱的交互需求。

分级规则针对游戏类型会有所区别，视使用情景酌情进行归类划分。

2. 建立科学的尺寸标准与布局规范

为了使按钮适用性更强，需要按照先“容器”进行设定。

以全屏界面 1136 x 640 为例，按黄金比例进行分割后，右侧区域作为常规游戏信息区，信息区的宽度就是容器。

可以在这个容器中设定按钮比例，作为尺寸规范的标准。注意一个细节，因为按钮涉及<单独>或<组合>的使用形态，所以建议规范也同时对某一级按钮做出两个宽度标准，以适用在不同情景。

宽度标准还有另外一个衡量要素，就是按钮中的内容长度（文本或图标+文本）。

通常情况下，按钮内文字不会超过5个中文字符。

以一级按钮为例，我们可以针对制定出两个原则：

· 单独使用的按钮，内容为2-5个中文字符；

· 组合使用的按钮，内容为2-4个中文字符；

在这个原则的基础上，我们就可以针对按钮宽度做出准确的规范定义。

制作规范的前提一定是可被充分落地执行的，而可被执行的保障则是对使用情景的充分考虑。

除了尺寸外，按钮内容的排版布局也需要制定标准，避免出现不一致的视觉表现：

具体方法是，把文本水平、垂直居中，算清文本与边框之间的距离，以4PX的倍数进行栅格划分，制定文字与按钮内部之间的布局标准。

如果在实际应用中如遇到超出字数的特殊情况，应优先在确保间距标准，对应调整按钮宽度。

此外，关于带图标的按钮，布局上建议左边间距＜右边间距，这样无论从物理感受还是视觉感受都有一定的美感。虽然位置并不平均，但在视觉角度上看左右是平衡的。

经验上是右边多出1/3较为合适，比如左侧距离30PX，那么右边距离为40XP。

3. 建立按钮的“行为引导”规范

为了帮忙玩家识别不同的交互行为，需要通过特殊的按钮颜色进行类别区分。

从行为引导角度，可分为三类：

正面行为 | 负面行为 | 中间行为

· 正面行为 - 需要最高的对比度

玩家需要知道哪个行为能帮助他们完成任务或尽可能减少思考与阅读。因此这类行动的按钮需要有较高对比度，在使用情景中应该被凸显。

· 负面行为 - 玩家不会因为误点而出错

负面行为一般采用偏红的暖色，让玩家明白点击之前需要三思。

· 中间行为 - 不需要替玩家做出判断

当面对无法给出正向建议或引起警觉的内容时，按钮全部使用常态。

补充一点，无论是哪一种交互行为，按钮中的文字都应该与玩家的操作结果有所联系，例如“是否购买”的窗口中，“确定”按钮的文字改为“购买”交互体验会更友好。

4. 建立按钮的附加信息规范

游戏中的按钮四周一定会承载其它图形信息，这部分工作经常被后置，当策划提出需求时再考虑如何附加设计，难免出现资源堆砌的情况。

就整体设计而言，建议在按钮设计之初就能把常见的附加信息考虑进去，同时输出通用资源、动效与特效，当策划需要时自行配置即可。

对于附加信息的设计，所有效果本质上都是吸引点击，但因为信息类型不同，设计元素的选择也多种多样，可按下图分类的方法来前置准备这些资源：

5. 具备科学性的依据

规范的制定一定是有所依据，来源可以是竞品之间的反复比较，也可以是来自公知的物理实验。

例如麻省理工实验室通过手指平均尺寸进行点击测试，最后结论认为：10mm x 10mm是一个合适点击的最小尺寸。那么转换成像素标准，最小按钮尺寸的阈值为28px x 28px。

同时，因为手指的平均触摸大小在10-14mm之间，所以当点击一个按钮时，两个最小按钮间距要大于32px，才会避免误触。

当按钮尺寸越大，间距所导致的误操作会越少。但美观起见，建议两个常规按钮的间距不要低于16px。

6. 具备有趣味性的设计意识

按钮上可做的花样并不多，动效以及特效的表现都集中在附加信息和点击反馈上。

平时多注意收集有趣的效果，在游戏产品化阶段可以按照自己的品牌语言进行细化设计。

例如点击反馈加入特效，提升质感：

点击按钮之后，所呈现的执行效果也可以加入创意：

当红点提醒的边界效应愈发明显时，我们需要通过其他的表现形式来与其他提醒信息拉开区别，这样有助于提高按钮点击率：

结语

以上是分享给大家的6条建议，希望对你在制定设计规范中有所帮助，尽可能通过规范去避免“拿到需求再思考”或者“遇到问题再解决”。