E3.08.2chip wrap layout shift设计
标签换行会造成布局跳动
别名: 标签换行 · layout shift · 行高跳动
概念解释
标签块在容器里排不下时会折到下一行，整块选择区域变高，把下方字段、按钮或列表顶走。这种布局跳动（layout shift）发生在用户正要点下一项的瞬间，目标已经挪了位置，造成点错或以为界面自己在动。换行是空间不够的合法结果；不可接受的是高度在增删过程中反复突变，且下方可点物没有稳住。
跳动的不是标签本身，是被它挤动的其余界面。
机制
人在指向时会预瞄一个屏幕坐标。块的折行改变选择区域的包围盒，所有「在它下面」的元素的坐标一起变。预瞄失效，手指或指针落到新挤上来的另一块标签、或落到已经上移的提交按钮上。增一块可能从一行变两行，删一块又缩回一行，于是同一任务里坐标来回抖。
动画若只做块的出现、不做下方内容的有计划让位，视觉上会像整页在弹。反过来，为防跳动而禁止换行，块在窄屏上会溢出或缩小到不可读——那是把跳动换成截断，问题从布局转到识别。
边界
标签区域自己滚动（横向滑、或内部固定高度的纵向滑）可以把跳动关在控件内部，代价是已选集合不再一览无余。表单里标签位于页脚按钮正上方时，跳动最伤，因为提交是高代价目标。只在添加时变高、且变高发生在用户注视标签区时，伤害小于用户已经移向页脚时的突然变高。虚拟键盘顶起视口会与换行叠加，移动端的跳动幅度往往被低估。打印和只读回显没有指向，跳动不构成点错，但仍会打乱阅读节奏。
怎么落地
- 给标签容器预留至少两行的稳定高度，或让内部滚动，避免第一块折行就推动整个表单。
- 把提交等关键动作与标签区隔开足够距离，不要贴在第一折行就会撞上的位置。
- 增删时若必须改高度，让下方内容平滑让位，不要让按钮在触控落下的那一帧跳到手指下。
- 验证：在最窄宽度下从 0 加到会折行的数量，录屏看页脚按钮的纵坐标。坐标在手指移动期间跳变，就是要处理的跳动。