UI组件——面包屑简介

设计世界充满了与食物相关的类比，例如汉堡菜单、Snackbars或面包屑。面包屑或面包屑路径是一种导航元素，可帮助用户了解他们在网站上的当前位置。

它们代表链接的水平列表，其中最后一个表示当前位置，其余定义其“祖先”（父页面、祖父页面等）。面包屑还通过显示站点的信息层次结构来帮助定向点击外部链接（例如，在搜索引擎结果页面上）到达随机页面的用户。

正确设计面包屑很重要，因此路径可以引导用户，而不是让他们感到困惑。如果您想要一条路径来增强导航，您应该知道如何设置样式以及放置它的位置。

文本面包屑

文本面包屑只是以分层方式水平排列并由分隔线分隔的文本链接。

按钮面包屑

按钮面包屑包裹在按钮组件内，以增加触摸目标区域并增强可见性。修改按钮的形状以指示方向也是一个好主意。

面包屑应该是可见的，但不要太过分——它们不应该是用户首先注意到的。

当前页面不应该是链接

面包屑路径的最后一段应始终引用用户的当前页面位置。与之前的页面相比，指示当前页面的面包屑应该是纯文本的，而不是像链接那样交互的。

为分隔线使用可识别的 V 形图标

最熟悉和可识别的分隔符是V 形图标（或所有数学人的“大于”符号）。我们说“大于”是因为每个后续页面都位于层次链的较低位置。然而，其他符号，如正斜线或右箭头，也开辟了一个市场。

避免对具有线性结构的网站使用面包屑

对具有 1 或 2 级深度的线性结构的网站使用面包屑并没有多大意义——没有层次结构，也没有可显示的有意义的关系。而是在标题菜单或菜单类别中指示页面位置。

面包屑应该可见

尽管面包屑在主要导航层次结构中处于次要地位，但它们可以帮助用户在页面上定位，并且仍然 应该在页面顶部可见 。最常见的位置在全局导航下方，因此用户可以在他们的眼前看到它。

使用最常见的分隔线样式

人字形图标 (>)、箭头 (→) 和斜线 (/) 是最常见的分隔线样式。用作面包屑分隔符的垂直线或其他不熟悉的符号可能会使观众感到困惑。此外，它们不表示层次结构，并且在视觉上看起来像一个导航面板。

使用溢出以获得更好的扫描

空间不足？如果你的面包屑轨迹看起来像一条盘绕的蟒蛇或从边到边延伸，那么就有问题了。溢出菜单非常适合截断面包屑链接。否则，页面会显得嘈杂、凌乱且难以扫描。请记住始终保持第一个和最后一个选项可见，以便更好地导航。

使用一致的分隔线样式

设计的一致性有助于用户专注于重要的事情，而不是每次访问不同的页面时都学习新的术语或功能。与面包屑分隔符的应用保持一致。如果您选择一种样式，请确保在任何地方都使用它。否则，你会强迫用户思考，并让他们的短暂记忆一无所获。

允许用户访问溢出页面

确保允许用户访问由于溢出而隐藏的页面。我们建议将附加页面放在菜单控件中。

以前的页面应该是交互式的

通常，所有面包屑路径都至少有一个前一页。它们的样式应该与当前页面不同，因为它们是交互式的。不要忘记在上一页分组中也包括您的溢出菜单。

不要忘记第一个链接应始终指向主页或层次结构的根节点。

截断长标签

长文本总是让设计师头疼。他们只是不适合顺利！处理长标签时，截断会派上用场。确保用户在将鼠标悬停在它们上方时可以在工具提示中阅读它们。

为每个面包屑标签设置最大宽度。

本文内容为转载