设计世界充满了与食物相关的类比，例如汉堡菜单、Snackbars或面包屑。面包屑或面包屑路径是一种导航元素，可帮助用户了解他们在网站上的当前位置。
1. 定义：
它们代表链接的水平列表，其中最后一个表示当前位置，其余定义其“祖先”（父页面、祖父页面等）。面包屑还通过显示站点的信息层次结构来帮助定向点击外部链接（例如，在搜索引擎结果页面上）到达随机页面的用户。
正确设计面包屑很重要，因此路径可以引导用户，而不是让他们感到困惑。如果您想要一条路径来增强导航，您应该知道如何设置样式以及放置它的位置。
2. 面包屑的作用 ：
1、方便用户，面包屑主要用于为用户提供导航一个网站的次要方法，通过为一个大型多级网站的所有页面提供面包屑路径，用户可以更容易的定位到上一次目录，引导用户通行;
2、减少返回到上一级页面的点击或操作，不用使用浏览器的”"返回"按钮或网站的主要导航来返回到上一级页面;
3、不用常常占用屏幕空间，因为它们通常是水平排列以及简单的样式，面包屑路径不会占用页面太多的空间。这样的好处是，从内容过载方面来说，他们几乎没有任何负面影响;
4、降低跳出率，面包屑路径会是一个诱惑首次访问者在进入一个页面后去浏览这个网站的非常好的方法。比如说，一个用户通过谷歌搜索到一个页面，然后看到一个面包屑路径，这将会诱使用户点击上一级页面去浏览感兴趣的相关主题。这样，从而，可以降低网站的总体跳出率;
5、有利用百度蜘蛛对网站的抓取，蜘蛛直接沿着那个链走就可以了，很方便；
6、面包屑有利于网站内链的建设，用面包屑大大增加了网站的内部连接 
1.文本面包屑
文本面包屑只是以分层方式水平排列并由分隔线分隔的文本链接。
、
文章来源地址https://www.toymoban.com/news/detail-459011.html
2.按钮面包屑
按钮面包屑包裹在按钮组件内，以增加触摸目标区域并增强可见性。修改按钮的形状以指示方向也是一个好主意。
面包屑应该是可见的，但不要太过分——它们不应该是用户首先注意到的。
当前页面不应该是链接
面包屑路径的最后一段应始终引用用户的当前页面位置。与之前的页面相比，指示当前页面的面包屑应该是纯文本的，而不是像链接那样交互的。
为分隔线使用可识别的 V 形图标
最熟悉和可识别的分隔符是V 形图标（或所有数学人的“大于”符号）。我们说“大于”是因为每个后续页面都位于层次链的较低位置。然而，其他符号，如正斜线或右箭头，也开辟了一个市场。
避免对具有线性结构的网站使用面包屑
对具有 1 或 2 级深度的线性结构的网站使用面包屑并没有多大意义——没有层次结构，也没有可显示的有意义的关系。而是在标题菜单或菜单类别中指示页面位置。
面包屑应该可见
尽管面包屑在主要导航层次结构中处于次要地位，但它们可以帮助用户在页面上定位，并且仍然 应该在页面顶部可见 。
最常见的位置在全局导航下方，因此用户可以在他们的眼前看到它。
使用最常见的分隔线样式
人字形图标 (>)、箭头 (→) 和斜线 (/) 是最常见的分隔线样式。用作面包屑分隔符的垂直线或其他不熟悉的符号可能会使观众感到困惑。
它们不表示层次结构，并且在视觉上看起来像一个导航面板。
使用溢出以获得更好的扫描
空间不足？如果你的面包屑轨迹看起来像一条盘绕的蟒蛇或从边到边延伸，那么就有问题了。溢出菜单非常适合截断面包屑链接。否则，页面会显得嘈杂、凌乱且难以扫描。请记住始终保持第一个和最后一个选项可见，以便更好地导航。
使用一致的分隔线样式
允许用户访问溢出页面
确保允许用户访问由于溢出而隐藏的页面。建议将附加页面放在菜单控件中。
以前的页面应该是交互式的
通常，所有面包屑路径都至少有一个前一页。它们的样式应该与当前页面不同，因为它们是交互式的。不要忘记在上一页分组中也包括您的溢出菜单。
第一个链接应始终指向主页或层次结构的根节点。
截断长标签
处理长标签时，截断会派上用场。
确保用户在将鼠标悬停在它们上方时可以在工具提示中阅读它们。
为每个面包屑标签设置最大宽度。文章来源：https://www.toymoban.com/news/detail-459011.html
到了这里，关于UI组件-面包屑简介的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
