摘要：面包屑导航指南

关键词：面包屑，导航

题图：slon_dot_pics

面包屑导航可以帮助用户查看当前位置，它显示了网站或应用的层次结构。它通常位于主导航下方，展示页面链接轨迹，链接通常由符号“>”或“/”分隔。

1、文字链接：代表产品或网站的页面。2、分隔符：分割文字链接。

面包屑导航优点

辅助导航

如果用户访问较深的页面，面包屑导航可以使用户对当前位置有清晰的了解，并帮助用户找到通往其他页面的方式。面包屑导航不能取代页面上的主导航。

减少用户点击

面包屑导航允许用户从网站的上一层跳到下一层，而无需使用浏览器上的“前进”或“后退”按钮。此外，面包屑导航减少了用户使用主导航的需求。

设计简单

面包屑导航可以在不占用太多空间的情况下提高产品可用性。它们很容易实现到视觉设计中，几乎不需要UI成本。

面包屑导航使用指南

1、页面顶部

面包屑导航最常见的放置是在页面顶部，通常在主导航下面。利用用户已有的心理模型，面包屑导航很容易被用户发现和使用。

2、保持一致

使用面包屑导航时，请确保在整个产品中保持一致。

3、清除标签

不正确的面包屑导航可能会造成混淆，尤其是与页面标题不匹配的时候。因此，面包屑标签必须清楚地描述当前页面的内容。

4、当前页面≠链接

无需为面包屑导航列表的最后一项添加链接，因为它是当前页面。添加链接反而会使用户感到困惑。

5、强调当前页面

在面包屑导航列表的最后一项使用其他样式，确保它是当前页面。可以通过粗体或更改颜色来强调。

6、不强制

对于仅有1-2个层次结构的网站，不需要使用面包屑导航。在这种情况下，请考虑清楚地指出页面所在的分类或栏目。

特殊面包屑导航

超长面包屑导航

当层级过多时，会发生这种情况。面包屑导航会自动折叠并使用省略号表示隐藏的信息，默认情况下仅显示第一个和当前页面，这样做是为了减少混乱和用户认知负担。

隐藏面包屑导航

用户可以通过单击“省略号”来展开全部面包屑导航；展开时，超过内容宽度的面包屑导航将扩展到下一行。

超长文字链接

超长文字链接将被截断显示，当时鼠标悬停时才显示完整的文字。

参考资料