﻿<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:xg="http://ucdchina.com/schemas/rss">	
 		<channel>
 			<title>面包屑(Breadcrumb) - UCD大社区</title>
 			<link>http://ucdchina.com/rss/topic_posts?id=103</link>
 			<description>面包屑(Breadcrumb) - UCD大社区</description>
 			<webMaster>qingping.hu@gmail.com</webMaster>
			<pubDate>2026-05-13 08:56:14</pubDate>			<item>
				<title>用面包屑来简化多层的tabs</title>
				<link>http://ucdchina.com/snap/9922</link>
				<description>&lt;p&gt;一个网站信息结构需要表现给用户看，这样用户才能知道当前是在哪儿，才有可能去猜测某个内容可能会在哪儿。&lt;br /&gt; 如何表现网站的信息结构给用户呢？&lt;br /&gt; 用导航。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;Tabs导航不错！&lt;/strong&gt;&lt;br /&gt; Tabs导航是一种表现形式，可以很直观的表现出当前所在的栏目和与之同级的其他栏目。&lt;br /&gt; &lt;img src=&quot;http://img.ucdchina.com/upload/snap/2012-05/5b9a615a9e4541710cf4317a98047a8a.gif&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
 
&lt;p&gt;用tabs这种形式来表现导航是个很好的办法，也是很常见的。然而，如果一个网站的信息结构很复杂，层级很多，那么就经常会是tabs套tabs套tabs套tabs&amp;hellip;&lt;br /&gt; &lt;img src=&quot;http://img.ucdchina.com/upload/snap/2012-05/cd788f44c287af8d1800e5688275211f.gif&quot; alt=&quot;&quot; /&gt;&lt;br /&gt; 四层tabs&amp;hellip;&lt;br /&gt; 我们抽象一下就成了下面这样：&lt;br /&gt; &lt;span&gt;&lt;/span&gt;&lt;br /&gt; &lt;img src=&quot;http://img.ucdchina.com/upload/snap/2012-05/2cbcad0ae0dca53329bbb8d770a6ec66.gif&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;怎么优化过多层的tabs？&lt;/strong&gt;&lt;br /&gt; 最直接的想法当然是收起一些tabs来。&lt;br /&gt; 实际上，时时刻刻展示出所有层级的tabs并不必要，是有浪费的，浪费了用户的注意力。&lt;br /&gt; 上图的例子中，当我点开第三层tabs中的&amp;ldquo;歌手&amp;rdquo;后，我的诉求更多的是看&amp;ldquo;歌手&amp;rdquo;下更多的分类，以便我找到某位特定的歌手，这个时候并不会太关注&amp;ldquo;背景音乐&amp;rdquo;&amp;ldquo;我的收藏&amp;rdquo;&amp;ldquo;留言板&amp;rdquo;&amp;ldquo;相册&amp;rdquo;&amp;hellip;这些tabs项此时成了干扰信息。&lt;br /&gt; 仍旧显示出一二三层tabs的价值主要在于告诉用户，当前的&amp;ldquo;歌手&amp;rdquo;栏目是在&amp;ldquo;音乐盒&amp;rdquo;-&amp;gt;&amp;ldquo;正版音乐库&amp;rdquo;下的。那么，对于上面那些层tabs，可以只保留有价值的信息&amp;mdash;表明当前所在栏目，而不显示与之同级的其他栏目。&lt;br /&gt; 去掉一、二、三级tabs中可供访问的tabs后的样子：&lt;br /&gt; &lt;img src=&quot;http://img.ucdchina.com/upload/snap/2012-05/2ef7142fe141a049db0c45343fa96c78.gif&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
 
&lt;p&gt;再整理一下&amp;hellip;&lt;br /&gt; &lt;img src=&quot;http://img.ucdchina.com/upload/snap/2012-05/5b476bc9e3a557e238887fbbd13a4716.gif&quot; alt=&quot;&quot; /&gt;&lt;br /&gt; 是的，这就成了面包屑导航导航。&lt;br /&gt; &lt;strong&gt;面包屑导航是另外一种反应网站信息结构的形式。&lt;/strong&gt;因为省略掉了与当前栏目同级的其他栏目，所以&lt;strong&gt;面包屑导航的信息量小。&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;将上面演绎的过程总结一下：&lt;strong&gt;面包屑导航可以简化多层tabs导航中那些不太重要的层级。&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;要省略哪层呢？&lt;/strong&gt;&lt;br /&gt; 就象上面说的那样，把当前页面以上以及同级的tabs都简化掉？显然不是，设计如果是这么简单的，那就不要设计师了。&lt;/p&gt;
 
&lt;p&gt;我们来看看yahoo：&lt;br /&gt; &lt;img src=&quot;http://img.ucdchina.com/upload/snap/2012-05/430152855ffae858d7db7fff26afb981.gif&quot; alt=&quot;&quot; /&gt;&lt;br /&gt; 进入Autos栏目中，只展示Autos下的tabs，而不再展示与Autos同级的其他栏目。&lt;br /&gt; 看Autos的时候并不会经常会想着切换到财经、游戏等其他栏目，那么，简化掉第一级，只显示Autos栏目隶属于Yahoo！下。Autos频道下的两级菜单需要经常不断切换着看，即便当前是&amp;ldquo;LATEST MODELS&amp;rdquo;，上一级tabs&amp;ldquo;Home，New cars&amp;hellip;&amp;rdquo;也依旧保留着，不简化。&lt;/p&gt;
 
&lt;p&gt;再看amazon：&lt;br /&gt; &lt;img src=&quot;http://img.ucdchina.com/upload/snap/2012-05/6492b057c5aa697d7be75b311ce9f67d.gif&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
 
&lt;p&gt;不断寻找商品的过程是不断往下找的过程，目前已经到达&amp;ldquo;Bikes&amp;rdquo;了。&amp;ldquo;Sports &amp;amp; Outdoors &amp;rsaquo; Bikes &amp;amp; Scooters &amp;rsaquo; Bikes &amp;amp; Accessories &amp;rsaquo;&amp;rdquo;这些都是当前页面&amp;ldquo;Bikes&amp;rdquo;的父级。相比之下，当前，用户更需要在&amp;ldquo;Bikes&amp;rdquo;里进一步筛选，而不是退回去选sports&amp;amp;outdoors类的其他产品，所以，&amp;ldquo;Bikes&amp;rdquo;下的进一步分类要充分的展示，而之前逐层筛选过的那些父级，统统的面包屑掉。&lt;/p&gt;
 
&lt;p&gt;从上面的两个例子中，我们可以看到：&lt;br /&gt; &lt;strong&gt;可以省略，也是需要省略的，是那些当前较少可能去选的、不需要反复切换的&amp;hellip;&lt;/strong&gt;&lt;br /&gt; &lt;strong&gt;并非凡是当前页面上一级和平级的tabs都要简化&lt;/strong&gt;，当然也不是都不简化。&lt;/p&gt;
 
&lt;p&gt;这里说的用面包屑来简化多层tabs，要解决的问题源于网站结构层级太多，解决这个问题最好的方法当然是让信息层级结构本身简化点儿，少几个层级。&lt;/p&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/103&quot; target=&quot;_blank&quot;&gt;面包屑(Breadcrumb)&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://www.chouyu.com.cn/?p=324&quot; target=&quot;_blank&quot;&gt;http://www.chouyu.com.cn/?p=324&lt;/a&gt;&lt;/p&gt;</description>
				<author>chouyu</author>
				<pubDate>2011-06-12 23:31:25</pubDate>
			</item>			<item>
				<title>网站面包屑（breadcrumb）设计</title>
				<link>http://ucdchina.com/snap/9705</link>
				<description>&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;p&gt;&lt;/p&gt;
&lt;h3&gt;一、什么是面包屑&lt;/h3&gt;
 
&lt;p&gt;A &amp;ldquo;breadcrumb&amp;rdquo; (or &amp;ldquo;breadcrumb trail&amp;rdquo;) is a type of secondary navigation scheme that reveals the user&amp;rsquo;s location in a website or Web application. The term comes from the Hansel and Gretel fairy tale in which the two title children drop breadcrumbs to form a trail back to their home. Just like in the tale, breadcrumbs in real-world applications offer users a way to trace the path back to their original landing point.&lt;/p&gt;
 
&lt;p style=&quot;TEXT-ALIGN: right&quot;&gt;&amp;mdash;&amp;mdash;《Breadcrumbs In Web Design: Examples And Best Practices》&lt;/p&gt;
 
&lt;p&gt;[译]一个&amp;ldquo;面包屑&amp;rdquo;（或&amp;ldquo;面包线索&amp;rdquo;）是一个类型为二级导航方案&lt;sup&gt;[1]&lt;/sup&gt;，揭示了网站或网页应用程序中用户的所在位置。这个词来自汉赛尔与格莱特童话故事&lt;sup&gt;[2]&lt;/sup&gt;中，两个孩子丢下面包屑，形成一条小径回到自己的家。就像在童话，应用面包屑在现实世界的用户提供一种方法来跟踪路径返回到原来的着陆点。&lt;/p&gt;
 
&lt;p style=&quot;TEXT-ALIGN: right&quot;&gt;&amp;mdash;&amp;mdash;《在网页设计面包屑：实例和最佳做法》&lt;/p&gt;
 
&lt;p&gt;面包屑是作为辅助和补充的导航方式（secondary navigation scheme）&lt;sup&gt;[3]&lt;/sup&gt;，它能让用户知道在网站或应用中所处的位置并能方便地回到原先的地点。&lt;span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;h3&gt;二、&amp;nbsp;面包屑的现状及分类&lt;/h3&gt;
 
&lt;p&gt;很多著名的互联网公司在建站之初就采用了面包屑导航做为网站产品线的&amp;ldquo;标准配置&amp;rdquo;，现在被越来越多的行业网站所认可及采用。&lt;/p&gt;
 
&lt;h4&gt;1.基于用户所在的层级位置（Location-based）&lt;/h4&gt;
 
&lt;p&gt;基于位置的面包屑用于告知用户在当前网站中所在的结构层级。用在具有多级导航中。&lt;/p&gt;
 
&lt;p style=&quot;TEXT-ALIGN: center&quot;&gt;&lt;a href=&quot;http://www.ixuqiu.com/blog/194&quot;&gt;&lt;img class=&quot;size-full wp-image-195&quot; title=&quot;1&quot; src=&quot;http://img.ucdchina.com/upload/snap/2011-05/4d3a53e2d40247826f8442aec51cdebf.jpeg&quot; alt=&quot;&quot; width=&quot;494&quot; height=&quot;129&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p style=&quot;TEXT-ALIGN: center&quot;&gt;&lt;span style=&quot;COLOR: #0000ff&quot;&gt;网易新闻中心的面包屑导航案例&lt;/span&gt;&lt;/p&gt;
 
&lt;h3&gt;2.基于产品的属性(Attribute-based)&lt;/h3&gt;
 
&lt;p&gt;这种类型的面包屑常出现在具有大量类别产品和服务的网站中，如电子商务、购物网等。&lt;/p&gt;
 
&lt;p style=&quot;TEXT-ALIGN: center&quot;&gt;&lt;a href=&quot;http://www.ixuqiu.com/blog/194&quot;&gt;&lt;img class=&quot;size-full wp-image-196 alignnone&quot; title=&quot;2&quot; src=&quot;http://img.ucdchina.com/upload/snap/2011-05/77c1ee34a3573e945acd2d2b89a08aec.jpeg&quot; alt=&quot;&quot; width=&quot;549&quot; height=&quot;231&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p style=&quot;TEXT-ALIGN: center&quot;&gt;&lt;span style=&quot;COLOR: #0000ff&quot;&gt;阿里巴巴示例(所展示公司仅为案例，无其他用途)&lt;/span&gt;&lt;/p&gt;
 
&lt;h3 style=&quot;TEXT-ALIGN: left&quot;&gt;3.基于用户的足迹(Path-based)&lt;/h3&gt;
 
&lt;p&gt;显示用户浏览的轨迹，面包屑之间没有明显的层级关系，只是展示用户从那个级别过来的。这种面包屑在一级导航方案不明确的网站适合，其他情况不建议采用。&lt;/p&gt;
 
&lt;h3&gt;三、&amp;nbsp;面包屑的好处&lt;/h3&gt;
 
&lt;p&gt;通过上面的案例研究以及面包屑的分类，我们可以看到采用面包屑功能的好处：&lt;/p&gt;
 
&lt;p&gt;1.面包屑作为用户寻找路径的一种辅助手段，能方便他们定位和导航。&lt;/p&gt;
 
&lt;p&gt;2.面包屑可以减少的用户返回上一级页面的所需的操作次数。&lt;/p&gt;
 
&lt;p&gt;3.临时性，动态性，占用屏幕空间小，干扰性小。&lt;/p&gt;
 
&lt;p&gt;4.降低网站访问者的总体跳出率。&lt;/p&gt;
 
&lt;p&gt;当用户从别处链接到网页，或者从搜索引擎查找到网页，则面包屑的存在能帮助用户快速了解当前的层级位置，并引导用户查看网站的其余部分，减少了看完直接跳走的用户数量。&lt;/p&gt;
 
&lt;h3&gt;四、&amp;nbsp;面包屑的使用前提及设计规范&lt;/h3&gt;
 
&lt;h4&gt;1 面包屑的使用前提&lt;/h4&gt;
 
&lt;h4&gt;(1)存在大量的分类目录&lt;/h4&gt;
 
&lt;p&gt;例如：购物类网站、分类信息网站。&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://www.ixuqiu.com/wordpress/wp-content/uploads/2011/05/32.jpg&quot;&gt;&lt;img class=&quot;aligncenter size-full wp-image-202&quot; title=&quot;3&quot; src=&quot;http://img.ucdchina.com/upload/snap/2011-05/006fcd628ddc856523cc488f476edcf1.jpeg&quot; alt=&quot;&quot; width=&quot;545&quot; height=&quot;327&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p style=&quot;TEXT-ALIGN: center&quot;&gt;&lt;span style=&quot;COLOR: #0000ff&quot;&gt;谋思网首页截图&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;(2)在一些引导性的流程操作或者软件安装进程中，面包屑也常被用来指示当前以及剩余的操作步骤。&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://www.ixuqiu.com/wordpress/wp-content/uploads/2011/05/41.jpg&quot;&gt;&lt;img class=&quot;aligncenter size-full wp-image-203&quot; title=&quot;4&quot; src=&quot;http://img.ucdchina.com/upload/snap/2011-05/86fc56c264bfe51d1720bccdbcf71b09.jpeg&quot; alt=&quot;&quot; width=&quot;547&quot; height=&quot;125&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p style=&quot;TEXT-ALIGN: center&quot;&gt;&lt;span style=&quot;COLOR: #0000ff&quot;&gt;谋思网会员注册流程&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;(3)层次简单的页面中一般不使用面包屑，但是当面包屑能显著帮助到浏览并提高他们定位能力时，也建议采用面包屑。&lt;/p&gt;
 
&lt;p&gt;相册浏览就是一个典型的例子，结构层次并不复杂，但用户在特定几个页面之间跳转的频率会比较高（如相册首页，相片缩略图页，相片浏览页等），所以面包屑的存在对提高此处的浏览效率是很有帮助的。人人网在2010年9月份之前还保留这一面包屑，但是现在无缘无故取消了，不知道PM们取消的原因是什么，这一点让我很上火。&lt;/p&gt;
 
&lt;p&gt;需要提醒的是面包屑不能替代有效的主导航，它是一个辅助功能&lt;sup&gt;[5]&lt;/sup&gt;。&lt;/p&gt;
 
&lt;p&gt;这一可以称之为&amp;ldquo;小应用，大效应&amp;rdquo;的用户体验性设计，国外的资讯门户网站似乎对此不怎么&amp;ldquo;感冒&amp;rdquo;，例如yahoo.com、CNN、华尔街日报等。都没有在页面中采用面包屑导航，也可能是由于他们的资讯分类比较喜欢采用二级栏目导航的缘故吧。&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://www.ixuqiu.com/wordpress/wp-content/uploads/2011/05/51.jpg&quot;&gt;&lt;img class=&quot;aligncenter size-full wp-image-204&quot; title=&quot;5&quot; src=&quot;http://img.ucdchina.com/upload/snap/2011-05/a9cfcee0485449ab23f10b861c887350.jpeg&quot; alt=&quot;&quot; width=&quot;539&quot; height=&quot;194&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p style=&quot;TEXT-ALIGN: center&quot;&gt;&lt;span style=&quot;COLOR: #0000ff&quot;&gt;CNN资讯标题上面并没有面包屑，而是将twitter和share等分享占据&amp;ldquo;有利位置&amp;rdquo;(2011年5月5日抓图)&lt;/span&gt;&lt;/p&gt;
 
&lt;h4&gt;2 面包屑的设计规范&lt;/h4&gt;
 
&lt;p&gt;(1)面包屑的样式&lt;/p&gt;
 
&lt;p&gt;最常采用的面包屑的样式：横向的文字链接，由大于号&amp;ldquo;&amp;gt;&amp;rdquo;分开&lt;sup&gt;[4]&lt;/sup&gt;。这个符号也暗示了它们之间的层次关系。根据你的用户的认知及专业水平，在有必要的情况下，可以在面包屑父子级之间增加&amp;ldquo;下划线&amp;rdquo;以告诉用户&amp;ldquo;这里是可以点击的&amp;rdquo;。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;&lt;a href=&quot;http://www.ixuqiu.com/wordpress/wp-content/uploads/2011/05/6.jpg&quot;&gt;&lt;img class=&quot;aligncenter size-full wp-image-205&quot; title=&quot;6&quot; src=&quot;http://img.ucdchina.com/upload/snap/2011-05/5bb141b631433b04f9f103904cf9c131.jpeg&quot; alt=&quot;&quot; width=&quot;433&quot; height=&quot;137&quot; /&gt;&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;
 
&lt;p style=&quot;TEXT-ALIGN: center&quot;&gt;&lt;span style=&quot;COLOR: #0000ff&quot;&gt;新浪网面包屑导航的下划线植入产品VI，可以称得上一举两得的设计。&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;当然，网页设计师为了更好地在这个区域施展他们的才华，设计成下面的方式也未尝不可，但是建议网站加载速度慢的产品经理们要将这个意见及时汇报给相应设计人员，毕竟面包屑在第一页就加载了。&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://www.ixuqiu.com/wordpress/wp-content/uploads/2011/05/7.jpg&quot;&gt;&lt;img class=&quot;aligncenter size-full wp-image-207&quot; title=&quot;7&quot; src=&quot;http://img.ucdchina.com/upload/snap/2011-05/fbbe1f6f890c9285da21c97ad571ced9.jpeg&quot; alt=&quot;&quot; width=&quot;240&quot; height=&quot;95&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p style=&quot;TEXT-ALIGN: center&quot;&gt;&lt;span style=&quot;COLOR: #0000ff&quot;&gt;由&amp;ldquo;&amp;gt;&amp;rdquo;延伸出来的设计样式&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://www.ixuqiu.com/wordpress/wp-content/uploads/2011/05/8.jpg&quot;&gt;&lt;img class=&quot;aligncenter size-full wp-image-208&quot; title=&quot;8&quot; src=&quot;http://img.ucdchina.com/upload/snap/2011-05/790f806da697d83ff065d38157a06f66.jpeg&quot; alt=&quot;&quot; width=&quot;488&quot; height=&quot;161&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p style=&quot;TEXT-ALIGN: center&quot;&gt;&lt;span style=&quot;COLOR: #0000ff&quot;&gt;苹果专卖店截图&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;(2)面包屑的位置&lt;/p&gt;
 
&lt;p&gt;通常出现在页面的左上或者右上部分，而且主要是在导航下面或内容区的上面。&lt;/p&gt;
 
&lt;p&gt;(3)面包屑大小&lt;/p&gt;
 
&lt;p&gt;面包屑是一种辅助导航，在页面中不应该起支配作用。面包屑和主导航相比至少要比较小、或不太突出。在确定面包屑大小的时候，一个较很好的方法是，当访问这个页面的时候，它不应该是页面中最醒目的元素。如果第一眼就注意到了面包屑，可能这个设计师做得有点失败。&lt;/p&gt;
 
&lt;p&gt;到这里面包屑基本告一段落了，但是如果你是一个严谨产品经理的话，你会有四个疑问在脑海出闪现：1.点击导航后是&amp;ldquo;跳转&amp;rdquo;页面，还是当前页面替换？2.面包屑导航的第一队列是网站首页，还是该产品线首页？3.面包屑导航要控制在多少个级别为佳？4.面包屑是终止于当前页面，还是上一级别？&lt;/p&gt;
 
&lt;div&gt;
&lt;p&gt;首先我不是这个行业的权威，仅代表我个人的观点。第一个问题的答案应该是：面包屑区域是直接跳转进入要访问的页面。因为他选择面包屑进行导航，已从另一角度告诉你他正在执行的操作是：&amp;ldquo;返回&amp;rdquo;、&amp;ldquo;离开&amp;rdquo;的含义，类似于网站逃生舱功能。第二个问题要看你当前页面的header区域是否有一级导航方案了，如果有的话，这个地方再有首页也是一个摆设，并且过多地展示首页也无多大意义，因为人们都了解&amp;ldquo;www&amp;rdquo;去的就是你的首页。如果在第一梯队增加返回&amp;ldquo;首页&amp;rdquo;的导航，势必会造成你的面包屑深度过大，这也到了第三个问题&amp;ldquo;面包屑导航要控制在多少个级别为佳&amp;rdquo;，面包屑导航不要超过4级，3级为佳，如果需要割舍的话，尽量割舍列表页，保留频道页。第4个问题的答案是：如果你的导航没有超过4级的情况下，建议添加一个&amp;ldquo;正文&amp;rdquo;、&amp;ldquo;详细&amp;rdquo;做为面包屑导航的完美收工。(作者：远航1860)&lt;/p&gt;
 
&lt;p&gt;来源：以用户为中心的产品设计&amp;nbsp;http://www.ixuqiu.com&lt;/p&gt;
 
&lt;p&gt;&amp;mdash;&amp;mdash;&amp;mdash;&amp;mdash;&amp;mdash;&amp;mdash;&amp;mdash;&amp;mdash;&amp;mdash;&amp;mdash;&amp;mdash;&amp;mdash;&amp;mdash;&amp;mdash;&amp;mdash;&amp;mdash;&amp;mdash;&amp;mdash;&amp;mdash;&amp;mdash;&amp;mdash;&amp;mdash;&amp;mdash;&amp;mdash;&amp;mdash;&amp;mdash;&amp;mdash;&amp;mdash;&amp;mdash;&amp;mdash;-&lt;/p&gt;
 
&lt;p&gt;文中注释&lt;/p&gt;
&lt;/div&gt;
 
&lt;p&gt;1为什么成为二级导航方案？因为产品线首页不需要导航。例如：首页、资讯首页。&lt;/p&gt;
 
&lt;p&gt;2汉赛尔与格莱特两个人名来自童话小说《格林童话》&lt;/p&gt;
 
&lt;p&gt;3 一级导航方案在logo、header及 &amp;ldquo;逃生舱&amp;rdquo;区域会涉及。&lt;/p&gt;
 
&lt;p&gt;4这个符号也暗示了它们的层级关系。&lt;/p&gt;
 
&lt;p&gt;5面包屑只是一个允许用户定位所处位置的辅助导航方案。&lt;/p&gt;
 
&lt;p&gt;参考文献&lt;br /&gt;《Breadcrumbs In Web Design: Examples And Best Practices》&lt;br /&gt;&lt;a href=&quot;http://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/&quot;&gt;&lt;span style=&quot;color: #0ab2e6;&quot;&gt;http://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;p align=&quot;right&quot;&gt;&lt;a class=&quot;gotop&quot; title=&quot;Back Top&quot; onclick=&quot;istoJS.goTop();return false;&quot; href=&quot;http://ucdchina.com/&quot;&gt;Back Top&lt;/a&gt;&lt;/p&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/103&quot; target=&quot;_blank&quot;&gt;面包屑(Breadcrumb)&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://www.ixuqiu.com/blog/194&quot; target=&quot;_blank&quot;&gt;http://www.ixuqiu.com/blog/194&lt;/a&gt;&lt;/p&gt;</description>
				<author>远航1860</author>
				<pubDate>2011-05-06 15:51:35</pubDate>
			</item>			<item>
				<title>【读书分享】 Web导航设计—面包屑</title>
				<link>http://ucdchina.com/snap/7087</link>
				<description>&lt;p&gt;&lt;strong&gt;先谈一下面包屑的由来：&lt;/strong&gt;&lt;br /&gt; &amp;nbsp;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 很久很久以前，在大森林的边上住着一个贫穷的樵夫，他妻子和两个孩子与他相依为命。他的儿子名叫汉赛尔，女儿名叫格莱特。后来樵夫的妻子去世了，他又给孩子们娶了一个后母。后母计划把两个孩子带到森林的深处，然后趁他们睡着的时候跑掉。汉赛尔无意中知道了后母的计划，于是偷偷地把一块面包藏在了口袋里。&lt;br /&gt; &amp;nbsp;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: #ff00ff;&quot;&gt;在去森林的路上，汉赛尔悄悄地捏碎了他的面包，并不时地停下脚步，把碎面包屑撒在路上。后母顺利地趁孩子们睡着的时候溜掉了，汉赛尔和格莱特醒来已是一片漆黑。汉赛尔安慰他的妹妹说：&amp;ldquo;等月亮一出来，我们就看得见我撒在地上的面包屑了，它一定会指给我们回家的路。&amp;rdquo;但是当月亮升起来时，他们在地上却怎么也找不到一点面包屑了，原来它们都被那些在树林里、田野上飞来飞去的鸟儿一点点地啄食了。&lt;br /&gt; &lt;/span&gt;&amp;nbsp;&lt;br /&gt; 这是《格林童话》中所描述的与面包屑有关的故事。不知道从哪一天开始，汉赛尔的面包屑开始悄悄地出现在某个网站的导航位置上，然后迅速地撒遍了全世界，变成了今天大家所熟知的&amp;ldquo;面包屑导航&amp;rdquo;。&lt;br /&gt; &amp;nbsp;&lt;br /&gt; &lt;strong&gt;再了解一下面包屑导航的定义：&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;维基百科上关于面包屑的定义，把Websites那部分解释一下就是这样：&lt;br /&gt; &amp;nbsp;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 面包屑通常水平地出现在页面顶部，一般会位于标题或页头的下方。它们提供给用户返回之前任何一个页面的链接（这些链接也是能到达当前页面的路径），在层级架构中通常是这个页面的父级页面。&lt;br /&gt; &amp;nbsp;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 面包屑提供给用户回溯到网站首页或入口页面的一条快速路径，它们绝大部分看起来就像这样：首页&amp;rarr;分类页&amp;rarr;次级分类页&lt;br /&gt; &amp;nbsp;&lt;br /&gt; 以下是英文摘录：&lt;br /&gt; Breadcrumbs typically appear horizontally across the top of a webpage, usually below any title bars or headers. They provide links back to each previous page that the user navigated through in order to get to the current page, for hierarchical structures usually the parent pages of the current one. Breadcrumbs provide a trail for the user to follow back to the starting/entry point of a website. They may look something like this:&lt;br /&gt; Home page &amp;rarr; Section page &amp;rarr; Subsection page&lt;br /&gt; &amp;nbsp;&lt;br /&gt; &lt;strong&gt;其次说说面包屑的作用：&lt;/strong&gt;&lt;br /&gt; &amp;nbsp;&lt;br /&gt; 一是：提供了多路径的交互方式，方便用户跳转到其它页面；&lt;/p&gt;
 
&lt;p&gt;二是：从一个侧面展示了该信息集合的信息结构和集合方式。&lt;/p&gt;
 
&lt;p&gt;三是：&amp;ldquo;面包屑&amp;rdquo;信息结构对于网站的SEO也有着大的好处，它可以更多的强调网站关键字，扩大关键字的范围，优化网站的SEO。&lt;/p&gt;
 
&lt;p&gt;&amp;nbsp;&lt;br /&gt; &lt;strong&gt;面包屑包含三种：&lt;br /&gt; &lt;/strong&gt;&amp;nbsp;&lt;br /&gt; &lt;strong&gt;1、&amp;nbsp; 定位面包屑路径&lt;br /&gt; &lt;/strong&gt;&amp;nbsp;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 面包屑路径中最常见的一种。当前页面路径在商城有唯一的位置。&lt;br /&gt; &amp;nbsp;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 基于位置(Location-based)的面包屑向用户显示他们在网站的哪一个级别页面。它们一般典型的用于有多个级别（一般是多于两级）的导航方案。在下面的例子中(来自于SitePoint)，每一个页面的文本链接表示它比它右边的文本链接高一级。&lt;br /&gt; &amp;nbsp;&lt;br /&gt; 举例(来自蓝色理想论坛)：&lt;a href=&quot;http://www.sitepoint.com/article/introducing-joomla/&quot; target=&quot;_blank&quot;&gt;http://www.sitepoint.com/article/introducing-joomla/&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/4b4776d59c6123ef24e809b0f4f3e45d.jpeg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
 
&lt;div&gt;&amp;nbsp;&amp;nbsp;A&amp;nbsp; 表明当前在网站内的位置。&lt;/div&gt;
 
&lt;p&gt;&amp;nbsp;B&amp;nbsp; 提供指向先前访问过的页面（或网站）和其他区域的捷径。&lt;/p&gt;
 
&lt;p&gt;本质上，它是网站结构的线性表示。Web上的定位面包屑路径所展示的不是导航的历史，而是在整个网站中某个固定的位置。就是说，不管用户是如何到达location 页面，面包屑路径都是一样的。&lt;br /&gt; &amp;nbsp;&lt;br /&gt; &amp;nbsp;&lt;br /&gt; &lt;strong&gt;2、&amp;nbsp;&amp;nbsp; 路线面包屑路径&lt;br /&gt; &lt;/strong&gt;&amp;nbsp;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 路线面包屑是动态的。当前页面路径是根据用户的点击产生的。&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 根据到达方式的不同，特定页面上的面包屑路径也不同。基于路径(Path-based)的面包屑路径显示用户到达特定页面的操作步骤，它们显示用户在到达当前页面之前访问过的页面。&lt;br /&gt; &amp;nbsp;&lt;br /&gt; 举例：&lt;a href=&quot;http://www.epicurious.com/&quot; target=&quot;_blank&quot;&gt;http://www.epicurious.com/&lt;/a&gt;旧版&amp;nbsp; qzone旧版路径&lt;br /&gt; &amp;nbsp;&lt;br /&gt; &amp;nbsp;&lt;br /&gt; &lt;strong&gt;3、&amp;nbsp; 属性面包屑路径&lt;/strong&gt;&lt;br /&gt; &amp;nbsp;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 当前页面可以通过N条路径找到。&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 属性面包屑是描述一个页面的方式，不是它在网站中的位置，也不是访问的路径，而是它在某种元数据方案中的位置，这种方案往往是主题层级的。&lt;br /&gt; 基于特性(Attribute-based)的面包屑路径显示一个特定页面的特性。&lt;br /&gt; &amp;nbsp;&lt;br /&gt; 举例：&lt;br /&gt; A、在Newegg，面包屑路径表示在一个特定页面显示的特性内容。&lt;br /&gt; 这个页面显示所有拥有由Lian Li制造并有MicroATX微塔式因素的电脑机箱。&lt;/p&gt;
 
&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/af739e37b2ab67b8d3ba1d395f3d7374.jpeg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
 
&lt;p&gt;B、amazon ，面包屑表达的是物品所属类别，并允许点击类别名称访问上级的类别。整条路径提供了最低一级的页面。也就是说提供了多条通往结点页面的情况。&lt;/p&gt;
 
&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/7ea1fd5afed2b970beb1b77f00e12b58.jpeg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/103&quot; target=&quot;_blank&quot;&gt;面包屑(Breadcrumb)&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://isd.tencent.com/?p=2101&quot; target=&quot;_blank&quot;&gt;http://isd.tencent.com/?p=2101&lt;/a&gt;&lt;/p&gt;</description>
				<author>西贝</author>
				<pubDate>2010-06-21 21:34:46</pubDate>
			</item>			<item>
				<title>面包屑设计</title>
				<link>http://ucdchina.com/snap/4041</link>
				<description>&lt;p&gt;&lt;strong&gt;What? 什么是面包屑&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;面包屑是作为辅助和补充的导航方式（secondary navigation scheme），它能让用户知道在网站或应用中所处的位置并能方便地回到原先的地点。 最常见的面包屑的样式是：横向的文字链接，由大于号&amp;ldquo;&amp;gt;&amp;rdquo;分开，这个符号也暗示了它们的层级关系。&lt;/p&gt;
 
&lt;p&gt;【&amp;nbsp;面包屑的分类】&lt;/p&gt;
 
&lt;p&gt;1.基于用户所在的层级位置。（Location-based）&lt;br /&gt; 基于位置的面包屑用于告知用户在当前网站中所在的结构层级。用在具有多级导航（通常具有2级以上导航）的网站中。&lt;/p&gt;
 
&lt;p&gt;&lt;img title=&quot;面包屑设计&quot; src=&quot;http://img.ucdchina.com/upload/snap/2009-07/492ef5bddfe2251003c7a7df9826bd64.jpeg&quot; alt=&quot;面包屑设计&quot; width=&quot;500&quot; height=&quot;27&quot; /&gt;&lt;/p&gt;
 
&lt;p&gt;2.基于产品的属性。(Attribute-based)&lt;br /&gt; 这种类型的面包屑常出现在具有大量类别产品和服务的网站中，如电子商务网站，网上教学服务等。&lt;/p&gt;
 
&lt;p&gt;&lt;img title=&quot;面包屑设计&quot; src=&quot;http://img.ucdchina.com/upload/snap/2009-07/4b4c6ff0d90b77b3140d5e25bc843e41.jpeg&quot; alt=&quot;面包屑设计&quot; width=&quot;500&quot; height=&quot;80&quot; /&gt;&lt;/p&gt;
 
&lt;p&gt;3.基于用户的足迹。(Path-based)&lt;br /&gt; 显示用户浏览的轨迹，面包屑之间没有明显的层级关系。&lt;/p&gt;
 
&lt;p&gt;&lt;span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;Why? 为什么使用面包屑（面包屑的好处）&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;1.面包屑作为用户寻找路径的一种辅助手段，能方便他们定位和导航。&lt;br /&gt; 2.面包屑可以减少的用户返回上一级页面的所需的操作次数。&lt;br /&gt; 3.临时性，动态性，占用屏幕空间小，干扰性小。&lt;br /&gt; 4.降低网站访问者的总体跳出率。（当用户从别处链接到网页，或者从搜索引擎查找到网页，则面包屑的存在能帮助用户快速了解当前的层级位置，并引导用户查看网站的其余部分。减少了看完直接跳走的用户数量。）&lt;/p&gt;
 
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;When? 何时使用面包屑&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;1. 存在大量的分级内容的网站中。&lt;br /&gt; 大型的电子商务网站是典型的例子，里面有大量的产品分别归属于不同的大类别及细分类别。&lt;/p&gt;
 
&lt;p&gt;&lt;img title=&quot;面包屑设计&quot; src=&quot;http://img.ucdchina.com/upload/snap/2009-07/40a361c68af957ec44ad184806ea359a.jpeg&quot; alt=&quot;面包屑设计&quot; width=&quot;500&quot; height=&quot;61&quot; /&gt;&lt;/p&gt;
 
&lt;p&gt;2. 在一些引导性的网络应用或者软件安装进程中，面包屑也常被用来指示当前以及剩余的操作步骤。类似于进程条的变种。&lt;/p&gt;
 
&lt;p&gt;3. 层次简单的页面中一般不使用面包屑，但是当面包屑能显著帮助到浏览并提高他们定位能力时，也建议采用面包屑。&lt;br /&gt; 相册浏览就是一个典型的例子，结构层次并不复杂，但用户在特定几个页面之间跳转的频率会比较高（如相册首页，相片缩略图页，相片浏览页等），所以面包屑的存在对提高此处的浏览效率是很有帮助的。&lt;/p&gt;
 
&lt;p&gt;&lt;img title=&quot;面包屑设计&quot; src=&quot;http://img.ucdchina.com/upload/snap/2009-07/da1d22dad541a8e7a1c22818e3692732.jpeg&quot; alt=&quot;面包屑设计&quot; width=&quot;500&quot; height=&quot;71&quot; /&gt;&lt;/p&gt;
 
&lt;p&gt;注意点：面包屑不能替代有效的主导航，它是一个辅助功能；一个允许用户定位他们在哪里的辅助导航方案。&lt;/p&gt;
 
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;How? 如何设计面包屑&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;【面包屑连接符的主要样式】&lt;/p&gt;
 
&lt;p&gt;&lt;img title=&quot;面包屑设计&quot; src=&quot;http://img.ucdchina.com/upload/snap/2009-07/f8218a4e631de75f71304ea38ac35bb8.jpeg&quot; alt=&quot;面包屑设计&quot; width=&quot;700&quot; height=&quot;507&quot; /&gt;&lt;/p&gt;
 
&lt;p&gt;综合评估以上样式，并考虑到面包屑的包含关系和指示性，建议使用以下两种连接符：&lt;/p&gt;
 
&lt;p&gt;&lt;img title=&quot;面包屑设计&quot; src=&quot;http://img.ucdchina.com/upload/snap/2009-07/204142756414d79a52fd7992aa0ade78.jpeg&quot; alt=&quot;面包屑设计&quot; width=&quot;406&quot; height=&quot;33&quot; /&gt;&lt;/p&gt;
 
&lt;p&gt;【面包屑的位置】&lt;/p&gt;
 
&lt;p&gt;通常出现在页面的左上或者右上部分，而且主要是在导航下面或者内容区的上面。&lt;/p&gt;
 
&lt;p&gt;【面包屑的大小】&lt;/p&gt;
 
&lt;p&gt;面包屑是一种辅助导航，在页面中不应该起支配作用。面包屑和主导航相比至少要比较小、或不太突出。在确定面包屑大小的时候，一个较很好的方法是，当访问这个页面的时候，它不应该是页面中最醒目的元素。如果第一眼就注意到了面包屑，可能就需要再弱化一点。&lt;/p&gt;
 
&lt;p&gt;&lt;img title=&quot;面包屑设计&quot; src=&quot;http://img.ucdchina.com/upload/snap/2009-07/cf4b0bfd09a88f334ad1defc563a9b8b.jpeg&quot; alt=&quot;面包屑设计&quot; width=&quot;500&quot; height=&quot;93&quot; /&gt;&lt;/p&gt;
 
&lt;p&gt;上图中的面包屑过于醒目，干扰到了主导航，甚至喧宾夺主。&lt;/p&gt;
 
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;Extension 面包屑设计扩展&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;【带下拉列表的面包屑】&lt;/p&gt;
 
&lt;p&gt;香港雅虎，淘宝网等网站的面包屑中有下拉列表，可以方便用户快速跳转到同类或其他类别的新闻和产品。&lt;/p&gt;
 
&lt;p&gt;&lt;img title=&quot;面包屑设计&quot; src=&quot;http://img.ucdchina.com/upload/snap/2009-07/270f973d89df2074383f9bfc8c61e94b.jpeg&quot; alt=&quot;面包屑设计&quot; width=&quot;500&quot; height=&quot;302&quot; /&gt;&lt;/p&gt;
 
&lt;p&gt;【交互式面包屑】&lt;/p&gt;
 
&lt;p&gt;Delicious中的tag分组已面包屑的形式出现在网页头部，按前文提到的面包屑分类此处属于一种&amp;ldquo;基于用户足迹&amp;rdquo;(Path-based)的面包屑。记录了用户浏览tag分组的顺序。同时这些面包屑还可以被及时&amp;ldquo;干掉&amp;rdquo;，方便了对内容的管理，真是别出心裁的设计。&lt;/p&gt;
 
&lt;p&gt;&lt;img title=&quot;面包屑设计&quot; src=&quot;http://img.ucdchina.com/upload/snap/2009-07/8708ba298e5a67efd3eafbd81a9c3761.jpeg&quot; alt=&quot;面包屑设计&quot; width=&quot;500&quot; height=&quot;154&quot; /&gt;&lt;/p&gt;
 
&lt;p&gt;【回顾总结】&lt;/p&gt;
 
&lt;p&gt;是否还记得关于面包屑的3W+H+E？&lt;/p&gt;
 
&lt;p&gt;&lt;img title=&quot;面包屑设计&quot; src=&quot;http://img.ucdchina.com/upload/snap/2009-07/d560751f6eae6b4ba3acc42a87ffc608.jpeg&quot; alt=&quot;面包屑设计&quot; width=&quot;700&quot; height=&quot;35&quot; /&gt;&lt;/p&gt;
 
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;p&gt;参考文献：&lt;br /&gt; 《Breadcrumbs In Web Design: Examples And Best Practices》&lt;br /&gt; &lt;a href=&quot;http://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/&quot; target=&quot;_blank&quot;&gt;http://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/&lt;/a&gt;&lt;/p&gt;
 
&lt;hr /&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/103&quot; target=&quot;_blank&quot;&gt;面包屑(Breadcrumb)&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://cdc.tencent.com/?p=1329&quot; target=&quot;_blank&quot;&gt;http://cdc.tencent.com/?p=1329&lt;/a&gt;&lt;/p&gt;</description>
				<author>黑白灰</author>
				<pubDate>2009-07-06 22:44:23</pubDate>
			</item>			<item>
				<title>论“面包屑”的倒掉</title>
				<link>http://ucdchina.com/snap/147</link>
				<description>&lt;div id=&quot;entry_content&quot; class=&quot;entry&quot; style=&quot;font-size: 13px;&quot;&gt;
&lt;p&gt;很久很久以前，在大森林的边上住着一个贫穷的樵夫，他妻子和两个孩子与他相依为命。他的儿子名叫汉赛尔，女儿名叫格莱特。后来樵夫的妻子去世了，他又给孩子们娶了一个后母。后母计划把两个孩子带到森林的深处，然后趁他们睡着的时候跑掉。汉赛尔无意中知道了后母的计划，于是偷偷地把一块面包藏在了口袋里。在去森林的路上，汉赛尔悄悄地捏碎了他的面包，并不时地停下脚步，把碎面包屑撒在路上。后母顺利地趁孩子们睡着的时候溜掉了，汉赛尔和格莱特醒来已是一片漆黑。汉赛尔安慰他的妹妹说：&amp;ldquo;等月亮一出来，我们就看得见我撒在地上的面包屑了，它一定会指给我们回家的路。&amp;rdquo;但是当月亮升起来时，他们在地上却怎么也找不到一点面包屑了，原来它们都被那些在树林里、田野上飞来飞去的鸟儿一点点地啄食了。&lt;/p&gt;
&lt;p&gt;这是《格林童话》中所描述的与面包屑有关的故事。不知道从哪一天开始，汉赛尔的面包屑开始悄悄地出现在某个网站的导航位置上，然后迅速地撒遍了全世界，变成了今天大家所熟知的&amp;ldquo;面包屑导航&amp;rdquo;。&lt;/p&gt;
&lt;p&gt;在童话里，面包屑是汉赛尔在进入森林的路中偷偷撒下的，这是一种&amp;ldquo;历史记录&amp;rdquo;的应用方式，目的是帮助你追溯来路，因而它应该是一种线性的导航方式。不过在网页的应用中，&amp;ldquo;追溯来路&amp;rdquo;这件事浏览器已经做得足够好了，所以&amp;ldquo;面包屑&amp;rdquo;慢慢地就变成用来表达内容归属关系的界面元素，也就是我们经常看到的&amp;ldquo;主分类&amp;gt;一级分类&amp;gt;二级分类&amp;gt;三级分类&amp;gt;&amp;hellip;&amp;hellip;&amp;gt;最终内容页面&amp;rdquo;这样的东东。&lt;/p&gt;
&lt;p&gt;那么这种元素还具有导航作用吗？如果用于导航，它有什么问题吗？为什么我觉得它应该&amp;ldquo;倒(dǎo)掉&amp;rdquo;呢？&lt;/p&gt;
&lt;p&gt;再回头看看所谓面包屑的来历和它采用的形式吧，它是汉赛尔沿路撒下的一个个&amp;ldquo;点&amp;rdquo;，然后连成的&amp;ldquo;线&amp;rdquo;，这在信息架构中称为&amp;ldquo;线性结构&amp;rdquo;。一对比就知道，撒到网站上的面包屑是有先天缺陷的，这个先天缺陷正是这个&amp;ldquo;线性&amp;rdquo;。用&amp;ldquo;线性&amp;rdquo;的方式去表达本应该是&amp;ldquo;树形&amp;rdquo;甚至是&amp;ldquo;矩阵形&amp;rdquo;的结构，就好像让三岁的小朋友做诗写文章一样，结果不是把小朋友逼疯就是把家长急疯。&lt;/p&gt;
&lt;p&gt;可能有人会说，面包屑不仅仅是用来表示信息的层级关系，它还能给用户位置的指示，同时引导用户点击更高层次的页面。如果你这么说，那么恭喜你，你和可用性之父Jakob Nielson想得差不多（&lt;a href=&quot;http://www.useit.com/alertbox/breadcrumbs.html&quot; target=&quot;_blank&quot;&gt;Breadcrumb Navigation Increasingly Useful&lt;/a&gt;）。在这篇文章里，Jakob认为面包屑还有点作用的主要原因，是因为它是一件做起来不太费力、占用面积很小、没有什么学习成本的事情。&lt;/p&gt;
&lt;p&gt;但是所有的这些，都是建立在信息架构足够清晰、足够稳固同时又足够灵活的基础之上的。&lt;/p&gt;
&lt;p&gt;如果网站信息太丰富、太复杂，有些内容不能明确划分到某个类别中，面包屑就会变成鸡肋。这方面的典型就是门户网站，比如说这个： &lt;a href=&quot;http://eladies.sina.com.cn/bn/z/fdmn/video/index.shtml&quot; target=&quot;_blank&quot;&gt;娱乐圈10大发嗲美女&lt;/a&gt; ，很明显就是为了面包屑而面包屑。&lt;/p&gt;
&lt;p&gt;如果你的网站信息内容属性不明确，大部分信息都同时属于多个类别，面包屑就会变成一个涉及到复杂判断和算法的技术问题。这种情况的代表就是电子商务、社区类网站（没找到例子，因为要实现太难了）。&lt;/p&gt;
&lt;p&gt;如果你的网站结构够清晰，内容也够稳定，那么极有可能是企业或个人网站（比如UCDChina或你自己的博客）。而这样一个网站，不管规模大小，用主导航就能解决位置感的问题，也没有必要单独留出一行来放置面包屑。这方面做得比较好的例子是微软和苹果（这么大的公司都放弃面包屑了，还不能说明问题吗？），反面例子就可以看看这个：&lt;a href=&quot;http://www.ibm.com/support/documentation/us/en/&quot; target=&quot;_blank&quot;&gt; IBM Support &amp;amp; downloads - Documentation - United States &lt;/a&gt;，面包屑没有帮助我找到想找的东西，反而让我更糊涂了。&lt;/p&gt;
&lt;p&gt;不过，关于&amp;ldquo;打倒面包屑&amp;rdquo;这件事仍然有一个前提，那就是你的主导航要做得足够好。之前提到的IBM网站，最大的问题就是没有在主导航上标明当前位置（技术问题？设计问题？）。由于这个原因，不得不增加面包屑来表示层级关系。在面包屑的先天缺陷和主导航设计缺失的双重努力下，用户点击&amp;ldquo;Support &amp;amp; downloads&amp;rdquo;以后迅速丢失了上一个页面&amp;ldquo;Documentation&amp;rdquo;的位置（不信你在 &lt;a href=&quot;http://www.ibm.com/support/us/en/&quot; target=&quot;_blank&quot;&gt;这个页面上&lt;/a&gt; 试一下回去的难度）。在这个例子中，面包屑还不如URL本身来得清楚。&lt;/p&gt;
&lt;p&gt;反过来再想，我们其实可以有这样一个大胆的推论：凡是出现面包屑的网站，基本上都是导航系统设计得比较差劲的。&lt;/p&gt;
&lt;p&gt;一直我们都认为，改进措施&amp;ne;做加法，设计是&amp;ldquo;越减越妙&amp;rdquo;的，面包屑就是应该第一个从导航设计中减掉的元素。我相信，随着技术的发展、信息架构和用户需求的多样化，面包屑最终会悄悄地退出历史舞台。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;一些补充说明：&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;写本文的时候我偷了一下懒，结果完全没有预料到一个已经逐渐淡出视线的页面元素还会引起这么大的反应。可能我们需要首先定义一下什么是面包屑。&lt;/p&gt;
&lt;p&gt;今天搜到&lt;a href=&quot;http://en.wikipedia.org/wiki/Breadcrumb_%28navigation%29&quot; target=&quot;_blank&quot;&gt;维基百科上关于面包屑的定义&lt;/a&gt;，把Websites那部分解释一下就是这样：&lt;/p&gt;
&lt;p&gt;面包屑通常水平地出现在页面顶部，一般会位于标题或页头的下方。它们提供给用户返回之前任何一个页面的链接（这些链接也是能到达当前页面的路径），在层级架构中通常是这个页面的父级页面。面包屑提供给用户回溯到网站首页或入口页面的一条快速路径，它们绝大部分看起来就像这样：首页&amp;rarr;分类页&amp;rarr;次级分类页&lt;/p&gt;
&lt;p&gt;以下是英文摘录：&lt;br /&gt;Breadcrumbs typically appear horizontally across the top of a webpage, usually below any title bars or headers. They provide links back to each previous page that the user navigated through in order to get to the current page, for hierarchical structures usually the parent pages of the current one. Breadcrumbs provide a trail for the user to follow back to the starting/entry point of a website. They may look something like this:&lt;br /&gt;Home page &amp;rarr; Section page &amp;rarr; Subsection page&lt;/p&gt;
&lt;p&gt;首先我很抱歉，没有把这个概念说清楚，另外也佩服一下写维基百科的这些人，这组定义可谓滴水不漏。&lt;/p&gt;
&lt;p&gt;另外再请大家注意一下该页面下方关于面包屑的Usability的说明：&lt;/p&gt;
&lt;p&gt;一些专家不认同&amp;ldquo;路径型&amp;rdquo;的面包屑（以尼尔森为代表），因为它和浏览器的&amp;ldquo;后退&amp;rdquo;功能重复。&lt;br /&gt;Some commentators disallow Path-style breadcrumbs because they duplicate functionality that properly subsists in the browser; namely, the &amp;lsquo;Back&amp;rsquo; button and browsing history.&lt;/p&gt;
&lt;p&gt;&amp;ldquo;位置型&amp;rdquo;的面包屑不适用于内容过于丰富、单个分类无法完整描述单元内容的网站。这在拥有强大的&amp;ldquo;搜索导航&amp;rdquo;网站上是常见的情况（比如Amazon）。&lt;br /&gt;Location breadcrumbs are not necessarily appropriate for sites whose content is so rich that single categories do not fully describe a particular piece of content. This is a common situation in sites employing a search-base navigation paradigm (for example, Amazon). In general, wherever a strict hierarchy is not applicable, Location breadcrumbs are inappropriate.&lt;/p&gt;
&lt;p&gt;另外还有一个&lt;a href=&quot;http://psychology.wichita.edu/surl/usabilitynews/52/breadcrumb.htm&quot; target=&quot;_blank&quot;&gt;关于面包屑使用情况的调查报告&lt;/a&gt;，发布时间是2003年。&lt;/p&gt;
&lt;p&gt;当然，面包屑并不是一无是处： It&amp;rsquo;s good for SEO, since it&amp;rsquo;s provided links to other parts of the website。这就是为什么我搜索到与面包屑有关的中文网站基本上是讨论SEO的原因。&lt;/p&gt;
&lt;p&gt;以上资料仅供大家参考，我只提醒两点：&lt;br /&gt;1. 你在设计网站导航的时候，面包屑是经过论证才设计还是临时出于需要加上的？&lt;br /&gt;2. 你或者你的同僚们期望增加面包屑的情况是越来越多还是越来越少？&lt;/p&gt;
&lt;/div&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/103&quot; target=&quot;_blank&quot;&gt;面包屑(Breadcrumb)&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://ucdchina.com/blog/?p=385&quot; target=&quot;_blank&quot;&gt;http://ucdchina.com/blog/?p=385&lt;/a&gt;&lt;/p&gt;</description>
				<author>Angela</author>
				<pubDate>2008-07-27 16:55:26</pubDate>
			</item></channel></rss>