面包屑和用戶路徑

1）角色和價值

• 顯示我在等級制度中的位置；
• 快速返回到更高水平；
• 減少「back-bounce」（反復向後點擊）；
• 提高相鄰層的可檢測性並改善內容頁的SEO。

原則：簡單>細節，層次結構>點擊歷史，持久結構>動態噪聲。

2）何時使用

深層目錄和內容（提供商→類別→遊戲/文章）。
B2B-admink和2-3+嵌套級別的報告。
帶有分區和目錄的Longrids/碼頭（碎屑+TOC）。
在沒有深度的頂級屏幕（大廳/便士板）上不需要。

3）碎屑類型

1.分層（結構）-反映IA而非用戶路由：

「主頁›提供商› Play'n GO ›死書」

2.在路徑上（基於歷史的）-顯示實際路線（很少在網絡中適合；更接近「後退」）。
3.混合體-分層結構+具有保存的過濾器/上下文的最後一步。

建議：默認情況下為分層,以避免隨機轉換產生「噪音」。

4）組成和格式

分隔符：「›」或「/」（與設計和位置一致）。
起點：「主頁「/徽標可點擊。
截斷：深度為>4級，可在「……」中隱藏中間環節，並顯示出來。
最後一個項目是：當前頁面,neclicabelle和視覺重音。
標題長度：使用省略號進行裁剪,但使用完整的「標題」/tooltip進行散播。

5）生成碎屑（邏輯）

根據規範的URL/IA層次結構而不是參考者來構建。
對於實體（遊戲/文章），采用基本類別（或「面包」類別）而不是隨機標簽。
對於動態頁面（過濾器、排序）-碎屑指向基本部分的路徑,上下文分別顯示（過濾器芯片）。
多元化時，在開始時或在旁邊的選擇器中添加品牌/操作員上下文，但不要使面包屑過載。

6）過濾器,分類,分離

過濾器不應「拉長」碎屑。在芯片下方顯示它們（「提供商› Live」+芯片：geo=CA，Device=Mobile）。
分割不包含在碎屑中。當前頁面顯示在列表控制中。
通過單擊將過濾器重置為父級級別：返回到「純」類別。

7）移動UX

將碎屑放在一行H1下方；缺席時-水平滾動或截斷中間環節。
Tap-targets ≥ 44px，鍵盤導航中的突出焦點（用於PWA）。
不要復制系統的「Back（回來）」-用於結構的碎屑,用於歷史的按鈕。

8）可用性（A11y）

使用語義'nav ［aria-label='breadcrumb］'和'ol> li'。
在最後一個元素上指定'aria-current='page'。
鏈接的對比度對應於WCAG AA；焦點是可見的。
圖標/分隔符不是唯一信號（有文本標簽）。
DOM中的順序對應於視覺順序。

9） SEO和數據

對於內容頁面,使用結構化的BreadcrumbList數據（JSON-LD）。
規範的URL和穩定的面包屑有助於搜索理解層次結構。
不要索引沒有內容的「空白」中間節點（避免出現任何內容）。

10）顯示模式

經典系列：「主頁›部分›分節›頁面」。
截斷：「主›…… ›類別›卡片」。
帶有品牌上下文（B2B）：「品牌A ›報告›收入› NGR」。
錨在碼頭上：「文檔› KYC ›#Level檢查」（錨在TOC中，碎屑在分區之前）。

11）行為和微相互作用

Hover/focus突出顯示鏈接和點擊區域（整個「碎屑」，而不僅僅是文本）。
最後一個「面包屑」可以與相鄰的實體（例如，該提供商的其他遊戲）一起使用dop.men-整齊而不會超載。
除非它打破了佳能（例如，到'？page=2'），否則切換到更高級別將保留列表位置/頁面。

12）度量與遙測

• `breadcrumb_click(level, label, url)`
• 'breadcrumb_expand_more'（用於截斷）
• 'back_to_parent_retained_context'（如果保留位置/頁面）
• KPI:
• 使用率：在≥2深度點擊面包屑的用戶比例。
• Back-bounce ↓：在深頁登錄後立即減少「向後」的數量。
• 時間到父系：返回到更高級別的時間。
• SEO CTR：用碎屑標記修改CTR頁面。

13） iGaming的示例

B2C（賭場）：「主›提供商›奧林巴斯的Pragmatic Play › Gates。」提供商頁面上有過濾器芯片（Live/Slots/Megaways）；碎屑只是結構。
比賽：「主要›錦標賽›秋季杯›規則」。
B2B（提供商）：「面板›內容›發行版› Ra書（ID 12345）」-最後一個元素不是可點擊的；在操作員中打開按鈕附近。

14）反模式

無益地重復H1單詞的面包屑。
歷史路線而不是結構（混亂的「字符串」）。
在面包屑中包含過濾器和分區（「遊戲›插槽› page=5」）。
最後一個面包屑是對自己本身的引用。
超深度，小尺寸，低對比度是「隱形碎屑」。
菜單/URL中的鏈接名稱不一致。

15）實施支票

1.IA地圖：定義實體的規範路徑。
2.生成器：從IA/URL構建碎屑的函數（不依賴於參考器）。

3.截斷： 深度規則>4, popover有完整的路徑.

4.A11y/SEO: `nav[aria-label]`, `ol/li`, `aria-current`, JSON-LD.

5.風格：AA對比，適應移動、分隔線、尺寸。
6.上下文：過濾器/分選-下面的芯片,不在面包屑中。
7.遙測：點擊事件/彈出,時間到家長,背彈。
8.文件：示例，反案例，鏈接命名海德。

16）結果

1.基於規範的層次結構，

2.可讀和可訪問的，

3.抵抗過濾器/頁面狀態，

4.具有可測量的好處（遙測/SEO）。

因此，它們確實有助於導航並縮短用戶的目標路徑。