很多设计师包括我在内对按钮尺寸有着颇多困惑。为什么很多产品甚至苹果本身并没有遵循 44pt 的标准规范?为什么有些场景下的 CTA 按钮那么小?按钮的最佳尺寸到底是多少?按钮规范背后到底是什么样的科学依据?这些依据可否量S I ` {化?

emmmm,如果你和我一样有着这些困惑,本篇文章应该可以给你很多启发。

按钮尺1 \ ) –寸对点击行为的影响

按钮的( i M E | E n z \尺寸具体影响到的依旧是视觉和交互的两种能力。

视觉能力上很好理解。当一个元素尺寸越大,人眼就越容易抓捕到这个元素。所以那些越重要的东西,往往会给予更大的尺寸来强制用户注意到= 4 a它,这也可以解释为什么甲方总喜欢不停地在背后指指点点嫌弃元素] g t _ / , 7 G太小,就是因为这! L C v P些元素对他们来说非常重要,只是他们没有我们/ Z } W那么专业,知道强调一个东西的手法不仅仅P d k / r是放大一种策略。

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

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

但是,按钮尺寸并非越大越好,一方面是避免视觉上的失衡,另一方c . _ * Z 6 @面也会受到界面空间限制、以及场景– 4 Z ! m + – &差异等因素的影响。

规范中的定义

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

但是,\ ; : ` e U f在实际的 iOS 原生产品界面中,a R D N l . 3 r很多按钮并未严格执行 44pt 这个数值。小于 44pt 的按钮比比^ o , T K G y皆是,比如信息页的发送、App Store 的获取、购买浮层的确认、添加 siri、导% m V航类C T x 5 g X ]右上角的工具型按钮,它们的点击区域为按钮本身,但是均未达到 44pt。况且其中有一些还是非` F p P T常典型的 CTA 按钮,比如 App Stor5 $ 9 T * 9 s 6e 产品详情页中的获取按, P y : k g钮,它的高度仅r 4 3 ,仅是 27pt。

按钮的最佳尺寸到底是多少?这篇给你权威答案!

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

按钮的最佳尺寸到底是多少?这篇给你权威答案!

这些情况R ` $ o r的发生其实也很好理解,每个按钮所对应的用户场景、业务诉求不同,因此并不能一招鲜用一个尺寸吃遍所有场景。但是,有没有一些科学的B j u X U d l V依据N G v c H ,来可量化地解释按钮尺寸对点击的影响?

从 Apple Music 说起

著名产品设计师斯科特赫尔夫就曾在他的文章《Using science to make truly tappable usev ! 8 p | j L $ Er interfaces》中提过,iOS9的f @ p \ Apple Music 在锁屏界面下的按钮[ E ! @ (过小,经常会发生p j . [ M x无法准确点击的情况,他需要集中精力精确得点击才能完成任务。

不过苹果在 iOS10 之后,锁屏z = + j G界面下的三个按钮、乃至进度、音量的控制球全部被显著地增大。这使得歌曲点击操作的错误率明显下降,不论是在什么场景下(你懂得,跑步、挤地铁这些不可控m p ` ? = K .的场景下总是会有听歌的需求)都可I q N e G E A以轻松地点击。

按钮的最佳尺寸到底是多少?这篇给你权威答案!

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

第一E g 6 h . = F Q \次实验

2006 年,芬兰 Oulu 大学,Maryland 大学和 Parck\ q v o 9 = ? W , 学院O c @ = &的研究人员组成一个研究小组。他们的研究目标是,确定在触摸屏幕上单手使用最容易的按钮尺寸。

按钮的最佳尺寸到底是多少?这篇给你权威答案!

他们进行了两组6 2 H ~ E i { & d不同A F , & _场景的实验。C e R 2 a 0 A $第一组让受试者执行一次性的任务,点击一个 CTA 按钮、复选框或* 6 # 1 5者多选框;第二组让受试者执行多次连续) V # N的任务,比如输入电话号码。并且在实验期间,研究人员测试了每一种场景下按钮的尺寸。最终的实验结果表明,单个任务下,按钮. l A % q尺寸小于 9.2mm 后错误率显著增加,而多次连续任务下,按钮尺寸小于 9.67 s ` : m emm 后的错误率显著增加。

特别的是,对于多次连续任务,9.6mm 到 11.5mm 之间的错误率基本不变。

按钮的最佳尺寸到底是多少?这篇给你权威答案!

看到这,I 2 } 2 ,来稍微总结一下,9.2mm 和 9.6mm 是两个关键的尺寸节点。在单次任务和多次连续任务o o (下,按钮尺寸分别小于 9.2mm 和 9: m ` 6 N 2 z 3 `.6mm 会导致错误率的攀升。这个结果和 MIT Touch Lab 研究得出的最佳热区尺寸 10mm 很接近。

第二次实验

当然,这还不算完。5 年后,德国两所大学的研究人员又进行了一项类似的研究,目的是确定触摸屏幕按钮的最佳大小。

他们? O b s ] B的实M N 1 . g # H ] m验方法相对就很潮了。他们专门开发了一款安卓游戏,游戏玩法也很无脑:玩家必须要精准地点击到屏幕中任) = Y s | s b + n何地方飘动的任意尺寸的圆5 8 Q N y V圈,游戏才能继续。并且速度越快,得分也就越高。

按钮的最佳尺寸到底是多少?这篇给你权威答案!

这款游戏在上线之后被下载了 10w 次,并且悄咪咪得暗中记录了+ b a ? _ e用户所有的点击行为,记录总量约为 1.2 亿次。

最后根据统计分析,得出了错误率和圆圈尺寸的图表关系。你可以看到,和 5 年U 7 H u j前的实验同样,呈现类似的指数关系。研究人员根据图表发现:

在圆圈尺寸小于 12mm 后,错误率开始逐步提升。在尺寸小于 8mm 之后,错n q i } d r C误率高达 40%以上。并且r 8 e . & D H研究还发现,在圆圈尺寸超过 12mm 之后,玩家的正确率并没有得到显著的提升。

按钮的最佳尺寸到底是多少?这篇给你权威答案!

结论

由上述的两个实验,我们可以概括出一些有用的结论。

  • 根据各自的实验,在目标尺寸x T 9 M @ n & M *分别小于 9.2mm、9.6mm 或者 12mm 后,均会导致错误率的攀升;
  • 当目标尺寸增加到一定程度之后,5 ~ c ~ s | z s正确率基本保持不变。

那么,按钮k i L O ) W W y ?的最佳尺寸到底是多少呢?

斯科特将实验得出的关键尺寸与苹果、谷歌和微软三大规范进行结合,发现了一些有意思的现象——

  • iOS 的 44pt 对应到实际尺寸为 6.9mm,约 7mm;I ` m ) + 8 D
  • Android 的 56pt 对应到T o N实际尺寸为 8.8mm,约 9mm;
  • 而微软的 9mm+两边 2mm 的热区,对应的实际尺寸为 13mm。

可以看到 Android 和微软的尺寸,基本对应到了这两项实验得出的关键尺寸。

按钮的最佳尺寸到底是多少?这篇给你权威答案!

最后,再来看下开头 iTunes 的锁屏界面的按钮。可以看到从 iOS9 到 iOS10,苹果将按钮可点范围由 7mm(44pt)扩大至 12mm(82pt),结果也正好符合了微软的规范。看到这里,你肯定更困惑了——按钮的最佳尺寸到底是多少?

其实,并X x I ~ : G m L不存在什么按钮的G V v $ * %最佳尺寸。

不论是 iOS 的 44pt,Android 的 56dp,还是微软的 82pt,都需要具体情况具体分析。界面布局、用户场景、业务诉求等等,都属于按钮尺寸的影响因素。

比如下面这些 iOS 端产品的 CTA 按钮,它们的尺寸最小到 26pt,最大到 87pt,而且每个产品内部的 CTA 按钮也存在差异。你能说出这些按钮哪一个是最佳尺寸吗?

按钮的最佳尺寸到底是多少?这篇给你权威答案!

当然,我们起码可以去界定一些相对可控的范围。

这里我简单根据斯科特文章中的结论,结合市面主流产品的情况划分出按钮的几类尺寸:

1. 常规场景、局部模& ? O M L ? E j

比如 App Store 的产品详情页的获取,知乎中个人主页的关注,都属于当前页的局部模块,点击之后通常是状态的变化或者出现新的弹层。这些按钮的尺寸我建议控制在 28pt~40pt 之间。

按钮的最佳尺寸到底是多少?这篇给你权威答案!

2. 常规场景、全局模块、强业务T D 4 V属性k ^ )

比如微信个人页的添加好友、各大电商商品详情页的加购、登录注册页的登录注册等U # Y 7 s ^ s $ (等。这些页面的 CTA 按钮隶属于页面全局,所以可以给它极高的权重、甚至] 9 – # * u e l全局吸t i ? 9底展示(如详情页),以更快地促进点击。通常,这类按钮在常规场景下具备了最大尺寸。我个人的建议是保持在 40pt~60pt 之间。

按钮的最佳尺寸到底是多少?这篇给你权威答案!

3. 不可控场景

不可控场景的意思就是,用户点击按钮时所处的场景可能比较特殊,并且这种特殊的场景很可能给用户带来一系列无法掌控的风险。

比如 keep 在跑步场景下的按钮,就需要充分考虑到跑步时不稳定的状态,如果按钮和常规场景一样,那很{ | T h c容易发生无法准确点击的情况,增加意外事故发生的概率;包括来电场景、地图导航场景、快递取件场景等等,都属% ) & – ^ _于不可控的场景。各位可以自己代入脑补一下,这些场景中无法准确点击时容易产生什么样的后果。

所以这些场景中# A E的按钮就得{ K ( y够大,以尽可能覆盖到那些极端的不可控情况。我个人的建议保持在 60pF # ! q w l et~90pt 之间。

按钮的最佳尺寸到底是多少?这篇给你权威答案!

当然,这仅仅是很粗略的参考区间值,如何结合现有业务诉求、用户场景需求等因素去合_ l c 2 m 3理地界定才是重中之重p r * ) {。如果为了追求最佳效果或者尺寸的一0 h , ) . [p ` : f 2 Z { `性,反而有些舍本逐末的意E b s ) c 3 q思。

其实= v } U H从知乎去年 10 周年的大改版可以看到一些有意思的细节。很多按钮的高度比以往更高了。比如盐选会员的续费f H @ , V b S P按钮,由之前的 36pt 提升到了 40pt。

按钮的最佳尺寸到底是多少?这篇给你权威答案!

个人主页的关注按钮也由 28pt 提升到了 32pt,你仔细看的话,按钮的宽度也发生了变化,从之前的 90pt 提升到了 100pt。e k – x

按钮的最佳尺寸到底是多少?这篇给你权威答案!

邀请回答界面中的写回答按钮,也由原本的文字链,提升到了实心按钮,高度则直接复用了关注按钮的尺寸——32pt。哦,不好意思,这应该是按钮设计形式上的改变。

按钮的最佳尺寸到底是多少?这篇给你权威答案!

总之一句话,知乎这次y o [ * : C %的改版,CTA 按钮的尺寸更大了。我们从尺寸对点击行为的影响可以推导出,这次改版背后更为明确的业务目标——促进UGC内容生产、促进关系链沉淀(一旦沉淀了复杂的关系链,用户也就更难以离开平台)以及会员付费转化。

最后

结尾,我大胆做一个预测,CTA 按钮的尺寸的扩大将会是N G (未来设计的一个重要趋势之一。, ( I E ] P v @ C留贴为证s / h * u m . T 5,欢迎打脸图片

希望这篇文章能够给予你一些启发。期h * Z A ! + ( –待你的收获和反馈。

我是 AndrewChen。下期见。

参考文献:

  • https://wX j & $ww.scotthurff.com/posts/how-to-make-truly-tappable-user-h = \interfaces/
  • http://www.woshipm.com/pd/695353.html
  • https://zhuanlan.zhihu.com/pk O t 4 + 0 9 f –/77708352
  • https://wT A Lww.material.io/components/buttons-floaY = z – $ X 1 rting-action-button
  • https://www.zhihu.com/market/pub/119584439/manuscript/1198553697670909952
  • https://uxdesign.cc/button-0 . Odesign-user-interfaceU \ F-components-series-85243b6736c7

如果你觉B ? 2 R h G ZW ? N + j对你有所帮助,欢迎点个赞鸭,让我知道这篇文章对你是有价值的,当然这也是我继续下一篇分享的最佳动力~!

欢迎关注作者微信公众号:「转行人的设计笔记」

按钮的最佳尺寸到底是多少?这篇给你权威答案!

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注