HI,下午好,新媒易不收取任何费用,公益非盈利机构
24小时服务热线: 4000-162-302
请扫码咨询

新媒易动态

NEWS CENTER

按钮的尺寸具体影响到的依旧是视觉和交互的两种能力

2021-02-11

按钮尺寸对点击行为的影响

根据前篇所提到的行为模型,按钮的尺寸具体影响到的依旧是视觉和交互的两种能力。

视觉能力上很好理解——当一个元素尺寸越大,人眼就越容易抓捕到这个元素;所以那些越重要的东西,往往会给予更大的尺寸来强制用户注意到它,这也可以解释为什么甲方总喜欢不停得在背后指指点点嫌弃元素太小,就是因为这些元素对他们来说非常重要,只是他们没有我们那么专业,知道强调一个东西的手法不仅仅是放大一种策略。

因此,相对较大的按钮尺寸从视觉上,可以迅速捕获用户的注意力,对点击行为是有益的。

而在交互能力上,涉及到的依然是前篇提到的菲茨定律——目标尺寸越大,移动至目标所花费的时间就越短;所以,较大的按钮尺寸可以降低用户交互的交互成本,使得目标更加”易点“,对点击行为同样是有益的。

但是,按钮尺寸并非越大越好,一方面是避免视觉上的失衡,另一方面也会受到界面空间限制、以及场景差异等因素的影响。

二、规范中的定义

我们先来看下ios的。苹果规定的最小点击区域是44pt,这意味着一旦点击区域低于44pt,将可能会出现点击失准的情况;当然,一些控件(标签栏图标、文字链)可以在视觉表现上只有24pt*24pt,但是会在周围加入额外的填充使其达到44pt。

但是,在实际的ios原生产品界面中,很多按钮并未严格执行44pt这个数值;小于44pt的按钮比比皆是,比如信息页的发送、App Store的获取、购买浮层的确认、添加siri、导航类右上角的工具型按钮,它们的点击域为按钮本身,但是均未达到44pt。

况且其中有一些还是非常典型的CTA按钮,比如App Store产品详情页中的获取按钮,它的高度仅仅是27pt。


而Android中的按钮建议尺寸是56dp,但是和ios一样存在着大量低于这个尺寸的情况,其中不乏那些CTA按钮。


这些情况的发生其实也很好理解,每个按钮所对应的用户场景、业务诉求不同,因此并不能一招鲜用一个尺寸吃遍所有场景。但是,有没有一些科学的依据来可量化得解释按钮尺寸对点击的影响?

三、从Apple Music说起

著名产品设计师斯科特·赫尔夫就曾在他的文章《Using science to make truly tappable user interfaces》中提过,ios9的Apple Music在锁屏界面下的按钮过小,经常会发生无法准确点击的情况,他需要集中精力精确得点击才能完成任务。

不过苹果在ios10之后,锁屏界面下的三个按钮、乃至进度、音量的控制球全部被显著得增大;这使得歌曲点击操作的错误率明显下降,不论是在什么场景下(你懂得,跑步、挤地铁这些不可控的场景下总是会有听歌的需求)都可以轻松地点击。

而他为了解释按钮尺寸所带来的变化,引入了历史上著名的两个实验。

相关推荐