E6.03.2validation layout shift设计
提示出现不应造成布局跳动
别名: 校验回流 · layout shift · 错误把布局顶开
概念解释
内联提示一旦插入文档流，就会把下面的字段、按钮和帮助文字往下推。布局跳动（layout shift）指的是提示从无到有（或从有到无）时，用户正看着或正要点的那些控件换了位置。它和「提示要不要紧贴字段」是两件事：紧贴解决归属，跳动破坏的是空间稳定性。失焦时突然多出两行红字，下一项的输入框刚好从指针下溜走，用户点到的是再下面那个字段，或者误以为页面自己滚动了。
机制
人靠控件的屏幕坐标继续刚才的动作：眼睛已经落到下一框，手指已经按下去。插入一块高度，所有后续坐标整体平移，但运动规划还指向旧坐标。结果是点错、选错、或以为焦点跳了。跳动还打断阅读：正在看的帮助文字被推走，用户要重新找。校验常常在失焦、逐键或提交时触发，这些时刻用户已经把注意力送到了「下一个动作」，而不是「看错误」。预留高度可以消灭跳动，但空白本身也在说话，会让人以为这里本来就有一句说明。真正要稳住的是用户正在使用的那些像素，不是页面总高度永远不变。
边界
第一条错误出现在视口外、用户尚未开始点下一项时，回流几乎不被察觉，优先保证提示能展开说完。表格和网格里单元格放大比整列重排更局部，有时以格子内滚动代替把后续行全部顶开。动画把高度慢慢推开并不能取消坐标变化，只是让点错发生在动画中途，更难复盘。键盘用户不靠指针坐标，跳动对他们的伤害主要是滚动位置被带着走、正在读的上下文消失；焦点若仍在原字段，危害小于鼠标用户。
怎么落地
- 在字段下方预留提示的最小高度，或把提示叠在字段与下一项之间的已有间距里，避免第一次报错才把后续项顶开。
- 报错与消错时不要改变正在被指针或焦点占用的控件的位置；必要时只让更下方、尚未成为目标的块移动。
- 多行错误用字段旁的图标加展开，而不是让每一句都把表单再拉长一截。
- 验证：在失焦触发错误的瞬间录屏，看指针下的那一块有没有换内容。换了，就是跳动已经造成误击风险。