移动端表单 UX 问题：我是如何通过优化错误状态来解决结账流失问题的

上个月，我负责优化一个移动端结账流程。该流程在 Figma 中看起来没问题，但在实际操作中，用户总是在填写配送信息这一步流失。最初的版本视觉上很简洁：单列布局、简单的输入框、一个蓝色的"继续"按钮。然而，通过会话回放发现，用户会点击两三次按钮，然后直接退出。客服工单也反映了同样的问题："地址无法提交"或"我不知道我的银行卡哪里出了问题"。 问题不在于某个单一的字段损坏，而是一系列 UX 小问题的堆积。错误提示出现在屏幕顶部，而键盘遮挡了屏幕下半部分。浏览器自动填充后，浮动标签变得难以阅读。公寓号本是选填项，但文案让用户误以为必须填写。当验证失败时，CTA 按钮保持禁用状态且没有任何明确原因。在 390px 的视口中，支付错误提示虽然在技术上是可见的，但实际上位于首屏下方。 我并没有重新设计整个结账流程。我提取了 GA4 漏斗数据、五份客服工单和一些会话片段，然后围绕"字段级反馈"重建了流…