编者按：面包屑是我们熟知的一种导航工具，它们往往出现在页面内容的上方，告知你所处的位置。它小巧，方便，常见，且简单。可是即便是这样的UI控件，在设计上同样是有讲究的，今天咱们就来聊聊面包屑吧~
Editor's note: bread crumbs are known as a navigation tool that often appears above the content of a page and tells you where you are. It is compact, convenient, common and simple. But even such UI controls are equally elegant in design, so let's talk about crumbs today
作为一种辅助导航系统，面包屑能够帮助用户清晰的定位到自己所在网站的位置。这个词源自于童话中跟着面包屑回到自己家的孩子，而网页中的面包屑也是帮助用户找到自己位置的UI控件。
As an auxiliary navigation system, breadcrumbs can help users to clearly navigate to the location of their website. The word comes from the children of the fairy tale who follow the crumbs to their home, and the crumbs in the web are the UI controls that help the user find his place.
面包屑通过路径展示告知用户他们所处的位置，而今天的这篇文章将会探讨一个可用的网页面包屑应当如何设计，通过最佳实践展示面包屑的正确用法。
Bread crumbs through the path display to inform the user where they are today, and this article will discuss one of the available "crumbs should be how to design, best practice by displaying the correct usage of bread crumbs.
面包屑导航提供可用性
Bread crumbs navigation provides availability
作为一种视觉指引，面包屑为用户揭示出网页的层次结构，也正是因此，面包屑成为了用户了解网站背景信息的重要途径，帮助用户了解下列问题的答案：
As a visual guide, bread crumbs to reveal the structure of the web page hierarchy for the user, it is therefore, bread crumbs has become an important way for users to understand the site background information, help users understand the answers to the following questions:
・我在哪里？根据整个网站的层次，面包屑能让用户知道他们所处的位置。・我还能去哪里？面包屑提升了整个网站的可查找性，面包屑的存在揭示了整个网站的结构，用户也随之明白网站还有哪些其他的部分。・是否应当浏览更多？面包屑揭示出网站有更多值得探索的内容，鼓励用户浏览更多。反过来，面包屑的出现降低了网站的跳出率。
Where am I? Depending on the level of the site, bread crumbs allow users to know where they are. Where else can I go? Bread crumbs enhance the search for the entire site. The presence of breadcrumbs reveals the structure of the entire site, and the user will then see what other parts of the site are. And should we browse more? Breadcrumbs reveal that websites have more content to explore and encourage users to browse more. Conversely, the appearance of breadcrumbs reduces the chance of jumping out of the site.
减少操作次数
Reduce the number of operations
从可用性的角度上来看，面包屑减少了用户跳转到高层级页面的操作数，这样避免了用户使用浏览器的返回按钮和翻找导航寻找上级页面的复杂交互。
From the usability point of view, the bread crumbs reduced the number of users to jump to the top level page operation, thus avoiding the user use the browser's back button and find the page navigation for the complex interaction.
占用空间小
Small space occupation
面包屑这种设计元素在页面上占用的空间相当小，它基本都是以带链接的文本的形式存在的，并且通常只有一行。
Bread crumbs, this design element takes up quite little space on the page, and it basically exists in the form of linked text, and usually only one line.
面包屑不会给用户带来困扰
Crumbs don't bother users
这个小小的设计元素占据的空间不大，但是给用户带来的便捷远远大于可能带来的问题和困扰。
The small design elements occupy little space, but the convenience brought to the user is far greater than the possible problems and problems.
什么时候使用面包屑？
When do you use crumbs?
是否要在网站中使用面包屑，主要取决于网站的结构。看看你的网站地图或者整体的结构图，分析使用面包屑能否提高用户在网站内部不同类别、目录下导航是否方便：
Whether you want to use breadcrumbs on your web site depends largely on the structure of the site. Look at your web site map or the overall structure chart, and analyze whether bread crumbs can make it easier for users to navigate within different categories and directories within the site:
・当你的网站内拥有分类明晰、组织明确的多层次线性结构的时候，你应当使用面包屑。比如一个拥有种类繁多产品的电子商务网站，面包屑就相当有用。・当网站不具备逻辑清晰的层次结构的时候，就不要使用面包屑。
Well, when you have a clear and well organized hierarchical linear structure within your web site, you should use breadcrumbs. For example, a web site that has a wide variety of products can be quite useful. And do not use breadcrumbs when the site does not have a logical hierarchy.
面包屑的类型
The type of bread crumbs
面包屑是基于网站的逻辑结构而存在的导航组件，它可以基于位置、路径来展示，也可以基于属性而存在。
Breadcrumbs are navigation components based on the logical structure of the web site, which can be displayed based on location, path, or based on attributes.
基于位置的面包屑
Location based bread crumbs
基于位置的面包屑设计通常都能很好的反映网站的结构特征。它们直接将网站的层次结构展现在访客面前，其中包含多个层级（级别通常超过2层）。这种层级展示性的面包屑对于从外部来源（比如搜索引擎）进入网站的用户而言，具有明显的指引性作用。
Location based bread crumbs design usually reflects the structural characteristics of the site. They direct the hierarchy of the web site to visitors, which includes multiple levels (usually more than 2 layers). This hierarchical display of bread crumbs has an obvious guiding role for users from outside sources (such as search engines) who enter the site.
在下面 BestBuy 的页面中，面包屑将产品所在页面的层级关系展现了出来。
In the following pages of BestBuy, breadcrumbs display hierarchical relationships on the pages of the product.
基于路径的面包屑
Path based bread crumbs
基于路径的面包屑通常也被称为“历史足迹”，它展现出来的并非是网站结构，而是访客抵达特定页面的完整路径。这种面包屑路径并非是静态的，而是动态生成的。基于路径的面包屑有时候会对用户有所帮助，但是有的时候还是会让用户感到迷惑——有的用户浏览网站的时候浏览路径过于天马行空，这种基于路径的面包屑会帮助他们记录，无需翻看历史，也不无需使用浏览器的返回按钮来返回特定位置。另外，这种基于路径的面包屑对于一次就抵达特定位置的用户而言毫无用处。
Path based bread crumbs are often referred to as "historical footprints". They show not the site structure, but the full path of visitors to a particular page. This bread crumb path is not static but dynamic. Based on the path of the bread crumbs sometimes to help users, but sometimes it will let users feel confused when some users browse the web browsing path is the path of a powerful and unconstrained style bread crumbs, will help them based on records, no need to look at the history, it is required to use the browser's back button to return to the specific location. In addition, this path based bread crumbs are useless for users arriving at specific locations at once.