面包屑是众所周知的导航工具，它经常出现在页面内容的顶部，告诉你你在哪里。它小巧、方便、普通、简单。但是，即使是这样的UI控件，在设计上也是很精致的。今天就来说说面包屑吧~

　　面包屑作为辅助导航系统，可以帮助用户清晰定位自己的网站。这个词来源于童话里带着面包屑回家的孩子，网页里的面包屑是帮助用户找到自己位置的UI控件。

　　面包屑通过路径显示告诉用户他们在哪里，今天的文章将讨论如何设计一个可用的网页面包屑，并通过最佳实践展示面包屑的正确使用。

　　面包屑导航提供可用性

　　面包屑作为一种视觉指南，为用户揭示了网页的层次结构。因此，面包屑已经成为用户了解网站背景信息、帮助用户理解以下问题答案的重要途径：

　　我在哪里？根据整个网站的层次结构，面包屑可以让用户知道自己在哪里。还能去哪里？面包屑提高了整个网站的可搜索性。面包屑的存在揭示了整个网站的结构，用户也知道网站的其他部分是什么。应该多浏览吗？面包屑揭示网站有更多内容可以探索，鼓励用户多浏览。面包屑的出现反过来降低了网站的跳转率。

　　减少操作次数

　　从可用性的角度来看，面包屑减少了用户跳转到更高级页面的操作次数，从而避免了用户使用浏览器的后退按钮和翻找导航来查找更高级页面的复杂交互。

　　占用空间小

　　宽度是一个设计元素，在页面上占据很小的空间。基本以链接文本的形式存在，通常只有一行。

　　面包屑不会打扰用户

　　这种小的设计元素占用的空间很小，但是给用户带来的便利却比可能出现的问题和麻烦更多。

　　什么时候用面包屑？

　　网站是否使用面包屑主要取决于网站的结构。看看你的网站地图或者整体结构图，分析使用面包屑是否可以提高用户在网站内不同类别和目录导航的便利性：

　　当你的网站有一个多层次的线性结构，有明确的分类和组织时，你应该使用面包屑。例如，在一个产品种类繁多的电子商务网站中，面包屑是相当有用的。当网站没有逻辑层次结构时，不要使用面包屑。

　　面包屑的类型

　　广度是基于网站逻辑结构的导航组件，可以基于位置和路径显示，也可以基于属性存在。

　　基于位置的面包屑

　　基于位置的面包屑设计通常可以反映网站的结构特征。它们直接向访问者展示网站的层次结构，包括多个层次(通常超过2个层次)。这种层次化的面包屑对于从外部来源(如搜索引擎)进入网站的用户有明显的引导作用。基于路径的面包屑

　　基于路径的面包屑通常被称为“历史足迹”，它显示的不是网站结构，而是访问者到达特定页面的完整路径。这个面包屑路径不是静态的，而是动态生成的。基于路径的面包屑有时会帮助用户，但有时会让用户感到困惑。——有些用户浏览网站时，浏览路径过于天马行空。这种基于路径的面包屑可以帮助他们记录，而无需浏览历史或使用浏览器的后退按钮返回到特定位置。此外，这种基于路径的面包屑对于一次到达特定位置的用户是没有用的。

　　以下是使用基于路径的面包屑导航的案例和原理描述：

　　基于属性的面包屑

　　这种基于属性的面包屑在电子商务网站中很常见，产品往往根据类别和属性组织成不同的子目录。基于属性的分类使用户更容易理解产品之间的关系，并提供更多不同的浏览路径。

　　等级制度还是历史？

　　根据实践经验，在大多数情况下，面包屑更适合展现等级制度而不是浏览历史。因此，基于位置和属性的面包屑被广泛使用，而基于路径的面包屑相对较少。

　　面包屑导航最佳实践

　　当您开始设计面包屑导航时，您应该记住以下几点：

　　1.不要用面包屑代替网页的主导航系统

　　面包屑只是辅助导航系统，不能代替主导航系统。记住，为了方便用户，它只是一个次要选项，用于到达其他级别的快速定位链接系统。

　　2.不要将当前页面链接添加到面包屑中

　　面包屑的最后一级是当前页面，这个项目不应该在面包屑中链接，因为它只起到展示和定位的作用，没有任何意义。

　　3.使用分隔符

　　在面包屑中，用于分隔不同级别的最常见的面包屑大于符号(

　　)，常用的方法是“父类别”

　　子类别”。当然，分隔符的使用并不限于此，包括箭头()、书名()和斜线(//)。使用哪种分隔符通常取决于整体风格和设计师的偏好。

　　4.选择合适的尺寸和间距

　　设计时要仔细考虑大小和间距，不同面包屑层次之间要有足够的间距，保证用户能够识别。当然，你也不希望面包屑在页面上占据太多空间。如果面包屑比顶导航大，看起来会很尴尬。

　　5.不要让它成为视觉焦点

　　面包屑本身就是辅助导航。如果使用过于花哨的字体和醒目的颜色，会让它显得铺天盖地，过于醒目。应该不是用户在浏览时的视觉焦点。下面的面包屑设计还不错，但是太显眼了，比顶部导航更吸引用户的注意力。Google的面包屑设计并不抢眼，但是用户还是可以很好的使用。

　　6.不要在移动页面上使用面包屑

　　如果你认为你想在手机页面上使用面包屑，说明你的手机深圳网页设计有问题：可能是网站太复杂(嵌套层次太深)，不适合手机使用场景。为了解决问题，你要尽量简化整个系统，保证手机上不出现面包屑。

　　标签

　　面包屑让用户更容易浏览整个网站，回到上级页面，找到相关产品，对整个网站结构有意义。它的功能并不复杂，主要功能是增加易用性，所以千万不要把面包屑复杂化。