大连北大青鸟

移动按钮的最佳尺寸和间距标准

据研究得出结论，12至48像素的范围是最佳按钮间距。

对于 UI 设计师而言，设计规范以及UX的设计原则是我们一切天马行空做设计的根基。

我们所设计的作品中，按钮是很普遍常用的，但是我们是否真正的了解按钮的秘密呢？昨天小编在 UX movement上看到国外一位资深的交互设计师对按钮的秘密进行了解剖。

今天来跟大家分享一下按钮的那些事儿～

1）按钮尺寸标准

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

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

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

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

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

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

·高优先级按钮= 72像素

·中优先级按钮= 60像素

·低优先级按钮= 42像素

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

2）按钮间距标准

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

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

·12-24像素的大按钮

·中等按钮为24-36像素

·小按钮为36-48像素

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

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

3）文本按钮的含义

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

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

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

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

4）调整按钮的大小

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

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

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