论“面包屑”的倒掉

很久很久以前,在大森林的边上住着一个贫穷的樵夫,他妻子和两个孩子与他相依为命。他的儿子名叫汉赛尔,女儿名叫格莱特。后来樵夫的妻子去世了,他又给孩子们娶了一个后母。后母计划把两个孩子带到森林的深处,然后趁他们睡着的时候跑掉。汉赛尔无意中知道了后母的计划,于是偷偷地把一块面包藏在了口袋里。在去森林的路上,汉赛尔悄悄地捏碎了他的面包,并不时地停下脚步,把碎面包屑撒在路上。后母顺利地趁孩子们睡着的时候溜掉了,汉赛尔和格莱特醒来已是一片漆黑。汉赛尔安慰他的妹妹说:“等月亮一出来,我们就看得见我撒在地上的面包屑了,它一定会指给我们回家的路。”但是当月亮升起来时,他们在地上却怎么也找不到一点面包屑了,原来它们都被那些在树林里、田野上飞来飞去的鸟儿一点点地啄食了。

这是《格林童话》中所描述的与面包屑有关的故事。不知道从哪一天开始,汉赛尔的面包屑开始悄悄地出现在某个网站的导航位置上,然后迅速地撒遍了全世界,变成了今天大家所熟知的“面包屑导航”。

在童话里,面包屑是汉赛尔在进入森林的路中偷偷撒下的,这是一种“历史记录”的应用方式,目的是帮助你追溯来路,因而它应该是一种线性的导航方式。不过在网页的应用中,“追溯来路”这件事浏览器已经做得足够好了,所以“面包屑”慢慢地就变成用来表达内容归属关系的界面元素,也就是我们经常看到的“主分类>一级分类>二级分类>三级分类>……>最终内容页面”这样的东东。

那么这种元素还具有导航作用吗?如果用于导航,它有什么问题吗?为什么我觉得它应该“倒(dǎo)掉”呢?

再回头看看所谓面包屑的来历和它采用的形式吧,它是汉赛尔沿路撒下的一个个“点”,然后连成的“线”,这在信息架构中称为“线性结构”。一对比就知道,撒到网站上的面包屑是有先天缺陷的,这个先天缺陷正是这个“线性”。用“线性”的方式去表达本应该是“树形”甚至是“矩阵形”的结构,就好像让三岁的小朋友做诗写文章一样,结果不是把小朋友逼疯就是把家长急疯。

可能有人会说,面包屑不仅仅是用来表示信息的层级关系,它还能给用户位置的指示,同时引导用户点击更高层次的页面。如果你这么说,那么恭喜你,你和可用性之父Jakob Nielson想得差不多(Breadcrumb Navigation Increasingly Useful)。在这篇文章里,Jakob认为面包屑还有点作用的主要原因,是因为它是一件做起来不太费力、占用面积很小、没有什么学习成本的事情。

但是所有的这些,都是建立在信息架构足够清晰、足够稳固同时又足够灵活的基础之上的。

如果网站信息太丰富、太复杂,有些内容不能明确划分到某个类别中,面包屑就会变成鸡肋。这方面的典型就是门户网站,比如说这个: 娱乐圈10大发嗲美女 ,很明显就是为了面包屑而面包屑。

如果你的网站信息内容属性不明确,大部分信息都同时属于多个类别,面包屑就会变成一个涉及到复杂判断和算法的技术问题。这种情况的代表就是电子商务、社区类网站(没找到例子,因为要实现太难了)。

如果你的网站结构够清晰,内容也够稳定,那么极有可能是企业或个人网站(比如UCDChina或你自己的博客)。而这样一个网站,不管规模大小,用主导航就能解决位置感的问题,也没有必要单独留出一行来放置面包屑。这方面做得比较好的例子是微软和苹果(这么大的公司都放弃面包屑了,还不能说明问题吗?),反面例子就可以看看这个: IBM Support & downloads - Documentation - United States ,面包屑没有帮助我找到想找的东西,反而让我更糊涂了。

不过,关于“打倒面包屑”这件事仍然有一个前提,那就是你的主导航要做得足够好。之前提到的IBM网站,最大的问题就是没有在主导航上标明当前位置(技术问题?设计问题?)。由于这个原因,不得不增加面包屑来表示层级关系。在面包屑的先天缺陷和主导航设计缺失的双重努力下,用户点击“Support & downloads”以后迅速丢失了上一个页面“Documentation”的位置(不信你在 这个页面上 试一下回去的难度)。在这个例子中,面包屑还不如URL本身来得清楚。

反过来再想,我们其实可以有这样一个大胆的推论:凡是出现面包屑的网站,基本上都是导航系统设计得比较差劲的。

一直我们都认为,改进措施≠做加法,设计是“越减越妙”的,面包屑就是应该第一个从导航设计中减掉的元素。我相信,随着技术的发展、信息架构和用户需求的多样化,面包屑最终会悄悄地退出历史舞台。

一些补充说明:

写本文的时候我偷了一下懒,结果完全没有预料到一个已经逐渐淡出视线的页面元素还会引起这么大的反应。可能我们需要首先定义一下什么是面包屑。

今天搜到维基百科上关于面包屑的定义,把Websites那部分解释一下就是这样:

面包屑通常水平地出现在页面顶部,一般会位于标题或页头的下方。它们提供给用户返回之前任何一个页面的链接(这些链接也是能到达当前页面的路径),在层级架构中通常是这个页面的父级页面。面包屑提供给用户回溯到网站首页或入口页面的一条快速路径,它们绝大部分看起来就像这样:首页→分类页→次级分类页

以下是英文摘录:
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:
Home page → Section page → Subsection page

首先我很抱歉,没有把这个概念说清楚,另外也佩服一下写维基百科的这些人,这组定义可谓滴水不漏。

另外再请大家注意一下该页面下方关于面包屑的Usability的说明:

一些专家不认同“路径型”的面包屑(以尼尔森为代表),因为它和浏览器的“后退”功能重复。
Some commentators disallow Path-style breadcrumbs because they duplicate functionality that properly subsists in the browser; namely, the ‘Back’ button and browsing history.

“位置型”的面包屑不适用于内容过于丰富、单个分类无法完整描述单元内容的网站。这在拥有强大的“搜索导航”网站上是常见的情况(比如Amazon)。
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.

另外还有一个关于面包屑使用情况的调查报告,发布时间是2003年。

当然,面包屑并不是一无是处: It’s good for SEO, since it’s provided links to other parts of the website。这就是为什么我搜索到与面包屑有关的中文网站基本上是讨论SEO的原因。

以上资料仅供大家参考,我只提醒两点:
1. 你在设计网站导航的时候,面包屑是经过论证才设计还是临时出于需要加上的?
2. 你或者你的同僚们期望增加面包屑的情况是越来越多还是越来越少?

75 Responses to “论“面包屑”的倒掉”

  1. tony Says:

    回angela一个沙发! 

    我喜欢这样观点鲜明的文章,应该能激发大家的讨论,有些观点可能是我没有理解透,有点异议。我回头整理一下。写出来让大家笑话一下:)

    总的来说,我的观点是面包屑还是会作为一种主流应用的导航,这个问题有点像是tag好还是分类好的问题一样,都好,看怎么用!

    我先再读读千鸟的上篇文章,回来抛观点。

  2. tony Says:

    更正下,说主流好像又是另外一个极端了,Tony是想说面包屑的优点还是有很多,我赞成angela说的随着信息的多样化、需求的多元化,应该会找到更好的导航形式。

    要把讨论弄激烈点,tony就站在力挺面包屑的一方了!

  3. Angela Says:

    汗……我怎么感觉你是来找岔吵架的呢?

  4. Angela@UE » Blog Archive » UCDChina一年回顾 Says:

    […] (0712a)不得不说的网站导航:论“面包屑”的倒掉 […]

  5. OutC Says:

    昨天还在考虑给别人做站时是使用面包屑还是标签呢……今天就看到这个了。

    Angela 很靠谱。

  6. lyp Says:

    less is more

    虽然说越简单越好,但是前提是在清晰的大导航结构上. 如果某些单独页面附属,还是需要更多的指引

  7. 千鸟 Says:

    “但是所有的这些,都是建立在信息架构足够清晰、足够稳固同时又足够灵活的基础之上的。”

    做好网站架构的目的就在于此,如果这里都有问题,不管用什么导航的体验都不会太好,所以不应该把罪责完全推给面包屑。

    我对面包屑的理解是保守设计,但还不至于“存在面包屑的导航系统都比较差劲。”打个比方,在大森林里建立良好导航,能让用户随时都清楚自己的位置,你们认为这可能么?我的结论是不可能。在某个点,通过良好导航只能辐射一个区域。面包屑能解决的,是直接建立这个区域和default之间的联系。

    微软和苹果、flickr、amazon都没有面包屑,不能例证面包屑就一定有问题。这些网站的共同点,要么是架构清晰,要么是服务单一,主导航或者说其他导航能够胜任。如果网站信息太丰富太复杂,要把架构做好很困难,就如上边例子的大森林。

    对于初中级网民来说,最重要的是直观而不是逻辑。所以,我挺尼老师。

  8. Angela Says:

    Jakob的观点,面包屑是一件可以提升可用性的工具,但前提是它不会费太大力气去做。

    现在来一一分析:

    Breadcrumbs show people their current location —— 展示当前位置,这件事,主导航就可以做

    Breadcrumbs afford one-click access to higher site levels —— 快速返回上一级页面,这事主导航可以做。坏处:看看我文章中新浪的例子,快速返回上一级页面你们看到的是什么?

    Breadcrumbs never cause problems in user testing —— 用户对面包屑不会有使用上的问题
    Breadcrumbs take up very little space ——只占用少量的空间

    这两条完全是勉强凑数的理由。

    我的结论是:面包屑带来的问题大于它的好处,所以它应该倒掉。至少在中国的网站上用得很滥。

  9. Angela Says:

    千鸟断章取义了。“但是所有的这些,都是建立在信息架构足够清晰、足够稳固同时又足够灵活的基础之上的。”这句话是说,如果满足这个条件,面包屑是可以起到这个作用的。如果不满足这个条件,面包屑的唯一作用就是添乱。

  10. 奇遇 Says:

    作为导航的辅助的内容还好,当主导航看待了就会有问题。面包屑只能是不得已而为之的补充,正如博主所说,最好倒掉!

  11. Angela Says:

    lyp(不是李亚鹏吧?):“如果某些单独页面附属,还是需要更多的指引。”这取决于这个页面需要什么样的指引。比如Ami的《别忘了导航》里说的那个页面,是否需要面包屑的指引呢?如果是的话,那个页面应该属于哪个分类下呢?

  12. 奇遇 Says:

    不知怎的,我对题目的第一反应是“论雷峰塔的倒掉”,看完题目后,感觉理解成“面包屑的倒掉”也有同工异曲之妙!

  13. Angela Says:

    奇遇:聪明!这正是标题的来历。

  14. Ami Says:

    这个标题和开头很吸引人:)

    至于到底要不要面包屑,我只想说“不要太依赖面包屑”。因为面包屑很容易用来弥补导航的欠缺

    到底用不用面包屑,“It Depends”。至少在显示当前位置这一点上,我觉得面包屑还是不错的做法

  15. artec Says:

    apple有面包屑的吧

  16. xw Says:

    “面包屑”的前提是线性,或者说是按照我们规划的路线进行行走,但是对于交互性比较强的sns网站来说貌似就很难处理这个问题。因为用户在里面的路线是交叉混合的。但是当系统设计的目录层次比较深的时候“面包屑”的作用还是比较明显的。

  17. Magic Says:

    Amazon页面下方有your recent history;

    apple页面下方有导航矩阵;

    microsoft则有最原始的左上角面包屑导航。

    从哪里看出来他们放弃了?!!! 

  18. lyp Says:

    关键是导航怎么做的清晰就怎么做. 

    页面上需要的元素还是要存在,该让用户知道自己位置的信息还是要放

  19. 千鸟 Says:

    A有效果的前提是B足够好,我的意思是,如果B不够好,那么C, D, E等其他也不可能做理想。

    我有异议的关键是结论,从事物发展规律来看,方案如果会消失,前提有两个,要么不能提供有效价值,要么有致命缺陷。两个条件面包屑都不满足,因为面包屑不是极端方案,而是折中方案,效果取决于如何使用。

    在windows系统“我的电脑”里,分别有“前进、后退、上一级”,其中前两个就是线性导航(面包屑),后一个是分层导航。

    我的结论是面包屑思想永远都会在,只不过交互模式还有很大提升空间,如Magic的举例。

  20. tony Says:

    to angela:不好意思,我不是来找茬的,有冒犯请担待。

    网站实现原理其实就很面包屑,不管是线性结构,还是分层结构,拿现在这个页面来说:ucdchina.com是一级,blog是第二级,?p=385是第三级。假设拿这个看成导航的话,非常简洁,易用性也非常好,我时常有个习惯,就是拿地址栏来导航(我观察有些技术人员也有一样的行为)

    做起来不太费力、占用面积很小、没有什么学习成本的事情。这三点应该足够面包屑不会“倒掉”了。

    确实,从angela的文章中,我得到一个启发,就是国外的大站渐渐在放弃这种导航形式,为什么呢?我可能想得不是太到位,希望各位大侠能分析一下。我的观点是:信息结构的越来越趋向液态(借用下白鸦的话) 。也就是千鸟文中以及《用户体验的要素》书中说的多维形态。是信息结构层面的多元化造成这种导航退出了主流。

    但是就导航形式本身来说,我挺面包屑,很自然的一种形式。angela说国内滥用面包屑,我同意,我认为是对信息架构理解不到位。但就面包屑这种形式,在什么环境下用呢?我的想法是:

    1 线性的结构。拿分类和tag的信息组织方式来说,分类形式是一个萝卜一个坑,tag形式是一个萝卜多个坑,如果用的是分类,也就是结构比较鲜明,就有用面包屑的前提。

    2 结构上下级关系很紧密。比如说,nokia N91的一个性能介绍页面,上一级是N91的页面,再上一级是nokia的页面。

    3 平级结构之间联系不大。比如说2.2和2.3之间没有什么联系,举个例子来说,传统的BBS的结构。(其实为什么说是信息结构导致了面包屑退出,从BBS的结构和小组、贴吧可以看出来这种信息的液态化)

    4 结构的上层页面主要是地图性质且层级在四级以上。比如说淘宝(不知道淘宝是不是滥用了>_<,还是属于千鸟说的不得已而为之的行为)

    但是对于国外的大站在主要位置放弃面包屑的做法,我还不是太理解,angela能详细地说说理由不?(都怪我英语不好,看字母就脑袋晕)不过我是认为amazon是将面包屑变种了,我是这么理解了一下,也是之前我误解了面包屑的概念的原因。

  21. netfreeman Says:

    LZ只不过把面包屑整合到导航里了, 并非倒掉…

  22. 94smart Says:

    ppk做过一个基于历史记录的面包屑导航,感觉比较能解决问题。 

  23. 哉崽 Says:

    文章写得不错,观点明确,理由清晰。
    在“面包屑”的处理上,发表下我的观点:
         1.首先我作为一名普通中国网名,我喜欢面包屑。因为我已经习惯了通过面包屑来定位我的当前位置。所谓的“信息架构足够清晰、足够稳固同时又足够灵活”,我觉得不存在这个问题。应为当某一用户特定时刻访问某个页面的时候,其归属问题应该是非常清晰的。技术上有可能会涉及一些算法,但是用户关心的是有没给出正确的线性结构。即便导航已经能清楚定位,但是面包屑我觉得还是有存在的必要的,毕竟,N个网站N种样子的导航,但是面包屑是长得差不多了,面包屑在我脑子里有个通用的模型,但是导航没有。

          2.如果作为前端开发,我觉得,我有必要把概念理清楚,把现在大部分的面包屑更确切的定义成“当前位置”。而根据童话,如果技术上许可,做一个比较人性化的“面包屑追踪”来记录用户的一系列访问历史,以便随时回退,正真还原“面包屑”的含义,而非倒掉。就如,让table做他改做的事,而不是滥用成布局。

          3. 最后,至于是加法还是减法,我觉得还是看情况吧,我赞成不一定每个页面都放面包屑,但是也不能一棍子打死,毕竟清晰的导航是导航应该承担的责任,但是我们不能把去罗马的其他道路全部堵死,总有那么一部分人习惯走小路。

    个人观点,欢迎拍砖。

  24. tony Says:

    国外大站中出现的面包屑:

    1 amazon里面的面包屑 (不过确实感觉跟左边的导航重复,有点多余)

    2 flickr的撰写邮件页面也有(不过这也有点牵强)

    3 apple.com里面\msn.com上面Magic也提到了

    4 ebay就不用提了,还是作为主导航存在(看来电子商务用面包屑还是非常合适的,我上面分析那四点优势放在电子商务里面似乎合适@.@)

    5 yahoo的

    我觉得yahoo对导航的处理比较具备代表性。面包屑没有出现在news等下面,而是在问答 汽车 群组里面,虽然是一个品牌,但这似乎没有伤害用户体验,我觉得这是很能证明是信息架构对导航的需求,而不是说要让面包屑倒掉。关键看怎么用,用在什么地方。

  25. 则名 Says:

    面包屑被倒掉是肯定不会的!因为面包屑的形式和应用不会只停留在目前所流行的模式:一级>二级>…>内容

    它完全可以设计为没有任何层次关系的“纯路径”来用,即走过的路,比如iciba.com中在侧边栏会显示你所有搜索过的词汇。

    当然楼主只是把面包屑定义在现有的流行模式上那就无话可说了。

  26. XXX Says:

    楼主部分观点我还是同意的,一个已经具备了能够体现清晰架构的导航栏的网站再添加上面包屑,那真的就是画蛇添足了。而且还造成了页面访问入口的冗余。

    然而,我个人认为应当要广义地看待面包屑,可以把面包屑这种设计风格延伸到其他很多领域,比如当我们设计某程序申请流程的时候,使用面包屑这样的设计风格可以很清楚地表达流程申请层次关系、申请先后顺序等等。 

    另外,被楼主说成像是鸡肋般的 -空间占用少。我个人认为这是个很大的亮点,一个网页所能够第一时间呈现给用户信息的最佳位置被限制在这样一个有限的四方方的筐筐里,每个页面组件都需要空间去呈现数据表达信息。然而面包屑空间占用少但是一定程度上又能够很好地完成导航条能够完成的任务。这就是优势阿。

    任何一件事物都不会是完美的,但是都不应该被轻易的忽视,或者像楼主说的什么…“倒掉”。面包屑也是如此,它被设计出来,并且应用地相当广泛,就一定有它存在的意义与价值。如果我们觉得疑惑了,那最有可能的是我们认识不够或者只是它对此时此地不适用罢了

  27. xueyue Says:

    门户网站之所以"滥用"面包屑我想是出于它海量信息的考量 而且事实证明一个吸引人的专题标题往往能引起很高的点击率 尽管它的内容常常令人失望 当然一般的内容不多的网站如果滥用面包屑的话 不是为了掩盖导航设计的不足 就是有些虚张声势的味道~

  28. ttim7077 Says:

    一直在看UCD,为什么在ucd里面最容易引起纷争的总是angela呢,"越减越妙"???这个是绝对的吗??是必须的吗??别忘了,一直减下去就等于0了,还妙啥。。适当的时候做适当的事。。面包屑不是绝对有用。但在他真正有用的时候一定不能忘了它,,设计确实有越减越妙这一说,但不是说设计就是见啥减啥。。。

  29. 忽悠2008 Says:

     

    ucd专家,请你看下面

    MICROSOFT的例子http://msdn2.microsoft.com/en-gb/vcsharp/aa336789.aspx ,希望你看到了BREADCRUMB

    ADOBE的例子 http://www.adobe.com/support/acrobatconnect/  其中 Home / Support /Acrobat Connect Support Center 是什么东西?

    AMAZON的例子: http://www.amazon.com/b/ref=sc_fe_c_3_0_3603941_3?ie=UTF8&node=3586351&no=3603941&me=ATVPDKIKX0DER 其中: Gourmet Food Chocolate Chocolate Assortments 是什么东西?

    EBAY的例子: http://dolls.listings.ebay.com/Dolls_Artist-Offerings-OOAK-Reborn_W0QQfromZR4QQsacatZ2404QQsocmdZListingItemList 其中: Home> Buy> Dolls & Bears> Dolls> Artist Offerings, OOAK, Reborn 不是BREADCRUMB吗?

    即便是APPLE,也有例子: http://www.apple.com/server/documentation/ ,MAC (反白显示) 下APPLE SERVER是BIG BOLD FONT,documentation是高亮,只是它的形式不是你熟悉的那种。在页面的最下方,有明显的例子 Home>Mac>Server>Documentation

    反过来再想,我们其实可以有这样一个大胆的推论:凡是出现面包屑的网站,基本上都是导航系统设计得比较差劲的。真的好大胆,震撼地球。

    我作为一个不懂UCD的人,肯请您以后不要再胡说八道,信口开河,混淆视听,谢谢

    ……

  30. Missx Says:

    楼上的微软例子属于多维了,不过的确不感轻信那个大胆的推论…

    只能说这个大胆的假设不错,不过还是要小心求证…

     

  31. 白鸦 Says:

    我来说一下我的看法:
    (其实关于面包屑的这个观点是我和angela在uf2007工作坊的准备中一起提出来的,我们观点一致。这次是由她写出来而已)

    1、在早期特别是1.0的那些以“信息分类”为主要设计方法的网站中,在那个大家对于“导航”研究并不深入的时候,面包屑体现了一定的价值。
    2、但面包屑本身其实有着很多的劣势,“线性”、“易迷失”、“为了有而有”、“导致很多页面出现重复导航”等都是最大的问题。
    3、用面包屑一般是“没办法的办法”,下策。

    4、并非微软、adobe、亚马逊、ebay那些巨头公司在用的方式就一定是好方式。
    因为这种思维,中国的web设计至今没有看到什么真正的创新之作。

    ————————————————–

    最后:无论好于不好,无论对于不对;有人对于大企业的权威提出挑战是好事,有人对于“专家”观点提出挑战也是好事。
    但,你可以攻击我的观点,不要攻击人。

    (也许今天脾气发的有点大,主要是因为我在后台看到了忽悠2008(29楼)”的一个被机器自动过滤的垃圾留言,语言太过份了!!) 

     

  32. ttim7077 Says:

    白老大,你,,,你,,,,真的。。。真的,,,有点激动,

    其实感觉你们的观点是不错。。但是写出来感觉味道不对。。比较容易让人激动。。

  33. Angela Says:

    写本文的时候我偷了一下懒,结果完全没有预料到一个已经逐渐淡出视线的页面元素还会引起这么大的反应。我在本文后面增加了一些补充说明,有兴趣的同学可以自己看看相关的资料。欢迎继续讨论。

  34. Angela Says:

    则名(25楼) :你所提到的形式的变化就已经不是面包屑了,定义请看我今天增加的补充说明。

  35. Angela Says:

    ttim7077(28楼) :我说我哗众取宠故意引发争论,这个答案你觉得满意吗?

  36. Angela Says:

    忽悠2008(29楼):我讨论的不是现状,同时你的例子里也有好几个都已经失去面包屑的原味了。

  37. Angela Says:

    XXX(26楼) :你所例举的那种申请流程是否允许用户返回上一步?如果不是的话,仅仅是表示申请步骤的一种页面元素,而不是面包屑。

  38. tony Says:

    to ttim7077(28楼)以及其他对此帖有疑问的同志们:

    其实本来这个话题是我在ucd内部请教angela和白鸦以及大家的,引起了大家的讨论,讨论到一半的时候,白鸦让把这个讨论发出来,所以,请大家明白来这里的初衷。真的希望大家的回帖能就问题说问题,也注重下发表反对意见的姿态。

    我们没有必要断章取义,如果大家是来凑热闹挑刺的,我想对自己本身没有太大的提升,没有意义。我觉得angela老师想表达和想说明的问题,相信有语文能力的人都应该能看懂了,没有收获就路过,有收获就请怀一颗感恩的心回个帖,多好啊。

    开始我连面包屑的概念都混淆,后来我经过思考发现我的观点没有和本文起冲突,大家想表达的都是一样:当你决定用面包屑的时候想想你为什么用它?有没有更好的方式?我强调的是前面的为什么,angela重点是问有没有更好的方式。

  39. Angela Says:

    哉崽(23楼) :这才是真正的来自用户的观点。在尼尔森列出的四大原因中,我认为它最大的好处正是在于“用户不会产生认知上的问题”。它是一种以固定形式出现在固定位置,同时又不受界面设计风格影响的页面元素。但是这个元素存在的基础是每一个元数据只可能属于单个类别,而这种绝对从属的分类关系在目前的网站上已经越来越少了。随着技术和需求的发展,将来也会越来越少。基础都没有了,存在的必要性也就大打折扣了。

  40. Angela Says:

    tony(38楼) :我不反对讨论,讨论能激发思考。但是我痛恨借机进行人身攻击的。另外,有些人还有很不好的习惯:首先没有认真读完文章,第二没有试图理解作者想法,第三总是走极端。

  41. phoenix Says:

    文章说的比较有见底!

    但我们不可否认一点,就是面包屑确实有助于用户体验。

    微软和苹果放弃面包屑,我认为并非是他们的导航做的好(当然他们的导航确实做的好),而是由于他们的网站结构明晰,以至于不用面包屑就能找到所需要的内容。

     

    但是对于一个大型的多类别的站点,面包屑就是比不可少的了。

    没有面包屑,很多用户无法返回原来的起点。。

  42. 重庆网站建设 Says:

     开始我还不太认同,读完了才发现在理

    如果不为了SEO ,也把面包屑去掉.

  43. serein Says:

    看了这么多,我有类似于具体问题具体分析的感觉~

    面包屑也只是辅助用户定位的一种方法,什么时候用怎么用也取决与具体情况 ~

     

    1.当导航可以明确表示用户在网站中的位置,本着“越减越妙”的原则,面包屑是没有必要的。

    2.当网站结构比较复杂(多类别?seo?),用户无法清晰的了解自己的位置,面包屑可以辅助用户定位,并且清晰指出用户从属位置。

    (比如我会从baidu里面搜索某品牌化妆品,baidu会指向taobao或者paipai的某页,然后我选择面包屑上一级,看看更多产品)

      

     

  44. khdg Says:

    汗,好象是战争贴。
    对于楼主的说法,我觉得还是要根据具体情况而定,就像serein(43楼) 说的那样。

    而且就我个人感觉国人大多数网民的忍耐力真的是很强,虽然现在很多网站开始重视UCD了,但是还不是非常多,有面包屑的网站也不是占大多数,如果现在真的取消了面包屑,那我想会不会把用户搞糊涂呢?!接受和改变是需要一个过程的。

    对于面包屑我个人的感觉还是起到辅助导航的作用,层级关系并不是所有网站都能有很清晰。
    因为有的网站在栏目或者模块组织上是采用层级关系,而有的是采用线性关系,有的是自然关系,有的是多维关系等。

  45. ttim7077 Says:

    TO Angela:我想说的是,只觉得你的文字语气比较过激,很多时候看了后就会忍不住有其他方面的争论。相反,白鸦千鸟他们的文章引起的更多是理性的讨论,因为在这里,看到的是你们团队,不是个人,所以只是对文风的一点感觉,从来没有半点人品上的意见。。。要是你觉得莫有问题,那就莫在提,当我放屁~~~对于面包屑的讨论,我依然觉得该用的时候则用,不一定非要倒掉,相反,要是有更好的办法,用实例说话更容易让人明白。。

  46. bansi Says:

    第一次发言,以前都是默默的浏览文章。不发言是因为自己的观点浅薄,来这里浏览文章纯属本着学习的态度。这段时间很关注用户体验,也在借相关书籍进行学习。

    中国十个网站九个网站的讨论气氛都不好,即便是天涯这样的大社区,可能说不了两句,就开始人身攻击,这样一来,写成文发表出来也需要一种莫大的勇气。我很喜欢这里的讨论交流的气氛,个人也觉得观点只要提出,无论其好坏与否,能够给人以思考,引发众人的交流讨论便达到了目的。中学时,老师常在课堂上强调,“提出一个问题,比解决一个问题更重要”。

    001over

  47. 则名 Says:

    Angela(34楼) ,那个维基百科里关于website的面包屑的解释我早些时间也看过,只是我当时是在考虑用什么样的html元素来做这个面包屑才去看的。但我想说的是我们可以把面包屑的作用泛化一下正如面包屑本身的故事一样,没有更多的层级结构的含义,仅仅是一条路径,在逻辑上可以是水平的。

    当然讨论一个话题,必须有一个范畴,这样才能有得说,不然就无从说起。

    声明:很赞同 这样的文章和讨论的出现,这正是我们国内需要加强的。请接受我2008年第一次对UCDChina.com说声谢谢!

  48. 奇遇 Says:

    28、29楼,亮观点,但别攻击人身。咱们讨论应该建立相互尊重的基础上。

  49. Boolean Says:

    观点是鲜明、客观的,论据是充分的,论证的过程有点冗长,这会儿又不用千字换钱,何必不说的简单明了一点?

  50. 九翼青鸟 Says:

    -_-|||

    个人觉得这篇文章长了点,扯了不少题外话,但是核心的东西没表达完整。

    不考虑评论发表者本身问题的话,我想这是造成争论的根源。

    撇开上面的争论。

    个人认为面包屑得和结构的设计(结构不是导航!却是导航的基础!)结合起来讲。

    面包屑这种导航方式多用在树形结构的网站中

    在很多时候确实是无用,比如在树状结构的各级父节点页面设计的很糟糕的时候。 

    这时的面包屑确实还不如同跳出结构的点对点、点对小类的泛关联(相关文章、排行、自动链接、tag等等 “导航”

    但对于内容驱动的网站合理的树型结构网站利用“主导航”和“面包屑”理清结构,辅以结构以外的辅助导航(相关推荐、排行、自动链接、tag)引导用户。可以营造出相当清晰的导航体系。

    个人觉得:面包屑以及其他“导航”都是工具。合理的设计自己网站的“结构”。并辅以各种合适的“导航方式”才可以做好“完整的导航”

  51. 九翼青鸟 Says:

    -_-|||发现在这里就算注册了也没办法编辑自己的评论,这有点郁闷。

    我自己目前的主题似乎也是用这个UCD的主题衍生物改的。好在目前还没什么人光顾,呵呵。

  52. Roozeno Says:

    对于还不够2.0的大多数网站来说,breadcrumb是非常必要的,我认为在以下情况中breadcrumb起到了弥补缺陷作用:

    1.内容深度在3级以上的页面,通常无法在导航中很好体现时;

    2.导航的分类无法适应每一个用户的胃口(理解),尤其是需要鼠标hover显现下一级菜单的状况;

    3.网站的新手用户+普通用户占据比例较高时(对于他们而言,页面上可点击的链接就是导航);

     双手支持tony 20楼观点:)

  53. coobaa Says:

    1、就事论事,具体问题具体分析

    2、国内为什么用得泛滥?存在就是必然!过多考虑这些有过度设计、脱离用户群体的嫌疑。。。

  54. hanson Says:

    我比较喜欢http://www.amazon.cn/的“罗马面包屑”,多类型导航系统是提高用户体验的好方法!:)

    http://www.amazon.cn/mn/detailApp?ref=BR&uid=168-4991293-9772264&prodid=gbss000451(最下面) 

  55. 赤脚鸟 Says:

    赞同20楼、50楼,还有51楼观点

  56. ucd Says:

    无病呻吟,没事总想着找点文字来写。

    其实你写这个标题,这个文章内容就是没有经过论证的。你还别骂我,我也是专业做交互设计的。为什么这篇文字会引来这么多不同的观点,还美其名曰讨论激烈,如果你在项目会议上递交一个方案,这个方案导致所有人都持不同的观点,而且无法统一,这不叫“讨论激烈”,这是非常严重的失败。

     一个网站没有面包屑,不代表面包屑就不好,类似于其它“交互模式还有很大提升空间”那更是多词一举,犹如说“我们对宇宙的探索还有很大提升空间”一样。

    为什么我不喜欢评论却仍每天要来逛逛,我就是很好奇大家天天都在争论些什么?我很想诚挚的告诉大家,同时也是借用inter总裁曾经的一句话:“你在批判一个问题的不足或错误时,烦请给出你的答案”,否则光批判光挑刺谁都会。

    一个同行的郁闷之言,想必会招来一阵讥讽和漫骂,那让“文人相轻”来得更猛烈些吧~~

  57. ucd Says:

    sorry,我光批判,忘记给答案了

    一、首先你的故事;不是面包屑不好,而是丛林中的鸟(外界因素影响)

    导致面包屑变得不可靠;撒在网站上的面包屑是不会被鸟啄食的,这点我

    可以相当大胆的论证;

    二、“撒到网站上的面包屑是有先天缺陷的,这个先天缺陷正是这个“线

    性”。用“线性”的方式去表达本应该是“树形”甚至是“矩阵形”的结

    构。。。”
    面包屑并不是想表达一种“线性结构”,那是sitemap的工作。它只负责

    Positioning,让用户清晰的知道自己目前所处的位置,就像gps定位仪不

    是为了让你了解地球结构,而是让你自己身处何处,其实这点你是被“导

    航”2字束缚了。

    三、“如果网站信息太丰富、太复杂,有些内容不能明确划分到某个类别

    中,面包屑就会变成鸡肋。这方面的典型就是门户网站…”
    这个面包屑使用例子确实很失败,但网站使用面包屑方法的失败并不能归

    咎于面包屑本身,这个论证推理是不成立的。

    四、“如果你的网站信息内容属性不明确,大部分信息都同时属于多个类

    别,面包屑就会变成一个涉及到复杂判断和算法的技术问题。这种情况的

    代表就是电子商务、社区类网站…”
    这就是我最想说的,也是为什么会造成这么多异论的根本原因,每个人都

    在说“好”或是“坏”,其实面包屑的使用与网站本身的性质有非常大的

    关联,这也就是为什么你在电子商务或内容丰富、交互复杂的网站看不到

    面包屑,在交互简单、内容单一的网站频繁看到面包屑的根本原因。为什

    么不能换个角度思考,而是非要批斗它“倒掉”?

    最后总结二点:
    1、不要以某个用户失败的用例来论证某个产品或功能的失败,这个推理是

    不成立的;
    2、换个位置思考,这也是为什么这么多评论当中许多普通用户都非常支持

    面包屑,我们的忠旨就是UCD,听取用户的意见吧。。。

  58. 青山绿水 Says:

    最近看了一下Angela翻译的《用户体验的要素》,有两个翻译有不同的看法。

    一个是51页的Vision Document,这个是被翻译做“可视的文档”,这个词比较常见的翻译是愿景文档,是最概略的项目或产品的目标。

    另一个是66页的Be positive,这个不是乐观的意思,应该是多用肯定句,而非否定句的意思。需求的描写最多的是用的是7+4原则,本书的作者提的原则还是太简略,属于经验总结而不完全能称做原则。7+4原则,即对于单条需求应具备:完整性、正确性、可行性、必要性、划分优先级、无二义性、可验证性,对于整篇文档应具备:完整性、一致性、可修改性和可追溯性。

    对于整篇文档,最有价值的应该算是他倡导的立体矩阵,对于这个矩阵,可能是因为不习惯,看着有点别扭,最底层战略层是用户需求,我觉得这个还不足够是战略层,真正的战略层应该是市场需求,对于一个产品未来5年左右的规划,调研,市场细分,项目组合等方面要做的事情。

    其实对于软件产品,非web的(因为作者是分两类来说的),界面设计、信息设计和交互设计不可能严格分层,本身这两个活动就是要迭代和交互的。

    其它感觉,还是觉得像个人经验总结类书籍,浅了些,不知道各位还有其它什么书籍好推荐的?

    在这个网站潜水很久了,获益良多,所以决定开口说话,呵呵,第一次发帖,有不周,多指教,谢谢先!:)

  59. 冰寒 Says:

    顶58楼青山绿水。vision在这里不能被翻译作“视觉”,一个公司的vision是指导公司的理念、宗旨,台湾同胞们奉献了“愿景”这个词,很好。

    至少在显示当前位置这一点上,我觉得面包屑还是不错的做法——未必要在每一个页面上放上面包屑,但必要的地方仍然需要。

  60. 白鸦 Says:

    @青山绿水 Vison Document翻译成“可视化文档”应该没有什么问题,愿景文档有点不易理解;Be positive翻译成多用肯定句说的比较赞。

    58楼的评论是UCDChina里为数不多的高质量回复之一。 赞

  61. Angela Says:

    @青山绿水 谢谢你的建议,我考虑过“肯定句”的说法,但是文中给出的例子似乎更适合用“乐观”来解释,或者叫“积极的语气”更准确一点。“愿景文档”是不是太台湾化一点(确实不易理解)?也许叫“产品蓝图”?但目前我所接触的公司也很少写专门写“产品蓝图”的。

  62. Angela Says:

    @青山绿水 另外谢谢你共享的7+4原则。

  63. 白鸦 Says:

    @青山绿水 @angela   我又翻了一下那个章节,发现确实“可视化文档”表达起来不够准确。虽然容易可理解,但本身是“错误”的。 抱歉,我上面的观点有问题。

    国内有些公司有人写“产品规划书”,或者不少团队会专门绘制“概念图”都是类似的工作。 所以“愿景文档”这个词我倒觉得可以接受。

     

     

  64. » 面包屑倒掉砸死了谁? 出东门 不顾归 Says:

    […] 许斌斌的日志提到了Angela的论“面包屑”的倒掉,我之前看到过,一扫而过,今天又遇到,写下感想。依然非正式。 […]

  65. howlking Says:

    在AJAX的应用过程中会导致浏览器的后退按钮不知道所措,不知道面包屑能否解决这个问题?

    我就想了一下,没深挖,有兴趣的可以研究研究。

  66. 网站tab导航的设计 Says:

    […] 之前有写过一篇浏览器的tab设计,这回说说网站的tab设计。 一说到tab很自然地就想到了导航、信息架构。随着网站信息结构的复杂化,选择tab似乎是性价比最高、结构传递最明确的导航方式。这也是其中面包屑导航方式衰弱的重要原因。 […]

  67. 行云流水泵 Says:

    howlking(65楼) 

    确实,浏览器的后退经常导致页面脚本崩溃, 面包屑可以解决这个问题,关键是随着应用要求的提高,面包屑应该与时俱进的进行调整,

  68. hmfox Says:

    拜读了大作收益匪浅啊,我在做web design时也考虑应用面包屑

  69. 网站面包屑导航逐渐重要 - 5354菠萝格 Says:

    […] 网站面包屑导航逐渐重要 2009/11/19  |  20:31分类:吾言乱语  |  标签:seo、网站  |   面包屑导航的作用,其实各说纷纭。UCDchina曾写过论“面包屑”的倒掉文章讨论面包屑导航,而且随着SEO的发展人们也认识到了其SEO作用。不过近日Google的sitelink再一步净化,当搜索某关键词时会出现面包屑导航的sitelink。 Google搜索结果展示面包屑导航 […]

  70. sdf Says:

    对于整篇文档,最有价值的应该算是他倡导的立体矩阵,对于这个矩阵,可能是因为不习惯,看着有点别扭,最底层战略层是用户需求,我觉得这个还不足够是战略层,真正的战略层应该是市场需求,对于一个产品未来5年左右的规划,调研,市场细分,项目组合等方面要做的事情。

  71. Teamo Says:

    今天拜读了这篇文章,让我对面包屑更加理解了,现在发现google在利用这个东西

  72. pandora jewellery Says:

    面包屑现在大型网上用的比较多,小型网没几个深度页面,所以不用研究

  73. 我们还需要“面包屑”吗? « 兔子的用户体验设计 Says:

    […] 前几天看了Angela 写的论“面包屑”的倒掉,感觉她的分析很多地方我还是比较赞成的,谈到了“面包屑”的一些缺点和弊病,但因此就说“面包屑”应该倒掉,我还是不太赞成的。 […]

  74. wongardy Says:

    面包屑可以深入研究

  75. 杯子 Says:

    博主的文章写的真好,先收藏了,慢慢看。

Leave a Reply

You must be logged in to post a comment.