面包屑和用户路径

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）。

因此，它们确实有助于导航并缩短用户的目标路径。