UI组件——面包屑最佳实践

在设计中，我们使用面包屑来帮助用户了解他们当前的位置并找到通往主页的方式，作为导航层次结构的起点。遵循最佳实践可帮助您预见任何不一致之处并以最直观的方式构建面包屑路径。

“面包屑”一词源于格林兄弟关于汉塞尔和格莱特的童话故事。尽管在故事中，汉塞尔掉落了白色鹅卵石，而不是面包屑，形成了一条通往家的小路，但“面包屑”的概念已经在设计词汇中生根发芽。 

面包屑不是最流行的导航元素。在将这种导航模式引入您的界面之前，请确保您了解其应用的结构和优缺点。您永远不应该使用面包屑作为主要导航形式的替代品。此外，并非所有网站都需要面包屑，因此在将它们注入您的界面之前，请考虑所有利弊，并了解您的用户通常如何浏览网站。

使用面包屑路径显示层次结构

面包屑应该显示层次结构，而不是会话历史。显示所有用户的步骤只会导致混乱和视觉混乱。坚持只包含祖先页面的基本级别。如果子类别标签没有单独的页面，请不要将其包含在面包屑路径中。

考虑缩短移动设备的面包屑路径并仅保留最后一两个级别。

每个链接都应该易于点击

面包屑路径不应该太挤。否则，用户将无法扫描标签并按下正确的链接。给路径一些空气，并确保每个链接的触摸目标区域在移动设备上至少为 1cm X 1cm (44px*44px)。

分隔线应模仿运动

在面包屑中，我们使用分隔线将用户引导到他们要去的地方，而不是他们开始的地方。所以，对于从左到右的语言，箭头应该指向右边，模仿运动。

反过来，左箭头非常适合从右到左的语言。在这种情况下，当前页面将出现在左边缘。

为截断的标签提供工具提示

如果由于标签的长度而导致面包屑路径太长，请截断它们并在 hover 上添加工具提示，显示全名。 

或者，更好的是，尽可能缩短标签以避免截断。

不要过度使用面包屑样式

面包屑构成辅助导航，因此它们不应该是您进入页面时首先注意到的。避免使用会分散用户对主要导航和主要内容的注意力的华而不实、高对比度的颜色。此外，不要忘记遵守 WCAG 的颜色对比度要求，以使所有用户都可以访问。

确保面包屑路径的大小和显着性小于主导航。

左对齐面包屑以简化扫描

左对齐的面包屑对于从左到右阅读的观众来说看起来很自然，而居中对齐看起来会偏离并损害易读性。这里的经验法则是遵循最常见的布局模式。如果将所有元素都对齐在左侧，面包屑也不例外。

对于从右向左阅读的用户，向右对齐是最合乎逻辑的决定。

、

第一个面包屑应该指示主页

面包屑小径应该指明回家的路，就像童话故事中的汉塞尔和格莱特一样。始终使用主页作为起点，以帮助用户在迷路时回溯。

如果全局导航已经有主页链接，您可以在面包屑路径中省略它以避免重复。

不要用面包屑代替全局导航

太多的导航系统可能会使用户不知所措，使他们无法前进。面包屑导航应该 补充主导航，而不是替换、矛盾或过度复杂化。

如果页面提供了其他导航指示符来帮助用户识别他们的位置（例如标题菜单），请单独留下面包屑路径。

本文内容为转载