面包屑导航：最佳实践和范例

译文出处：http://www.cogu.cn/archives/65

本文翻译自：http://www.hongkiat.com/blog/breadcrumb-navigation-examined-best-practices-examples/

作者 Hongkiat Lim. 来自Graphics

面包屑导航条在设计开发过程中常被怱视

有些人会觉得它毫无必要，也有些人觉得它带来的麻烦远远大于它的价值。

事实上，面包屑导航条能够极大的增加网站的的可用性，面包屑提供了另一个角度的导航给用户，通过它用户能够了解到网站的层次结构，减少用户向根目录或父目录网页跳转过程的操作次数。

本文主要介绍几种目前常用的几种面包屑导航, 包括它们的重要性和如何最大限度的用好它们。本文包含30个介绍如何使用面包屑导航例子。记住，面包屑不会造就或毁掉你的网站，它就是能够增加用户的使用体验，增强网站的功能性。

面包屑类型

路径

基于路径的面包屑，记录了用户在当前站点的浏览步骤和路线。而且，用户可以访问之前的网页。纵观三种类型的面包屑，基于路径的面包屑导航是当下最流行的。原因是，路径面包屑导航类似于浏览器上的“前进”和“后退”按钮。对大多数网站来说，基于地址和属性的面包屑导航提供了更好的功能。

地址

基于地址的面包屑，指出用户当前所在网站层次结构中的位置。这种类型的面包屑常见于有两以上层次深度和内容的网站。随着浏览的加深，用户刚才浏览的页面或目录就会成为一个父页面。举个例子，一个用户在“Speak”页面，同时“What we do”页面是“Speak”页面的父页面，“Home”页面有事“What we do”的父页面。

Clearleft Ltd

属性

基于属性的面包屑，为用户指出网站里当前页面的属性和分类。常见于电商网站，商品不仅属于某种类别，而且还有本身的属性。如，一辆车可以是SUV，同时也有颜色（黑），年代（产于2010年）等属性。

Cars.com

为什么使用面包屑？

巨大的可用性
面包屑为用户轻松浏览网页提供多种手段。用户从一个页面跳转过来，面包屑能够使用户清楚他所出的位置和网站的结构。用户也可以毫无障碍的跳转到其他页面。
方便回溯
主导航不像面包屑那样提供回溯。回溯能够使用户浏览更过页面，停留更长时间。
减少多余的点击
面包屑让用户可以在网站不同层次的页面之间跳转，而不是使用浏览器的“前进”和“后退”按钮。此外，面包屑减少了用户返回主导航列表的次数。
为用户显示层次结构
主导航不会在所有页面上显示网站的层次结构。提供面包屑可以使用户在一个页面上看清楚整个网站的层次结构。
悦目
面包屑不但提供更好的易用性，而且它不会占用页面太多的空间。它在视图设计时便于实现，同时给用户提供很大的便利。
提供额外帮助
在某些情况下用户不知道如何使用主导航甚至不知道他们在找什么东西。提供面包屑使用户了解网站结构，从而更好的浏览网站。
降低流失率（跳出率）
通常情况下，面包屑比主导航能提供更详细的导航。所以，用户能获得更多的导航选项，用户有机会在网站内部轻松的回溯到其他级别的网页，降低用户流失率。
建立兴趣
当用户登陆一个已经感兴趣的网站。面包屑可以提供更多用户感兴趣的页面。

面包屑的最佳实践

在页面的顶端使用
面包屑最常用的地方就是页面的顶部。这样用户可以很方便的找到面包屑，并使用它。
持续使用
假如决定要使用面包屑，确保在整个网站的所有也面都有涉及。只有部分页面使用面包屑，会让用户混淆和错乱。 (一个很典型的例子就是亚马逊，他们在产品细览页面删除了面包屑)
优雅的降级
面包屑应始终开始于主页面，逐级标记到当前页面。因此，你的面包屑需要从最高级逐次降低到最低级，一次只降低一个级别。
使用适度的样式修饰
要使面包屑被注意，又不能太过耀眼。既要显眼，但又不能和主要内容混在一起，仅仅作为一个支持而已。找一个折中的办法，让面包屑不至于被忽略或太突显。
清晰分类页面
如果你有属于两个或两个以上类别下的网页，你可能不希望您的网站上使用的面包屑。因为含有两个或两个以上类别面包屑的页面，可能会困扰用户。一定要确保你的网站组织有序，且能通过面包屑组织。
清晰的分离每个级别
确保用户都能分辨出不同面包屑之间的级别。一般使用“大于号”（>）。或者使用（>>）（/）（→）. 如果使用纯文本，就最好使用这一个“»”。 (»比>>更合适)
突出当前页面
面包屑中最后一个目录的字体应使用不同的风格，以显示的表示这是当前正在被浏览的页面。如使用粗体、改变颜色或强调它。
不要让当前页面成为链接
不必给最下面的目录设置链接，因为当前页面已经展示出来了。在这儿创建链接会使用户混乱，尤其是当点击他们的时候没有跳转到任何新页面。
不要把面包屑当做页面标题
用面包写的最后一个目录做当前页面的标题不可取，用全部面包屑做标题页面不可取。
面包屑不能代替主导航
面包屑只能为主导航提供支持，绝不能代替主导航。应该始终让用户使用面包屑之前，去使用主导航。

面包屑的例子

Vitra Direct

Trek Bikes

Illy

SiteInspire

Mia and Maggie

Intridea

Design by Humans

Roxy

Blik

SitePoint

Target

Walmart

1-800-Flowers

BestBuy

Amazon.com

Barns & Noble

Lands’ End

Apple

Google

Chase

AbsolutePunk.net

Littman Bros. Lighting

Guardian.co.uk

AREA 17

Wufoo

Girl Scouts of Middle Tennessee

The Glasgow Collective

Firstborn

Bell Canada

Grooveshark

Devlounge

关于作者 – Shay Howe 是一位专业的网页和用户界面设计师，现在住在伊利诺伊州的芝加哥市。他在自己的博客上记录了一些关于网页设计的文章，欢迎大家在Twitter上回应他。请随时向他问好，呵呵。