滚动和内容管理

1）为什么要考虑滚动

• 加快搜索所需的内容（点击次数更少-滚动次数更多）,
• 提供一种控制感（锚定，"回到起点"，粘附过滤器），
• 节省资源（懒惰下载、虚拟化），
• 增加转换（内容较早可见，CTA-在"拇指区域"）。

原理：速度>密度；背景>噪音；可预见性>"魔术"。

2）滚动模型： 何时选择

1.古典分位

适用于搜索结果、表格和报告。优点：控制,稳定的URL,轻松浏览页面。缺点：点击更多，注意力的"破裂"。

2.无限磁带（无限卷轴）

对于错误成本低的支线和目录（新闻，内容卡）。优点：参与，点击较少。缺点："迷失的足部"，难以返回，难以寻址。

3.溷合动力车："显示更多"/"下载更多"

折衷方桉：小部件在按钮上装满包。优点：渲染控制，足部可用性，可预测性。缺点：仍然是线性的。

4.分段滚动（分区/锚点）

对于长篇文章，参考书和维基。优点：文件卡，快速跳跃。缺点：导航和目录的复杂性。

• 目录/大厅是或无穷大+"回到起点"的混合体。
• 搜索/表-分页大小和快速过滤器。
• Document/Longread-带有TOC和阅读进度栏的片段。

3）信息架构和布局

顶盖：搜索,快速过滤器,排序；不会在出现时重迭内容。
侧面板（桌面）：目录（TOC）,过滤器；在移动上-出发的表。
Sticky元素：顶部过滤器、锚点菜单、阅读进度指示器、"Back to Top"。
内容卡：预览的可预测高度→减少布局跳跃。
空状态：骨架/shimmer而不是"空白屏幕"。

4）滚动行为（微机械）

惯性和物理学：滚动必须显得"本机"；不要打破系统模式。
轴向锁：在地平线（旋转木马）下,在运动阈值后锁定垂直轴。
Snap Points：适用于旋转木马、卡片和向导步骤。不要滥用长磁带。
安克雷德卷轴：在加载时，保持用户的重点和相对位置。
Scroll-chaining：限制从嵌套容器中"泄漏"事件,以免跳到页面。

5）注意力管理

浮动STA/"存款"/"播放"：在拇指区域，不会重叠内容。
阅读进度栏：标尺在顶部,与锚点同步。
目录（TOC）：当前部分突出显示,快速链接,顶部按钮。
标题锚：URL中的稳定哈希；盖帽高度补偿滚动。
上下文的"粘性"过滤器：滚动1-2屏幕后固定。

6）下载和渲染大磁带

懒惰下载（lazy）：图像、视频、块。装载阈值是前面~ 1-2屏幕。
虚拟化/窗口渲染（Windows）：仅渲染可见区域+缓冲区。
播放器/骨架：可预测的大小，没有"跳跃"。
批量装载：20-60元素步骤；查询和渲染之间的平衡。
分区缓存：返回时,恢复位置和加载的钱卡。

7）磁带内容管理

分组：按日期/类别分类；标题分隔符粘在一起。
排序和过滤器：可见且可用,并显示活动条件。
折叠/展开：对于长描述-"显示更多"。
Scroll中的媒体：在可见区域之外自动暂停视频；自动游戏只有没有声音和明确的控制。
错误状态："网络丢失"，"无法加载"-带有返回和保留位置。

8）可用性和本地化

所有动作均无手势可用：加载更多、开始、打开TOC按钮。
焦点管理：在导航锚点时,将焦点转移到分区标题。
屏幕阅读器：滚动按钮/TOC的描述，顺序逻辑。
RTL：镜像水平旋转木马和指示器。
重定向动作：禁用"复杂"动画和视差,以获得首选的简化效果。

9）表演： 目标和指标

关键手势/滚动的INP：≤ 200毫秒。
Scroll-jank（在滚动时跳过帧）：<1%影格>16.7 ms在典型设备上。
CLS（累积布局偏移）：≤ 0.1（尤其是在剂量加载期间）。
TBT/Blocking：避免在滚动期间进行大量同步计算。
内存：在长会话中使用稳定（虚拟化不会泄漏）。

• 被动滚动听众，通过"requestAnimationFrame"延迟计算；
• 滚动时的"轻微"阴影/没有复杂的阴影；
• 固定或可预测的卡尺寸；
• 重绘节省（batched updates）。

10）遥测和事件

• "scroll_start"/"scroll_end"（来源，速度，方向），
• "content_load_request/success/fail"（包,大小）,
• "viewport_item_exposed"（id，可见时间），
• `toc_click`, `anchor_navigate`, `back_to_top_click`,
• 'list_restore'（位置、恢复时间）。

KPI:

Depth Reached（查看了多少屏幕/元素），

按项目曝光时间（平均/中位），

Load Error Rate, Retry Rate,

Scroll Abandonment（在下一批下载之前发布），

Return-to-Position Success.

11）不同内容类型的模式

游戏/商品目录：溷合磁带、粘贴过滤器、虚拟化、"显示更多"按钮。
Longrids/wiki：TOC，进步酒吧，锚点，"复制到分区的链接"。
新闻玩具：带有日期分隔符的无尽提要，"回到最后"。
表/网格：分区+"显示在N"，冻结标题和关键专栏，根据需要水平滚动。
Live Feed/log Streams：从"暂停/追赶"自动滚动,缓冲区限制。

12）移动功能

拇指区域：CTA和"到起点"-底部；过滤器-在出口表中。
"拉动"足迹：仅在停止时显示；不要干扰滚动。
手势：水平旋转木马-轴向肘部；仅在预期的情况下才进行推送。
流畅性：在"重"列表上检查60个FPS；降低效果密度。

13）反模式

"无限磁带+隐藏的脚踏板没有输出"（没有链接/接触/规则）。
移位读取的读取器是上下文的丢失。
重叠文本和CTA的浮动面板。
卡片的无限高度→"漫游"布局移位。
当出现在可见性区域时,自动使媒体发出声音。
"向后"时没有位置恢复。

14）实施支票（冲刺）

Sprint 1：模型选择（分离/混合/无限），基本滚动容器，粘贴帽/过滤器，"Back to Top"。
Sprint 2：懒惰的图像/块加载，骨架，可预测的卡尺寸。
Sprint 3：列表虚拟化，位置保存和数据包缓存，锚点/TOC。
Sprint 4：scroll-jank上的滚动和曝光遥测以及Alerta。
Sprint 5：可用性（焦点/读者），RTL，重定向运动，键盘导航（桌面）。
Sprint 6：精细优化：轴向支架，捕捉点，增强磁带中的UX媒体。

15）词汇表

Infinite Scroll是无限的元素装载。
Windowsing/Virtualization-仅显示列表项的渲染。
Anchored Scrolling-在加载时保持相对位置。
Scroll-jank是"derganya"，因为滚动时跳过了帧。
TOC（内容表）是锚定目录。
CLS/INP是布局稳定性和响应性的指标。

16）结果

1.选择合适的流动模型（分离/混合/无限），

2.给出控制（锚定，TOC，粘性过滤器，"到开始"），

3.快速稳定的渲染（懒惰的下载，虚拟化，没有变化），

4.仍然可以负担和预测，

5.测量遥测并改善基于数据的UX。