重新认识组件-面包屑导航
什么是面包屑导航
面包屑导航是网页设计中极为常见的一种设计方法，我们经常使用面包屑导航来作为网页导航框架中的辅助手段，来帮助用户感知自己所处位置，快速移动到自己需要的位置中去。
面包屑导航的作用
- 告知用户其在网页中所处的位置，帮助其更好的理解整个网站的结构
- 快速移动，面包屑因为其组合了多级的页面。所以，用户可以通过面包屑来达到在网页各个页面之间快速移动的目标
面包屑分类
面包屑导航大致可以分为三类
- 基于位置
- 基于属性
- 基于路径
这些属性定义在百度百科中均可以查阅到，并不是什么很深奥的内容。总结来讲，我们平时最经常用的面包屑是基于位置的，即面包屑中展示的都是网页页面，从而来帮助用户可以理解其所处的位置。
而基于属性的则是最常见与电商网站，像天猫的面包屑导航就是这样，显示的是商品类目的信息，使得用户可以理解自己当前查看的品牌在商品类目中的属性
76BFC665-E844-4446-BA4C-A0A1B9C88C78.png
至于最后的基于路径导航，则是对于用户浏览网页的路径的一个记录，这种面包屑导航很少见，也很无用。如果我们根据用户的浏览路径来创建面包屑的话，对于用户没有任何意义，就像是一个无限长的后退键而已
一些网页中面包屑导航的应用案例
- 百度网盘
0D889514-3CF6-4594-8234-3C3CD3807E96.png
- 天猫商城 筛选条件和面包屑的结合
76BFC665-E844-4446-BA4C-A0A1B9C88C78.png
- 百度糯米 面包屑中加上切换选择，方便用户快速在上一级页面的各个模块中跳转
9477495B-EDC4-4876-987E-9AE21B7DE91E.png
一些关于面包屑导航的思考
- 为什么现在很多网站很少使用面包屑导航了？是不是有什么导航方式的出现替代了面包屑？
因为只有存在页面模块众多，层级深的网站设计中才会使用到面包屑导航这种设计手段。所以，我们可以看到，最经常使用面包屑导航的网站都是诸如：淘宝，百度糯米，携程 。这些网站都是由诸多网页构成的庞大集合体。路径众多，层级很深。这个时候使用面包屑导航可以一定程度上帮助用户理解自己当前所处位置。
但是，随着时间不断的发展，网页从门户时代发展到现如今。不断的细分化导致一个网站本身的信息容量就是有限的，并且相对扁平的。尤其是针对内容型产品来说，如果层级深的话，则是天生的降低用户点击率。 故而，因为现在网页本身的精细化和信息的扁平化。面包屑导航就逐渐失去了其存在的必要性
- 面包屑是否能够充当页面标题？
这个问题在公司设计的一个项目中有涉及到，当时最初稿的设计中，页面中同时存在面包屑和标题。但是面包屑的最后一级就是标题名称。这样是在信息上有重复，最后，我们尝试采用了将面包屑和标题在视觉上做统一的方法。成了如下的模样：
WX20161215-134824.png
但是，现在再次回首来考量当初的设计，这种将面包屑和标题结合在一起的设计有一些不太合适的地方
- 将面包屑放在标题的位置并且拥有和标题同样大小的字体，这样会会挤占掉页面 标题附件的位置，而这里常常是用来放诸如状态，提示之类的文字信息的最佳位置。
- 将面包屑和标题设计成同一个，必须是在于页面层级并不是十分深的情况下，否则页面将容纳不下这么长的文字
- 页面标题阅读性不如之前，根据现在的设计，标题是处于面包屑条的最右侧的，也就是标题不会处于页面的左上角，从视觉线上来说。这样会影响标题的阅读。
现在看来，这些都是可能会有的坑。而且，将面包屑这种辅助导航手段在视觉上做的这么突出，也有可能对于用户造成困扰。总而言之，在我看来，这种将面包屑和标题合起来的设计至少有点过度设计的意味。
- 是否有什么更好的方法来取代面包屑导航？
前面讲到过，面包屑导航存在的目的就是为了告知用户其所处的位置，帮助其理解网站结构。那么，如果是处于这种目的。那么，面包屑这种展示出用户所经历各个层级的信息的设计手段，就是最好用的方式。
但是，其实有一些别的方式，可以使得告知用户其所处位置的动作更加的自然。
- 变体的面包屑
WX20161215-134926.png
这种设计，通过将一个个页面视为卡片，进入新的页面时，就像一个新的卡片堆叠在原先的卡片上，这样，用户可以更好的理解页面与页面之间的层级关系。这是一种更好的帮助用户达成认知的设计手段
- 动效的帮助
动效的应用在移动端已经十分的成熟了，我们平时可以看到许许多多十分酷炫的动效设计，其中可以看到很多类似堆叠，扩展的效果。并且，在Google出的 Material Design 的设计理念中，强调了Z轴的概念。
那么，我们是否可以在网页中也引用这种设计理念，通过堆叠，扩展等动效手段，和Z轴所赋予的深度，来让用户天然就形成对于页面之间关系的感知
