Base on
”Breadcrumbs In Web Design: Examples And Best Practices” By Jacob Gube
http://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/
前言
终于有点空了，今天看导航的文章看到这个，才发现这个好文自己都没看过。。汗。。。3月的时候还在浮躁中吧。。。
没全部翻，就是看过了之后意会了一下，想看详细的还是看原文吧。
主要是实例里面有一些很有意思，链去网站体验了一些，分享一下。
Breadcrumb是什么
对于有很多页面的网站，Breadcrumb导航能方便的让用户找到路。它减少了用户访问上级页面的时候需要的操作次数，并且让页面和章节内容更容易寻找。同时它也是标示用户目前在整个站点中的位置的很有效的元素，是通过上下文信息来定位页面的重要资源。
Breadcrumb的类型
主要有3种类型的Breadcrumb（WIKI）
·基于位置的 通常用在多级信息结构的站点上，显示了用户目前在整个站点结构中的位置。
·基于属性特征的 显示一个页面的特定属性，例如用不同属性对商品进行筛选时。之前TAOBAO有用过，今天没找到截图。
·基于路径的 显示了用户到达目前页面之前经历过的页面路径。
Breadcrumb的优点
（简略，详细请见原文）
·方便用户
·减少返回上层页面的点击
·占用很少的屏幕空间
·减少页面流量的跳出率
什么时候用
·有很多页面的大型网站，内容以层级秩序排列。
例如电子商务网站，有大量的产品并且按逻辑组织起来。
·不要用在单层信息结构的无层级秩序的网站上。画一个站点地图就可以知道是不是应该用Breadcrumb。
·Breadcrumb不能用来代替站点的主导航，它只是一个让用户知道自己在哪的辅助导航系统。
设计时要注意的地方
·用什么来做间隔符
常见的是“>”，一般意义上，它包含了父集 > 子集的含义.
有时候也用其他指向右边的符号“>>”和“/”。选择在于你使用的Breadcrumb的类型，一个路径型的Breadcrumb里的链接可能和其他的没有层级关系，如果使用“>”就不太合适了。
·它应该多大
它不是用来定义页面的，所以不要比导航还要显眼。
·它应该放在哪
一般放在页面的上半部，层级导航的下面
典型错误用法
·不需要用的时候就别用了
如图，Breadcrumb夹在主导航和次级导航中间，页面上太多导航了，Breadcrumb也没提供什么额外的有用的信息。而且，当你点Breadcrumb中的MUSIC时，次级导航的TAB会跳到LISTEN，造成TAB LISTEN比其他两个TAB要级别高一点的误会。
·别用Breadcrumb替代了主导航
1）搜索进来的用户要导航到其他栏目很困难。
2）进入这样的页面的时候，用户多数时候只能去点浏览器的“后退”按钮。
3）自己觉得还有一点就是这光用这玩意用户无法对站点的全貌有个印象，主导航在这方面可以做的很好。
·当一个子页面有多个父类别的时候，还是算了吧使用Breadcrumb很大程度上取决于你如何设计你的信息结构，如果你的一个低层级的子页面（DETAIL页）同时属于（或者可以放进）多个父类别的时候，Breadcrumb的效率很低而且还会给用户造成困扰。例如曾经的行业化项目遇到情况。
案例
全部图片请看原文，这里挑几个觉得有意思的分析下：
TypePad Design Assistant
这个图看了觉得很奇怪，为什么下面的箭头会指在中间的这个链接上而不是最后。
到这个站点看了之后才知道，原来这是一个表示进程的选择器，通过它你可以查看整个流程中各个环节要做的事。
当前的页面是在 “选择布局”上面。
Overstock.com
这个的特色在于它是一个Location-based 型的，但是在最末端，又有一组多选框，提供了方便的子类筛选功能
Target uses semi-colons (:) for separators.
这个面包屑是用冒号来分隔的，也很适合的样子。当前项很醒目
Grooveshark
这种样式很潮啊~~虽然很像TAG。。。哈哈
苹果的也很潮，就没放图了
Yahoo! TV
这个是带交互动作在里面的，可以展开。有点意思，筛选内容很方便，一定程度上弥补了面包屑难以对全局有印象的弊端。
Coolspotters
同上
2个反映进程的Breadcrumb
进程也是可以用的，是路径型的
一些带子菜单的breadcrumb
Profoto has a unique breadcrumb trail: clicking on a breadcrumb link opens an area below it that gives users additional attributes to select from.Lonely Planet also has a fly-out breadcrumb trail in which you can change attributes.
提供一个扩展的区域来改变属性。
最后这个很有意思，很是喜欢
Delicious lets you remove items in the breadcrumb rail of keyword tags to help you quickly find bookmarks.
亮点1：你可以很方便的添加和删除你筛选列表的TAG，只在这么一小块，就解决了“搜索”“在结果中搜索”等一堆麻烦的操作。
亮点2：面包屑下面一行那几个横线，你可以用来控制列表展现内容的方式，是“标题”LIST，还是“标题”+“简介”，或者详细内容。很聪明也很周到。不用在会议室里想破脑袋就可以让用户满意。
亮点3：地址栏。它的地址栏里的URL是与下面面包屑里选择的内容联动的，而且使用了WEBDESIGN+DESIGN这样很直观的文字。相比之下很多有名网站的地址栏都要汗了吧。
翻译、整理：blueben
相关文章
呼哧呼哧