从最开始接触互联网，在浏览网站的时，经常可看到一行表示当前位置的指示，如下图所示。而初次认识它的名字，则是在去年1月开始进行产品实习的时候，才知道了它的名字叫：面包屑导航。
面包屑导航（英语：Breadcrumb Trail）是在用户界面中的一种导航辅助。它是用户一个在程序或文件中确定和转移他们位置的一种方法。面包屑这个词来自糖果屋这个童话故事。（摘自维基百科）
在故事里，当汉赛尔和格莱特穿过森林时，不小心迷路了，但是他们发现在沿途走过的地方都撒下了面包屑，让这些面包屑来帮助他们找到回家的路。所以，面包屑导航的作用是告诉访问者他们目前在网站中的位置以及如何返回。
面包屑的好处
作为指引，面包屑成为了用户了解网站背景信息的重要途径，帮助用户了解下列问题的答案：
我在哪里？展现了网站的结构层次，面包屑能让用户知道他们所处的位置。
我还能去哪里？面包屑提升了整个网站的可查找性，用户也随之明白网站还有哪些其他的部分。
是否应当浏览更多？面包屑揭示出网站有更多值得探索的内容，鼓励用户浏览更多。反过来，面包屑的出现降低了网站的跳出率。
此外，面包屑还具有临时性，动态性，占用屏幕空间小，干扰性小等特点。
面包屑的分类
1.基于用户所在的层级位置。（Location-based）
正如刚开始所展示的那个面包屑，基于位置的面包屑用于告知用户在当前网站中所在的结构层级。用在具有多级导航（通常具有2级以上导航）的网站中。这种层级展示性的面包屑对于从外部来源（比如搜索引擎）进入网站的用户而言，具有明显的指引性作用。
2.基于产品的属性。(Attribute-based)
这种类型的面包屑常出现在具有大量类别产品和服务的网站中，如电子商务网站，网上教学服务等。淘宝、京东、亚马逊都可见到。
3.基于用户的足迹。(Path-based)
显示用户浏览的轨迹，面包屑之间没有明显的层级关系。也称“历史足迹”，是动态呈现而非静态的。下图可简单说明其余基于位置的区别：
而在我实际使用过程中，更多的是基于位置的使用，基于用户足迹的相对少见。
使用面包屑应注意的地方
1、不要忽略了网站导航的重要性，面包屑只是一个辅助导航系统，它无法替代主要的导航系统。
2、面包屑最后一级不要加超链接。面包屑的最后一个层级是当前的页面，而这一项在面包屑中是不应该加上链接的，因为它只起到展示定位的作用，没有任何意义。就这个问题，我曾经被前端姐姐提醒过。囧
3、使用分隔符。最常见的分隔符应该是“>”，当然还有其他的样式，可参考下图：
（此图摘自：腾讯CDC）
4、面包屑设计不宜成为视觉的焦点。即不要太过显眼，毕竟只是辅助导航系统，别喧宾夺主了。
5、移动端页面上不要使用面包屑。基于移动使用的场景，网页层级应尽量简单。强行使用面包屑使得复杂化，且面包屑导航不利于点击操作。
总结
面包屑看似不起眼的一个功能模块，却有着童话故事的渊源。它使得用户能够清晰的知道自己所在位置，了解网站的结构，可减少跳出率，对于网站是十分有意义的。总的而言，面包屑并不复杂、增加网站的易用性是其主要作用。而作为辅助导航系统，则不宜将其过于复杂及强调。【产品】
作者： Julian Xu，目前为互联网产品助理，望能互相学习及交流。#生命不息，折腾不止#
欢迎转载，转载请注明出处！