R3.05.6non-interruptive async insert设计

异步插入的内容优先占据不打断阅读的位置

别名: 阅读位置插入 · 文中插卡 · 异步追加 · 不打断阅读

概念解释

异步到达的模块要选一个落点。若插进当前正在读的那段文档流,读者必须重新找行;若落在视口下方、侧栏或阅读面之外的区域,当前视口可以保持不动。异步插入优先占据不打断阅读的位置,约束的是插入点相对阅读光标的关系,不是“凡后到内容都会推节点”,也不是“可点区域要冻结”。这里的代价是失去阅读位置。

机制

阅读在视口里维持一条注意轨迹:当前行、当前段、滚动偏移。向这条轨迹的文档流中途插入一个 in-flow 块,等于在注视点上方加高,后续行整体下移,读者必须做一次重新定位。插入点在当前视口之下时,已绘行的坐标不变,新块只在继续滚动时出现。插入点在侧栏或固定边栏时,主栏的行盒不受影响。

因此同样一次异步到达,落点决定它是“打断”还是“追加”。产品上常见的失败是把推荐卡、相关阅读、订阅条插进正文段落之间或当前屏的中部,只因为那里广告位价格高。工程上正确的默认是:阅读面只追加,不中插;中插必须是用户明确要的(展开、加载更多且保持原行位置)。

边界

对话流、日志、协作光标这类体裁的“当前阅读位置”在底部,新消息追加到底部是预期,不是打断;反过来,把历史消息插入顶部才可能把已读位置顶走,需要锚定滚动。地图、画布没有文档行,这条的阅读光标模型不适用。目录、代码编辑器若用等宽行高,插入一行的位移是可预期的编辑行为。用户点了“加载更多”并停留在原视口,属于请求后的追加,只要原行坐标不变就不算打断。

怎么落地

  • 正文、文章、设置说明的异步模块默认渲染到当前视口以下或主栏之外;禁止在未请求时插入到当前段之间。
  • 无限列表用“在底部追加 + 滚动锚定”,不要在已读条目上方插入,以免把正在看的一条顶出视口。
  • 必须出现的提示改用边栏、底部条或覆盖层,不占用阅读面的文档流中段。
  • 验证:在读者停在文章中部时注入推荐模块,录屏核对当前段的视口 Y 坐标;坐标应不变。滚动锚定测试:向上加载历史时,原第一条仍留在原视口位置。

延伸

  • 同组R3.05.1 内容后到会推动已呈现元素 · R3.05.2 位移会造成误点击 · R3.05.3 需为动态内容预留空间 · R3.05.4 阻塞渲染的资源决定首次可见的时刻 · R3.05.5 已交互的区域不应被后到内容重排
  • 相邻I2.07 感知性能 · I2.01 骨架屏与转圈的选用
  • 站内检索scroll anchoring · async insertion · reading position

同组卡片

快捷操作

分享

分享当前页面

ios_share

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