网站设计之移动端网站按钮的最佳尺寸和间距

点按，点按，点按！用户是否能够以高触摸精度点击您的移动按钮，或者他们是否错过了目标？在责怪用户之前，请检查按钮的大小和间距。

如果他们没有最佳的尺寸和间距，难怪用户会错过他们的目标或按错了按钮。如果您不确定什么是最佳的，本文将揭示答案。以下测量值为96 DPI的CSS像素。

按钮尺寸标准

很难知道你的按钮是否在没有标准的情况下是最佳的。幸运的是，对按钮尺寸和间距的研究发现了一个适用于大多数用户的标准，包括老年人。

该研究发现，用户在按钮上的触摸精度最低，小于42像素。超过72像素的按钮也具有低精度。

使用42-72像素之间的按钮可以获得最高精度。这意味着42个像素是最小值，72个像素是最适合用户的按钮大小。

最优选的按钮尺寸是60像素，大约是该范围的中间。72像素按钮产生最高的触摸精度，是老用户的首选。

使用按钮数组时，指示优先级非常重要。这样，用户就知道哪些操作会使他们获得最理想的结果。按照按钮大小标准，您可以有效地指示优先级。您不再需要选择任意大小并希望它是用户友好的。

该示例演示了使用按钮大小标准来指示优先级。

• 高优先级按钮= 72像素
• 中优先级按钮= 60像素
• 低优先级按钮= 42像素

用户最常使用的按钮现在更容易被发现和点击。他们能够以更快的反应时间和更高的准确度来点击它。如果用户的注意力分配在不同的任务之间，这尤其有用。

按钮间距标准

当按钮相距太远时，用户移动到触摸目标的速度要慢得多。当按钮太靠近时，用户的触摸精度最低。

该研究得出结论，12至48像素的范围是最佳按钮间距。这种宽范围很有用，因为您可以将它应用于不同的按钮尺寸。将宽范围划分为较小范围时，可获得与标准按钮尺寸对应的按钮间距标准。

• 12-24像素的大按钮
• 中等按钮为24-36像素
• 小按钮为36-48像素

更大的按钮允许用户准确地击中他们的目标，即使他们的手指略微偏离目标。但如果他们用较小的按钮离开目标，他们就会错过并按下相邻的按钮。这就是为什么较小的按钮需要比较大按钮更多的间距。

该示例显示了遵循按钮间距标准如何提高触摸精度。用户的手指可以轻微偏离目标，无论大小多大，他们仍然可以按下按钮。

文本按钮的含义

这些标准可以应用于文本按钮吗？这些标准可以应用于文本按钮的高度，但宽度会有所不同。

例如，高度为60像素的文本按钮将具有比60像素图标按钮更大的宽度，但它也很容易点击。事实上，它更容易挖掘，因为较大的宽度需要较低的精度。

按钮高度对准确性更重要。您可以看到文本按钮的触摸精度与图标按钮保持一致。

由于宽度较大，按钮间距标准不适用于文本按钮。但是至少12个像素的间隔对于视觉分离是有利的。

调整按钮的大小

您的按钮是否具有最佳尺寸和间距？按钮尺寸和间距标准将确保您的移动界面具有高触摸精度。

根据你的感受决定适当的尺寸和间距会留下不确定的空间。最好建立一个你可以信赖的最佳标准。这就是设计系统的形成方式以及为什么许多公司使用它们。

想想你和你公司遵循的标准。如果您没有，请建立一些，您将能够跨平台扩展出色的用户体验。