很多设计师包括我在对按钮尺寸有着颇多困惑。为么很多产甚至苹果本身并没有遵循 44pt 的标准规范？为么有些场景的 CTA 按钮那么小？按钮的最佳尺寸到是多？按钮规范背后到是么样的科依据？这些依据可否量？
emmmm，果你和我一样有着困惑，篇文章应该以给你很启。
按钮的尺寸具影响到的依旧是视和互的两种能力。
视觉能力上好理解。当一个素尺寸越大，人眼就越容易抓捕这个素。所以那些越重要的西，往往会给予更大的尺寸来制用户注它，这也可以解释为什甲方总喜欢不停地在背后指指点点嫌弃素，就是因为这些素对来说非常重要，只是没有那专业，知道调一个西的法不仅仅是放大一种策略。
此，相较大按钮尺寸从视觉上，可以迅速捕获用户注意力，击为是有益。
交互能力，涉及到的依然篇提到的菲茨律——目标尺寸越，移动至目标所花费的时间就越短。所以，较的按钮尺寸可以降低用户交互的交互本，使得目标加”易点“，对点击行同样益的。
但是，按钮尺寸并非越大越好，一方面是避免视觉上的失衡，另一方面会受到界面空间限制、及场景差异等因素的影响。
我们先来看 iOS 的。苹果规定的最小点击区域是 44pt，这意味着一旦点击区域低于 44pt，将可会现点击失准的情况。当然，一些控件（标签栏图标、字链）可在视觉表现上只有 24pt*24pt，但是会在周围入额外的填充使达到 44pt。
但是，在际的 iOS 原生产品界面中，很按钮并未严执行 44pt 个数值。小 44pt 的按钮比比皆是，比信息页的送、App Store 的获取、购买浮的确认、添加 siri、导航类右上角的工具型按钮，它们的点击区域为按钮身，但是均未达到 44pt。况且其中有一还是非常典型的 CTA 按钮，比 App Store 产品详情页中的获取按钮，它的高度仅仅是 27pt。
而 Android 中的按钮建议尺寸是 56dp，但是和 iOS 一样存在着大量低个尺寸的情况。其中不乏 CTA 按钮。
学会CTA 设计方法后，按钮的点击率高了49%！
阅读文章
这些情况的发生实很好解，每个按钮对应的户场景、务诉求同，因此并一招一个尺寸吃遍有场景。但是，有没有一些科的依据来可量地解释按钮尺寸对点击的影响？
著名产设计师斯科特·赫夫就曾在他的章《Using science to make truly tappable user interfaces》中过，iOS9 的 Apple Music 在锁屏界面的按钮过小，经会发生无法准确点击的情况，他需要集中精精确得点击才成任务。
不苹果在 iOS10 之，锁屏界面下的三个按钮、乃至进度、音量的控球部被显著地增大。使得歌曲点击操的错误率明显下降，不论是在什么场下（你懂得，跑步、挤地不控的场下总是有听歌的需求）以轻松地点击。
而他为释按钮尺寸所带来的变化，引历史上著名的两个验。
一次验
2006 年，芬兰 Oulu 大学，Maryland 大学和 Parck 学院的研究人组成一个研究小组。他们的研究目标是，确定在触摸屏幕上单手使用最容易的按钮尺寸。
他们进行两组不同场的验。一组让受试者执行一次的任务，点击一个 CTA 按钮、复选框或者选框；二组让受试者执行次连续的任务，比输电号码。并且在验期间，研究人测试每一种场下按钮的尺寸。最终的验结果表明，单个任务下，按钮尺寸小 9.2mm 错误率显著增加，而次连续任务下，按钮尺寸小 9.6mm 的错误率显著增加。
别的是，对于多次续任，9.6mm 11.5mm 之间的错误率基本不变。
这，来稍总结一下，9.2mm 和 9.6mm 是个关键的尺寸节点。在次任和多次续任下，按钮尺寸别于 9.2mm 和 9.6mm 会导致错误率的攀升。这个结果和 MIT Touch Lab 研究得出的最佳热尺寸 10mm 近。
第二次实验
当然，这还不算完。5 年后，德国所大学的研究人员进行了一项类似的研究，目的是确定触摸屏幕按钮的最佳大。
他们实验法相很潮了。他们专开发了款安卓游戏，游戏玩法也很脑：玩家必须要精准地击到屏幕任何地飘动任意尺寸圆圈，游戏才能继续。并速度越快，分也越高。
这款游戏在上线后被下载了 10w ，并悄咪咪暗记录了用户所有击为，记录量约为 1.2 亿。
后根据统分析，得出了错误率圆圈尺寸的图表关系。可以看到， 5 的实验同样，呈类似的指数关系。研究人员根据图表发：
在圆圈尺寸小于 12mm 后，错误率开始逐步升。在尺寸小于 8mm 之后，错误率达 40%上。并且研究还发现，在圆圈尺寸超过 12mm 之后，玩的正确率并没有得到显著的升。
由述的两实验，我们可以概括出一些用的结论。
- 根据各自实验，在目标尺寸分小于 9.2mm、9.6mm 或者 12mm 后，均会导致误率攀升；
- 当目标尺寸增加到一程度之后，确率基本保持不变。
那么，按钮最佳尺寸到底是多少呢？
斯科特将实验得出的关键尺寸与苹果、谷歌微软三规范行结合，发了一些意思的象——
- iOS 44pt 应到实尺寸为 6.9mm，约 7mm；
- Android 的 56pt 对应到实际尺寸 8.8mm，约 9mm；
- 而微软的 9mm+两边 2mm 的热区，对应的实际尺寸为 13mm。
可以看到 Android 微软的尺寸，基本对应到了这两项实验得出的关键尺寸。
后，再看下 iTunes 的锁屏界面的按钮。可以看到从 iOS9 到 iOS10，苹果将按钮可点范围由 7mm（44pt）扩至 12mm（82pt），结果也好符合了微软的规范。看到这里，肯困惑了——按钮的尺寸到底多少？
实，并存在么按钮的最佳尺寸。
不论是 iOS 的 44pt，Android 的 56dp，还是微软的 82pt，需要具情况具分析。界面局、用户场、业务诉求等等，属按钮尺寸的影响因素。
比如下面这些 iOS 端产品的 CTA 按钮，它的尺寸最 26pt，最大 87pt，而且每个产品内部的 CTA 按钮也存在差异。你能说出这些按钮哪一个是最佳尺寸吗?
当然，起码可以去界定一些相对可控的范围。
这里我简单根据特文章结论，结合市主流品情况划分出按钮几类尺寸：
1. 常规场景、局部模块
比如 App Store 品详情页获取，知乎个主页关注，都属于前页局部模块，击后常是状态变化或者出现新弹层。这些按钮尺寸我议控制在 28pt~40pt 。
2. 常规景、全局模块、业属性
比如个人页的添加好友、各大商商品详情页的加购、登录注册页的登录注册等等。这些页面的 CTA 按钮隶属于页面全局，所以可以给它极高的权重、甚至全局吸底展示（如详情页），以更快地促进点击。通常，这类按钮在常规景下备了最大尺寸。个人的建议是保持在 40pt~60pt 之间。
3. 不控场
不控场的意思就是，用户点击按钮时所处的场能比特殊，并且种特殊的场很能给用户带来一系列无法掌控的风险。
比如 keep 在跑步景下的按钮，就需要充考虑跑步不稳定的状，如果按钮和常规景一，那容易发生无法准确点击的情况，增加外事故发生的概率；包括来景、地图导航景、快递取件景等等，都属于不可控的景。各位可以代入脑补一下，这些景中无法准确点击容易产生什的后果。
所以这些场景按钮够大，以尽可能覆盖到那些极端不可控情况。我个议保持在 60pt~90pt 。
然，这仅仅是很粗略参考区值，如何结合现有业务诉求、用户场景需求等素去合理地界定才是。如为了追求最佳效或者尺寸致性，反而有些舍本逐末意思。
其实从知乎去 10 周的改版可以看到一些意思的细节。很多按钮的高度比以往高了。比如盐选会员的续费按钮，由之的 36pt 提升到了 40pt。
人主页的关注按钮也由 28pt 提升到了 32pt，仔细看的话，按钮的宽度也发了变化，从之的 90pt 提升到了 100pt。
邀请回答界面中的写回答按钮，也由原本的文字链，提升到了实按钮，高度则直接复用了关注按钮的尺寸——32pt。哦，不好意思，这应该按钮设形式的改变。
总之一句话，知乎这次的改版，CTA 按钮的尺寸了。我们从尺寸对点击行的影响可以推导出，这次改版背后明确的业务目标——促UGC内产、促关系链沉淀（一旦沉淀了复杂的关系链，用户也就难以离平台）以及会员付费转化。
结尾，我胆一预测，CTA 按钮的尺寸的扩将会未设的一重趋势之一。留贴证，欢迎打脸图片
希望这篇章够给予你一些启发。期待你的收获和反馈。
我是 AndrewChen。下期见。
参考文献：
- https://www.scotthurff.com/posts/how-to-make-truly-tappable-user-interfaces/
- http://www.woshipm.com/pd/695353.html
- https://zhuanlan.zhihu.com/p/77708352
- https://www.material.io/components/buttons-floating-action-button
- https://www.zhihu.com/market/pub/119584439/manuscript/1198553697670909952
- https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7
如你觉你有所帮助，欢迎个赞，让我知这篇文章你是有价值，然这也是我继续下篇分享最佳动力~！
欢迎关注作者微信公众：「转行人的设笔记」
浙公网安备33011002017549号