手机app交互控件可触控最小尺寸

摘要：最小为1cmX1cm

关键词：移动设备，交互设计

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

最小尺寸

为了让用户快速准确地选择触摸目标，其最小尺寸应为 1cm × 1cm (0.4in x 0.4in)。请注意，这是一种物理测量：虽然我们的设计可能是数字化的，但我们还是会用手在触摸屏上操作这些数字元素。

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

当触摸目标太小时，用户需要更长的时间来点击它们。

拥挤导致错误

小目标不仅需要更长的时间才能到达，而且还会增加滑倒的机会：不小心点击了一个错误的目标，该目标距离目标太近了。

手机地图通常会导致点击错误。当地图视图中显示许多位置时，每个位置的标记都非常小且密集，几乎不可能精确选择特定的精确点。

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

链接列表和堆叠按钮也经常成为触摸目标错误的牺牲品，因为元素之间的间距太小。

（左） Kate Spade 移动主页上的Shop Best Selling Gifts和Shop the Gift Guide的链接堆叠得太紧，无法准确点击。（右）相比之下，白宫黑市手机主页上的Shop New Arrivals和Find a Boutique链接之间的间距足够大，足以支持每个链接的准确选择。

当然，如果目标太小，在它们之间增加空间可能无济于事。为避免点击错误，目标首先必须足够大，然后间隔也足够好。

iOS版Instagram： Follow按钮右侧的关闭按钮太小，这些对立按钮之间的较小间距不足以弥补小尺寸带来的错误点击。

不对称

当控件元素大到足以被看到（例如，阅读标签文本），但太小或太密集而无法毫不费力地选择时，就会出现不对称。

不对称通常是由不适合触摸屏使用的桌面设计引起的。用鼠标轻松单击的元素并不总是可以通过手指点击。

http://DavidYurman.com：产品列表页面上的替代颜色选项只有 1 毫米（0.04 英寸）直径，因此太小而无法在触摸屏上点击（这里是在平板电脑上看到的）。

越大越好

当然，1 厘米（0.4 英寸）只是点击目标的最小尺寸，在很多情况下交互元素应该更大。例如，主要的号召性用语通常应该得到很大的视觉突出，因此应该得到更大的点击目标。

在 Target 应用程序上搜索或扫描产品条形码的按钮超大（2 厘米 × 2 厘米，或 0.8 英寸 × 0.8 英寸），既是为了传达它们常用的主要功能，也是为了让用户在实体店购物商店可以在移动时轻松点击这些按钮。

受众需求也可能是更大的点击目标的原因。

年幼的孩子需要大型且易于触及的控件，因为他们的身体技能不如成年人发达。相反，灵巧性开始下降的老年人也将受益于更大的控制，这些控制更能容忍颤抖的手。

屏幕的大小也会影响触摸目标的大小。

非常大的触摸屏通常需要更大的目标才能引人注目，并最大限度地缩短到达目标的时间。

另一方面，小型触摸屏，如智能手表，不应该只是具有较小的触摸目标——而是将手势或语音控制视为交互方式。

结论

设计可用的触摸目标是所有触摸屏（以及移动）设计的基础。

确保所有交互元素的物理、渲染尺寸至少为 1 厘米 × 1 厘米（0.4 英寸 × 0.4 英寸），并且与其他竞争触摸目标有足够的间距，以便用户可以轻松准确地点击。

太小的目标会导致更长的点击时间和点击错误，并且必然会导致用户沮丧。