网页设计按钮尺寸规范 第1篇
2006 年，芬兰 Oulu 大学，Maryland 大学和 Parck 学院的研究人员组成一个研究小组。他们的研究目标是，确定在触摸屏幕上单手使用最容易的按钮尺寸。
特别的是，对于多次连续任务， 到 之间的错误率基本不变。
看到这，来稍微总结一下， 和 是两个关键的尺寸节点。在单次任务和多次连续任务下，按钮尺寸分别小于 和 会导致错误率的攀升。这个结果和 MIT Touch Lab 研究得出的最佳热区尺寸 10mm 很接近。
网页设计按钮尺寸规范 第2篇
当然，这还不算完。5 年后，德国两所大学的研究人员又进行了一项类似的研究，目的是确定触摸屏幕按钮的最佳大小。
最后根据统计分析，得出了错误率和圆圈尺寸的图表关系。你可以看到，和 5 年前的实验同样，呈现类似的指数关系。研究人员根据图表发现：
在圆圈尺寸小于 12mm 后，错误率开始逐步提升。在尺寸小于 8mm 之后，错误率高达 40%以上。并且研究还发现，在圆圈尺寸超过 12mm 之后，玩家的正确率并没有得到显著的提升。
由上述的两个实验，我们可以概括出一些有用的结论。
那么，按钮的最佳尺寸到底是多少呢？
斯科特将实验得出的关键尺寸与苹果、谷歌和微软三大规范进行结合，发现了一些有意思的现象——
可以看到 Android 和微软的尺寸，基本对应到了这两项实验得出的关键尺寸。
最后，再来看下开头 iTunes 的锁屏界面的按钮。可以看到从 iOS9 到 iOS10，苹果将按钮可点范围由 7mm（44pt）扩大至 12mm（82pt），结果也正好符合了微软的规范。看到这里，你肯定更困惑了——按钮的最佳尺寸到底是多少？
其实，并不存在什么按钮的最佳尺寸。
不论是 iOS 的 44pt，Android 的 56dp，还是微软的 82pt，都需要具体情况具体分析。界面布局、用户场景、业务诉求等等，都属于按钮尺寸的影响因素。
比如下面这些 iOS 端产品的 CTA 按钮，它们的尺寸最小到 26pt，最大到 87pt，而且每个产品内部的 CTA 按钮也存在差异。你能说出这些按钮哪一个是最佳尺寸吗?
当然，我们起码可以去界定一些相对可控的范围。
这里我简单根据斯科特文章中的结论，结合市面主流产品的情况划分出按钮的几类尺寸：
网页设计按钮尺寸规范 第3篇
所以这些场景中的按钮就得够大，以尽可能覆盖到那些极端的不可控情况。我个人的建议保持在 60pt~90pt 之间。
当然，这仅仅是很粗略的参考区间值，如何结合现有业务诉求、用户场景需求等因素去合理地界定才是重中之重。如果为了追求最佳效果或者尺寸的一致性，反而有些舍本逐末的意思。
其实从知乎去年 10 周年的大改版可以看到一些有意思的细节。很多按钮的高度比以往更高了。比如盐选会员的续费按钮，由之前的 36pt 提升到了 40pt。
个人主页的关注按钮也由 28pt 提升到了 32pt，你仔细看的话，按钮的宽度也发生了变化，从之前的 90pt 提升到了 100pt。
邀请回答界面中的写回答按钮，也由原本的文字链，提升到了实心按钮，高度则直接复用了关注按钮的尺寸——32pt。哦，不好意思，这应该是按钮设计形式上的改变。