做交互设计时，按钮大小如何规范

做界面交互设计的时候，有个看似简单但依然容易引起撕逼的问题——按钮到底得做多大。无论是面对美术同学设计的各种精美小巧细如针尖的按钮，或是策划同学各种“加加加”的需求轰炸，还是老板“大大大”的呼喊，最终还是需要落地——按钮这玩意，多大才是大，多小才算小。这个时候，就需要一套设计规范和标准，但也要言之有理，让人心服口服地遵守。

本文就介绍一个简单快速的入门，让大家了解到按钮大小设计的逻辑，还有到底应该设多少大小的问题。

事先说明：本文介绍的每一节的课题，都是值得交互设计们深入研究的。本文从简单入手，讲究快速实用，摒弃容易混淆新人的长篇大论，但还是建议能查阅网上的相关资料，才能更加深入地了解这方面的知识，希望能帮助到大家。

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，对应其他的设备也可以用上文介绍的方法计算出来。

让按钮的触控区域和按钮的实际尺寸脱钩，这个就需要程序做支持了，这是最一劳永逸的做法，可以应对各种不同的情况，但要注意一点：触控区域代替了按钮，执行响应的任务，那么触控区域本身就应该代替按钮，执行遵守上文所说的一系列规范了。

...