編者按：面包屑是我們熟知的一種導(dǎo)航工具，它們往往出現(xiàn)在頁面內(nèi)容的上方，告知你所處的位置。它小巧，方便，常見，且簡單。可是即便是這樣的UI控件，在設(shè)計上同樣是有講究的，今天咱們就來聊聊面包屑吧~
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
作為一種輔助導(dǎo)航系統(tǒng)，面包屑能夠幫助用戶清晰的定位到自己所在網(wǎng)站的位置。這個詞源自于童話中跟著面包屑回到自己家的孩子，而網(wǎng)頁中的面包屑也是幫助用戶找到自己位置的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.
面包屑通過路徑展示告知用戶他們所處的位置，而今天的這篇文章將會探討一個可用的網(wǎng)頁面包屑應(yīng)當(dāng)如何設(shè)計，通過最佳實踐展示面包屑的正確用法。
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.
面包屑導(dǎo)航提供可用性
Bread crumbs navigation provides availability
作為一種視覺指引，面包屑為用戶揭示出網(wǎng)頁的層次結(jié)構(gòu)，也正是因此，面包屑成為了用戶了解網(wǎng)站背景信息的重要途徑，幫助用戶了解下列問題的答案：
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:
?我在哪里？根據(jù)整個網(wǎng)站的層次，面包屑能讓用戶知道他們所處的位置。?我還能去哪里？面包屑提升了整個網(wǎng)站的可查找性，面包屑的存在揭示了整個網(wǎng)站的結(jié)構(gòu)，用戶也隨之明白網(wǎng)站還有哪些其他的部分。?是否應(yīng)當(dāng)瀏覽更多？面包屑揭示出網(wǎng)站有更多值得探索的內(nèi)容，鼓勵用戶瀏覽更多。反過來，面包屑的出現(xiàn)降低了網(wǎng)站的跳出率。
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.
減少操作次數(shù)
Reduce the number of operations
從可用性的角度上來看，面包屑減少了用戶跳轉(zhuǎn)到高層級頁面的操作數(shù)，這樣避免了用戶使用瀏覽器的返回按鈕和翻找導(dǎo)航尋找上級頁面的復(fù)雜交互。
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
面包屑這種設(shè)計元素在頁面上占用的空間相當(dāng)小，它基本都是以帶鏈接的文本的形式存在的，并且通常只有一行。
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
這個小小的設(shè)計元素占據(jù)的空間不大，但是給用戶帶來的便捷遠遠大于可能帶來的問題和困擾。
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?
是否要在網(wǎng)站中使用面包屑，主要取決于網(wǎng)站的結(jié)構(gòu)。看看你的網(wǎng)站地圖或者整體的結(jié)構(gòu)圖，分析使用面包屑能否提高用戶在網(wǎng)站內(nèi)部不同類別、目錄下導(dǎo)航是否方便：
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:
?當(dāng)你的網(wǎng)站內(nèi)擁有分類明晰、組織明確的多層次線性結(jié)構(gòu)的時候，你應(yīng)當(dāng)使用面包屑。比如一個擁有種類繁多產(chǎn)品的電子商務(wù)網(wǎng)站，面包屑就相當(dāng)有用。?當(dāng)網(wǎng)站不具備邏輯清晰的層次結(jié)構(gòu)的時候，就不要使用面包屑。
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
面包屑是基于網(wǎng)站的邏輯結(jié)構(gòu)而存在的導(dǎo)航組件，它可以基于位置、路徑來展示，也可以基于屬性而存在。
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
基于位置的面包屑設(shè)計通常都能很好的反映網(wǎng)站的結(jié)構(gòu)特征。它們直接將網(wǎng)站的層次結(jié)構(gòu)展現(xiàn)在訪客面前，其中包含多個層級（級別通常超過2層）。這種層級展示性的面包屑對于從外部來源（比如搜索引擎）進入網(wǎng)站的用戶而言，具有明顯的指引性作用。
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 的頁面中，面包屑將產(chǎn)品所在頁面的層級關(guān)系展現(xiàn)了出來。
In the following pages of BestBuy, breadcrumbs display hierarchical relationships on the pages of the product.
基于路徑的面包屑
Path based bread crumbs
基于路徑的面包屑通常也被稱為“歷史足跡”，它展現(xiàn)出來的并非是網(wǎng)站結(jié)構(gòu)，而是訪客抵達特定頁面的完整路徑。這種面包屑路徑并非是靜態(tài)的，而是動態(tài)生成的?；诼窂降拿姘加袝r候會對用戶有所幫助，但是有的時候還是會讓用戶感到迷惑——有的用戶瀏覽網(wǎng)站的時候瀏覽路徑過于天馬行空，這種基于路徑的面包屑會幫助他們記錄，無需翻看歷史，也不無需使用瀏覽器的返回按鈕來返回特定位置。另外，這種基于路徑的面包屑對于一次就抵達特定位置的用戶而言毫無用處。
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.