魔鬼藏在细节里

【魔鬼藏在细节里】互动按钮大小事

当一个产品完成核心部分的需求之后，我们就可以慢慢准备开始研究细节的问题

一个产品几乎每个层面都可以谈论细节：其中还包括表面上看得到的，以及表面上看不到的。表面上看得到的细节很简单，花时间去做、去尝试、去犯错、去修正就好了。而看不到的细节诸如产品定位、使用者体验等等，往往依靠不长期经验的累积、研究与得到使用者反馈外，很难清楚的明了到底哪边该怎么去制作与修正。

小小一个按钮、搭配一个点的小小动画，却牵扯到与使用者互动的部份。即牵扯出这么多的「细节」出来。著名的工业设计师Charles Eames（伊姆斯，设计躺椅，美国）说过：「细节本身并非细节，而就是产品的精髓。」他们那些经过千锤百炼、精心设计的椅子款式，一直到现在都还是精采的设计呢。

在茫茫的APP 海中，总是会有很多小不拉机的按钮，怎么点也点不到，使用触控式行动装置时最痛苦的事情了；但同样是一些娇小的内建按钮，如iOS 导览列上的导览按钮以及清单列的删除按钮。

秘诀在于设定按钮的触控感应区（Touch area），按钮其实可以分为两个部分：

一、视觉目标（Visual targe）－使用者可以看的到，并且想要去点击的区域。

二、触控感应区（Touch area）－使用者看不到，用于判断检测手指是否有触碰到按钮的区域。

一般来说，对于小于建议大小的按钮，我们需要手动将触控感应区调整的比视觉目标更大一些，这样一来即使使用者没有真的触碰到按钮的视觉目标（如下图），也可以成功地点击到按钮。

触控式行动装置上的萤幕空间寸土寸金，过大的按钮设计会浪费空间，有质感的小按钮又总是让人按不到，那么到底按钮应该要设计多大才方便使用呢？根据过去的统计资料，人们最常用于操控触控式萤幕的拇指与食指平均宽度为：男性2.29 cm 与1.82 cm；女性1.91 cm 与1.55 cm，因此传统上建议按钮大小为2.2 cm。

按钮本身的尺寸是一个方面，按钮间的间距呢？非常有意思的事实是按钮间的间距对于整个交互的性能和精确度影响微乎其微。所以即使在屏幕尺寸很小的情况下，仍然建议增大按钮面积，哪怕这样做会使很多按钮紧挨着。当然如果有多余的空间，最高0.125″（约3毫米）的间隔还是有助于让界面用起来更舒服，尽管整体精度和速度不会发生变化。

希望在你的设计里使用尺寸更小的按钮？我们这里讨论的尺寸都是按钮的实际可触摸面积。如果你使用了更小的按钮，只要保证按钮的可触摸面积超过他本身的可视面积，达到我们的要求就好了。当然这种情况下就得考虑按钮间的间距问题了。

那尺寸变大呢？不得不说这也未必是好事，因为大过一定程度之后用户点击的精度不会提高，速度反而会下降，因为移动于各个按钮间的时候手指必须移动更大的距离。

希腊字母“φ” 在数学上往往表示一个定值——1.618，也就是大家非常熟悉的“黄金分割”。了解文艺复习的朋友肯定都知道黄金分割被广泛应用在非常多的地方。比如蒙娜丽莎这幅画上所使用的黄金分割就足够你写一整本书了。

如果你把这个黄金比例用在按钮上，那这个“理想”的按钮大小就是1.25″ x 0.75″（约32 x 19毫米）。