网站面包屑（breadcrumb）设计

一、什么是面包屑

A “breadcrumb” （or “breadcrumb trail”） is a type of secondary navigation scheme that 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 In Web Design： Examples And Best Practices》

［译］一个“面包屑”（或“面包线索”）是一个类型为二级导航方案［1］，揭示了网站或网页应用程序中用户的所在位置。这个词来自汉赛尔与格莱特童话故事［2］中，两个孩子丢下面包屑，形成一条小径回到自己的家。就像在童话，应用面包屑在现实世界的用户提供一种方法来跟踪路径返回到原来的着陆点。

——《在网页设计面包屑：实例和最佳做法》

面包屑是作为辅助和补充的导航方式（secondary navigation scheme）［3］，它能让用户知道在网站或应用中所处的位置并能方便地回到原先的地点。

二、 面包屑的现状及分类

很多著名的互联网公司在建站之初就采用了面包屑导航做为网站产品线的“标准配置”，现在被越来越多的行业网站所认可及采用。

1.基于用户所在的层级位置（Location-based）

基于位置的面包屑用于告知用户在当前网站中所在的结构层级。用在具有多级导航中。

网易新闻中心的面包屑导航案例

2.基于产品的属性（Attribute-based）

这种类型的面包屑常出现在具有大量类别产品和服务的网站中，如电子商务、购物网等。

阿里巴巴示例（所展示公司仅为案例，无其他用途）

3.基于用户的足迹（Path-based）

显示用户浏览的轨迹，面包屑之间没有明显的层级关系，只是展示用户从那个级别过来的。这种面包屑在一级导航方案不明确的网站适合，其他情况不建议采用。

三、 面包屑的好处

通过上面的案例研究以及面包屑的分类，我们可以看到采用面包屑功能的好处：

1.面包屑作为用户寻找路径的一种辅助手段，能方便他们定位和导航。

2.面包屑可以减少的用户返回上一级页面的所需的操作次数。

3.临时性，动态性，占用屏幕空间小，干扰性小。

4.降低网站访问者的总体跳出率。

当用户从别处链接到网页，或者从搜索引擎查找到网页，则面包屑的存在能帮助用户快速了解当前的层级位置，并引导用户查看网站的其余部分，减少了看完直接跳走的用户数量。