面包屑路径，被忽视的细节

前段时间因为跟产品同学意见产生分歧，所以研究起这个小小的“面包屑”，发现网上与之相关的文章很少，关于样式设计上的细节基本没有。于是整理了下自己的设计思路和一些想法。

关于「 面包屑路径 」的来源

“面包屑路径”（也叫面包屑导航）是来自童话故事"汉赛尔和格莱特"，当汉赛尔和格莱特穿过森林时，不小心迷路了，但是他们发现在沿途走过的地方都撒下了面包屑，让这些面包屑来帮助他们找到回家的路。所以，面包屑导航的作用是告诉网站访问者他们目前在网站中的位置以及如何返回。

它的分类：

1. 基于位置

向用户显示他们在网站的哪一个级别页面。从本质上来讲，它是网站结构的线性表识。不管用户是如何到达那个页面，面包屑路径都是一样的。让访客了解自己当前所在的位置，以及当前页面与整个站点的层次结构。常见样式：

首页>父目录>子目录>内容

首页/父目录/子目录/内容

2. 基于属性

常用于电子商务站点。这种面包屑导航很好地指出当前页面内产品所属的类别。常见样式：

一级分类>二级分类>三级分类>商品详情

一级分类/二级分类/三级分类/商品详情

3. 基于足迹

比较不常见，是显示用户在到达当前页面前访问过的网页链接，功能上跟浏览器自带的后退功能一样。（相当于历史记录）

注：以上来源及分类内容参考百度百科“面包屑路径”词条

疑问：

这次不讲面包屑的定义分类作用，对于这方面网上可以很容易找到前辈们分享的一些内容（比如面包屑是一种辅助手段，方便定位和导航、面包屑可以减少用户返回上一级页面的所需的操作次数、降低网站访问跳出率等等）。而想来讨论下当下重要还是来时的路重要？

讲人话：就是面包屑路径中“当前位置”这个信息和当前页面前展示的“层次结构、所属类别、路径”等哪个更重要些呢？

1. 发出灵魂拷问：不知道当前位置，哪里来的如何返回和从哪里来？

从上面三个类型的释义中可以看到，不管哪一个都是以“当前位置”开始，然后才有后面的“层次结构、所属类别、路径”等。所以先清楚了自己当前在哪，然后才会去看怎么到这里的和这里是属于哪里。而且当前页面中的信息内容也是跟“当前位置”这个信息有直接关系，而“层次结构、类别、路径”等是跟“当前位置”这个信息有关系。所以就当前页面的内容而言，“当前位置”信息的重要性是高于“整个站点的层次结构/所属的类别/访问过的网页链接”等，在“面包屑”中，“当前位置”是主，其他为次。

2. 另一个疑问：面包屑路径需要很明显吗？

“面包屑”在网站中相当于辅助导航，所以整体在视觉上的效果不应该盖过页面中其他重要信息。比如网站的主导航跟面包屑都有一个入口可以跳转到首页，但作为一个辅助，面包屑的“首页”在这时候就不应该过于招摇而抢了主导航“首页”的风头。或者说面包屑相当于一个临时工，它并不是一直存在的，比如首页就不会存在面包屑，所以还是要引导用户从主导航去跳转，培养习惯，面包屑更多的是相当于一种返回上一级的便捷入口。

划重点：关于面包屑的样式应该怎样

做每一个设计我们都是有思考有依据的（认真脸），那做这么一个面包屑的样式要从哪里入手呢？

页面的文本信息一般分为：标题、正文、提示（辅助）信息这几大类。然后从整个的信息模块看，可以分为：导航（分类）、详情（正文）两大类。导航是全局的，也可以把导航作为一个整体看作整个网站的通用大标题。

那面包屑属于哪里的呢？面包屑可以很多页面都有，但一个有具体信息的面包屑，告诉我们的信息都是基于当前这个页面的内容是属于什么，是从哪里到这里的，所以它是属于当前页面的。那在这里可以把它当成当前页面正文模块的标题来看，样式上就可以跟网页其他模块标题保持统一。

看了很多网站的面包屑，前面的路径基本用的都是主色，而最后不可点击的“当前位置”用浅灰色。用主色来代表可点击的文本按钮（链接），然后浅灰色表示不可点击的文本，应该是很习惯的用法。按理来说用这样的规则来设计面包屑应该是可以的。

但这样设计，视觉重点是在左侧的“首页、分类”上，而右侧的“当前位置”却被弱化了。这跟前面说的两者的重要性强弱是相反的。还有比较常见的一种是深灰色（黑）+浅灰色，这种视觉效果跟上一种也是一样的。

我在想上面这两种样式之所以常见是受这两部分信息前部分是可点击的，而最后的是不可点击的影响么？所以大家顾着表示两者的区别，而忽略了两个信息的强弱关系。上面提到可以把面包屑当成当前页面正文模块的标题来设计，其实往细了说，是最后“当前位置”这部分信息属于正文模块的标题，而前面的“首页、分类”等是属于“当前位置”的说明信息，说明它属于哪里，从哪里来到这里的。这样一来，其实用浅灰色来表示“当前位置”这个作为标题的信息就不合适了，正相反可以用浅灰色来代表作为说明信息的“首页、分类”部分，而用深灰色（黑）来强调作为标题的“当前位置”。

这样就可以清晰的把视觉重点放到“当前位置”上，然后再去关注到达“当前位置”的路径，当前位置与网站中的层次结构等信息。这样从“当前位置”的信息转到下面与之相关的正文，信息才是连续的。而不是面包屑的突出强调“首页”“分类”，而正文却跟这两者没有直接关系的。

另外“面包屑”从有到现在已经有一定历史了，对于它的作用和哪部分可点击哪部分不可以，绝大部分的用户也都很清楚，所以现在考虑它的样式时没有必要专门去突出是可以点击的还是不可以点击的，而且面包屑路径一般都是用于pc端的页面，如果实在担心用户有疑惑，也可以加个hover状态，当用户想要从“面包屑”返回到某个页面时，来进一步提示他，肯定他的操作。

所以大愚的结论是：

“面包屑”作为一个辅助，在样式上能清晰展示信息层级关系、跟页面其他重要信息，如主导航有主次之分就足够了。

一般“面包屑”文本字号统一用一种，可以跟整个设计规范中的模块标题字号保持统一，如果其他模块标题是用了比较特别的大字号（有些风格会这样），而应用在“面包屑”这里时，实在低调不了，那么你就可以考虑用正文的字号。当然，单独用较大的字号来突出“当前位置”这部分的信息也是可以的，但即使用了字号大小来区分“当前位置”和前面的“层次结构、所属分类、途径链接”等，也要在颜色上进一步强调两者的主次关系。

有些网站会把整一个“面包屑”用同一个色值，比如黑色或灰色或主色，但这样设计“面包屑”这一块信息就变得没有主次重点。

“当前位置”在前面说了可以把它当正文的模块的标题，那它的色值可以跟其他的标题色值保持一致，如黑灰色（黑）。而层次结构、分类路径等信息，比如主色是蓝色，那这里可以用灰蓝色作为辅助色，或者在设计中的其他地方有设定某一种颜色作为文本按钮的色值也可以用在这里。尽量避免用主色，或者是在视觉效果上强于“当前位置”的色值。

建议的样式

不太建议的样式

以上就是对“面包屑”路径设计的一些思考。

感谢阅读，期待交流。