游戏中「按钮大小以及位置」的思考

@WZY、:用,来说明按钮的大小和位置。

一、「按钮大小」的思考

vm3pw43xtsa.jpg插图(大大小小的按钮)

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

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

svznozofes5.jpg插图(1)

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

lrqvjpd0ntz.jpg插图(2)

离用户指尖近,我们可以把按钮放在用户点击的舒适区域,那么按钮做大,我们是不是就需要把按钮做到越大越好?

结果并不是,按钮超过一个阈值以后可点性增幅小的可怜,然而坏处会越来越多,比如:难看,占用空间大。

0tr42fygeat.png插图(3)

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

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

sc5lmgbsusf.png插图(4)

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

vq4chtpbtru.png插图(5)

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

1.大按钮9mm~15mm

2.小按钮6mm~9mm

3.最小可点击区域5mm

4.可点击区域之间的最小间距3mm

5.如果贴近屏幕或者在点击舒适区之外,需要在原来的基础上增加1~2mm

6.如果在舒适区内,可以略微放宽标准,少0.5mm左右

7.竖屏模式下,单手操作可以在基础上增加1mm~2mm1mm≈12.8像素(326像素密度)

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

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

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

二、「按钮位置」的思考

05ihuc3hbkt.png插图(6)(市面上一些常见的页面)

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

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

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

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

ektmzwqtlrz.png插图(7)

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

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

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

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

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

ujppj2nqjuj.png插图(8)

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

接下来举一个反例。

eojqevlwc5r.png插图(9)

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

ygy13v05sjn.png插图(10)

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

拓展:

1.右上角按钮空间有限,相对不便于点击,所以这类按钮更适合“编辑”“设置”之类,需要用户谨慎操作的功能。

2.界面上若有两个按钮或以上同时存在的,请遵循古腾堡原则,把最重要的,推荐用户点击的,用户大概率需要的放在右侧。(比如“删除物品”“退出帮派”之类不可逆的操作,作为设计师不推荐的按钮,请放在左边)

3.两个按钮,若设计师希望用户注意到每个操作,那么垂直摆放是最理想的选择。(注意:推荐操作放在最下方)

4.一切设计都服务于产品。如微信零钱,我认为大概率是设计师想推“充值”这个功能,但是提现却是用户大概率操作的,所以才这样设计。

5.古腾堡原则是平面上的原则,在许多写实风格,或者拟物设计的界面上并不适用。影响用户视觉流的因素不仅仅只有位置,还有颜色,面积,控件的写实程度等等。

6.古藤堡原则的结论是基于浏览顺序是从左往右,从上到下的的前提。若打破这个前提,那么该原则也就不适用了。(比如中东某些地区是从右往左的)

总结:

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

原文地址:站酷

作者:WZY丶

人已赞赏
UI设计

从4款主流产品出发,掌握“搜索”交互

2020-10-11 20:09:36

UI设计

Material Design Launch Screen 启动页

2020-10-11 20:09:38

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索