移动互联时代，交互设计别再套用2010旧逻辑

　　去年双十一，守门多年的安全老邵蹲在IDC机房门口啃冷包子，雨水顺着顶棚铝扣板缝往下滴，在他左脚边积成一小滩，反着应急灯惨绿光。我原以为是CDN回源异常，结果查到第七层负载均衡日志里，看见三百七十二个请求头里User-Agent字段全带着“iPhone14,2; iOS 17.2”，而真实设备指纹里有两百一十四台根本没开WebRTC——这事儿我敢打包票，连WAF规则引擎都懒得解码那个伪造的Sec-CH-UA-Full-Version-List。

　　移动互联时代，交互设计别再套用2010旧逻辑。上季度末运维喊我去看一个“前端防重提交失效”的case，我打开DevTools切到Network，刚点开第一个POST，旁边穿蓝工装的新人小张就接了通电话，说“王工啊，那个风控弹窗……嗯嗯，用户说点三遍‘确定’才跳出二级验证框”。他挂了电话低头搓手指甲缝里的灰，没看我。我就盯着那个submit按钮的disabled状态：它只在form.submit()调用后置true，但用户双击时，第一次还没走完，第二次click事件早被Event Loop塞进宏任务队列了——2010年那套“JS线程单且慢，disable能拦住人”的逻辑，现在纯属掩耳盗铃。我改了，加了pending类+pointer-events:none，上线两小时，埋点崩了：iOS 16.4 Safari下transitionend居然不触发，动画卡在半透明态，用户看不见按钮变灰，继续狂点。最后是小张自己拿iPad反复戳了十八秒，才确认不是他手抖。

　　机房空调嗡嗡响，像一群快饿死的蜂子。我盯着大屏上那个红得发紫的APIQPS曲线，心里盘算着是不是该给登录接口加token绑定设备指纹，可转念一想，去年我们给某银行APP做的风控跳转链路里，同一个安卓ROM版本、同一WiFi SSID、同一批IMEI前八位的设备，在凌晨三点整集体刷出573条“短信验证码发送失败”日志——查出来是某第三方SDK静默启用了WebView加载伪装成短信服务的H5页，顺手把localStorage里的device_id和sessionToken混进了fetch header。他们设计时写的“点击发送→弹Toast→禁用按钮→倒计时→自动重启”，现在被那SDK的onPageFinished回调劫持了三次，最后一次直接call了navigator.clipboard.writeText。我删掉那段代码时手有点抖，因为知道删了它，下一个故障单就是客服中心打爆电话说“用户粘贴不了验证码”，可不删，数据就在裸奔。这个我说不准，真说不准。

　　那天晚饭外卖是酸辣粉，汤洒在键盘托盘上，干了之后黏着一层亮晶晶的油膜。我跟风控组的老陈在茶水间吵架，他说“交互要服从业务转化率”，我说“你见过哪个用户在地铁摇晃里盯着loading spinner数毫秒？”，他转身往咖啡机里倒速溶粉，没理我。结果上周四，他那个“首屏立即展示滑动引导气泡”的需求上线，我们监控到31%的Android用户根本没触发touchstart——不是他们不用，是那气泡CSS用了transform: translateZ(0)，某些中低端机WebView直接把整个图层扔进异步合成队列，等touch事件冒泡到js层时，气泡已经render完了、消失了、连DOM节点都被GC回收了。我们翻源码看到那个气泡的opacity是从0.01起跳的，渐变函数写的是cubic-bezier(0.42,0,0.58,1)，但他们忘了——2015年以后的Android WebView根本不保证cubic-bezier在低帧率下的插值精度，尤其当系统启用省电模式时，animation frame被砍到每秒十二帧，那个贝塞尔曲线实际跑出来是阶梯状的。我试过，录屏逐帧看，第三十七帧它突兀地跳到0.92，用户的手指早抬起来了。这种事儿，文档里没写，测试机也跑不出来，得靠肉眼盯，盯到眼睛发酸。

　　对了，老邵那天包子馅漏出来了，韭菜混着一点虾皮，沾在他袖口上。他后来用纸巾按着擦，没擦干净，留下一小块青黄相间的印子，一直没洗掉。

文章配图，仅供参考

　　我现在遇到表单交互就先开Wireshark抓包，看有没有非预期的prefetch，再切到ADB logcat，搜“InputMethodManager”，要是满屏都是“Failed to find input method”, 就直接叫前端换input type。至于那个还在用document.write动态注入验证脚本的H5页……我已经把它加入白名单绕过WAF规则了。不是放水，是不想半夜三点爬起来修一个永远修不干净的锅。先让它活着吧。

（编辑：站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!