div中的按钮设置居中位置_游戏中<按钮大小以及位置>的思考

原文地址：

https://www.zcool.com.cn/article/ZMTEwODIwOA==.html

作者：小王的交互笔记

用，来说明按钮的大小和位置。

的思考

(大大小小的按钮)

几乎每个项目都会遇到一个问题：按钮到底做多大？策划的大大大，UI的小小小，作为交互到底听谁的？

涉及到尺寸大小的问题，都免不了根据一个法则来做标准：菲兹法则。他的公式是这样的：

其中T 代表所花费的时间，a 是系统一定会花费的时间，b 是系统速率，D 代表启始点到目标之间的距离，而W 则是目标物平行于运动轨迹的长度。看到这有点懵逼？没关系，具体的后面会单独写一篇文章介绍菲兹法则。我们只要了解结论就好：相同情况下，目标越大，离目标的距离越近，花费的时间也就越短。那么根据这个理论，我们也就推出了另外一个理论：游戏按钮做的越大，离用户指尖的距离越近，用户不仅好点，而且快捷。

离用户指尖近，我们可以把按钮放在用户点击的舒适区域，那么按钮做大，我们是不是就需要把按钮做到越大越好？结果并不是，按钮超过一个阈值以后可点性增幅小的可怜，然而坏处会越来越多，比如：难看，占用空间大。

(做为创建角色的界面，研发人员肯定希望玩家速度进入游戏体验，并且在此过程中不要有任何错误，所以”进入游戏“按钮会比游戏内的大部分按钮尺寸都更大)

那么到底多少才算是一个比较合适的按钮呢？下面我们来看看官方的数据。

这里要注意了苹果当时制定这个尺寸的原因是因为当时还是iphone3的像素密度下，44像素对应的区域正好能满足7mm(人类食指指尖的平均宽度)而现如今Retina屏幕都已经是基本要求。所以按照326像素密度的前提下换算的话，最小区域应该是89.8像素。大家看到这里有没有发现一个问题，就是如果用像素来做单位的话，那么每一台机器上，可能答案都不一样。所以接下来的结论我会直接用mm来做单位，然后大家根据像素密度=像素值除以英寸来转换成像素。

结论：(个人觉得舒服的尺寸)

• 1.大按钮9mm~15mm
• 2.小按钮6mm~9mm
• 3.最小可点击区域5mm
• 4.可点击区域之间的最小间距3mm
• 5.如果贴近屏幕或者在点击舒适区之外，需要在原来的基础上增加1~2mm
• 6.如果在舒适区内，可以略微放宽标准，少0.5mm左右
• 7.竖屏模式下，单手操作可以在基础上增加1mm~2mm

1mm≈12.8像素(326像素密度)

以上并不是标准答案，个人主观意见占比不少。

玩家点击习惯的不同(指尖或指头点击)，以及项目的客观原因都会影响到答案，所以还是要根据项目需求做调整。

实际做项目时，可以把按钮做小，做好看。但是按钮热区放大，这是一个比较完美的解决方法。

的思考

(市面上一些常见的页面)

为什么在游戏中甚至大部分的APP中，单个按钮或者多个按钮同时存在，最重要的那个按钮一般都在右侧呢？若是为了方便点击，放在左边也未尝不可呀。如果是约定俗成，那么最开始定下这个规矩的时候又是因为什么呢？其中有没有理论依据呢？

说到这里，就需要提到一个法则——古腾堡原则。

Edmund C. Arnold 是一名报纸设计师，被公认为现代报纸设计之父。他设计了超过一千种报纸，包括波士顿环球报，国家观察报，今日报，多伦多星报，堪萨斯城之星报等等。

20 世纪 50 年代，他在设计报纸的过程中，提出了一项原则，认为人的阅读方式应该是遵循某种习惯进行的，好像读书一样，除了从左到右，还有从上到下的方式。但这里面蕴含着什么信息呢？经过多方研究，他最终得出了被后人熟知的「古腾堡原则」，并附上了一张图，名为「古腾堡图」。

古腾堡图将显示介质分为四个象限：左上角的「第一视觉落点区」，也叫「主光学区域」，类似自然光的落点；右下角的「终端区域」；右上角的「强休区」和左下角的「弱休区」。

由此可知，一个界面的左上和右下，是用户最为重点关注的位置。遵循这个原则，那么我们应该把界面的关键元素放在左上角(如标题)，以及右下角(如按钮，强提示)。右上和左下可以用来放一些相对次要的(如图像，文字信息，弱提示)。

根据该原则，用户查看界面时，浏览时用户的第一个行为，他们的焦点会从左上角一直到右下角。这时候，按钮的位置至关重要，因为点击按钮一般都是玩家在界面的最后一部操作，放在右下角可以保证用户阅读完了整个界面的内容。

简而言之，按钮作为一个界面的终结，或者是两个界面之间的钥匙，放在右下角用户方便点击，也能保证用户不会遗漏，最后还能保证用户进行操作之前阅读完了整个页面的内容。

原则弄清楚了，放到实际上，我们检验一下。

大家看到这个界面的时，第一遍估计都没看到左下角的返回按钮吧，而购买按钮位于视觉浏览的终点位置，又用了对比色来突出，想不看到都难。

接下来举一个反例。

作为最突出的”充值“按钮并没有位于视觉的终点位置，导致用户视觉流的顺序出现了回流，影响到了用户体验。

修改以后是不是舒服很多，视觉流从上到下，最后落到充值，点击按钮，达到目的。这就是古腾堡原则的实际案例。

拓展：

• 1.右上角按钮空间有限，相对不便于点击，所以这类按钮更适合“编辑”“设置”之类，需要用户谨慎操作的功能。
• 2.界面上若有两个按钮或以上同时存在的，请遵循古腾堡原则，把最重要的，推荐用户点击的，用户大概率需要的放在右侧。(比如“删除物品”“退出帮派”之类不可逆的操作，作为设计师不推荐的按钮，请放在左边)
• 3.两个按钮，若设计师希望用户注意到每个操作，那么垂直摆放是最理想的选择。(注意：推荐操作放在最下方)
• 4.一切设计都服务于产品。如微信零钱，我认为大概率是设计师想推“充值”这个功能，但是提现却是用户大概率操作的，所以才这样设计。
• 5.古腾堡原则是平面上的原则，在许多写实风格，或者拟物设计的界面上并不适用。影响用户视觉流的因素不仅仅只有位置，还有颜色，面积，控件的写实程度等等。
• 6.古藤堡原则的结论是基于浏览顺序是从左往右，从上到下的的前提。若打破这个前提，那么该原则也就不适用了。(比如中东某些地区是从右往左的)

总结：

• 1.人的眼球移动规律趋向于从上到下，从左到右，在视觉区域中，左上角通常为是视觉的起始点，右下角为视觉的重点，而右上和左上是视觉的休息区。
• 2.操作按钮放在底部，这样用户既不会错过它，也保证了用户在这之前浏览到了所有的信息。
• 3.两个按钮有主次之分的放在右下角，左取消，右确定。通过颜色，样式来拉开层级。两个按钮都推荐的，垂直居中摆放，更推荐的放下方。
• 4.一切的前提是视觉样式平等的情况下，若全是扁平的元素，任何地方放一个写实的按钮都会很显眼。
• 5.一切设计都是为了目的，灵活运用，不要被原则限制住，只有在没有更好的办法时再用原则。

可爱的你请把可爱的我设为“星标”。 长按关注学UI网微信公众号