E1.09.2loading button size stability设计研究
加载态需保持按钮尺寸稳定
别名: 按钮防跳动 · spinner替换文字 · layout shift on loading
概念解释
进入加载态时，文案往往被换成转圈或「提交中…」。若新内容比原文案短或高，按钮的宽高会变，周围布局跟着抽一下。这一下可能把相邻的取消送到手指底下，或让正在按着的那枚键溜走。加载态要在原尺寸的盒子里换内容，尺寸稳定是为了不在锁定期间制造一次新的误点。
机制
人在按下之后手指未必立刻离开，视线也还钉在那块矩形上。矩形一缩，命中区跟着缩，指尖相对位置滑到盒子外面，抬起事件落到后面的控件上——取消、另一项提交、甚至一层对话框外的页面。矩形一变宽，可能挤掉右侧按钮或把整行换行，光标和拇指的目标地图失效。转圈图形的方形比例和「立即支付 ¥128.00」差很远，若按钮是 shrink-wrap 文字，跳动几乎必然发生。稳定尺寸等于把加载当成同一控件的皮肤切换，而不是换成另一种控件。
怎么研究
录下提交瞬间的几何：按钮的 bounding box、相邻控件的位移、抬起时的命中目标。对比「宽度随文字」和「最小宽度锁在默认态」。
自变量：加载内容（仅转圈 / 转圈+短词 / 原文字+转圈）、按钮是否定宽、手指是否在抬起前仍接触。 因变量：布局位移像素、抬起误命中、相邻按钮被点到的次数。
用鼠标单击（按下即离）会低估，因为位移发生时指针已经离开。触屏按住等待更接近现场。
边界
超长多语言文案在加载时若改成很短的「请稍候」，桌面宽按钮里留白会很难看，但宁可留白也不要收缩到点到邻居。按钮组里一枚变宽会挤兑整组，必须整组一起定宽或只在内部换图标。骨架屏式的整页替换不属于按钮加载，尺寸稳定约束的是这枚控件本身。
怎么落地
- 默认态就算好最小宽度（按最长文案或按内容盒），加载只替换内部，不改外盒。
- 转圈与文字叠加时垂直居中，不要靠增加高度来塞图标。
- 动画不要做缩放出现，缩放等于主动制造尺寸变化。
- 验证：提交时用慢动作录屏对齐按钮四边。四边若移动，或抬起点到了取消，尺寸就不稳定。