面包屑导航的作用是告诉访问者他们目前在网站中的位置以及如何返回。其以层层渐进方式呈现该网页在整个网站架构中所处的位置，从而为用户提供清晰分明的网站导览。这样做有利于网站用户了解自己所在的位置，更能明确显示网站的整个导航目录和结构情况，从而有助于提供网站的用户体验度。因此眼下有很多网站都流行使用面包屑，但是并不是所有的网站都适用，符合下面两个条件的网站才适合使用面包屑导航。 1、层级较深的网站（比如电商网站），面包屑导航适合层级较深的网站，如果只有一级分类的话，通过主导航就可以起到快速定位的作用。比如“豆瓣网”类型扁平构架的网站就没有使用面包屑导航。 2、独立不交叉的网站结构，由于面包屑网站导航路径是线性结构的，因此网站内容必须划分的非常清晰，且不存在交叉；否则，面包屑导航的路径就不是唯一的，同一分类可能出现在不同的路径中，让用户感到困惑。 明白了面包屑导航的适用范围，现在我们就开始分析如何正确使用面包屑导航： 1、关键词统一，避免用词重复 面包屑导航的存在就是为了让用户能最直观的了解自己所处的位置，因此，用词精简、直接并且唯一，是面包屑必须遵守的原则。也就是说，每一个主目录和子页关键词都要精简且唯一，存在辨别性，这样能让用户在浏览网站或者电商购物网站中购买商品时不会产生疑问，且对自己的当前位置一目了然。同时，所有的分类面包屑的关键词都不能存在有歧义词现象，避免重复性。譬如淘宝网的面包屑导航，每一个分类都清晰明了。例如女装分类：从“所有分类”到“女装”再到“羽绒服”，每一个大分类都没有重复性，让用户能在第一时间做出反应。 2、分类少也能使用面包屑 传统意义上都建议当网站的层级分类很多的时候可以使用面包屑，如果网站分类较少就可以省去这个部分。但笔者认为，面包屑还能有助于用户明确产品定位。一般页面中只要有两个以上分类页面，都有必要使用，毕竟用户在点击层级页面时总会有返回上级页面的需要，且在没有记住每个页面相关内容时，很容易忘记上级页面内容是什么，因此每次要靠返回按钮进行操作的话会更加麻烦一些，使用面包屑导航则可对当前页定位，帮助用户回到各层级页面。 3、使用具有指向性的符号 面包屑的从用户体验上来说是一个“重要的小角色”，既要让用户看得清楚，又不能太醒目，要知道面包屑本身是一个辅助导航，如果使用过于花哨的字体和醒目的色彩，会使它喧宾夺主，因此，在色彩上主要以黑、灰为主，形状上可以采用单独连接符号，多考虑关键字之间的包含关系，并且具有指示性。 4、设置合适的大小和 padding 属性 在设计的时候要谨慎考虑导航菜单的大小和 padding 属性。在每个项目之间必须有充足的间隔，否则用户理解起来会有问题。同时面包屑导航不能抢了其他主要部分的风头，因此你需要让它看起来比顶级导航要低等一些。 5、使用分隔符 面包屑导航中最简洁明了的分隔符便是大于号“＞”。通常大于号用于基于位置的面包屑导航，以“父类＞子类”的形式表示导航项目之间的层级关系。除了大于号意外还可以用向右箭头“→ ”，双大于号“>>”和斜线“/”。到底使用哪个取决于导航的类别和视觉效果。 6、不要替代网页主要的导航系统 做好主导航与面包屑导航之间的区分，主导航始终承载整个网站的主导地位，而面包屑导航则是起辅助作用，因此用户在辨识面包屑导航时应起到更加精准的作用，而不是重复主导航已经存在的栏目分类，更无法替代主要的导航系统，又或者说用户在点击主导航时会犹豫面包屑导航对其产生的干扰，否则面包屑就是去了本该有得价值和意义。请记住，它是且仅仅是为了用户方便的次要选项，用来抵达其他层级的快速定位链接系统。 7、尽量精简层级 精简面包屑导航层级原因不仅仅为了提升用户体验，也为了利于搜索引擎的抓取。在设计面包屑导航时无论分类是否复杂，但都要尽可能的精简层级，对产品分类或者概括要综合言简，避免太多太细的分类让用户浏览时容易疲劳，当然，这样的面包屑也有利于网站优化，容易被搜索引擎抓取，同时对提高用户体验有一定的帮助。尽量把面包屑控制在 4 个层级以内，对用户视觉和 SEO 都有很大的好处。 8、在面包屑中使用关键字 面包屑对于网站的 SEO 有着很大的影响作用，因此把握关键字的设置也许能为网站带来更多的流量。 正如天猫的案例所示，在面包屑导航的第四层级中，用户可以根据自己的时机需求筛选关键字，让呈现出的产品更加准确。 9、不要在移动端页面上使用面包屑 如果你觉得自己的移动端页面要使用面包屑的话，那就意味着你的移动端网页设计出现了问题：可能是网站太复杂（嵌套层级过深），而这样一来，就不符合移动端的使用场景了。为了解决问题，你应当试图简化整个体系，确保面包屑不会出现在手机上。 面包屑对于每一个网站来说，并非必须品，但却能锦上添花，方便用户的操作，提升用户的体验，帮助用户在网站上找到浏览的轨迹并让他们的需求快速得到满足。但前提是使用面包屑一定要注意正确的方法。