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

作者: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
站点最新 站点最新列表
周大福“敬•自然”设计大赛开启
国际体验设计大会7月将在京举行
中国国防科技信息中心标志征集
云计算如何让安全问题可控
云计算是多数企业唯一拥抱互联网的机会
阿里行云
云手机年终巨献,送礼标配299起
阿里巴巴CTO王坚的"云和互联网观"
1499元买真八核 云OS双蛋大促
首届COCO桌面手机主题设计大赛
栏目最新 栏目最新列表
国外创意名片设计欣赏
情感化界面
线下项目工作流程(归纳篇)
线下项目工作流程(分析篇)
简约而不简单-Practise平面设计
培养用户的使用习惯
优秀名片设计
专题头图的秘密武器
别让UED忽悠你(2):多少钱一斤
别让UED忽悠你(1):天生的矛盾

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

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

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

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
网站可用性测试及优化指南
《写给大家看的色彩书1》
《跟我去香港》
众妙之门—网站UI 设计之道
《Flex 4.0 RIA开发宝典》
《赢在设计》
犀利开发—jQuery内核详解与实践
作品集 更多内容

杂⑦杂⑧ Gold NORMANA V2