滾動和內容管理

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。