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

一直在路上

网站上一般有很多个页面，面包屑导航可以大大增加用户发现他们所在的位置。在可用性方面，面包屑降低一个网站的访问者迷茫的状态，以获得向更高级别的页面跳转，并提高网站部分和页面的可查找性。他们也是一个有效的视觉援助，表示用户在该网站的层次结构的位置，是登陆页面的上下文信息的重要来源。 yixieshi 　　什么是面包屑? 互联网的一些事
　　面包屑导航(BreadcrumbNavigation)这个概念来自童话故事"汉赛尔 和格莱特 "，当汉赛尔和格莱特穿过森林时，不小心迷路了，但是他们发现在沿途走过的地方都撒下了面包屑，让这些面包屑来帮助他们找到回家的路，所以，一个“面包屑”(或“面包屑导航”)是一个辅助导航的形式，揭示了用户在网站或Web应用程序的位置。

yixieshi

                               
登录/注册后可看大图

　　Delicious.com yixieshi

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

　　在这篇文章中，我们将探讨的网站上使用面包屑和面包屑路径应用到自己的网站的一些最佳做法。 互联网的一些事
　　什么时候应该使用面包屑?

yixieshi

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

　　面包屑的类型 互联网的一些事
　　面包屑主要有三种类型

yixieshi

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

                               
登录/注册后可看大图

　　范例 yixieshi

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

                               
登录/注册后可看大图

　　范例 互联网的一些事
　　3、基于足迹 互联网的一些事
　　基于足迹的面包屑向用户展示他们已经浏览的轨迹，到达一个特定的页面。基于足迹的面包屑是动态的，因为它们显示到达当前页面上的用户已经访问过的网页。 互联网的一些事
　　使用面包屑的好处 互联网的一些事
　　这里只是一些使用面包屑导航的好处。

yixieshi

　　1、方便用户

yixieshi

　　主要用于面包屑提供给用户浏览一个网站的辅助手段。作为用户寻找路径的一种辅助手段，能方便他们定位方向和导航 互联网的一些事
　　2、减少点击或操作，返回到更高级别的网页

互联网的一些事

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

　　3、通常不占用屏幕空间 互联网的一些事
　　因为他们通常是水平方向和白风格，面包屑不需占用页面上很大的空间。这样做的好处是，他们几乎没有内容过载方面的负面影响。 yixieshi
　　4.降低跳出率 互联网的一些事
　　面包屑导航可以是一个伟大的方式来吸引首次细读后查看登陆页面网站的访问者。例如，假设到达用户通过谷歌搜索页面上，看到一个面包屑的线索可能诱使用户点击到更高级别的页面，以查看相关的利益主题。这反过来，降低了整体的网站跳出率。 yixieshi
　　面包屑导航实施的误区 互联网的一些事

　　使用面包屑导航是一个相当简单的事情，让我们一起来看看一些常见的错误以避免。 互联网的一些事
　　1、当你不需要使用面包屑 互联网的一些事
　　实施面包屑的一个常见的​​错误是：使用它们的时候没有意义。 互联网的一些事

                               
登录/注册后可看大图

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

互联网的一些事

　　2、作为主要的导航使用面包屑 互联网的一些事
　　如前所述，使用面包屑导航是作为一个可选的协助方式。 yixieshi

                               
登录/注册后可看大图

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

yixieshi

                               
登录/注册后可看大图

　　范例 互联网的一些事

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

　　3、当页面有多个类别的使用面包屑 互联网的一些事
　　面包屑导航有线性结构，因此，如果您的网页不能被整齐的类别划分，将很难使用它们。决定是否使用面包屑，在很大程度上取决于你如何设计你的网站层级。当较低级别的页面(或可放)在多个父目录，面包屑路径无效的、不准确，会给用户造成混淆。 yixieshi
　　面包屑导航设计注意事项 互联网的一些事
　　当设计一个面包屑导航时，记住几件事情。让我们看看一些可能出现的问题： yixieshi
　　1、什么应该使用单独的链接项目?

互联网的一些事

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

                               
登录/注册后可看大图

　　范例 互联网的一些事
　　使用其他符号，箭头指向正确的，正确的角度引号(“)和斜线(/)。 互联网的一些事

                               
登录/注册后可看大图

　　范例 互联网的一些事
　　不同符号的选择取决于该网站的美学设计和使用的痕迹。例如，面包屑过于醒目，干扰到了主导航，反而减弱了主导航 互联网的一些事
　　2、应该有多大? yixieshi

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

                               
登录/注册后可看大图

　　范例 互联网的一些事
　　您的面包屑导航设计大小时要遵循的一个好的经验法则是：它不应该抓住用户的注意力。 互联网的一些事
　　3、应该在哪里设面包屑? 互联网的一些事

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

yixieshi

　　面包屑展示 yixieshi

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

互联网的一些事

　　1、经典页面的面包屑 yixieshi
　　TypePad Design Assistant

yixieshi

                               
登录/注册后可看大图

　　NASA yixieshi

                               
登录/注册后可看大图

　　Nestle yixieshi

                               
登录/注册后可看大图

　　Marchand de Trucs 互联网的一些事

                               
登录/注册后可看大图

　　Bridge 55 互联网的一些事

                               
登录/注册后可看大图

　　overstock.com 互联网的一些事

                               
登录/注册后可看大图

　　2、用其他符号代替“>” yixieshi
　　TechRadar UK 和 BP 使用指向右边的三角形。 yixieshi

                               
登录/注册后可看大图

                               
登录/注册后可看大图

　　PSDTUTS 和 Martique 使用其他层级结构分隔的符号。 互联网的一些事

                               
登录/注册后可看大图

                               
登录/注册后可看大图

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

互联网的一些事

                               
登录/注册后可看大图

　　Jakob Nielsen’s Alertbox 使用右箭头。

yixieshi

                               
登录/注册后可看大图

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

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

互联网的一些事

　　Grooveshark yixieshi

                               
登录/注册后可看大图

　　Yahoo! TV 互联网的一些事

                               
登录/注册后可看大图

　　IDEO 互联网的一些事

                               
登录/注册后可看大图

　　Apple Store

yixieshi

                               
登录/注册后可看大图

　　Coolspotters 互联网的一些事

                               
登录/注册后可看大图

　　Devlounge

yixieshi

                               
登录/注册后可看大图

　　LottaNZB yixieshi

                               
登录/注册后可看大图

　　Pixelpoodle yixieshi

                               
登录/注册后可看大图

　　guardian.co.uk

互联网的一些事

                               
登录/注册后可看大图

　　4、为多步过程的面包屑

互联网的一些事

                               
登录/注册后可看大图

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

yixieshi

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

互联网的一些事

                               
登录/注册后可看大图

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

                               
登录/注册后可看大图

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

互联网的一些事

                               
登录/注册后可看大图

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

互联网的一些事

                               
登录/注册后可看大图

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

                               
登录/注册后可看大图

　　. yixieshi

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

yixieshi

                               
登录/注册后可看大图

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

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

                               
登录/注册后可看大图

　　范例

互联网的一些事

　　7、实验例子 互联网的一些事

                               
登录/注册后可看大图

　　Booreiland 使用它的主菜单面包屑式导航，让游客迅速了解他们目前正在观看。 互联网的一些事
　　原文地址：Breadcrumbs In Web Design: Examples And Best Practices

互联网的一些事

一直在路上

杜蕾斯微博引发的思考 微博或成为企业的运营核心

星情

支持你哈...................................