01 拿自己的手机，单手点一次「联系我们」
把手机拿起来，只用一只手，拇指点自己网站上的「联系我们」，连着点 3 次。
点不中的，这篇值得往下看。
拇指按下去的面积，比鼠标指针大几十倍。接触面大了，精度就低了，这本是常识。
我们做过这个测试，服务过的外贸站里，有相当一部分在手机上按不准那个按钮。
这个问题在电脑上永远看不出来，鼠标的命中精度和手指不是一个量级。
02 「响应式做好了」不等于手机上能用
多数人判断手机端做得好不好，看的是排版有没有错位、图片有没有溢出。
这两样是「能看」，不是「能点」。
一个站在手机上可以排版完全正确，缩略图、导航、表单都规规矩矩，但按钮只有 24 个像素宽，手指按上去，命中的其实是旁边那个。
响应式框架管的是布局怎么折行，它不会替你判断一个按钮够不够大。
框架只负责不错位。
谷歌从移动端优先收录开始，判断一个页面好不好用，依据就是手机版这一版。所以「适配」这件事，要在手机上真的用手指过一遍才算数。
手机端的体验不是审美问题，是尺寸问题。尺寸可以量。
03 判据：44 个像素见方，间距 8 个像素
手指的触控目标有一条通行的下限，44 个像素见方。
苹果的人机界面指南写的是 44 点，安卓的规范给的是 48 个像素见方，两边差不太多。
低于这条线的按钮，误点率会明显上来。
第二个数是间距。两个可以点的元素，边缘之间要留出 8 个像素以上。挨得比这更近，手指压下去的时候，浏览器只能靠猜。
这两个数在 PageSpeed Insights 和 Lighthouse 的移动端报告里都有对应项，尺寸不够的元素会被逐个标出来，附带一个可点区域的实际尺寸。
还有一个容易忽略的点，可点区域不等于可见区域。一个文字链接看起来只有 4 个字宽，但它的热区可以靠内边距撑到 44 个像素见方，外观完全不用改。
04 四类容易按错的元素
把站翻一遍，问题基本集中在这四类。
- 顶部导航的二级菜单，父级文字本身就是热区，宽度常常不到 30 个像素。
- 表单里的勾选框和单选框，「记住我」「我同意条款」这类小方框本身只有 13 个像素。
- 电话和邮箱链接，一串数字的可点范围就是那串字本身。
- 轮播图的切换圆点，几个小点在一条线上排开，间距不到 4 个像素。
这四类的共同点，是设计稿上看着干净，手指按下去才知道不行。
修法都很快，给外层容器补内边距，把热区撑到 44 个像素以上就行，视觉上不用动。
动手之前先数一遍，一页里能点的元素有几个。超过 30 个的一页，多半有挤在一起的需要分开。
05 拇指够得着的范围，决定主要动作放哪
一只手拿手机，拇指的自然活动范围集中在屏幕中下部。
顶部两角，拇指要换握姿才碰得到。所以报价、加购、联系我们这些主要动作，尽量不要放在最上面。
这条在落地页上尤其明显。主按钮如果压在顶部导航下方，等于让访客先做一次难度更高的操作。
可以用 Chrome 的设备模式把视口切到常见机型，按 375、390、414 这 3 款宽度各看一遍，主要动作是不是落在够得着的位置，一眼就能判断。
必应在这块的判据和谷歌接近，同样是按移动端呈现来判断可用性，不看你在电脑上排得多整齐。
够不着的位置不是绝不能用，放次一级的信息没问题。
06 我们测试过 30 个站，误点集中在两处
我们测试过 30 个站，用手机跑同一段流程，从首页走到提交表单。
误点集中在两处，上方导航，以及表单里的勾选框。这两处加起来占到全部失败点击的一半以上。
表单那一处的代价更贵。客户在勾「我同意条款」时点到了旁边的链接，页面跳走，前面填的内容全丢。
回到后台，这类事故看起来就像「访客来了但不提交」。用 Google Analytics 4 看那段流程的逐步流失，会看到停留时间不短的会话直接停在表单页。
停留时间是长是短，比跳出率更能说明问题。人是被卡住了，不是没兴趣。
07 顺序：先改表单，再改导航
只能先改一处，先改表单。
导航点不准，客户还能靠滚动找到入口；表单点不准，客户直接走。
表单这块的具体做法是把 label 和输入框绑在一起，点文字也能聚焦，然后把勾选框的可点区域撑到整行。
导航放到第二步改，主要动作在手机上收进一个明显的菜单按钮，别让七八个栏目平铺在顶栏里挤成一排小字。
两处改完再验一遍，用真机各回一次表单，比在电脑上缩窗口可靠。
改完顺手留一份记录，把动过的元素和日期写进同一个文件。半年后再碰手机端的问题，这份记录能省掉重测一遍的时间。
08 哪几类站可以先放一放
也有几类站可以先把这件事往后压。
- 没有手机流量的站，客户全在电脑上办公，后台数据一看就知道。
- 投放期的短周期落地页，生命周期按周算，改完就该下线了。
- 纯展示的名片站，访客来这儿只是看，不会在上面提交任何东西。
判断有没有手机流量，用 Google Analytics 4 看一眼设备报告就够。手机占比不到 5% 的站，优先级可以往后排。
手机访客过半的站，这件事应该排在改文案之前。文案改得再好，按钮点不准也白搭。
09 两个容易漏的细节
头一个是输入框的字号。
iOS 上如果输入框字号小于 16 个像素，聚焦时会自动把整个页面放大，客户填完一个字段就得手动缩回去。这一条很多人找不到原因。
第二个是固定底部的浮层。在线客服、返回顶部、Cookie 提示条叠在一起，会盖住页面底部一截，而那里往往正是提交按钮。
两条都能在真机上花 5 分钟验一遍。
再补一条更省事的，把页面丢进 PageSpeed Insights，那份来自 CrUX 的实测数据里会给出真实的 CLS 数值。浮层在加载后跳出来撑动版面，CLS 会直接反映出来，这类问题不用自己盯屏幕找。
常见问题
Q1、按钮改大之后排版会不会变乱？
不会。可点区域和可见范围是两回事，靠内边距把热区撑大，按钮看起来还是原来那么大。真正要调的是几个元素之间的间距。
Q2、44 个像素这个数字是怎么来的？
它来自苹果人机界面指南里的 44 点，安卓规范给的参考值是 48 个像素见方。两边是在不同屏幕上测出来的经验下限，取其中一个都行。
Q3、手机上点不准会影响谷歌排名吗？
会间接影响。谷歌按移动端页面判断可用性，页面在手机上不好用，排名和点击都会受牵连。反过来说，把尺寸改对，排名不一定立刻动，但访客的提交率会变。
Q4、手上没有多台真机怎么测？
Chrome 的设备模式能覆盖最常见的 3 款宽度，再加上 Lighthouse 的移动端报告，够用。要更保险，把 2 台不同尺寸的手机拿在手上各点一遍。
关于作者与参考来源
张凯文，山东支点网络科技有限公司，长期做外贸网站建设与谷歌 SEO。
手机端体验上有拿不准的地方，可以在站内联系我们。
Google Search Central（developers.google.com/search/docs）
PageSpeed Insights（pagespeed.web.dev）