网页设计中的面包屑导航

《网页设计中的面包屑导航》由会员分享，可在线阅读，更多相关《网页设计中的面包屑导航（18页珍藏版）》请在金锄头文库上搜索。

1、网页设计中的面包屑导航：实例和最佳做法Posted on: 一月 26, 2010 in Resources, Web Roundups By:Rainbow0在一个拥有很多页面的网站上，面包屑导航(breadcrumb naviga tion)可以大大 提高用户导引的方式。换句话说，面包屑(breadcrumb)可以减少网站访问者找寻 更深级别页面的步骤，并且改善了网站区块和页面的可访问性。而且面包屑 (breadcrumb)还是一个有效的直观标识来告诉使用者他们当前的位置，是当前登 录页面最好的上下文信息资源。什么是面包屑(breadcrumb)?“面包屑(breadcrumb) ”是二级

2、导航计划的一种形式，可以清楚的标明当前用户 所在的网站或网络应用的位置。该术语源自奇幻森林历险记(Hansel and Gret el)这篇童话故事，两个小孩子通过丢面包屑来标记回家的踪迹。和童话 故事中一样，面包屑(breadcrumb)在现实应用中可以提供给用户追踪原始登陆点 的方式。Six Revisionss webdesiBookmarljS | Network : Tag或 | SuSee all lebdesfioft apdbookSixRevisionswebdesign 0 design XD上的面包 屑(breadcrumb)通常你可以在一些内容量极大，并且使用分级结构的

3、网站上看到面包屑 (breadcrumb) o你也可以在一些具有多重步骤的应用程序上看到它们。面 包屑(breadcrumb)的结构非常简单，水平排放了一些文本链接，并且用大于号隔 开()；这个符号标明了当前页面与相邻页面之间的层级关 系。本文，我们将探讨面包屑(breadcrumb)在网站中的使用方法以及提供一些好的案 例供参考。什么时候需要使用面包屑(breadcrumb)? 大型网站或者具有层级结构页面的网站需要使用面包屑导航(breadcrumb navigation)。最好的例子就是一个电子商务网站，这种网站的产品都会根据逻 辑分类进行归组。对于一些仅有一级结构的网站你不需要使用面包

4、屑(breadcrumb)。一个决定是否 需要使用面包屑(breadcrumb)最好的办法就是建立一个网站地图或者用图表画 出网站导航结构，并且分析一下使用面包屑(breadcrumb)是否可以改善用户在分 类之间的导引动作。面包屑导航(Breadcrumb navigation)只能作为一个网站附属的特性而不能代 替主导航。它是一个方便的功能，一个二级导航计划可以让用户确认他的当前位 置，并且是你的网站导航的另一种表现方式。面包屑(breadcrumb)的形式下面介三种主要的面包屑(breadcrumb)形式。基于位置的(Location-based)基于位置的面包屑(breadcrumb)

5、可以告诉用户他们当前所在的网站层级。最具代 表性的就是用在具有多级别(通常大于两级)的导航中。下面的示例(Sit ePoin t) 中，每一个文本链接的层级都大于各自右侧的文本链接。1st levelBooks Kits Video- levelntests Marketplace Forums1 Referenpoint.凸.dlV1 GE d S 已tides.i 二：Ie冲 SEfE尸 SiclE Introducing JoomlaSearch基于属性的(Att ribu te-based)基于属性的面包屑(breadcrumb)路径显示了特定页面的属性。例如，在Newegg 网站中，

6、面包屑(breadcrumb)路径显示了特定页面上项目的属性。HRONIGS PCS & LAPTOPS APPLE CELL PHONES DIGITAL CAMERAS NtTWQflKllfG GAMIUGe 匚ciiriDUter Hmrd询mre Ccimputer 匚bebe CminioutEr Sere幻 Lim门-Li 型该页面显示了所有具有制造者为“Lian Li”这个属性的计算机，同时他们还具 有“ MicroATX Mini Towr ”这个表单元素。基于路径的(Path-based)基于路径的面包屑(breadcrumb)像用户提示了他们达到特定页面的步骤。这种形 式

7、的面包屑(breadcrumb)是动态的，因为它们显示的页面是用户在到达当前页面 之前已经访问过的页面。使用面包屑(breadcrumb)的好处使用面包屑(breadcrumb)有以下几点好处：为用户带来方便使用面包屑(breadcrumb)主要是为用户提供站内导航的另一种方式。通过在多级 结构的网站上为所有页面提供面包屑(breadcrumb)路径，用户可以更容易的定位 到高级别的页面。减少返回高级别页面的点击数量或动作代替使用浏览器的返回按钮或者网站的主导航返回到高级别页面，用户现在可以 通过面包屑(breadcrumb)使用更少的点击到达目的地。通常不占用屏幕空间因为通常都是使用水平方向

8、且不进行格式化，面包屑(breadcrumb)路径不需要占 用页面很多空间。这样的好处就是他们对于内容的加载没有任何负面影响，并且 如果使用得得当的话将化解其他负载。减少跳出率面包屑(breadcrumb)路径对于吸引首次访问者进入当前加载页面以后继续查看 网站其他内容是一个非常棒的方式。例如，当一个用户通过google搜索进入到一个页面，看到一个面包屑(breadcrumb)路径的时候可能会 试图点击更高级别的页面来查看相关感兴趣的文章。这样依赖，就 可以减少整个网站的跳出率。使用面包屑(breadcrumb)的常见错误使用面包屑(breadcrumb)是意见十分简单的事情，在决定是否需要使

9、用他们之前 仅仅需要考虑几点建议。下面让我们看看需要避免的一些错误使用情况。在不要使用的时候而使用了面包屑(breadcrumb)最易发生的错误就是面包屑(breadcrumb)对于网站没有任何益处的时候而使用 了它。tM SUCEMUSICSGOl/TYou are here: HcirriE： jListenFind new Music by genre and/or country. YouatSecondary navigation (tabs) is right below itClicking on second level (Music takes you to first ta

10、b CListen)在上面的例子中，Slicethepie为使用者提供了太多的导航选择。(1)主导航，(2)面包屑(breadcrumb)路径以 及(3)二级导航的位置都十分接近。面包屑(breadcrumb)在这里并没有为用户提供 什么方便之处，因为二级导航已经直接显示出了下级页面。而且，点 击面包屑(breadcrumb)上的二级链接(” Music”)将把你代回到一级标签(” Listen” )，这将错误的向你提示第一个标签会比第二个标签(” Search” 和 “Artist hall of fame” )级别高。将面包屑(breadcrumb)作为主导航正如前所属，使用面包屑(bre

11、adcrumb)仅仅是一种可选的导航方案。watch video trom Around the webVideo 復 Tv Talk & Late Night Late Night With Jimmy Fallon在上面的例子中，mefeedia并没有提供主要的查看视频的导航菜单。尽管这里 在页脚部分有一个文字链接导航，但是在页面主体上并没有一个导航菜单，从而 使得网站其他部分的定位非常困难。Home Tv Talk & Late NightLate Night With Jimmy FallorBrowse ChannelsVideosTVMoviesNewsMusicPodcastsF

12、eedsCommunityPeopleTagsChannelsPlaylists竹曲沁rt佢卽 召愿it斤笑勺NThis navigation menu disappears when you go to a video page, forcing youIto hit the back button if you want touse it.Fi. Fmb 芻.20W (Clip)Last official webisode! Jimmsits c producer Lome MichaeIE：Thu, Feb 26, 2009 (Clip) (Cli：With just one webis

13、ode left to go, Ji webisode momenfe.假设你通过Google直接到达了视频页面，那么可供你使用的导航仅有面包屑 (breadcrumb)。也就是说如果你已经浏览了网站的其他页面并且到达了一个没有 主导航菜单的页面，那么你不得不使用浏览器的“返回”按钮访问主菜单。当页面具有多种分类的时候使用面包屑(breadcrumb)面包屑(breadcrumb)具有一个线性结构，因此当你的页面分类种类较多的时候使 用它会比较困难。决定是否需要使用面包屑(breadcrumb)通常都很大的依赖于你的网站结构设计。当一个低级别的页面具有 一个以上的父级分类，那么使用面包屑(br

14、eadcrumb)是无 效的，不精确的，而且会让用户非常迷糊。面包屑(breadcrumb)导航设计考虑因素当设计面包屑(breadcrumb)导航计划的时候，需要在大脑中牢记几点。让我们一 起来看看当你设计面包屑(breadcrumb)的时候可能会遇到的问题。应该用什么区分开链接项目？通常被接受并且广泛认知的区分面包屑(breadcrumb)超级链接的符号就是大于 号()。最具代表性的说，大于号用来表示层级结构，像这样的结构主分类子分 类。Other symbols used are arrows pointing to the right, right angle quotation ma

15、rks () and slashes (/).Glossary Authors About UXmatters Contact UsAjax / RIAs / Web 2.0 Apps选择使用什么样子的分隔符依赖于整个网站的美观设计以及所使用的面包屑 (breadcrumb)形式。比如，基于路径的面包屑(breadcrumb)就不需要在每个链接 文本之间提供层级关系，使用大于号并不能精确的传递他们之间的关系。面包屑(breadcrumb)应该多大？你无需让面包屑(breadcrumb)占据网页的主导位置。一个面包屑(breadcrumb) 仅仅扮演用户使用助手的功能。它的尺寸只需可以传到足够的信息给用户足以， 因此可以很小，或者比主导航小一些。Tips & Resources Improving；your resultsArticles 恳 TipsGating startedOffering email marketing toyour clientsDesigning and building emails- Managing an