目錄（Table of Contents）系統
目的
目錄（Table of Contents）系統提供了一套方法論，用於設計反映單一頁面或文件結構的頁內導覽選單。它透過提供持續可見的頁面階層地圖，解決長內容中的「滾動疲勞」問題，讓使用者能夠了解當前閱讀脈絡，並在不迷失位置的情況下，直接跳轉到特定章節。
使用案例
- 文件與技術指南： 導覽標題與子標題的深層階層結構。
- 長篇文章與部落格： 為超過 2000 字的編輯內容提供閱讀藍圖。
- 複雜著陸頁： 幫助使用者在「功能」、「定價」與「常見問題」章節之間跳轉。
- 法律與政策頁面： 導覽密集的條文與編號章節。
- 資源中心： 在單一頁面上組織長串的連結或工具清單。
何時不應使用
- 短內容（少於 3 個章節）： 如果整個頁面可以在兩次滾動內瀏覽完畢，目錄只會增加不必要的視覺干擾。
- 主要網站導覽： 請勿使用目錄來在不同頁面之間移動，應改為使用
site-navigation-system。 - 線性精靈： 對於使用者必須遵循固定順序的逐步流程，請使用
step-progress-system。 - 極簡行銷： 當目標是單一、不間斷的敘事流程，不希望有任何岔路時。
輸入
- 標題階層： 頁面上
<h2>到<h4>標籤的對應圖。 - 版面配置脈絡： 可用的水平空間（側邊欄 vs. 行內）。
- 滾動容器： 滾動是發生在主體（body）上，還是一個特定的溢出容器？
- 品牌符號： 來自設計系統的間距、字體與「活動」狀態顏色。
輸出
- 目錄結構規格： 清單項目、縮排層級和「活動」指示器的視覺定義。
- 滾動監聽藍圖： 當使用者滾動時，「活動」狀態如何更新的邏輯。
- 回應式適配圖： 目錄如何從桌面版的側邊欄轉換為行動版的輔助功能（例如，黏性標頭或底部抽屜）。
- 路徑指引規格： 平滑滾動行為與焦點管理的定義。
工作流程
1. 稽核文件大綱
提取標題結構。一個乾淨的目錄取決於邏輯清晰的 h1 -> h2 -> h3 層級。
- 主要層級： 通常從
<h2>標籤衍生。 - 次要層級： 從
<h3>標籤衍生（縮排）。 - 第三層級： 除非文件特別密集，否則很少顯示在目錄中；考慮預設將其折疊。
2. 選擇版面配置模式
根據頁面配置選擇空間排列方式：
- 持續側邊欄（右/左）： 最適合寬螢幕（桌面版）。讓路徑地圖始終可見。
- 內嵌摘要： 放置在文章頂部。最適合行動版或中等長度的內容，無需「黏性」。
- 黏性標頭/浮動工具列： 一個精簡版，僅在滾動過主視覺區後才出現。
3. 建立視覺階層（層級）
套用 visual-hierarchy-system 來指示深度：
- 縮排： 使用一致的水平內距（例如，每層
--space-s）來顯示父子關係。 - 排版： 與主要層級（h2）相比，子層級（h3）使用較小的字體大小或較柔和的顏色。
- 指示器： 在清單的左/右側使用垂直「進度線」，以視覺方式連接各項目。
4. 設計滾動監聽（活動）狀態
目錄必須與使用者的視埠保持同步：
- 活動連結： 突顯與目前位於視埠頂部的章節相對應的連結。
- 「活動線」效果： 如果使用垂直線，為標記製作動畫，使其滑動到活動項目的位置。
- 回饋延遲： 確保活動狀態快速更新（<100ms），但包含一個小緩衝，以防止在標題之間滾動時閃爍。
5. 規劃回應式路徑指引
側邊欄在行動版上通常會消失，請提供替代方案：
- 行動版目錄觸發器： 一個位於螢幕頂部或底部的黏性按鈕（例如「本節內容」），點擊後會開啟一個抽屜。
- 漸進式揭露： 在黏性工具列中僅顯示當前的
<h2>，並附帶一個箭頭圖示以展開完整清單。
決策規則
- 「三層」限制： 目錄中最多只顯示 3 層深度。如果內容更深，請簡化目錄，僅專注於
h2和h3。 - 縮排優於圖示： 使用縮排而非項目符號或圖示來顯示階層，因為後者可能會使密集的文字清單變得雜亂。
- 活動狀態唯一性： 目錄中一次只能有一個項目處於「活動」狀態。
- 黏性觸發門檻： 僅在目錄到達視埠頂部時才應變為黏性（固定），而不是在頁面載入時立即觸發。
- 點擊跳轉： 點擊目錄連結必須使用「平滑滾動」以防止迷失方向，並且必須更新 URL 雜湊（
#section-id）以方便分享。
限制條件
- 無障礙： 目錄必須包覆在一個
aria-label="Table of contents"的<nav>元素中。活動連結必須使用aria-current="true"（或aria-current="location"）。確保使用 Tab 鍵瀏覽連結時，焦點環（focus ring）是可見的。 - 對比度： 活動與非活動狀態必須符合 WCAG AA（4.5:1）的要求。
- 回應式： 在行動版上，目錄不得與主要文字內容重疊；應使用抽屜或可切換的區塊。
- 內容同步： 目錄中的連結文字應與標題文字完全一致（或是一個清晰可辨識的縮短版本）。
常見失敗模式
- 「過時」狀態： 因滾動監聽的觸發點設定過高或過低，導致目錄突顯了錯誤的章節。
- 「內容遮擋」問題： 一個黏性目錄遮擋了它本應幫助使用者閱讀的文字。
- 深度過載： 顯示每一個
h4和h5，使得目錄比視埠還長，需要自己的滾動條（避免巢狀滾動條）。 - 缺少 ID： 由於標題缺乏對應的
id屬性，導致連結無法運作。 - 「返回」按鈕失效： 跳轉到章節時未更新 URL 雜湊，導致使用者無法使用瀏覽器的「返回」按鈕回到目錄。
驗證標準
-
h2和h3層級之間存在清晰的視覺階層（縮排）。 - 使用者滾動時，滾動監聽功能能正確突顯活動中的章節。
- 點擊連結會觸發平滑滾動至正確的章節。
- 點擊目錄連結後，URL 雜湊已更新。
- 目錄被包覆在一個
<nav aria-label="Table of contents">的地標（landmark）中。 - 活動狀態可透過
aria-current屬性存取。 - 已定義行動版專屬的路徑指引模式（例如，抽屜或黏性工具列）。
- 顯示的階層層級不超過 3 層。