面包屑设计

－面包屑是什么？

对于面包屑这个说法，相信有些人还是对于这个概念有点模糊；看以下几个图片，相信大家就知道何为面包屑

图一

图二

图三

现在大家应该能理解何为面包屑。面包屑导航（或称为面包屑路径）是一种显示用户在网站或网络应用中的位置的一层层指引的导航。在互联网中，面包屑为用户提供一种追踪返回最初访问页面的方式，可以清晰的为客户指引进入网站内部也和首页之间的路线。最简化的方式是，面包屑就是水平排列的被大于号">"隔开的文本链接；这个符号指示该页面相对于链接到它的页面的深度（级别）。

－面包屑的类型
虽然我们在日常很经常看到面包屑，但是在交互设计过程中，对于面包屑控件的使用还是有一定的学问；而了解面包屑具体的类型对于更好的使用面包屑是至关重要的。面包屑是基于网站的逻辑结构而存在的导航组件，可以分为以下三类

基于位置的面包屑

基于位置

通过位置面包屑通过层级展示性让用户很好理解网站的结构特征。直接讲网站的层次层级展现在用户面前，引导用户并减少用户跳出率

基于路径的面包屑

基于路径的面包屑，面包屑路径并非是静态的，而是动态的。基于路径和基于位置某种程度上是很相像的，其实在实际应用过程中，基于路径和基于位置的面包屑还是会经常混淆。

例如：厦门软件园二期；

基于位置：中国福建厦门思明区软件园二期；

基于路径：从杭州开车来的，杭州到厦门就有千种万种的路径可以行驶

基于路径

虽然通过例子和图片，我们容易的区分了基于位置和基于路径的面包屑。但是在使用面包屑过程中，用户并非能够区分出这两种面包屑的功能；用户会认为基于路径的面包屑是基于位置的面包屑，这时候也会让用户感到疑惑，无法帮助到用户。这就违背了面包屑最终的本意，引导并告知用户。因此在用到基于位置和基于路径面包屑的时候要慎重，当然，在互联网的时代中，慢慢的弱化这两种面包屑的存在。

基于属性的面包屑

基于属性的面包屑，在电子商务是最常见了，用于表明产品属性之间的所属关系和当前页所在的位置，这些属性是存在所属和包含关系的。

唯品会

淘宝

－面包屑的引申

带下拉列表的面包屑，在平时设计的项目中还是有遇到的；当和基于路径的面包屑混合一起用的时候，在设计过程中，对于我来说还是比较困惑的；基于路径带下拉列表的面包屑也同时给予开发一定的困惑；在实际产品使用过程中面向用户给给予了迷惑。为了减少给用户照成的疑惑，现在慢慢的开始减少面包屑的设计；

－面包屑的现状

面包屑导航（或称为面包屑路径）是一种显示用户在网站或网络应用中的位置的一层层指引的导航在，也就是适用于层级较深的网站。当前的互联网时代，我相信除了一些电商网站之外；大家会慢慢发现，面包屑控件慢慢退出互联网历史舞台；对于推出舞台主要有以下几个原因

A、当前的产品设计趋势都是将信息的层次结构扁平化，尽可能将各种模块平铺，使信息结构的广度增加，减少纵向的深度

B、网站层级越少越扁平，搜索引擎越容易访问，网页越容易被收录；对于网站的推广搜索更有利

C、层级越少，用户思考点击的次数越少；一定程度上提升的用户体验

虽然面包屑慢慢退出历史舞台，但是在一定的网站上还是会用到面包屑这个功能的，而我们要甄别面包屑带来的到底是提升用户体验还是给用户带来疑惑呢。