触摸触摸屏上的目标

作为新父母，我越来越多地发现自己把智能手机作为主要电脑。记笔记，选择下周的送餐工具，在网上购物，跟踪我孩子的饮食和睡眠模式，所有这些都需要单手快速完成，同时抱着这个小小的新人类。无论这些努力是成功还是失败，通常都取决于手机设计的基本而关键的细节:触控目标的大小和位置。

适当大小的触摸目标对使用界面至关重要——更不用说易用性了!我们都经历过由微小的触碰目标引起的挫败感:可见的，但对我们的点击没有反应——或者更糟，迫使我们不小心触发附近的链接。这些时刻让我们觉得自己就像在一个太小的世界里笨拙的巨人。

通常，这个问题被描述为“胖手指”问题，因为用户的手指比预期目标更大——笨拙的鸡尾酒香肠戳着屏幕。但是,胖子不是真正的罪魁祸首;责任应该躺在微小的目标上。优先考虑美学而非功能的设计师往往忘记创造容易且准确选择的目标。

大小事项

根据Parhi, Karlson和Bederson的一项研究，用户可以快速准确地选择触控目标最小尺寸为1cm × 1cm (0.4in x 0.4in)。请注意，这是一种物理测量:尽管我们的设计可能是数字化的，但我们使用双手在触摸屏上操作这些数字元素。引用像素值的维度并不能有效地传达触控目标的物理方面，而且一旦你考虑到我们指尖上的众多设备的屏幕密度的多样性，就会很快变得毫无意义。

麻省理工触摸实验室过去的一项研究发现，一个人的指尖平均宽1.6 - 2厘米(0.6-0.8英寸)。拇指的撞击区域甚至更大——平均2.5厘米(1英寸)宽!设计触控目标来考虑用户的物理维度是基本的以用户为中心的设计。

当触摸目标太小时，用户需要更长的时间来点击它们。（费茨定律说到达目标的时间取决于到达目标的距离和目标的大小——因此，较小的目标比放置在同一地点的较大目标需要更长的时间到达，因为用户的移动需要增加精度。)

例如，发光婴儿应用程序可视化跟踪的睡眠时间，尿布更换和带有各种彩色栏或图标的喂食会话，因此用户可以检测婴儿行为中可能的模式。点击个人事件显示详细信息，例如护理会话的确切时间或婴儿睡着了。不幸的是，由于视觉反映了婴儿睡觉或护理的时间长度，如果会话非常短，龙头目标变得太小，无法轻松点击。

注意空隙——拥挤会导致错误

小的目标不仅需要更长的时间才能达到，而且还会增加失败的机会滑:不小心点击了一个错误的目标，该目标被放置得太靠近目标。即使在避免了错误的情况下，仅仅注意到元素在选择时可能会有问题，就会增加界面难以使用的感觉。

地图上的触摸屏经常引起触靶误差。当在地图视图中显示许多位置时，每个位置的标记是如此的小和密集，以至于几乎不可能精确地选择一个特定的位置。在测试中，我们经常看到用户在手机上查看地图时，会立即做出“专注表情”，因为他们意识到这需要努力才能使用。

链接列表和堆叠按钮也经常触摸目标错误，因为元素之间的间距太小。例如，凯特锹移动主页上的堆叠的薄按钮彼此太靠近。它们之间的更多空间会阻止用户点击错误的空间。相比之下，白宫黑色市场移动主页的链接足够远，可以准确地水龙头。（另一个解决方案是将配对的目标移动到并排而不是堆叠，因为额外的宽度给出了与短线高度相比的误差的更多空间。）

当然，如果目标太小，在它们之间增加空间可能不会有帮助。为避免意外龙头，目标必须首先足够大，然后还足够长。例如，在Instagram上，要解除遵循建议的按钮太小（仅有2mm - 0.08英寸），所以即使它们离够远遵循按钮(大约2mm的间距-通常建议的最小间距)，它们仍然很难选择。由于这种设计，在试图将某个账户从列表中删除时，更容易忽略任何不良建议，而不是冒着意外跟踪该账户的风险。

如果用于驳回建议的触碰目标更大，那么敌对行动之间的空间就足够了。虽然有大量的垂直空间，额外的宽度将允许用户点击靠近较远的边缘，以避免潜在的错误。

查看 - 拍打不对称

触摸目标需要足够大（1）辨别目标是什么，（2）准确获取它们。查看 - 禁止不对称时发生元素大到足以被看到(例如，阅读标签文本)，但太小或密集，无法选择没有挣扎。这是我们许多设计的主要问题对iPad的早期研究。当前常见的视图点击不对称的例子是微小iOS式旋转木马点指示灯：您可以（有时）查看该点存在，但它们太小，无法单独点击以导航。

视图点击不对称通常是由于桌面设计不适合触屏使用造成的。使用鼠标光标很容易点击的元素并不总是可以通过手指访问。例如，大卫•尤曼(David Yurman)珠宝网站在产品列表页面的每个产品照片下面都有小圆形样本，以表明每种产品可选择的不同颜色。点击每个样本将更新页面上的产品照片，这样用户就可以预览颜色，而无需导航到详细页面。虽然这种设计在基于鼠标的交互中效果很好，但对于平板电脑用户来说，小色块太小了(只有1毫米或0.04英寸)——点击色块往往会激活到产品细节页面的链接。也许它们是可见的，这样用户就可以看到其他的颜色可供选择，但是旋转木马控制循环使用更多的颜色选项也太小了，无法点击。

当更大的更好

当然，1厘米(0.4英寸)只是点击目标的最小尺寸，在许多情况下，互动元素应该更大。例如,初级拨打行动往往值得巨大的视觉突出，因此值得更大的点击目标。

的使用上下文也可以要求点击目标大于1cm x 1cm:如果应用(或移动网站)是在用户移动时使用，目标将更难击中，因此应该更大，以留出更多的出错空间。在开车或走路时，需要精确操作的控制装置即使不是不可能使用，也很难使用。

例如，Target应用程序优先为实体商店的用户提供了两个主要功能:搜索产品和扫描产品条形码，以寻找优惠券或其他产品细节。这些按钮明显地放置在页面的顶部，占据大约2cm × 2cm(0.8英寸× 0.8英寸)的面积。这一设计考虑到了这样一个事实，即许多用户可能会在逛商店的时候使用该应用程序，寻找包含想要的商品的通道，或是否有特定产品的优惠券。

观众的需求也可能是更大的窃听目标的一个原因。年轻的儿童需要大的、容易够到的控制装置因为他们的身体技能不如成年人发达。相反，老年人，他们的灵巧度已经开始下降，也将受益于更大的控制，更宽容的颤抖的手。就我而言，初为父母的人需要有很大的目标，有很大的误差幅度，以支持我们现在生活中不可避免的杂耍行为。

限制屏幕上的元素数量可以允许键触摸目标更大且进一步间隔，因此更容易挖掘。例如，发光婴儿应用程序定时器跟踪婴儿的哺乳是多长时间的屏幕，将大部分屏幕专用于与护理定时器相对应的两个触摸目标（每个目标测量到2.3cm，或0.9英寸，在iphone x上宽，宽），它们之间的充满空间和其他，次要的，次要的目标。一个大的完成按钮只有在计时器启动时才会出现开始时间字段然后自动设置。屏幕上的所有目标之间的距离都相当远，以避免出错。

的屏幕尺寸也能影响触摸目标的大小吗。非常大的触摸屏通常需要更大的目标要引人注意，尽量缩短到达目的地的时间。另一方面，小触摸屏，如smartwatches在美国，不应该仅仅有更小的触控目标，而应该把手势或语音控制作为交互手段。

结论

设计可用的触屏目标是所有触屏(以及手机)设计的基础。确保所有交互元素的物理尺寸、渲染尺寸至少为1cm × 1cm (0.4in × 0.4in)，位置与其他竞争触控目标有足够的空间，便于准确获取。太小的目标将导致更长的获取时间和错误，并必然导致用户受挫。

参考文献

Parhi, P.， Karlson, A. K.和Bederson, B. B. 2006。“在小型触屏设备上单手拇指使用的目标尺寸研究。”在第八届移动设备与服务人机交互会议论文集。mobilehci '06。DOI =http://doi.acm.org/10.1145/1152215.1152260

Dandekar K.，Raju B.I.，Srinivasan M.A.（2003）。3-D人体和猴指尖的有限元模型，探讨触觉意义的机制。生物力学工程学报, 125, 682 - 691。DOI =10.1115/1.1613673