UI设计中在触摸屏上触摸目标

交互元素必须至少为1cm×1cm（0.4in×0.4in），以支持足够的选择时间并防止胖手指错误。

作为新父母，我越来越发现自己将智能手机用作主要计算机。记下笔记，选择下周的送餐工具包，在线购物以及追踪我孩子的饮食和睡眠方式，都需要一个人迅速地单手牵着这个小小的人类。无论这些努力是成功还是失败，通常都取决于移动设计的基本但至关重要的细节：触摸目标的尺寸和位置。

足够大的触摸目标对于使用界面至关重要-更不用说易用性了！我们都经历过因小触摸目标而产生的挫败感：可见但对点击却无反应-或更糟的是，迫使我们意外触发附近的链接。这些时刻让我们觉得自己在一个很小的世界里像个笨拙的巨人。

通常，此问题被描述为“胖手指”问题，因为用户的手指大于所需的目标（笨拙的鸡尾酒香肠在屏幕上戳戳）。但是胖手指并不是真正的罪魁祸首。责任应该落在微小的目标上。在功能上优先考虑美学的设计人员常常忘记创建可以轻松，准确地选择的目标。

大小事项

根据Parhi，Karlson和Bederson进行的一项研究，为使用户快速准确地选择触摸目标，其最小尺寸应为1cm×1cm（0.4英寸x 0.4英寸）。请注意，这是一种物理测量：尽管我们的设计可能是数字设计，但我们还是用双手在触摸屏上操纵这些数字元素。在像素值中引用尺寸并不能有效地传达触摸目标的这一物理方面，一旦您想到了指尖上过多的设备的多种屏幕密度，便很快变得毫无意义。

麻省理工学院触摸实验室过去的一项研究发现，普通人的指尖宽1.6–2厘米（0.6–0.8英寸）。典型拇指的撞击区域甚至更大-平均宽度为2.5厘米（1英寸）！设计触摸目标以考虑用户的物理尺寸是基本的以用户为中心的设计。

如果触摸目标太小，则用户需要花费更长的时间才能点击它们。（菲茨定律说，达到目标的时间取决于到目标的距离和目标的大小-因此，由于用户运动需要更高的精度，因此，较小的目标要比放置较大的目标花费更长的时间在同一地点。）

例如，Glow Baby应用程序使用各种彩色的条形或图标可视化跟踪的睡眠时间，尿布更换以及喂奶时间的历史记录，以便用户可以检测到婴儿行为的可能模式。轻按单个事件可显示详细信息，例如护理时间或婴儿入睡的确切时间。不幸的是，由于视觉反映了婴儿睡觉或哺乳的时间长短，因此如果会话时间很短，则敲击目标会变得太小而无法轻易敲击。

Glow Baby应用程序的历史记录页面上的2个轻击目标的屏幕截图。

发光宝贝：如果小睡或哺乳时间很短，追踪历史中的黄色和紫色条几乎变得无法选择。例如，3月15日的一次护理时间仅为5分钟，这导致敲击目标（一条黄色细条）的宽度仅为6毫米（0.2英寸），甚至不到1毫米（0.04英寸）。大约需要10次尝试来选择会话以获取右侧的屏幕截图，其中所选目标以橙色显示。

注意差距—拥挤导致错误

小目标不仅需要更长的时间才能到达，而且还增加了滑倒的可能性：意外地敲击了错误的目标，而该目标距离目标目标太近了。即使在避免错误的情况下，仅注意选择某个元素可能会带来问题，也增加了界面难以使用的感觉。

触摸屏上的地图通常会导致触摸目标错误。当在地图视图中显示许多位置时，每个位置的标记都非常小且密密麻麻，几乎不可能精确选择特定的精确点。在测试中，我们经常看到用户在移动设备上查看地图时会立即做出“焦点脸”，因为他们意识到这将需要努力。

麦当劳移动网络定位器工具的屏幕快照，其中包含细小且密集放置的地图定位点。

麦当劳的移动网站：定位器的搜索结果页面显示的地图标记太小且靠得很近。通过点击相应的精确度显示有关位置的信息。值得庆幸的是，还提供了位置列表视图（理想情况下应该是默认视图）。

链接和堆叠按钮的列表也经常成为触摸目标错误的受害者，因为元素之间的间距太小。例如，凯特·丝蓓（Kate Spade）移动主页上堆积的细按钮彼此之间过于靠近。它们之间的更多空间将防止用户窃听错误的内容。相反，白宫黑市移动主页上的链接相距足够远，无法准确点击。（另一种解决方案是将成对的目标并排移动而不是堆叠，因为与短线高度相比，额外的宽度为错误提供了更大的空间。）

屏幕快照比较了Kate Spade和White House Black Market的移动主页上的链接放置。

（左）凯特·丝蓓（Kate Spade）移动主页上的“最畅销礼品商店” 和 “礼品商店指南”链接太紧，无法准确点击。（右）相比之下，白宫黑市移动首页上的“购买新来的商品” 和“查找精品店” 链接之间的间距足够大，可以支持对每个链接的准确选择。

当然，如果目标太小，则在目标之间增加空间可能无济于事。为了避免意外敲击，目标必须首先足够大，然后再隔开足够的距离。例如，在Instagram上，用于拒绝关注建议的按钮太小（只有2mm-0.08英寸（宽）），因此即使它们与“ 关注”按钮足够远（大约2mm的间距-通常建议的最小值），他们仍然很难选择。由于采用了这种设计，在尝试将其从列表中删除时，不理会冒用帐户的风险就可以轻松地将其忽略掉。

Instagram应用程序中“关注”页面的屏幕截图。

Instagram for iOS：“跟随” 按钮右侧的 x 解除按钮太小，这些相对的动作之间的间距很小，不足以弥补它们的小尺寸。

如果驳回建议的接触目标范围更大，则对立动作之间的距离就足够了。尽管有足够的垂直空间，但额外的宽度将使用户可以在更远的边缘附近轻敲，以免出现潜在的错误。

视点不对称

触摸目标必须足够大以（1）辨别目标是什么，以及（2）准确获取它们。当元素足够大（例如，阅读标签文本）但元素太小或密密麻麻而无法选择时，就会发生视图点击不对称。在我们对iPad的早期研究中，这是许多设计的主要问题。当前视图不对称的常见示例是微小的iOS样式的轮播圆点指示器：您可以（有时）看到这些点，但是它们太小了，无法单独点击进行导航。

视点不对称性通常是由于台式机设计不适用于触摸屏而引起的。用鼠标光标轻松单击的元素并不总是可以用手指访问的。例如，戴维·尤尔曼（David Yurman）珠宝网站在产品列表页面的每张产品照片下均包含圆形小样本，以指示每种颜色的替代颜色。单击每个样本将更新页面上的产品照片，因此用户可以预览颜色而无需导航到详细信息页面。尽管此设计对于基于鼠标的交互效果很好，但是对于平板电脑用户来说，小色板实在太小（只有1mm或0.04英寸）-尝试敲打色板通常会激活到产品详细信息页面的链接。也许它们是可见的，以便用户可以看到其他颜色，但是轮播控件循环显示更多颜色选项也是小尺寸且无法应用。

平板电脑上David Yurman珠宝网站上产品列表页面的屏幕截图。

DavidYurman.com：产品列表页面上的备用颜色选项直径仅为1mm（0.04英寸），因此太小而无法在触摸屏上轻按（在平板电脑上可以看到）。

当更大更好

当然，1厘米（0.4英寸）仅仅是敲击目标的最小尺寸，并且在许多情况下，交互式元素应该更大。例如，主要的号召性用语通常应具有出色的视觉效果，因此应具有更大的点击目标。

使用环境还可能要求大于1cm x 1cm的水龙头目标：如果在用户移动时要使用某个应用程序（或移动网站），则目标将更难击中，因此应更大，以留出更多空间错误。在驾车或步行时，即使不是不可能使用，也很难进行需要精确操纵的控件。

例如，Target应用为实体商店中的用户确定了两个主要功能的优先级：搜索产品和扫描产品的条形码以查找优惠券或其他产品详细信息。这些按钮明显位于页面顶部，占地约2cm×2cm（0.8in×0.8in）。这种设计考虑了以下事实：许多用户可能在逛商店，搜索包含所需商品的过道或是否有针对指定产品的优惠券时正在使用该应用程序。

目标移动应用程序的登录屏幕的屏幕截图，其中显示了2个超大的主要点击目标。

用于在目标应用程序上搜索或扫描商品条形码的按钮过大（2cm×2cm或0.8in×0.8in），这两个按钮用于传达它们的常用功能，主要功能以及允许用户在实体商店购物存储以在运动时轻松点击这些按钮。

观众的需求也可能是更大的点击目标的原因。年轻的孩子需要大，容易接触到的控制，因为他们的身体技能不如那些成年人的发展。相反，灵巧程度开始下降的老年人也将受益于更大的控制权，这些控制权更能容忍摇晃的双手。以我为例，新父母需要有较大误差范围的大目标，以支持现在不可避免的杂耍行为。

限制屏幕上元素的数量可以使按键触摸目标更大并进一步间隔开，从而更易于点按。例如，Glow Baby应用计时器跟踪婴儿正在哺乳多长时间，将大部分屏幕专用于与哺乳计时器相对应的两个触摸目标（每个目标在iPhone X上测得的宽度为2.3厘米或0.9英寸），它们与其他次要目标之间留有足够的空白。仅当启动计时器后，才会出现较大的“ 完成”按钮，然后自动设置“ 开始时间”字段。屏幕上的所有目标都彼此相距很远，以免出现错误。

Glow Baby应用程序的2个屏幕截图，显示了使用护理计时器功能的多个阶段。

发光宝贝：护理计时器的触摸目标尺寸过大，并且与屏幕上的其他元素相距甚远，以便在用户完全握住手时易于轻按。

该屏幕的大小也会影响触控目标的尺寸。 非常大的触摸屏通常需要较大的目标才能引起注意并最大程度地缩短到达目标的时间。另一方面，诸如智能手表之类的小型触摸屏不应仅具有较小的触摸目标，而应将手势或语音控制视为交互方式。

结论

设计可用的触摸目标是所有触摸屏（以及移动设备）设计的基础。确保所有互动元素的物理，渲染尺寸至少为1cm×1cm（0.4in×0.4in），并且与其他竞争性触摸目标的位置要足够，以便于轻松，准确地获取。目标太小会导致更长的获取时间和错误，并且势必会导致用户沮丧。