网站设计中得面包屑：降低网站访客迷茫的状态

   　网站上一般有很多个页面，面包屑导航可以大大增加用户发现他们所在的位置。在可用性方面，面包屑降低一个网站的访问者迷茫的状态，以获得向更高级别的页面跳转，并提高网站部分和页面的可查找性。他们也是一个有效的视觉援助，表示用户在该网站的层次结构的位置，是登陆页面的上下文信息的重要来源。

互联网的一些事

　　什么是面包屑? yixieshi.com

　　面包屑导航(BreadcrumbNavigation)这个概念来自童话故事"汉赛尔 和格莱特 "，当汉赛尔和格莱特穿过森林时，不小心迷路了，但是他们发现在沿途走过的地方都撒下了面包屑，让这些面包屑来帮助他们找到回家的路，所以，一个“面包屑”(或“面包屑导航”)是一个辅助导航的形式，揭示了用户在网站或Web应用程序的位置。

yixieshi.com

　　Delicious.com

　　通常，您可以找到网站有大量的内容，以分层方式组织的面包屑。你也可以看到他们的Web应用程序中有多个步骤，它们的功能类似一个进度条。以最简单的形式，面包屑是横向排列的符号(>)“大于”分隔的文本链接;符号表示该页面，相对于它旁边的页面链接。 yixieshi.com

　　在这篇文章中，我们将探讨的网站上使用面包屑和面包屑路径应用到自己的网站的一些最佳做法。

yixieshi.com

　　什么时候应该使用面包屑? 互联网的一些事

　　电子商务网站的产品种类繁多，一个优秀的方案是根据其中的类别进行分组。 面包屑应被视为一个额外的功能，而不应取代有效的主导航菜单。这是一个方便的功能;是一个辅助导航，允许用户在他们的角度，用另一种方法来浏览你的网站的方式。 互联网的一些事

　　面包屑的类型 互联网的一些事

　　面包屑主要有三种类型 yixieshi.com

　　1、基于位置 互联网的一些事

　　基于位置的面包屑显示用户在网站的层次结构。它们通常用于导航方案(通常超过两个级别)。在下面的例子中，每一个文本链接是一个网页，是比其右侧的一个高一个层次。

yixieshi.com

　　范例 互联网的一些事

　　2、基于属性 互联网的一些事

　　基于属性的面包屑显示某个特定页面的属性。例如，在Newegg ,面包屑显示一个特定的页面上的层级属性：

　　范例

互联网的一些事

　　3、基于足迹

　　基于足迹的面包屑向用户展示他们已经浏览的轨迹，到达一个特定的页面。基于足迹的面包屑是动态的，因为它们显示到达当前页面上的用户已经访问过的网页。 互联网的一些事

　　使用面包屑的好处 互联网的一些事

　　这里只是一些使用面包屑导航的好处。 yixieshi.com

　　1、方便用户

yixieshi.com

　　主要用于面包屑提供给用户浏览一个网站的辅助手段。作为用户寻找路径的一种辅助手段，能方便他们定位方向和导航

yixieshi.com

　　2、减少点击或操作，返回到更高级别的网页 yixieshi.com

　　而不是使用浏览器的“后退”按钮或网站的主导航返回到一个更高层次的页面，减少用户的点击次数 yixieshi.com

　　3、通常不占用屏幕空间 yixieshi.com

　　因为他们通常是水平方向和白风格，面包屑不需占用页面上很大的空间。这样做的好处是，他们几乎没有内容过载方面的负面影响。

　　4.降低跳出率

yixieshi.com

　　面包屑导航可以是一个伟大的方式来吸引首次细读后查看登陆页面网站的访问者。例如，假设到达用户通过谷歌搜索页面上，看到一个面包屑的线索可能诱使用户点击到更高级别的页面，以查看相关的利益主题。这反过来，降低了整体的网站跳出率。

　　面包屑导航实施的误区

互联网的一些事

　　使用面包屑导航是一个相当简单的事情，让我们一起来看看一些常见的错误以避免。 yixieshi.com

　　1、当你不需要使用面包屑 yixieshi.com

　　实施面包屑的一个常见的​​错误是：使用它们的时候没有意义。 互联网的一些事

　　在上面的例子，SLICETHEPIE 网站让用户有太多的导航选项。 (1)(2)面包屑导航(3)辅助导航主导航，非常接近。在此应用程序的痕迹线索，因为坐在下方的较低级别的页面的二级导航，没有使用户更加方便。此外，在面包屑导航(“音乐”)第二级链接上点击带您回到第一个选项卡(“听”)，错误地认为，第一个选项卡上一个更高的水平比其他两个是(“搜索“和”成名的艺术家 “)。

yixieshi.com

　　2、作为主要的导航使用面包屑 yixieshi.com

　　如前所述，使用面包屑导航是作为一个可选的协助方式。

　　范例 互联网的一些事

　　在上面的例子，MEFEEDIA不提供一个观看影片的主导航菜单。虽然有文本页脚部分中的链接导航，但没有导航菜单在页面的内容部分，使得它难以浏览到网站的其他部分。 互联网的一些事

　　范例 互联网的一些事

　　如果直接到达一个视频网页上 – 也就是说，通过谷歌搜索结果，例如 – 唯一的导航选项，你可能有痕迹线索。或者如果你已经在浏览一个网站的网页，并达到一个页面不显示主导航菜单，你会点击你的浏览器“返回”按钮，进入主菜单。 yixieshi.com

　　3、当页面有多个类别的使用面包屑 互联网的一些事

　　面包屑导航有线性结构，因此，如果您的网页不能被整齐的类别划分，将很难使用它们。决定是否使用面包屑，在很大程度上取决于你如何设计你的网站层级。当较低级别的页面(或可放)在多个父目录，面包屑路径无效的、不准确，会给用户造成混淆。 互联网的一些事

　　面包屑导航设计注意事项 互联网的一些事

　　当设计一个面包屑导航时，记住几件事情。让我们看看一些可能出现的问题： 互联网的一些事

　　1、什么应该使用单独的链接项目? yixieshi.com

　　普遍接受的和最知名的分离痕迹径路劲超链接的象征符号(>)“大于”。通常情况下，>符号是用来表示层级结构，在父目录的格式>子目类。 yixieshi.com

　　范例 yixieshi.com

　　使用其他符号，箭头指向正确的，正确的角度引号(“)和斜线(/)。

　　范例 yixieshi.com

　　不同符号的选择取决于该网站的美学设计和使用的痕迹。例如，面包屑过于醒目，干扰到了主导航，反而减弱了主导航

互联网的一些事

　　2、应该有多大? 互联网的一些事

　　不让你的面包屑主宰页面。面包屑导航的功能，只是作为一个用户(方便)的协助，其大小应传达给用户。因此，比起主导航菜单至少应较小或者不太突出。 互联网的一些事

　　范例

yixieshi.com

　　您的面包屑导航设计大小时要遵循的一个好的经验法则是：它不应该抓住用户的注意力。

　　3、应该在哪里设面包屑?

互联网的一些事

　　面包屑路径通常显示在页面的上半部分，而在主导航菜单的下面。

　　面包屑展示

　　现在，我们已经讨论了面包屑是什么，什么时候，什么地方使用，为什么和面包屑路径展示，我们应该看看一些活生生的实例。在下面的章节中，你会发现伟大的网站，使用路径创新的几个例子。

互联网的一些事

　　1、经典页面的面包屑

　　TypePad Design Assistant yixieshi.com

　　NASA yixieshi.com

　　Nestle

　　Marchand de Trucs yixieshi.com

　　Bridge 55 yixieshi.com

　　overstock.com

互联网的一些事

　　2、用其他符号代替“>”

　　TechRadar UK 和 BP 使用指向右边的三角形。 互联网的一些事

　　PSDTUTS 和 Martique 使用其他层级结构分隔的符号。 yixieshi.com

　　Mouse to Minx 使用一个直角引号表示页面层级结构。 yixieshi.com

　　Jakob Nielsen’s Alertbox 使用右箭头。 互联网的一些事

　　3、超越了简单的文字链接

　　面包屑设计目前的趋势来看，基本上说，“面包屑没有简单的”。在这些设计中，你会看到精美风格与整体设计以及集成的面包屑。

互联网的一些事

　　Grooveshark 互联网的一些事

　　Yahoo! TV

yixieshi.com

　　IDEO

yixieshi.com

　　Apple Store

互联网的一些事

　　Coolspotters

yixieshi.com

　　Devlounge

互联网的一些事

　　LottaNZB 互联网的一些事

　　Pixelpoodle yixieshi.com

　　guardian.co.uk 互联网的一些事

　　4、为多步过程的面包屑 互联网的一些事

　　Statement Tracker 使用一个面包屑的痕迹，表明在注册帐户所涉及的步骤，以及一个进度指示器。 互联网的一些事

　　5、分导航与面包屑

互联网的一些事

　　这里有一些例子的链接，点击时或划过的面包屑路径，打开一个子导航面板中列出的附加属性或地点。

yixieshi.com

　　MarketWatch

　　划过分导航菜单时，会出现一个面包屑链接悬停。 互联网的一些事

　　Profoto 有独特的面包屑导航：面包屑链接，打开它下面的区域，为用户提供了额外的属性来选择。 yixieshi.com

　　Cranfield University 已经出了类似的路径方案，具有双重功能：作为一个为用户的位置指标，作为一个强大的和互动的辅助导航。

yixieshi.com

　　Lonely Planet 也有一个弹出的面包屑导航，您可以在其中更改属性。 互联网的一些事

　　. yixieshi.com

　　面包屑链接点击该项目的页面，同时点击向下箭头，打开额外的选项。

　　MSDN 的面包屑导航。 打开一个可滚动的子导航，列表的用户将鼠标悬停在链接。

互联网的一些事

　　6、互动式面包屑

　　Delicious.com 让您删除项目中的关键字标签的痕迹线索，以帮助您快速找到书签。

　　范例 互联网的一些事

　　7、实验例子 yixieshi.com

　　Booreiland 使用它的主菜单面包屑式导航，让游客迅速了解他们目前正在观看。 互联网的一些事

　　原文地址：Breadcrumbs In Web Design: Examples And Best Practices

互联网的一些事