网站建设中面包屑导航的设计技巧

   在网站建设中有很多页面，面包屑导航可以大大提高用户使用的方式找到自己的方式解决。在可用性方面，面包屑降低网站的访问者，以获得更高级别的页面需要采取一些行动，他们提高网站栏目和页面的可检索性。他们也是一个有效的视觉援助，表示位置的用户在网站的层次结构，使登陆页面的上下文信息的重要来源。

什么是网站的面包屑导航？

一个“面包屑”（或“面包屑”）是一种辅助导航方案，揭示了在一个网站或Web应用程序的用户的位置。一词源于糖果屋的童话其中两个标题的孩子丢弃面包屑，形成一条小道回到自己的家乡。就像这个故事，面包屑在现实世界中的应用，为用户提供了一个方法来跟踪路径返回到原来的着陆点。

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

在这篇文章中，我们将探讨在网站上使用面包屑，面包屑小径应用到自己的网站讨论的一些最佳实践。

当你应该使用面包屑？

使用面包屑导航的大型网站和网站，分层排列 页面。一个优秀的方案是电子商务网站，其中种类繁多的产品分为逻辑类别。

您不应该使用单级网站，有没有逻辑层次或分组的面包屑。一个伟大的方式来确定，如果一个网站将受益于面包屑导航是构建一个网站地图或图表，代表网站的导航结构，然后分析面包屑是否会提高用户的内和类别之间的导航能力。

面包屑导航应该被视为一个额外的功能，而不应取代有效的主导航菜单。这是一个方便的功能; 二级导航方案，允许用户建立他们在哪里，以及你的网站来浏览周围的另一种方式。

面包屑的类型

主要有三种类型的面包屑。

基于位置的
基于位置的面包屑显示的用户，他们是在网站的层次结构。它们通常用于有多个级别（通常是两个以上的级别）的导航方案。在下面的例子（SitePoint），每一个文本链接是一个网页，是一个级别高于其右侧。

基于属性的
基于属性的面包屑路径显示一个特定页面的属性。例如，在新蛋，面包屑小径显示某个特定页面上显示的项目的属性：

此页面显示所有计算机的情况下，有由李莲和制造的MicroATX规格迷你塔的外形属性。

为基于路径
基于路径的痕迹步道用户展示他们已经采取的步骤到达一个特定页面。基于路径的面包屑是动态的，因为它们显示之前到达当前页面上的用户已经访问过的网页。

使用面包屑的好处

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

主要是用来方便用户的面包屑导航网站给用户提供了辅助手段。通过提供一个大型的多级网站的所有网页上的面包屑，用户可以更方便地导航到更高级别的类别。

减少点击或行动，返回到更高级别的页面，
而不是使用浏览器的“后退”按钮或网站的主导航返回到一个更高级别的页面，用户现在可以使用面包屑用更少的点击次数。

通常不养猪的屏幕空间，
因为他们是典型的水平方向和风格明明白白，面包屑小径不占用很大的空间在页面上。这样做的好处是，他们很少在内容超载方面没有负面影响，他们超过任何底片，如果使用得当。

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

面包屑实施中的误区

使用面包屑小径，是一个相当简单的事情，也有一些指引，以考虑才决定落实到网站上。让我们来看看一些常见的错误，以避免。

使用面包屑导航，当你不需要
在实施面包屑一个常见的错误时使用它们没有任何好处。

在上面的例子中，Slicethepie风险压倒性的用户有太多的导航选项。（1）主导航，面包屑（2）和（3）辅助导航是非常并拢。面包屑在此应用程序为用户提供了方便，因为没有添加低级页面坐在它下面的二级导航。此外，面包屑（“音乐”）第二级链接点击带您回到第一个标签（“听”），错误地认为，第一个选项卡是在一个更高的水平比其他两个（“搜索艺术家“和”名人堂“）。

使用面包屑小径主导航
如前所述，使用面包屑导航作为一个可选的援助。

在上面的例子中，MeFeedia称不提供主导航菜单观看视频。虽然有文本链接导航，页脚部分，有没有导航菜单在身体的页面，使得它很难浏览到网站的其他部分。

如果你直接到达一个视频页面上 - 比方说，例如，通过谷歌搜索结果 - 唯一的导航选项，你可能有面包屑。或者，如果你已经被浏览一个网站的页面，并达到一个页面不显示在主导航菜单，你会打在你的浏览器中的“后退”按钮，进入主菜单。

使用面包屑当页面有多个类别
面包屑小径有一个线性的结构，因此，使用他们的将是困难的，如果你的网页不能被归类成整齐的类别。决定是否使用面包屑，在很大程度上取决于你如何设计你的网站层次结构。当较低级别的页面（或者可以放）在一个以上的父类，面包屑小径是无效的，不准确的，对用户造成混淆。

面包屑导航设计注意事项

当设计一个面包屑导航计划，请记住几件事情。让我们来看看一些可能出现的问题与面包屑，当你工作。

应使用单独的链接项目？
普遍接受和分离面包屑小径中的超链接是最知名的象征“大于”符号（>）。通常情况下，“>”符号是用来表示层次结构，如父类的格式>儿童类。

使用的其它符号的箭头指向靠右边，右边角引号（“）和斜线（/）。

选择依赖于网站和美学的使用痕迹。例如，对于基于路径的面包屑链接并不一定有一个层次之间的相互关系，使用“大于”符号，可能无法准确传达他们的关系。

它应该是多大？
你不希望你的面包屑主宰页面。了面包屑功能只是作为一种辅助手段，以用户（方便），其大小应传达到用户，因此至少应该较小，或较不突出，比主导航菜单。

拇指遵循你的面包屑的大小时，一个很好的规则是，它不应该是抓住用户的注意力，当到达页面上的第一个项目。

应该在哪里设面包屑
面包屑路径通常显示在页面的上半部分，下面的主导航菜单，如果一个水平菜单布局。

面包屑展示

现在，我们已经讨论了谁，什么，何时，何地，为何与如何做的面包屑小径，我们应该看看一些活生生的实例。在下面的章节中，你会发现伟大的网站，使用面包屑小径的几个例子。

1。经典的基于文本的面包屑

TypePad等设计助手

美国航空航天局

雀巢采用了面包屑，其明显小于其余的页面上的文字文本，有效地使其不显眼。

马钱德Trucs的

桥55

Overstock.com使用标准“大于”符号基于属性的面包屑。产品属性复选框，使用户可以将它们取消过滤他们。

2。更换与其他符号“>”

TechRadar英国BP使用指向右边的三角形。

的PSDTUTS和Martique使用斜线。

Minx的鼠标采用了直角引号表示页面层次结构。

雅各布尼尔森的AlertBox的使用右箭头。

目标使用分号（:)分隔。

3。除了简单的文本链接

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

Grooveshark

雅虎电视

IDEO

苹果商店

4。多步过程的面包屑

报表跟踪采用了面包屑，注册一个帐号，以及一个进度指示器，以指示所涉及的步骤。

Flickr的使用痕迹线索，在Flickr旅游节说明人数。

5。面包屑子导航

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

市场有一个飞子导航菜单，你将鼠标悬停在一个面包屑链接出现。

保富图具有独特的面包屑：面包屑链接，点击打开它下面的区域，为用户提供了额外的属性来选择。

克兰菲尔德大学也有类似的飞出痕迹的计划，该计划具有双重功能：作为一个位置指示器，以便使用者，作为一个强大的和互动的辅助导航计划。

孤独星球也有一个飞出来的面包屑，您可以在其中更改属性。

点击面包屑链接，带你到该项目的页面，而点击向下箭头，打开额外的选项。

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

wowhead上有一个多层次的子导航计划。

6。互动式面包屑

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