移动端结账地址表单 UX：我们在发布前遗漏的验证 Bug

我遇到的问题 一位小型电商客户询问，为什么在重新设计配送表单后，移动端结账的流失率激增。桌面端流程一切正常，Figma 文件在 390px 的画板上也看起来很整洁，所以起初我们以为是流量质量问题。但会话回放揭示了不同的情况：用户输入邮政编码、选择州、点击"继续"后，又被弹回同一字段，且没有任何明确解释。一些 iOS Safari 用户还遇到了键盘遮挡错误提示文字的情况。 真正的问题出在地址验证的细节上。浏览器自动填充有时会在城市之前填充州。我们的 API 随后根据邮政编码纠正了城市/州，但 UI 在下一次失去焦点（blur）事件之前，显示的仍然是旧的州标签。CTA 按钮看起来是激活状态，但数据包被拒绝，且内联错误提示位于首屏下方。对购物者来说，这感觉就像结账功能坏了。 我的改进措施 我不再仅仅将屏幕视为静态设计，而是围绕真实的输入行为重新构建了测试用例：自动填充、公寓号、邮政信箱、ZIP…