您的位置: 首页 > 艺术设计 > 设计理论 > 论"面包屑"的倒掉
让复杂导航变简单 回到列表 把导航系统做薄
 论"面包屑"的倒掉

作者:Angela 时间: 2008-01-02 文档类型:合作网站提供 来自:UCDChina.com

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

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

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

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

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

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

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

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

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

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

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

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

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

本文链接:http://www.blueidea.com/design/doc/2008/5251.asp 

出处:UCDChina.com
责任编辑:moby

相关文章 更多相关链接
让复杂导航变简单
WEB2.0的单手定则
Web标准的web UI
把导航系统做薄
Position方式构建B/S结构软件界面
作者文章 更多作者文章
记不住车牌的保安
《用户体验要素》出版
文字的减法
视觉设计:用理性说话
大UE?小UE?
热门搜索:CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
全兼容的纯CSS级联菜单要点浅析
CSS Sprites 图片整合技术
雅安,一场中式旅行
热烈祝贺"醒狮杯"圆满结束
菊花宝典大赏大奖教程《阳台》
交互设计师怎样和产品团队合作
Photoshop打造个性潮流音乐海报
简单解读面包屑
CSS盒模型
Apple与Microsoft网站可用性研究
栏目最新 栏目最新列表
成为一个顶级设计师的第二准则
一起回味经典老体育宣传画
你是真正的用户体验设计者吗? Ⅲ
菜菜贺年动画
网页效果图设计之色彩索引
Google的产品设计指导思想
Siggi Eggertsson 几何魅力
令人惊叹的"手绘"
再见吧,创意
创意的生产方式

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

本文现有 3 条评论 评分:- llllllllllllllllllll + 评分人数: 1 ,平均分: 4.00


realalu Publish at 2008-3-8 9:00:05
不要忘了这句话:有需求就有市场
zmn4587 Publish at 2008-1-9 23:20:11 评分4
虽然不是十分赞同文章的观点,但并不觉得作者是想卖弄什么概念。这种设计现象本来就很普遍,而且局限性也是很突出的,只是还没有到鸡肋的地步,另外我们经常在网上搜些东西,然后找到有目标信息的页面,而且很多时候就会在这个页面上选择对应的分类在这个网站内查看了,这就是“面包屑”的另一种应用了。
其实目前来说就像vista系统的地址栏导航那样,网页中实现起来并不难,但效果就大大的不同了,那已经是树形的了,只不过这样的话有可能增加点击次数
Nower Publish at 2008-1-4 19:54:53
“用“线性”的方式去表达本应该是“树形”甚至是“矩阵形”的结构,就好像让三岁的小朋友做诗写文章一样,结果不是把小朋友逼疯就是把家长急疯。”
“树型”和“矩阵型”的每一个分支不就是“线性”的吗?
“有些内容不能明确划分到某个类别中”,就像《范冰冰走光》的娱乐新闻在蓝色理想找不到明确的分类?你问问蓝色的主编给不给登。你给的那个新浪的链接打不开了,你举的实例我看不到
感觉整篇文章理由并不充分,只是在卖弄一些自己也搞不清的概念·
您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
《Web标准设计》
《美工神话》
《Flash短片轻松学》
Illustrator CS3质感绘画表现技法
大师之路--Photoshop 完全解析
《用户体验要素》
HTML与CSS入门经典(第7版)
作品集 更多内容

光影练习01 家居城 变态金刚 WESBROOK 毕业设计。 万达2稿 变态金刚 华硕(Asus)手机 Zt23