适当调整点按目标的尺寸

12月 22, 2015
PageSpeed Insights
175
本页内容

当PageSpeed Insights检测到某些点按目标(例如按钮、链接或表单字段)可能过小或距离过近,以致用户不方便在触摸屏上点按时,就会触发此规则。

概览

对于用户来说,如果链接或按钮太小或摆放太密集的话,要想在触摸屏上准确点按这些目标,会比使用传统鼠标光标更费力。为了让用户免去不慎按错位置的困扰,请为每个点按目标设置足够的大小,并让它们之间保持足够的距离,以免用户在点按任何目标时手指触碰到其他任何点按目标。成人的手指指腹平均宽约10毫米(不到半英寸),因此Android界面准则建议最小点按目标尺寸约为7毫米,或在移动视口正确设置的网站上,点按目标至少要达到48 CSS像素。

建议

您应确保网站上最重要的点按目标(用户最常用的目标)足够大,即高/宽至少要达到48 CSS像素(如果您已正确配置您的视口),以便用户轻松点按。不常用链接的尺寸可以较小一些,但仍要与其他链接之间保持一定的距离,以免10毫米宽的手指不慎同时按到两个链接。用户无需张合手指(或依赖其他浏览器界面功能来排除手指点按干扰,如Chrome的弹出式放大镜),即可轻松准确地点按所需的按钮或链接。

将重要的点按目标设置得足够大以易于点按

这种方式比较适合您的用户最常用的点按目标,例如常用操作的按钮、搜索栏、其他重要的表单字段,以及主要的导航链接。这些点按目标的尺寸至少应为7毫米(如果您已正确配置您的视口,即为48 CSS像素),如果小于7毫米,则其周围须留有足够的空间。

确保较小的点按目标之间有足够的空间

对于不常用的链接或按钮,尺寸小于建议的7毫米是没有问题的。不过,其横向和纵向5毫米(32 CSS像素)范围内不应该有其他点按目标,以免用户手指点按一个点按目标时不慎按到其他点按目标。

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Site Policies.

昵称*:
邮箱地址*:
评分*:
内容*: