触控屏幕手指点击的人体工程学

1、触控屏已伴随我们渡过了数十载的岁月，它也是近五年内大多数人在移动设备上使用的输入方式。事实上，很多新手设计师、入门开发人员或者移动互联网入行较晚的人，甚至没有用过带物理按键的手机。不过，目前只有很少部分设计师了解触控屏的工作方式并清楚人们是如何与之发生互动的。我（原文作者）在不同公司担任用户体验设计咨询师时，也碰到过一些触控屏设计的误区。一.不能只依赖44像素的触控目标即便市场份额已经落后于Android，iOS定义的触控目标标准尺寸（44像素）也是我们大多数人遵循的原则，而此处44像素并非物理尺寸。移动设备市场上存在不同规格的操作系统，Apple使用与设备无关的单位“pt（像素点）”来替代之

2、前“pixel（像素）”的概念，44像素或者44pt这类概念无法以物理尺寸来描述。物理尺寸当然很重要，毕竟当前所有的优秀设计规范中都是以毫米、英尺、字号或其它真实尺寸来作为度量单位的。另外，诸多操作系统或嵌入式系统的设计规范定义的触控目标比各类相关研究提倡的尺寸要小。例如，Nokia与Microsoft等公司始终强调7毫米是触控目标的最佳尺寸，同时也认为触控目标之间应该保持2毫米的间距。ANSI/HFES 100-2007（译者注：2007年11月美国国家标准机构批准通过的计算机人因工程学国家标准）推荐的按钮最小尺寸为9.5毫米。为触控屏做设计时，我们是无法使用单纯的像素或唯一的尺寸来定义触控

3、目标的大小。二.不同大小的手指真的重要吗？从另一个角度来考虑触控目标的尺寸，ISO 9241-9（译者注：国际标准化组织ISO推出的覆盖人机工程学的多部分标准）推荐的按钮尺寸大小等于95%男性用户的手指末关节宽度，大约为22毫米。但很多用户却使用拇指对移动设备进行操作。一些触控目标设计规范基于人们手指的宽度来制定，然而这种衡量方式并不完全科学。尽管我们有着不同宽度的手指，但当我们操作电容触控屏幕时，仅有一部分手指与屏幕接触，如下图所示：人的手指是立体柔软并富有弹性的，接触屏幕的面积随着压感和角度的不同而变化。一些研究结果建议用户在触控偏小的目标时，放慢动作并尽量采用更加精准的触控方式，例如拿指

4、尖触碰；放轻动作力度从而以更小的触控印迹来获得更佳的触控感，将来我们可以好好利用这一建议。我（原文作者）通过研究发现，尽管手指更小，儿童在操作触控屏幕时不如成人精准，因为他们与成人具备同样的触控印迹。这种情况或许让你感到惊讶，如今的触控屏感知的只是触控印迹的中心或质心而不是整个触控区域，如下图所示：因此触控屏无法将用户触控印迹的大小传递给手机应用。移动设备只是根据触控印迹的质心来判断用户点击了什么，而不看触控印迹的大小程度。幸运的是，人们已经能够熟练运用双手并且善于点击目标的中心位置，因而能够将触控质心触及他们想要的位置。在上图中，被遮挡区域容易影响人们定位触控印迹，但触控印迹的质心很容易让人

5、们了解哪里被点击了。诚然，手指的大小会影响用户的点击界面的精度，但手指尺寸与触控目标的关系与之不能混为一谈。这种情形下，手部遮盖的屏幕部分究竟有多大取决于用户手持设备的方式。三.临界点之前越大的按钮越好用当触控目标为一个按钮时，在达到某个临界点之前越大越好。研究表明超过某个尺寸之后，按钮面积的增大对于提高触控交互准确性的提升非常有限。当按钮变得过于庞大之后，用户会怀疑它们是否可点击，甚至将其当做特殊的控件来看待。信奉按钮越大越好带来了一定程度的误解，因为它使人们相信可视区域即为触控区域，这种观点导致了很多设计问题。实际上，为了获得更大的触控目标，并不需要增加视觉区域的大小，而只需要增加可点击按

6、钮或链接的热区大小。对于任何交互控件来说，视觉区域的大小与触控区域的大小不一致往往比一致更好。四.设计目标当设计触控界面时，我们必须考虑到三方面：设计视觉目标设计触控目标避免干扰1.设计视觉目标视觉目标包括文本链接、图标或者其它传递交互概念的图形元素，它们必须足够清晰、足够大才能：吸引用户眼球。使用户了解它们是可以操作的元素。具备可读性，从而让用户理解将会执行什么操作。使用户能轻而易举的完成点击动作。视觉目标的最常见问题来自用户期望目标是什么。例如，在列表或表格中，如果行与行之间有可见背景或者分隔线，用户一般会期望行间的单元格或者列作为目标。因此不要仅仅将文字作为目标，同时也要注意多加利用容器

7、和指示器引导点击，确保尽可能的使用分隔符或容器。通常我们利用视觉目标的设计来显示多种状态。很多触控问题归结于缓慢的响应速度，因为大部分用户在没有立即看到点击反馈的情况下，会认为点击失败而再次尝试。只要设备接收到了触碰的信号，视觉目标应该立即切换到与默认状态不同的激活状态。切记用户手指遮挡目标时出现的问题，确保状态改变的视觉区域大到用户很容易察觉。从人的视力角度来看，最重要的不是字体大小，而是通常被称为角坐标分辨率的视线角度。在下图中，狭窄的锥形显示最小可读尺寸，较宽的锥形则是用户目光聚焦的高分辨率区域。用户观看较远的设备时更大的字体能带来更好的效果。最小字号必须满足3个标准：可读、易读和可点击

8、。如上图示，通过角分辨率和距离的计算，可读性的最小尺寸为6pt或者2.1毫米。除非是用来加强文本效果（例如链接打开新窗口页面的标识），图标必须大于8pt或者2.8毫米。视力不佳的用户需要更大的视觉目标。视觉目标同样有最大尺寸的限制。不难得出这样的观点：我们注意力范围远小于我们的视野范围。锥形代表5度左右宽度的视网膜中心凹视力，约为以手臂为轴心，一半拳头大小划出的圆弧大小。这恰好正是大多数移动手持设备的角度标注，它远小于平板电脑的屏幕。因此，用户无法察觉到跨越整屏大小的按钮或其它可点击元素是可操作的。如果你认为横幅广告是个例外的话，请注意，大多数横幅广告通常含有偏小尺寸的行动按钮或链接。因此请确

9、保你的视觉目标在用户的关注区域中不至于过大。注释：除非特别声明，作者提供的具体设计规范仅适用于手机。人们在更远的距离下使用平板电脑、台式显示器和视频播放器，根据屏幕尺寸和期望结果，你可能需要设计更大的视觉区域。人们常常在离自己很近的情况下手持偏小的移动设备，比如大部分功能手机，因此你可以用偏小的尺寸作为视觉目标。只要确保计算好角坐标分辨率并且让真实用户在真实设备上测试可读性就好。2.设计触控目标用户可以在屏幕中进行操作的区域称为触控目标，在触控目标之外的屏幕区域进行触控无法激活对应目标。正如我（原文作者）之前所提到的，目标的视觉设计决定了用户对其尺寸大小的期望。如果用户期望该按钮或元素可以被点

10、击，那么让它整个看起来应该就是可点击的。我曾遇到很多按钮仅有文字区域可点击，而其它区域点击上去没有任何作用。因为触控屏幕仅对触控印迹的质心或者中心敏感，所以仅从用户手指的触控印迹无法像人们认为的那样可以确定触控目标了。为了了解当触控目标有多大时不会影响到可用性，我（原文作者）阅读了大量文献并且查阅了圆概率偏差（CEP）有关概念的数学资料。任何定位都有不可避免的误差存在。用户在目标上的实际触控区域是不完全规则的，它们分布在目标周围。这种分布不是随机的，而是紧紧围绕着视觉目标。通过测量它们的误差，你能将圆概率偏差作为命中率的指标，并能得知用户是否可以在可接受的精度下击中目标。精度超过95%之后会出

11、现收益递减，说明很小的改进需要更大的目标。因此我（原文作者）使用R95的圆概率偏差来确定尺寸的大小。文本链接往往很小而难以准确点击。一些现代的操作系统和浏览器，比如Google Chrome尝试通过将那些偏小目标或模糊目标放大，从而提供更大的点击区域来解决这类问题。如下图所示：然而，视觉目标一般情况下不应该是并且不必是触控目标。例如，移动站点经常有很小的（6pt）文字链接跳转到网站申明或完整站点，因为不想让用户关注到该链接太多而使用较小的文字尺寸，但同时太小的尺寸而会变得难以点击。很简单，第一，并不是只有文字链接的视觉元素本身才能被点击，它周围的区域都可以作为可点击热区。（如果你用手指拖动来选

12、择文本的话你会发现链接的可点击区域。）如果一个使用6pt字号Helvetica字体的链接，其可点击区域应该在7.68pt或者2.7毫米高度左右的范围内。但这还远没达到容易点击的尺寸，用户仍然可能在这种尺寸的热区上遇到50%的误操作率。在用户相对静止的状态下，可靠的最小点击区域为6毫米。当用户在移动过程中或者注意力分散时，8毫米的点击区域才够。更小的触控目标可能延缓用户操作速率，这往往会造成无法接受的界面操作效率下降。同时，也没有任何触控区域必须大于15毫米。这也取决于你测量触控质心的方式，有时质心趋于出现在视觉目标中心线的下方。尽管从技术角度来说是准确的，但圆概率偏差（D2RMS or R95

13、）方面有效理论并没有证实这一点。测量等距的高点击和靠近中心的低点击的差异没有任何统计学意义。我不由将它纳入移动设计无法解释的现象，因为它对设计没有丝毫影响。3.避免干扰保证触控目标的合适尺寸意味着它能被用户点击。当用户无法精确的点击触控目标时，则会导致目标未被激活。我们要留意的一个关键因素是当用户错失一个触控目标时会有什么结果。无论如何人们总是会错失一些目标，那么如何为出错买单则至关重要。当界面上两个或更多触控目标的物理距离太近时，圆概率误差半径致使一个目标覆盖到另外一个目标之上，这会造成严重的干扰。因此我们要确保在触控目标的每条轴上对干扰进行检查。为了避免干扰，应确保各个触控目标的中心至少保

14、持8毫米距离，最佳为10毫米。此处的“中心”为工程术语，表示从每个触控目标的中心位置。按这种方法，你能测量不同尺寸控件（比如链接和按钮）的中心位置，因为这种测量方式与视觉和触控目标尺寸皆无关。大多数触控目标之间不会距离太近，它们之间仅留很小的间隔，并且这种间隔较难察觉。非触控区域不需要留白，比如，工具栏通常由间距适当的图标组成，但它们之间的间距不会在视觉上有明显提示。分页标签的高度可以做的很矮，只要其上下方没有其它触控目标。不管是原始屏幕还是拉伸屏幕，在每个目标上用一个圈来验证干扰问题，如下图所示：在这里外圈为10毫米直径，内圈为8毫米直径。左右两张截图里的列表项高度都为最小可接受尺寸。但左边

15、截图中很矮的分页标签可能会给操作带来一些干扰：用户有可能不慎在点击标签时激活下面列表项。规避风险是防干扰设计的另外一种手段，让触控目标保持足够间隔从而避免误点击往往很难。有时候操作系统规范过度强调使用偏小且相邻的目标，使用一些策略来解决这类问题相对来说不难。不要将按钮放在糟糕的位置，也不要让操作结果很难撤销，这样会带来各种麻烦。例如，用户在界面上撰写一封邮件时，“发送”和“删除”按钮应该远离对方，并且远离格式调整之类的功能。偶尔的误点“加粗文字”按钮能通过再次点击取消，但要取消发送邮件很难，而且恢复删除的邮件需要在邮件垃圾箱里重新找到该误删邮件。在移动设备上，交互元素彼此临近。当使用手指点击或

16、进行其它手势操作时经常发生误操作。幸运的是，一些最佳设计实践已经从很大程度上解决了这类问题：我们花时间将功能按照行为类型分组，从视觉设计上使得触控目标之间不会太过靠近，对不同重要性的控件在视觉上和位置上做出区分。鼓励有兴趣的读者进一步研究触摸屏技术从而更好的理解它的功能和限制。举个例子，触摸屏的设计会在不同类型的设备之间引起精度问题，特别是在屏幕的某些位置更加明显。只要我们更好的了解这些技术限制，就有可能更好的通过避免在屏幕上低分辨率位置进行细致触控操作来规避这些问题。五.设计手势和动作本文主要阐述包括点击和长按操作的触控交互设计，而在如何将人体工程学因素应用在手势上所作的研究甚少。例如，设计

17、一个易用的音量调节滑块，在任何触控交互中都有长按控件这一前提，但当用户在屏幕上移动手指来拖动控件时就需要考虑更多方面了。具体来说，就是需要将拖动的方向限制在单轴、特定的角度或动作上。在水平音量调节滑块上，一旦用户激活了控件，应用应该忽略用户手指在垂直方向上的所有移动。这是让用户精确操作控件的秘诀。其它手势交互需要大体类似但稍有区别的规范。关于触摸设计，无论从定义上还是理解上，有许多对手势设计最佳实践的误解，因此在进行手势设计时务必认真考虑用户的需要。希望在不断扩充手势设计最佳实践的同时，一些实用研究能帮助我们更深入的了解手势设计。触摸屏设计规范总结我（原文作者）做过很多这方面设计依据的阐述，所以会总结一下在设计触摸用户界面时需要遵循的关键步骤：1.确定每个视觉目标的尺寸。2.在你的设计文档中定义每个触控目标的