下面是小编帮大家整理的面包屑网页导航设计参考实例和最佳方案...（共含8篇），希望对大家的学习与工作有所帮助。同时，但愿您也能像本文投稿人“食物和饮料”一样，积极向本站投稿分享好文章。
在网站上说，有很多网页， breadcrumb导航可大大提高用户的方式找到自己的方向，网站访问者需要，以便获得更高级别的网页，并改善findability节的网站和网页， 他们还有效的援助，指出视觉的位置，用户在网站的层次，使之成为巨大的背景资料的目标网页。
On websites that have a lot of pages,breadcrumb navigationcan greatly enhance the way users find their way around. In terms of usability, breadcrumbs reduce the number of actions a website visitor needs to take in order to get to a higher-level page, and they improve the findability of website sections and pages. They are also an effective visual aid that indicates the location of the user within the website’s hierarchy, making it a great source of contextual information for landing pages.
What is a breadcrumb?
A “breadcrumb” (or “breadcrumb trail”) is a type ofsecondary navigation schemethat reveals the user’s location in a website or Web application. The term comes from the Hansel and Gretel fairy tale in which the two title children drop breadcrumbs to form. a trail back to their home. Just like in the tale, breadcrumbs in real-world applications offer users a way to trace the path back to their original landing point.
Breadcrumbs on Delicious.com
You can usually find breadcrumbs in websites that have a large amount of content organized in a hierarchical manner. You also see them in Web applications that have more than one step, where they function similar to a progress bar. In their simplest form, breadcrumbs are horizontally arranged text links separated by the “greater than” symbol (>); the symbol indicates the level of that page relative to the page links beside it.
In this article, we’ll explore the use of breadcrumbs on websites and discuss some best practices for applying breadcrumb trails to your own website.
When Should You Use Breadcrumbs?
Use breadcrumb navigationfor large websites and websites that have hierarchically arranged pages. An excellent scenario is e-commerce websites, in which a large variety of products is grouped into logical categories.
Youshouldn’tuse breadcrumbs for single-level websites that have no logical hierarchy or grouping. A great way to determine if a website would benefit from breadcrumb navigation is to construct a site map or a diagram representing the website’s navigation architecture, and then analyze whether breadcrumbs would improve the user’s ability to navigate within and between categories.
Breadcrumb navigation should be regarded as an extra feature and shouldn’t replace effective primary navigation menus. It’s a convenience feature; asecondary navigation schemethat allows users to establish where they are; and an alternative way to navigate around your website.
Types of Breadcrumbs
There are three main types of breadcrumbs.
Location-based
Location-based breadcrumbs show the user where they are in the website’s hierarchy. They are typically used for navigation schemes that have multiple levels (usually more than two levels). In the example below (from SitePoint), each text link is for a page that is one level higher than the one on its right.
Attribute-based
Attribute-based breadcrumb trails display the attributes of a particular page. For example, in Newegg, breadcrumb trails show the attributes of the items displayed on a particular page:
This page displays all computer cases that have the attributes of being manufactured byLian Liand having aMicroATX Mini Towerform. factor.
Path-based
Path-based breadcrumb trails show users the steps they’ve taken to arrive at a particular page. Path-based breadcrumbs are dynamic in that they display the pages the user has visited before arriving on the current page.
Benefits of Using Breadcrumbs
Here are just some of the benefits of using a breadcrumb trail.
Convenient for users
Breadcrumbs are used primarily to give users a secondary means of navigating a website. By offering a breadcrumb trail for all pages on a large multi-level website, users can navigate to higher-level categories more easily.
Reduces clicks or actions to return to higher-level pages
Instead of using the browser’s “Back” button or the website’s primary navigation to return to a higher-level page, users can now use the breadcrumbs with a fewer number of clicks.
Doesn’t usually hog screen space
Because they’re typically horizontally oriented and plainly styled, breadcrumb trails don’t take up a lot of space on the page. The benefit is that they have little to no negative impact in terms of content overload, and they outweigh any negatives if used properly.
Reduces bounce rates
Breadcrumb trails can be a great way to entice first-time visitors to peruse a website after having viewed the landing page. For example, say a user arrives on a page through a Google search, seeing a breadcrumb trail may tempt that user to click to higher-level pages to view related topics of interests. This, in turn, reduces the overall website bounce rate.
Mistakes in Breadcrumb Trail Implementation
Using breadcrumb trails is a fairly straightforward affair, and there are only a few guidelines to consider before deciding to implement them on a website. Let’s take a look at some common mistakes to avoid.
Using breadcrumbs when you don’t need to
A common mistake in implementing breadcrumbs is using them when there is no benefit.
In the above example, Slicethepie risks overwhelming users with too many navigation options. The (1) primary navigation, (2) breadcrumb trail and (3) secondary navigation are very close together. The breadcrumb trail in this application offers users no added convenience because the secondary navigation for lower-level pages sits right below it. Additionally, clicking on the second-level link in the breadcrumb trail (”Music”) takes you back to the first tab (”Listen”), which mistakenly suggests that the first tab is on a higher level than the other two (”Search” and “Artist hall of fame”).
Using breadcrumb trails as primary navigation
As stated earlier, use breadcrumbs as an optional aid to navigation.
In the above example, mefeedia does not offer a primary navigation menu for viewing videos. Though there is text link navigation in the footer section, there’s no navigation menu in the body of the pages, making it hard to navigate to other sections of the website.
If you arrive on a video page directly — say, for example, through a Google search result — the only navigation option you may have is the breadcrumb trail. Or if you’ve already been browsing a website’s pages and reach a page that does not display the primary navigation menu, you will have to hit the “Back” button in your browser to access the main menu.
Using breadcrumbs when pages have multiple categories
Breadcrumb trails have a linear structure, so using them will be difficult if your pages can’t be classified into neat categories. Deciding whether to use breadcrumbs largely depends on how you’ve designed your website hierarchy. When a lower-level page is (or can be put) in more than one parent category, breadcrumb trails are ineffective, inaccurate and confusing to the user.
Breadcrumb Navigation Design Considerations
When designing a breadcrumb navigation scheme, keep several things in mind. Let’s take a look at some questions that might arise when you’re working with breadcrumbs.
What should be used to separate link items?
The commonly accepted and most recognizable symbol for separating hyperlinks in breadcrumb trails is the “greater than” symbol (>). Typically, the > sign is used to denote hierarchy, as in the format ofParent category > Child category.
Other symbols used are arrows pointing to the right, right angle quotation marks (») and slashes (/).
The choice depends on the aesthetics of the website and the type of breadcrumb used. For example, for path-based breadcrumbs in which the links do not necessarily have a hierarchical relationship to each other, using a “greater than” symbol may not convey their relationship accurately.
How big should it be?
You don’t want your breadcrumbs to dominate the page. A breadcrumb trail functions merely as an aid to users (a convenience); its size should convey this to users and thus should at least be smaller, or less prominent, than the primary navigation menu.
A good rule of thumb to follow when sizing your breadcrumb trail is that itshouldn’tbe the first item that grabs the user’s attention when arriving on a page.
Where should breadcrumbs be located?
Breadcrumb trails are usually displayed in the top half of the page, below the primary navigation menu if a horizontal menu layout is used.
Breadcrumb Showcase
Now that we’ve discussed the who, what, when, where, why and hows of breadcrumb trails, we should take a look at some live examples. In the following section, you’ll find a few examples of great websites that use breadcrumb trails.
1. Classic Text-Based Breadcrumbs
TypePad Design Assistant
NASA
Nestle uses a breadcrumb trail whose text is significantly smaller than the text on the rest of the page, effectively making it unobtrusive.
Marchand de Trucs
Bridge 55
Overstock.com uses the standard “greater than” symbol for its attribute-based breadcrumb trail. Checkboxes for product attributes are used so that users can uncheck them to filter them out.
2. Replacing “>” with Other Symbols
TechRadar UK and BP use right-pointing triangles.
PSDTUTS and Martique use slashes.
Mouse to Minx uses a right-angled quotation mark to denote page hierarchy.
Jakob Nielsen’s Alertbox uses right-pointing arrows.
Target uses semi-colons (:) for separators.
3. Beyond Simple Text Links
One current trend in breadcrumb design basically says, “Breadcrumbs don’t have to be simple”. In these designs, you’ll see beautifully styled breadcrumbs that integrate well with the overall design.
Grooveshark
Yahoo! TV
IDEO
Apple Store
Coolspotters
Devlounge
LottaNZB
Pixelpoodle
guardian.co.uk
4. Breadcrumbs for Multi-Step Processes
Statement Tracker uses a breadcrumb trail to indicate the steps involved in registering for an account, as well as a progress indicator.
Flickr uses a breadcrumb trail to indicate the number of sections in the Flickr tour.
5. Breadcrumbs with Sub-Navigation
Here are some examples of breadcrumb trails whose links, when clicked on or hovered over, open a sub-navigation panel that lists additional attributes or locations.
MarketWatch has a fly-out sub-navigation menu that appears when you hover over a breadcrumb link.
Profoto has a unique breadcrumb trail: clicking on a breadcrumb link opens an area below it that gives users additional attributes to select from.
Cranfield University has a similar fly-out breadcrumb scheme, which serves a dual function: as an location indicator for the user and as a robust and interactive secondary navigation scheme.
Lonely Planet also has a fly-out breadcrumb trail in which you can change attributes.
Clicking on a breadcrumb link takes you to that item’s page, while clicking on the downward-pointing arrow opens additional options.
MSDN has a breadcrumb trail that opens a scrollable sub-navigation list when the user hovers over a link.
Wowhead has a multi-level sub-navigation scheme.
6. Interactive Breadcrumbs
Delicious lets you remove items in the breadcrumb trail of keyword tags to help you quickly find bookmarks.
7. Experimental Examples
Booreiland uses a breadcrumb-style. navigation scheme for its primary menu, allowing visitors to quickly understand what they’re currently viewing.
User interface designer Aen Tan of AEN UI talks about a design pattern called “Tabcrumbs,” a navigation scheme that combines tabs and breadcrumbs.
Jacob Gubeis a Web developer/designer and author of Six Revisions, a blog on Web development and design. If you want to connect with the author, you can follow him on Twitter.
面包屑导航(BreadcrumbNavigation)这个概念来自童话故事“汉赛尔和格莱特”，当汉赛尔和格莱特穿过森林时，不小心迷路了，但是他们发现在沿途走过的地方都撒下了面包屑，让这些面包屑来帮助他们找到回家的路，所以，一个“面包屑”（或“面包屑导航”）是一个辅助导航的形式，揭示了用户在网站或Web应用程序的位置。
Delicious.com
通常，您可以找到网站有大量的内容，以分层方式组织的面包屑。你也可以看到他们的Web应用程序中有多个步骤，它们的功能类似一个进度条。以最简单的形式，面包屑是横向排列的符号（>）“大于”分隔的文本链接;符号表示该页面，相对于它旁边的页面链接。
在这篇文章中，我们将探讨的网站上使用面包屑和面包屑路径应用到自己的网站的一些最佳做法。
这里只是一些使用面包屑导航的好处。
1、方便用户
主要用于面包屑提供给用户浏览一个网站的辅助手段。作为用户寻找路径的一种辅助手段，能方便他们定位方向和导航
2、减少点击或操作，返回到更高级别的网页
而不是使用浏览器的“后退”按钮或网站的主导航返回到一个更高层次的页面，减少用户的点击次数
3、通常不占用屏幕空间
因为他们通常是水平方向和白风格，面包屑不需占用页面上很大的空间。这样做的好处是，他们几乎没有内容过载方面的负面影响。
4.降低跳出率
面包屑导航可以是一个伟大的方式来吸引首次细读后查看登陆页面网站的访问者。例如，假设到达用户通过谷歌搜索页面上，看到一个面包屑的线索可能诱使用户点击到更高级别的页面，以查看相关的利益主题。这反过来，降低了整体的网站跳出率。
使用面包屑导航是一个相当简单的事情，让我们一起来看看一些常见的错误以避免。
1、当你不需要使用面包屑
实施面包屑的一个常见的????错误是：使用它们的时候没有意义。
在上面的例子，SLICETHEPIE网站让用户有太多的导航选项。 （1）（2）面包屑导航（3）辅助导航主导航，非常接近。在此应用程序的痕迹线索，因为坐在下方的较低级别的页面的二级导航，没有使用户更加方便。此外，在面包屑导航（“音乐”）第二级链接上点击带您回到第一个选项卡（“听”），错误地认为，第一个选项卡上一个更高的水平比其他两个是（“搜索“和”成名的艺术家 “）。
2、作为主要的导航使用面包屑
如前所述，使用面包屑导航是作为一个可选的协助方式。
范例
在上面的例子，MEFEEDIA不提供一个观看影片的主导航菜单。虽然有文本页脚部分中的链接导航，但没有导航菜单在页面的内容部分，使得它难以浏览到网站的其他部分。
范例
如果直接到达一个视频网页上 – 也就是说，通过谷歌搜索结果，例如 – 唯一的导航选项，你可能有痕迹线索。或者如果你已经在浏览一个网站的网页，并达到一个页面不显示主导航菜单，你会点击你的浏览器“返回”按钮，进入主菜单。
3、当页面有多个类别的使用面包屑
面包屑导航有线性结构，因此，如果您的网页不能被整齐的类别划分，将很难使用它们。决定是否使用面包屑，在很大程度上取决于你如何设计你的网站层级。当较低级别的页面（或可放）在多个父目录，面包屑路径无效的、不准确，会给用户造成混淆。
面包屑主要有三种类型
基于位置的面包屑显示用户在网站的层次结构。它们通常用于导航方案（通常超过两个级别）。在下面的例子中，每一个文本链接是一个网页，是比其右侧的一个高一个层次。
范例
基于属性的面包屑显示某个特定页面的属性。例如，在Newegg,面包屑显示一个特定的页面上的层级属性：范例
基于足迹的面包屑向用户展示他们已经浏览的轨迹，到达一个特定的页面。基于足迹的面包屑是动态的，因为它们显示到达当前页面上的用户已经访问过的网页。
当设计一个面包屑导航时，记住几件事情，
让我们看看一些可能出现的问题：
1、什么应该使用单独的链接项目？
普遍接受的和最知名的分离痕迹径路劲超链接的象征符号（>）“大于”。通常情况下，>符号是用来表示层级结构，在父目录的格式>子目类。
范例
使用其他符号，箭头指向正确的，正确的角度引号（“）和斜线（/）。
范例
不同符号的选择取决于该网站的美学设计和使用的痕迹。例如，面包屑过于醒目，干扰到了主导航，反而减弱了主导航
2、应该有多大？
不让你的面包屑主宰页面。面包屑导航的功能，只是作为一个用户（方便）的协助，其大小应传达给用户。因此，比起主导航菜单至少应较小或者不太突出。
范例
您的面包屑导航设计大小时要遵循的一个好的经验法则是：它不应该抓住用户的注意力。
3、应该在哪里设面包屑？
面包屑路径通常显示在页面的上半部分，而在主导航菜单的下面。
现在，我们已经讨论了面包屑是什么，什么时候，什么地方使用，为什么和面包屑路径展示，我们应该看看一些活生生的实例。在下面的章节中，你会发现伟大的网站，使用路径创新的几个例子。
1、经典页面的面包屑
TypePad Design Assistant
NASA
Nestle
Marchand de Trucs
Bridge 55
overstock.com
2、用其他符号代替“>”
TechRadar UK 和 BP 使用指向右边的三角形。
PSDTUTS和 Martique使用其他层级结构分隔的符号。
Mouse to Minx使用一个直角引号表示页面层级结构。
Jakob Nielsen’s Alertbox使用右箭头。
3、超越了简单的文字链接
面包屑设计目前的趋势来看，基本上说，“面包屑没有简单的”。在这些设计中，你会看到精美风格与整体设计以及集成的面包屑。
Grooveshark
Yahoo! TV
IDEO
Apple Store
Coolspotters
Devlounge
LottaNZB
Pixelpoodle
guardian.co.uk
4、为多步过程的面包屑
Statement Tracker使用一个面包屑的痕迹，表明在注册帐户所涉及的步骤，以及一个进度指示器。
5、分导航与面包屑
这里有一些例子的链接，点击时或划过的面包屑路径，打开一个子导航面板中列出的附加属性或地点。
MarketWatch
划过分导航菜单时，会出现一个面包屑链接悬停。
Profoto有独特的面包屑导航：面包屑链接，打开它下面的区域，为用户提供了额外的属性来选择。
Cranfield University已经出了类似的路径方案，具有双重功能：作为一个为用户的位置指标，作为一个强大的和互动的辅助导航。
Lonely Planet也有一个弹出的面包屑导航，您可以在其中更改属性。
.
面包屑链接点击该项目的页面，同时点击向下箭头，打开额外的选项。
MSDN的面包屑导航。 打开一个可滚动的子导航，列表的用户将鼠标悬停在链接。
6、互动式面包屑
Delicious.com让您删除项目中的关键字标签的痕迹线索，以帮助您快速找到书签。
范例
7、实验例子
Booreiland使用它的主菜单面包屑式导航，让游客迅速了解他们目前正在观看。
在很多大厦或是大型超市的入口处一般都会树立路牌之类的标识来为用户指明方向，而进入到内部后则会有另外更详细的导航指示，这两者之间的关系就像是网站的主导航与面包屑导航一样，前者为用户做一个大概的结构介绍，而后者则是在大架构之后的细节延伸。
面包屑导航可以很清晰的标明用户当前所处的位置以及可供返回的链接，这在很大程度上解决了用户在网站里迷失的问题。用户从庞杂的入口到最终的目的地，面包屑导航是按一种递减的结构来呈现的。
然而这种递减的结构的最上级应不应该包括“首页”这个最大最杂的入口呢？如果面包屑导航里没有“首页”的链接，那这算不算是完整的导航结构呢？
国内四大门户网站里，关于面包屑导航设计里，网易跟腾讯是有“首页”链接的，而新浪跟搜狐则是没有“首页”与链接的：
在包括“首页”链接的导航结构里又分为两种，其一是如网易般的在“首页”之前还有当前频道首页的链接，这点与新浪以及搜狐的设计是一样的；另一种则是如腾讯般的最上级直接就是“首页”，
如网易这般的面包屑导航设计可以突显出当前频道，但同时也存在另一个问题，那就是在同一个导航中出现了两个相同的链接，提供了更多入口的同时也让更容易让用户迷惑。
而在面包屑导航里不包括“首页”的设计则给人感觉怪异，就如同从一栋大厦门口进去到某个楼层的某个房间，结果出房间的时候发现指示牌里没有大厦门口的指示位置，只是指示到这一楼层的门口。
这样的设计不得不让人联想到，这是一种各自为政的作法，最大可能的把用户留在当前频道里，而不管用什么方法。
一个完整的面包屑导航应该是从最初的入口开始，也许很多用户的最初入口直接就是某个频道首页，但不可否认，面包屑导航的递减架构的最上级应该是如金字塔的最底层一样，而国内网站们的首页设计就如金字塔的最底层一样，信息庞大而复杂，网站首页是整站中聚集度最高的地方。
关于面包屑导航的结构呈现，你有什么更好的想法？
本文来自：www.prower.cn/interaction/1283
★ 网页设计论文
★ 网页设计心得体会
★ 网页设计求职信
★ 网页设计心得体会
★ 笔试网页设计
