移动端web设计尺寸_手机移动端网页按钮设计尺寸及间距规范

网页版面上的字体大小有讲究，而网站的按钮的尺寸及按钮之间的间距标准非常有细节规范。

序幕

-

点击，再点击，重复点击！用户是否能够以高触摸精度点击您的移动按钮，又或者他们是错过了按钮的目标？在责怪用户之前，请检查一下您设计的按钮的大小与间距。如果按钮之间没有最佳的尺寸和间距，难怪用户会错过他们的目标或按错了按钮。如果您不确定什么是最佳的按钮设计方案，那么本文将揭示答案。

按钮尺寸标准

-

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

该研究发现，用户在按钮上的触摸精度上，小于 42 像素或超过 72 像素的按钮都具有最低的精度率。使用 42 一 72 像素之间的按钮可以获得最高精度反馈。这意味着 42 个像素是按钮的最小值，而 72 个像素则是最适合用户的最大值。研究发现最优选的单个按钮尺寸是 60 像素，大约是 42 一 72 像素的中间范围，不过如果不考虑设计的因素， 72 像素按钮产生会最高的触摸精度，也是设计师对大范围人群设计时的首选。在使用多层按钮选择时，指示优先级也非常重要。这样用户就知道哪些操作会使他们获得最理想的结果。按照按钮大小标准，您可以有效地指示优先级不再需要选择任意大小并希望它是用户友好的。

该音乐播放的示例演示了使用按钮大小标准来指示优先级。播放的按钮最大，其次是上下选择，再其次是循环与随机。请记住：大小优先级的顺序

· 高优先级按钮= 72 像素

· 中优先级按钮＝ 60 像素

· 低优先级按钮＝ 42

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

按钮间距标准

-

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

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

· 12 一 24 像素的大按钮

· 中等按钮为 24 一 36 像素

· 小按钮为 36 一 48 像素

更大的按钮允许用户准确地击中他们的目标，即使他们的手指略微偏离目标。但如果他们用较小的按钮离开目标，他们就会错过并按下相邻的按钮。这就是为什么较小的按钮需要比较大按钮更多的间距。该示例显示了遵循按钮间距标准如何提高触摸精度。用户的手指可以轻微偏离目标，无论大小多大，他们仍然可以按下按钮。

文本按钮的含义

-

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

例如，高度为 60 像素的文本按钮将具有比 60 像素图标按钮更大的宽度，但它也很容易点击。在实际的案例运用中，它也更容易挖掘，因为较大的宽度需要较低的精度。按钮高度对准确性更重要。您可以看到文本按钮的触摸精度与图标按钮保持一致。由于宽度较大，按钮间距标准不适用于文本按钮。但是至少 12 个像素的间隔对于视觉分离是有利的。

调整按钮的大小

-

您的按钮是否具有最佳尺寸和间距？按钮尺寸和间距标准将确保您的移动界面具有高触摸精度。根据你的感受决定适当的尺寸和间距会留下不确定的空间。所以在本文最后，各位设计者最好建立一个你可以信赖的最佳标准。这就是设计系统的形成方式以及为什么许多公司使用它们。想想你和你公司遵循的标准。如果您没有，请建立一些，您将能够获得多种跨平台的出色的用户体验。