面包屑设计技巧和实践

无论一个网站多么漂亮和优雅，无论它提供什么有用的内容、服务或产品，所有的好处很容易被一个因素毁掉：糟糕的导航。在本文中，我们继续Web可用性的主题，这次将讨论作为Web导航元素的面包屑。让我们了解这个术语的含义，探索面包屑的类型和最佳UX实践，以使其有效工作。

面包屑是主要用于网页设计和支持用户浏览网站的元素。由于面包屑，用户可以知道他们在网站上的位置，并且可以更容易地习惯网站结构，这意味着面包屑提供了一种更好的寻路工具。然而，面包屑不会取代主导航菜单；它们提供二级导航并提高网站可用性，以防它有很多页面。

至于分类，面包屑分为三种基本类型：

基于位置：它们根据网站层次结构向访问者显示他们所在的位置，通常适用于具有由多个级别组成的复杂导航方案的网站。

基于属性：它们向访问者显示他们所在页面的属性轨迹。

基于路径：这些向访问者显示他们到达他们所在页面所采取的步骤。与以前的类型相比，这种类型通常被称为效率较低，不建议应用。

在面包屑作为导航元素的好处中，我们会提到以下几点。

这里有一堆UX设计技巧和实践，可以帮助掌握面包屑作为网络导航的支持和方便的元素。请记住，这些做法都不是适用于任何网站的万能药：下面的示例向你展示了不同的产品如何使用此导航元素来覆盖其优先级。

不要使用面包屑作为主要导航

面包屑的关键经验法则是将它们用作主要导航的补充。它们不应被视为和用作全局导航的替代品，通常在网站标题或菜单。相反，它们支持和放大主要导航。

将面包屑放在H1标题上方

显眼且易于访问的链接主页允许用户从旅程的任何点跳转到网站的主页仍然是网络导航的重要组成部分。虽然越来越多的用户习惯了这种模式商标网站标题中的特色是可点击的，有助于跳转到主页，但仍有许多人对此流程并不明显。由于面包屑让用户可以快速定义网站层次结构及其当前位置，因此从网站的主页开始跟踪是合乎逻辑的。

但是，如果主导航中有指向主页的文本链接，例如，在标题中，则不需要在面包屑中将其加倍。

同样，在多层次网站的情况下，你可能希望将用户的注意力集中在特定级别或类别上，而不是将他们发送到主页。例如，优衣库从用户当前浏览的主要类别名称开始跟踪，让左上角的标志完成将访问者移动到主页的工作。

面包屑路径的最后一项有两种不同的方法：你可以显示当前页面的名称或以上一步完成它，这意味着根本不显示当前页面的名称。无论你选择什么，请确保所有元素都涵盖特定目标并帮助用户。如果你认为将当前位置添加到面包屑是支持可用性所必需的，请明确说明它不可点击，因此看起来与交互元素不同。对于移动体验，最好不要显示当前位置，因为屏幕空间非常有限。

沃尔玛网站上的面包屑路径示例

与任何文本元素一样，面包屑导航的主要目标是让以书面形式打包的信息能够轻松、快速地被感知和吸收。所以，照顾好他们可读性强而不是装饰。并确保有足够的元素之间的空间以便于阅读它们，从视觉上分离文本片段，然后单击。

Google支持网站上清晰且不显眼的面包屑路径

与使用面包屑标记一路的童话人物不同，网页设计师会更有效地转向向用户展示页面的清晰层次结构，而不是他们到达此页面的所有方式。这样的方法总是看起来更合乎逻辑，此外，将为可能迷路的访问者阐明清晰而简单的返回路径。更重要的是，在这种情况下，对于登陆特定页面但尚未采取任何步骤的用户，面包屑导航根本不起作用。

如果面包屑路径太长怎么办？当然，页面超载并不好，尤其是在二级导航级别。在面包屑路径太长的情况下，中间的一些可以隐藏在省略号后面。但永远不要隐藏第一个和最后一个元素，以免破坏逻辑。

当然，最终决定取决于特定项目的设计师。它应该基于可用性测试，因为可以有不同的创意设计解决方案，可以有效地组织更长的面包屑路径。

例如，OldNavy网站使用超级极简主义和无干扰的面包屑放置在标题下方的左上角，带有主导航，这种方式坚持常见的从左到右的阅读和扫描模式。这使得面包屑在你不需要时几乎不会被注意到，但在需要时很容易找到。

任何移动应用程序屏幕最宝贵的资产是空间。因此，针对移动设备优化你的网站，请特别注意这一点：如果面包屑路径只是从网站复制到移动设备，则可能需要几行，这样就可以剪掉有限的屏幕空间的很大一部分。因此，通过这种方式，你会面临更高的风险，即某些关键元素（例如，产品页面上的产品名称或介绍性文字）不会因为空间不足而立即被看到。

加利福尼亚州立大学网站上的面包屑路径示例

面包屑提供了一个完美的例子，说明细节在网络用户体验设计中的重要性。远离主要和关键功能，但经过深思熟虑和精心制作，这种交互元素可以大大有助于使交互更容易和以用户为中心.尽管如此，在决定之前，请三思而后行，因为可能有更有效的辅助导航选项来解决某个项目的特定任务。

作者：byMarinaYalanska

5PLUS职业设计学院于2015年创于北京，三位联合创始人设计行业经历总计超过40年。坚守以“倾囊式教学”为中心的教学理念，知无不言言无不尽。希望借助自身行业背景及经验，打造国内最优秀的职业设计师培训学院，为设计师提供职业化进阶指导，提高设计师行业价值，为中国设计行业尽一份微薄之力。