麵包屑與路徑尋找系統
目的
麵包屑與路徑尋找系統提供一套方法論，用於設計位於主要內容上方的次要導覽痕跡。它透過顯示一條清晰的線性地圖，指出使用者相對於首頁或根目錄的當前位置，確保使用者在深度資訊架構（IA）中永不感到「迷失」。此系統在導覽精確度與最小視覺重量之間取得平衡，讓使用者能理解自身上下文，並只需點擊一次即可返回上層頁面。
使用案例
- 電子商務： 瀏覽 分類 > 子分類 > 商品。
- 文件與 Wiki： 移動於 卷 > 章 > 節 > 頁面。
- SaaS 儀表板： 管理巢狀實體，例如 帳戶 > 專案 > 資產。
- 目錄網站： 瀏覽 地點 > 分類 > 列表。
- 搜尋結果： 顯示透過搜尋找到的特定項目的路徑。
何時不應使用
- 扁平架構： 如果網站只有 1–2 層深度（首頁 > 頁面），麵包屑會增加不必要的雜亂。
- 線性流程： 對於逐步精靈或結帳流程，請改用
step-progress-system。 - 動態/非階層路徑： 如果使用者的路徑是基於工作階段歷史（例如「返回搜尋結果」），請改用「返回」按鈕，而非固定的結構。
- 著陸頁： 當目標是單一轉換，且導覽會分散對主要行動呼籲（CTA）的注意力時。
輸入
- 資訊架構 (IA)： 網站的階層地圖。
- 當前節點： 使用者目前正在查看的特定頁面。
- 上層階層： 從當前頁面到根目錄的祖先鏈。
- 顯示限制： 可用的水平寬度（來自
responsive-grid-system）。
輸出
- 路徑尋找藍圖： 為標籤、分隔符和連結定義的結構。
- 截斷策略： 處理小螢幕或溢出情境下長路徑的規則。
- 響應式對應： 路徑痕跡在行動裝置視口上如何折疊或轉換。
- 無障礙語意層： 為螢幕閱讀器定義的 ARIA 角色和標籤。
工作流程
1. 對應階層路徑
確定從首頁/根目錄到當前頁面的絕對路徑。
範例： 首頁 > 資源 > 白皮書 > [當前頁面標題]
2. 定義視覺結構
為每個元件建立樣式：
- 連結： 標準連結樣式（來自
interactive-state-system）。 - 分隔符： 一個非互動的符號（例如
/、>或→），用於視覺上區分層級。 - 當前頁面： 不可點擊的純文字標籤，用於確認使用者的位置。
3. 建立空間節奏
應用 fluid-spacing-system：
- 間距： 在連結和分隔符之間使用小而一致的間距（例如
--space-xs）。 - 垂直放置： 將路徑痕跡一致地放置於主要
<h1>上方，但在全域網站標頭下方。
4. 實作截斷與溢出
對於深層路徑（4 層以上）或長標題：
- 中間截斷： 如果總寬度超過容器，則將中間層級摺疊為省略號（
...）（例如首頁 > ... > 章節 > 頁面）。 - 標籤截斷： 對個別長標籤使用
max-width和text-overflow: ellipsis，以防止換行。
5. 規劃響應式適應
對應行動體驗：
- 「返回上層」模式： 在非常小的螢幕上，將完整路徑替換為單一的「<- 返回 [上層]」連結，以節省空間。
- 水平滾動： 如果需要保留完整路徑，允許麵包屑列表水平滾動。
決策規則
- 「始終顯示根目錄」規則： 路徑中的第一個項目應始終是功能根目錄（通常是「首頁」）。
- 當前頁面狀態： 麵包屑中的最後一個項目（當前頁面）不得是連結。這可以防止使用者點擊一個通往他們已在頁面的連結。
- 邏輯 vs. 歷史： 麵包屑必須反映網站結構，而不是使用者的瀏覽器歷史。
- 分隔符可見性： 分隔符的視覺重量應低於連結（例如使用較柔和的顏色），以避免爭奪注意力。
限制條件
- 無障礙性： 必須包裹在帶有
aria-label="Breadcrumb"的<nav>元素中，並包含一個有序列表（<ol>），以便螢幕閱讀器宣布位置和總數。 - 對比度： 連結和分隔符必須符合 WCAG AA（4.5:1）的要求。
- 觸控目標： 麵包屑連結必須符合 WCAG 2.2 SC 2.5.8 的 24x24px 最小尺寸，即使可見文字可能更小。
- 長度： 麵包屑標籤應與頁面標題完全相符（如果標題過長，可使用縮短版本）。
常見失敗模式
- 「遺失首頁」： 未包含首頁/根目錄的連結，迫使使用者使用主選單重新開始。
- 連結過多： 將當前頁面設為可點擊的連結，會重新載入同一頁面並讓使用者感到困惑。
- 視覺競爭： 使用過大或高對比度的分隔符，使路徑難以閱讀。
- 斷行問題： 允許麵包屑在行動裝置上換行成 3 行以上，將主要內容推得太靠頁面下方。
- 不一致的 IA： 根據使用者到達同一頁面的方式，顯示不同的路徑。
驗證標準
- 路徑以首頁/根目錄節點開始。
- 當前頁面是最後一個項目，且不可點擊。
- 麵包屑包裹在包含
<ol>列表的<nav aria-label="Breadcrumb">標誌性元素中。 - 使用了視覺分隔符，且其對比度低於連結。
- 路徑能優雅地適應行動裝置視口（截斷或「返回」連結）。
- 項目之間的間距一致，並遵循流體間距系統。
- 鍵盤使用者可以透過
Tab鍵瀏覽中間層級的連結。