做界面交互设计的时候，有个看似简单但依然容易引起撕逼的问题——按钮到底得做多大。无论是面对美术同学设计的各种精美小巧细如针尖的按钮，或是策划同学各种“加加加”的需求轰炸，还是老板“大大大”的呼喊，最终还是需要落地——按钮这玩意，多大才是大，多小才算小。这个时候，就需要一套设计规范和标准，但也要言之有理，让人心服口服地遵守。
本文就介绍一个简单快速的入门，让大家了解到按钮大小设计的逻辑，还有到底应该设多少大小的问题。
事先说明：本文介绍的每一节的课题，都是值得交互设计们深入研究的。本文从简单入手，讲究快速实用，摒弃容易混淆新人的长篇大论，但还是建议能查阅网上的相关资料，才能更加深入地了解这方面的知识，希望能帮助到大家。
1、菲茨定律（Fitts’s Law）
关于按钮到底做多大，有一个很牛逼的公式，称为菲茨定律：
其中：
MT=完成点击的时间，理论上来说越小越好
a、b 是变化参数，不知道有什么用
A = 起点到目标中心的距离，也就是手指移动到按钮的距离
W = 目标在运动轴线上的宽度，也就是按钮的大小
作为一个文科生对于任何数学公式都是拒绝的，有兴趣的同学可以百度详细研究。列出这个公式的目的是，让大家了解到，我们所谓的“按钮手感”，是由哪几个参数影响的。
不想研究这个公式的同学，可以直接看对这个公式的解读（翻译）：
1）按钮越大，越容易被点中（这个有点像废话）。
2）尺寸小的按钮，只要增大微小一点，对可点击性就增加很多。
对第二点的理解就是，按钮做得太小是很可怜的，牺牲任何东西都不能牺牲按钮大小
3）随着按钮的增大，可点性增幅降低
同样，一味无脑地增大按钮尺寸，并不能带来体验感的同样幅度的提升，差不多就好。
4）按钮过大，不会显著增加精度，但会降低速度
按钮过大带来的好处会越来越小，而且会带来另外新的问题——想象一下：拿着一个硕大无比如同桌子一样大小的手柄，肯定不如正常尺寸的好。
本节get：菲茨定律是一个很牛逼的定律，想深入研究可以看知乎上的一篇文章（传送门：https://zhuanlan.zhihu.com/p/25530956）。
2、不要废话直接给结论吧
菲茨定律是原理，但最终结论是什么呢，到底要设置多大的按钮呢，有很多讲交互的书籍，有各种答案：
ISO标准：
标准尺寸——19mm*19mm(mm是尺寸单位，毫米）
最小尺寸——9.5mm
最低标准——6.4mm
按钮和按钮之间最小间距——3mm
iOS（苹果）标准：
1倍率设备——44*44dp（dp表示像素，根据苹果设备屏幕，换算下来约7mm）
安卓标准：
48dp(约为7.4mm)
微软标准：
115dp（约为9mm）
看了这么多标准，是不是有点懵？
实际上，目前没有一个统一的标准，没有人可以解释为什么9mm的按钮会比8mm的按钮好，熟悉微积分的同学应该知道，一个平滑的曲线是可以无限分割的，没有那个“好”与“不好”的明显边界。
不过，现在界面都要求精细化，按钮都偏向往小了做，所以9mm~15mm就已经算得上是大按钮了，6mm~9mm是普遍喜欢的区域。但做人要有底线，最好不要再低于6mm了，而且细小的按钮加上过密的排布和微小的间距，会更加加重“误触的灾难”。
另外补充一句，特别是游戏，一些重要的入口，是不在这个体系之内的。相信大家对于很多手游内一个硕大的“play”或“开始游戏”按钮的印象都不会陌生吧。
本节get：
大按钮9mm~15mm
小按钮6mm~9mm
请尽量保持在这两个标准内
3、什么是PPI
当有人说最合适的按钮是XX像素时，那么这个人不是外行就是太懒。在移动设备上，不谈设备直接说像素（px）应该是多少多少，都是没有意义的。
打开百度，查看PPI的解释——PPI是Pixels Per Inch缩写，pixels per inch所表示的是每英寸所拥有的像素（pixel）数目。简单的说，每个手机的PPI都不一样，所以你的手机的6毫米（mm），和我的手机的6毫米（mm），是不一样的，也就是对应的像素值（px）也是不一样的。
所以PPI没什么玄乎的，就是把第2节的毫米（mm）转成像素（px）的媒介，计算方法也很简单，像素=PPI*毫米值*0.03937就可以了，当然也可以弄个高大上的公式：
实际工作中，建议大家把一些主流的设备上的都列出来，等到要做的时候再算就会很繁琐，而且事先列出来有助于时刻遵守，做得多了也就不用再一一对着看了，自然而然就会有意识地去遵守，有点像“肌肉记忆”。
另外，大家也会接触到一个DPI的概念，这两个概念非常类似，甚至有一些地方都混为一谈。网上介绍DPI和PPI区分的文章很多，有兴趣的同学可以自行寻找学习，但是有一点个人的建议：如果你是做手机游戏和软件的界面设计的，可以只关注PPI，而无视DPI，不然大量的信息充斥进来，很容易混淆。
那么如何知道设备的PPI呢，很简单直接百度，或者自己也可以算，参考我这个公式：
通过计算发现iPhoneX和官方公布的数值略有差距，可能全面屏采用了一套不同的算法。
另外再最后啰嗦一句，其实很多项目，都是只有一个“设计分辨率”的，也就是GUI设计的时候，只是以一个分辨率作设计，其他分辨率只是进行适配，不太可能每个分辨率都单独进行一套设计。目前游戏主流的设计分辨率是1334*750（iPhone6），或是1920*1080(Plus设备）。
本节get：
根据设备的PPI，把物理大小（mm）转成像素（px），才有实际操作设计的意义。
4、不同的位置对大小的影响
由于移动设备的小巧，所以其持握方式也会对按钮大小有要求，一般来说，离设备边缘的按钮应该设的更大一些，离设备越中间的按钮就可以放宽要求。
另外，如果是竖屏模式的游戏或软件，甚至是可以支持单手操作的，最好在这个基础上增加1mm左右。具体原因是：
横屏操作，和屏幕接触的主要还是大拇指指面，而横屏下，接触屏幕的很有可能是拇指指腹，从接触面积上来说，几乎少了一半。设置过iPhone指纹解锁的人应该知道，录入手指正面的指纹后，系统还需要我们录入指腹的指纹，这也是考虑到单手手持手机下，手指和指纹屏的接触情况。
5、其他解决办法
当然，规范是死的，实际情况还会有很多不得不违反规范的做法，为了让设计效果和实际体验折中妥协，我们还可以采取下列方法：
只牺牲一个维度（宽或高），也能达到较好的点按效果：
不怕小按钮，就怕小按钮扎堆，如果是并排密集的按钮，最好能预留出间距，防止误触：
上面那个3mm，放置在iPhone 8 Plus上对应的像素就是47，对应其他的设备也可以用上文介绍的方法计算出来。
让按钮的触控区域和按钮的实际尺寸脱钩，这个就需要程序做支持了，这是最一劳永逸的做法，可以应对各种不同的情况，但要注意一点：触控区域代替了按钮，执行响应的任务，那么触控区域本身就应该代替按钮，执行遵守上文所说的一系列规范了。
