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