网站内容与功能设计(如何让用户更久地留在你的网页里？「面包屑导航栏」就是 )

　　网站内容与功能设计(如何让用户更久地留在你的网页里？「面包屑导航栏」就是

)

　　铁军攻略：

　　现在网络世界五光十色，大家的注意力都变短了。如何让用户在你的网页上停留更长时间？“面包屑导航栏”是关键之一。本文文章，分享网页设计“面包屑导航栏”的3W，让你为用户提供更好的网页体验。

　　面包屑导航（或面包屑路径）用作辅助导航系统，可以告诉用户其在 网站 或 web app 中的位置。这个词来自于Hansel and Gretel（又译为Candy House）的童话故事，主角在路上丢下面包屑，形成一条引导他回家的路。

　　就像童话故事的主角一样，网站 用户也需要知道自己在网站 层级中的位置，以便在需要时可以直接浏览上一页。

　　在本文中，我们将讨论面包屑导航应用程序及其最佳实践：什么是面包屑导航（What），何时使用面包屑导航（When）以及如何设计面包屑导航（How）。

　　一、面包屑导航有什么用？

　　作为一种有效的视觉辅助，面包屑导航可以告诉用户它在 网站 层次结构中的位置。此功能是用户获取上下文信息的重要来源，可以帮助用户找到以下问题的答案：

　　我在哪里？告诉用户它在整个 网站 层次结构中的位置。

　　1. 减少用户操作次数

　　在适用性上，面包屑导航减少了用户访问上层页面时应该有的行为数量。除了使用浏览器“返回”按钮或网站主导航返回上一页外，用户还可以使用面包屑导航。

　　2. 占用最少的页面空间

　　紧凑的结构不占用太多页面空间，面包屑导航是横向文本连接。优点是如果出现内容过载，其负面影响很小。

　　3. 面包屑导航给用户带来零烦恼

　　人们可能不会在意这个小小的设计元素，但没有人不了解面包屑导航，也没有人不会使用面包屑导航。

　　二、我什么时候应该使用面包屑导航？

　　要测试网站是否会受益于面包屑导航，一个好的方法是构建网站导航结构的地图或图表，然后分析面包屑导航是否可以帮助用户并提高他们的导航能力同一类别或不同目录。

　　三、面包屑导航分类

　　面包屑导航可以根据位置、路径和属性分为 3 类。

　　1. 位置面包屑

　　位置面包屑导航反映了网站的结构。它可以帮助用户了解网站 的层次结构并在多个级别（通常大于两个）网站 之间导航。如果用户从其他链接（例如搜索引擎结果）进入 网站 深层页面，这对用户非常有用。

　　位置面包屑导航。图片来源：marketingland

　　下图中的BestBuy，每个文本链接都可以指向一个页面，从右到左从当前页面到上一页。

　　百思买 (BestBuy) 位置面包屑导航 2. 路径面包屑

　　路径面包屑（也称为“历史跟踪”）显示用户浏览到特定页面的所有页面路径。这种面包屑导航链接通常是动态生成的。

　　有时，路径面包屑很有用，但大多数时候它会令人困惑——因为浏览 网站 的用户可能会突然从一个页面跳转到另一个页面，非常随意。

　　这种不规则的浏览路径并没有为用户提供多少帮助，但是很容易被浏览器的“返回”按钮所替代。另外，如果用户直接进入网站的深层页面，路径面包屑也无用。

　　下图是路径面包屑的示例，它显示了目标页面的两条路径。

　　路径面包屑导航。图片来源：Oracle3. 属性面包屑

　　属性面包屑对于电子商务 网站 非常有用，它按特定页面或更常见的产品类别对大量页面进行分类。这种面包屑导航可以帮助用户了解各种产品之间的关系，也提供了另一种导航方式。

　　属性面包屑导航。图片来源：marketingland

　　例如，在TM Lewin（绅士衬衫品牌）的官方网站上，面包屑导航显示了特定网络产品的属性。

　　本页展示了所有符合“修身剪裁”属性的西装。图片来源：TM Lewin4. 层次结构还是浏览历史？

　　面包屑导航的经验法则是显示 网站 层次结构，而不是用户浏览历史记录。因此，建议使用位置面包屑导航或属性面包屑导航代替路径面包屑导航。

　　四、面包屑导航设计的最佳实践

　　在设计面包屑导航时，请记住以下几点：

　　1. 不要用面包屑导航代替主导航

　　面包屑导航应作为附加功能使用，它不能直接取代原本有用的主导航菜单。请记住，面包屑导航是一个方便的功能，一种辅助导航方法，也是网站导航的另一种方法。

　　苹果支持主导航通过面包屑导航2. 当前页面的面包屑导航不需要添加链接

　　面包屑导航的最后一项（用户当前位置）不必显示——如果要显示，请确保它不能被点击或操作。由于用户已经在当前页面上，因此无需添加指向面包屑导航的链接。

　　3. 使用分隔符

　　分隔各级面包屑导航文本链接的最醒目的符号是“大于号（>）”。

　　通常，大于号（>）用于表示层次结构，就像父目录>子目录格式一样。可以使用的其他符号是右箭头 (→)、双标题编号 (») 和斜线 (/)。

　　选择哪个符号取决于 网站 设计美学和使用的面包屑导航类型。