R3.05.5freeze interactive region layout设计
已交互的区域不应被后到内容重排
别名: 冻结可点区域 · 交互后重排 · 可点后布局锁定
概念解释
一块区域一旦可以接收点击、焦点或手势,用户就已经按它当下的几何在规划动作。此后若后到内容把这块区域重排,空间模型作废。已交互区域不得被后到内容重排,指的是:可点之后冻结该区域在文档流里的位置与尺寸,迟到节点去别处生长。它管的是“已经能用的界面不要再挪”,不是泛泛的首次绘制偏移,也不是误点击的命中机制本身。
机制
可交互性把像素变成了输入表面。用户对这张表面建立的是短时空间记忆:按钮在哪、表单有多长、滚动位置对应哪一段。后到内容若改变这张表面的 used box 或它在视口中的位置,记忆与屏幕失配。和“第一帧之前的空白”不同,这时用户已经进入操作;和“任意后到内容会推节点”不同,这里的约束只加在已经开放输入的那一块,而不是整页所有节点。
工程上这意味着:交互簇(主导航、结账条、正在填写的表单)在变为可点之后,其包含块的高度与它之前的文档流前缀都应稳定。广告或推荐若还要出现,只能进入该簇之外的、尚未承担输入的区域,或进入不推动该簇的层。
边界
用户自己触发的重排(展开筛选、打开键盘顶起的视口)是操作的后果,不是后到内容。虚拟键盘或系统栏改变可视视口,页面可能滚动以保住焦点字段,这是平台行为。游戏、画布、地图内部的对象移动不算文档流重排。若整页在可交互之前都盖着阻挡层,阻挡层撤掉前没有“已交互区域”,这条尚未生效。只读展示、无指针设备的展示屏若根本不接受输入,冻结交互几何没有对象。
怎么落地
- 把导航、提交条、正在编辑的表单标为交互簇:簇内异步模块必须有预留尺寸,簇上方禁止再插入 in-flow 块。
- 首屏可点之后到达的内容,默认追加到簇下方或侧栏,而不是插进簇的文档流前缀。
- 对结账、发送、支付这类流程,在字段获得焦点后锁定页头和表单前缀的高度。
- 验证:在表单已可输入时注入一条顶栏或广告,记录焦点字段的视口坐标与提交按钮的命中矩形,二者在注入前后应重合。