网页设计中的面包屑实例和做法.

申请免费试用、咨询电话：400-8352-114

网站上有很多的网页，面包屑导航可以大大提高用户使用的方式找到自己的方式解决。在可用性方面，面包屑数量减少网站的访问者，以获得更高级别的页面需要采取的行动，并提高网站的部分和页面的可查找性。这也是一种有效的视觉援助，表示用户在该网站的层次结构的位置，使其成为一个伟大的登陆页面的上下文信息来源。

什么是面包屑？

一个“面包屑”（或“面包屑导航”）是一种辅助导航计划的网站或Web应用程序中显示用户的位置。一词来源于Hansel和Gretel童话在这两个标题的儿童辍学面包屑形成了一条回到自己的家乡。就像在故事中，面包屑在现实世界的应用中为用户提供了一种方法来跟踪路径返回到原来的着陆点。

面包屑上Delicious.com

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

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

你应该在什么时候使用面包屑？

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

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

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

面包屑的类型

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

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

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

此页面显示所有计算机的属性，正在生产的连李有一个MicroATX的小塔的外形。

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

使用面包屑的好处

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

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

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

通常不养猪的屏幕空间，
因为他们通常水平为导向，明明白白风格，浏览路径不会占用很大的空间在页面上。做的好处是，他们几乎没有负面影响的内容过载，超过任何底片，如果使用得当。

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

在面包屑导航实施的误区

使用浏览路径是一个相当简单的事情，有一些指导原则考虑，才决定他们在网站上实施。让我们来看看，以避免一些常见的错误。

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

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

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

在上面的例子中，mefeedia不提供一个观看影片的主导航菜单。虽然有文字的脚注部分中的链接导航，导航菜单在身体的页面，很难浏览到该网站的其他部分。

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

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

面包屑导航的设计注意事项

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

应使用单独的链接项目
的普遍接受和分离浏览路径中的超链接是最容易识别的符号“大于”符号（>）。通常情况下，“>”符号是用来表示层次结构，在父类的格式>儿童类。

使用的其它符号的箭头指向正确的，正确的角度引号（“）和斜线（/）。

的选择取决于美学的网站和使用的痕迹的类型。例如，对于基于路径的面包屑了该书不一定有一个分层之间的相互关系，使用一个“大于”符号可能无法准确地传达他们的关系。

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

您的面包屑导航的大小时要遵循的一个很好的经验法则是，它不应该是抓住用户的注意，当到达一个页面上的第一个项目。

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

面包屑展示

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

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

TypePad等设计助理

美国航空航天局

雀巢有效地使用一个面包屑导航的文字是明显小于其余的页面上的文字，使其不显眼的。

马群的Trucs

大桥55

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

2。更换其他符号“>”

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

的PSDTUTS和Martique使用斜线。

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

Jakob Nielsen的的AlertBox使用右箭头。

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

3。除了简单的文本链接

面包屑设计的一个趋势基本上说，“面包屑没有简单的”。在这些设计中，你会看到精美的时尚面包屑的整体设计很好地结合起来。

Grooveshark

雅虎电视

IDEO

苹果商店

Coolspotters

Devlounge

LottaNZB

Pixelpoodle

guardian.co.uk

4。面包屑多步过程

声明跟踪使用一个面包屑导航注册一个帐户，以及一个进度指示器，以指示所涉及的步骤。

Flickr的使用面包屑的线索，在Flickr旅游的节数来表示。

5。面包屑子导航

这里有一些例子的链接，点击时或上空盘旋，打开一个子导航面板中列出了额外的属性或位置的浏览路径。

【MarketWatch有一个飞子导航菜单，当你将鼠标悬停在一个面包屑链接。

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

英国克兰菲尔德大学也有类似的飞行痕迹的计划，该计划具有双重功能：为用户的位置指标，作为一个强大的和互动的辅助导航计划。

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

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

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

食物与饮料具有多级子导航方案。

6。互动面包屑

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

7。实验的例子

Booreiland使用面包屑风格的导航方案，其主菜单，让游客快速了解他们目前正在观看。

用户界面设计师AEN谭的的AEN UI谈论一种设计模式，被称为“ Tabcrumbs，标签和面包屑导航方案，结合“ 。

本文作者来自北京北京信，转载请注明出处：北京北京信（https://www.fanpusoft.com/）

选择北京网站建设公司-北京信，优质服务，绝对不容错过 ！