真机验收点击热区的一套实操流程

我以前验收移动端小图标，习惯在桌面浏览器里开设备模拟点两下就过，结果上线后总有人吐槽“十次有两三次点不中”。后来才明白：热区验收必须真机上手，拇指按下去的感觉，和鼠标点模拟器完全是两回事。

验收前先定好标准

我现在会先跟设计对齐两个底线：普通导航图标热区可以稍大方，破坏性操作（删除、清空之类）一定克制；相邻两个控件的扩展量，尽量不超过它们间距的一半，别让中间那条隐形分界线变成“点谁全看运气”。视觉稿里看着精致的小图标，真机上若可点区域跟视觉尺寸一样小，手指稍微偏一点就撞到旁边——这不是画得小的问题，是命中区域跟渲染盒绑死了。

真机上我怎么点

掏出手机，用拇指而不是食指，按真实握持姿势扫一遍。重点盯三个地方：屏幕边缘和角落（拇指够得吃力，热区不够大就必漏点）、相邻图标正中间的空白（扩过头会误触）、快速连点两下（有些隐形热区会和滑动手势打架）。点在空白却触发了操作，用户会懵；想点“更多”却删了东西，更要命。

伪元素扩热区不占布局，padding 配合受控盒尺寸也能稳，但验收时别只盯“能不能点中”，更要看“会不会点错”。扩完之后，我会故意在密集工具栏中间空白处多点几下，层叠关系不对的话，DOM 靠后或层级高的那个会“抢”点击，这种问题桌面模拟几乎暴露不出来。

最后再补一轮：横竖屏切换、单手够不到的区域、戴手套或手指略潮时的触感。热区不是越大越好，误触比点不中更招人烦。我把这套流程固定成上线前必过项之后，相关客诉明显少了——说白了，就是把“我觉得够大了”换成“拇指真实点过了”。