R3.05.5freeze interactive region layout设计

已交互的区域不应被后到内容重排

别名: 冻结可点区域 · 交互后重排 · 可点后布局锁定

概念解释

一块区域一旦可以接收点击、焦点或手势,用户就已经按它当下的几何在规划动作。此后若后到内容把这块区域重排,空间模型作废。已交互区域不得被后到内容重排,指的是:可点之后冻结该区域在文档流里的位置与尺寸,迟到节点去别处生长。它管的是“已经能用的界面不要再挪”,不是泛泛的首次绘制偏移,也不是误点击的命中机制本身。

机制

可交互性把像素变成了输入表面。用户对这张表面建立的是短时空间记忆:按钮在哪、表单有多长、滚动位置对应哪一段。后到内容若改变这张表面的 used box 或它在视口中的位置,记忆与屏幕失配。和“第一帧之前的空白”不同,这时用户已经进入操作;和“任意后到内容会推节点”不同,这里的约束只加在已经开放输入的那一块,而不是整页所有节点。

工程上这意味着:交互簇(主导航、结账条、正在填写的表单)在变为可点之后,其包含块的高度与它之前的文档流前缀都应稳定。广告或推荐若还要出现,只能进入该簇之外的、尚未承担输入的区域,或进入不推动该簇的层。

边界

用户自己触发的重排(展开筛选、打开键盘顶起的视口)是操作的后果,不是后到内容。虚拟键盘或系统栏改变可视视口,页面可能滚动以保住焦点字段,这是平台行为。游戏、画布、地图内部的对象移动不算文档流重排。若整页在可交互之前都盖着阻挡层,阻挡层撤掉前没有“已交互区域”,这条尚未生效。只读展示、无指针设备的展示屏若根本不接受输入,冻结交互几何没有对象。

怎么落地

  • 把导航、提交条、正在编辑的表单标为交互簇:簇内异步模块必须有预留尺寸,簇上方禁止再插入 in-flow 块。
  • 首屏可点之后到达的内容,默认追加到簇下方或侧栏,而不是插进簇的文档流前缀。
  • 对结账、发送、支付这类流程,在字段获得焦点后锁定页头和表单前缀的高度。
  • 验证:在表单已可输入时注入一条顶栏或广告,记录焦点字段的视口坐标与提交按钮的命中矩形,二者在注入前后应重合。

延伸

  • 同组R3.05.1 内容后到会推动已呈现元素 · R3.05.2 位移会造成误点击 · R3.05.3 需为动态内容预留空间 · R3.05.4 阻塞渲染的资源决定首次可见的时刻 · R3.05.6 异步插入的内容优先占据不打断阅读的位置
  • 相邻R3.15 首屏指标与交互就绪 · I2.07 感知性能
  • 站内检索interactive region · reflow · layout shift

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/R3.05.5