面包屑是我们熟知的一种导航工具，它们往往出现在页面内容的上方，告知你所处的位置。它小巧，方便，常见，且简单。可是即便是这样的UI控件，在设计上同样是有讲究的，今天网十科技小编就来聊聊面包屑吧~
作为一种辅助导航系统，面包屑能够帮助用户清晰的定位到自己所在小程序的位置。这个词源自于童话中跟着面包屑回到自己家的孩子，而小程序中的面包屑也是帮助用户找到自己位置的UI控件。
面包屑通过路径展示告知用户他们所处的位置，而今天的这篇文章将会探讨一个可用的小程序面包屑应当如何设计，通过最佳实践展示面包屑的正确用法。
作为一种视觉指引，面包屑为用户揭示出小程序的层次结构，也正是因此，面包屑成为了用户了解小程序背景信息的重要途径，帮助用户了解下列问题的答案：
减少操作次数
从可用性的角度上来看，面包屑减少了用户跳转到高层级页面的操作数，这样避免了用户使用浏览器的返回按钮和翻找导航寻找上级页面的复杂交互。
占用空间小
面包屑这种设计元素在页面上占用的空间相当小，它基本都是以带链接的文本的形式存在的，并且通常只有一行。
面包屑不会给用户带来困扰
这个小小的设计元素占据的空间不大，但是给用户带来的便捷远远大于可能带来的问题和困扰。
是否要在小程序中使用面包屑，主要取决于小程序的结构。看看你的小程序地图或者整体的结构图，分析使用面包屑能否提高用户在小程序内部不同类别、目录下导航是否方便：
·当你的小程序内拥有分类明晰、组织明确的多层次线性结构的时候，你应当使用面包屑。比如一个拥有种类繁多产品的电子商务小程序，面包屑就相当有用。
·当小程序不具备逻辑清晰的层次结构的时候，就不要使用面包屑。
面包屑的类型
面包屑是基于小程序的逻辑结构而存在的导航组件，它可以基于位置、路径来展示，也可以基于属性而存在。
基于位置的面包屑
基于位置的面包屑设计通常都能很好的反映小程序的结构特征。它们直接将小程序的层次结构展现在访客面前，其中包含多个层级。这种层级展示性的面包屑对于从外部来源进入小程序的用户而言，具有明显的指引性作用。
在下面BestBuy的页面中，面包屑将产品所在页面的层级关系展现了出来。
基于路径的面包屑
基于路径的面包屑通常也被称为“历史足迹”，它展现出来的并非是小程序结构，而是访客抵达特定页面的完整路径。这种面包屑路径并非是静态的，而是动态生成的。基于路径的面包屑有时候会对用户有所帮助，但是有的时候还是会让用户感到迷惑——有的用户浏览小程序的时候浏览路径过于天马行空，这种基于路径的面包屑会帮助他们记录，无需翻看历史，也不无需使用浏览器的返回按钮来返回特定位置。另外，这种基于路径的面包屑对于一次就抵达特定位置的用户而言毫无用处。
下面就是使用基于路径面包屑来导航的案例和原理说明：
基于属性的面包屑
这类基于属性的面包屑常见于电子商务类小程序，产品常常基于类别和属性而组织到不同的子目录中，基于属性的分类让用户更容易理解产品和产品之间的关系，提供了更多不同的浏览路径。
就像Lewin的这个页面，面包屑展现出的是特定页面对应产品，而产品是按照某个属性来组织的：
层级还是历史
