https://www.uisdc.com/breadcrumbs-for-websites-design
什麼時候使用麪包屑？
是否要在網站中使用麪包屑，主要取決於網站的結構。看看你的網站地圖或者整體的結構圖，分析使用麪包屑能否提高用戶在網站內部不同類別、目錄下導航是否方便：
·當你的網站內擁有分類明晰、組織明確的多層次線性結構的時候，你應當使用麪包屑。比如一個擁有種類繁多產品的電子商務網站，麪包屑就相當有用。
·當網站不具備邏輯清晰的層次結構的時候，就不要使用麪包屑。
麪包屑的類型
麪包屑是基於網站的邏輯結構而存在的導航組件，它可以基於位置、路徑來展示，也可以基於屬性而存在。
基於位置的麪包屑
基於位置的麪包屑設計通常都能很好的反映網站的結構特徵。它們直接將網站的層次結構展現在訪客面前，其中包含多個層級（級別通常超過2層）。這種層級展示性的麪包屑對於從外部來源（比如搜索引擎）進入網站的用戶而言，具有明顯的指引性作用。
基於路徑的麪包屑
通常也被稱爲“歷史足跡”，它展現出來的並非是網站結構，而是訪客抵達特定頁面的完整路徑。這種麪包屑路徑並非是靜態的，而是動態生成的。基於路徑的麪包屑有時候會對用戶有所幫助，但是有的時候還是會讓用戶感到迷惑——有的用戶瀏覽網站的時候瀏覽路徑過於天馬行空，這種基於路徑的麪包屑會幫助他們記錄，無需翻看歷史，也不無需使用瀏覽器的返回按鈕來返回特定位置。另外，這種基於路徑的麪包屑對於一次就抵達特定位置的用戶而言毫無用處。
基於屬性的麪包屑
這類基於屬性的麪包屑常見於電子商務類網站，產品常常基於類別和屬性而組織到不同的子目錄中，基於屬性的分類讓用戶更容易理解產品和產品之間的關係，提供了更多不同的瀏覽路徑。
就像 TM Lewin 的這個頁面，麪包屑展現出的是特定頁面對應產品，而產品是按照某個屬性來組織的：
層級還是歷史？
根據實際經驗，絕大多數的情況下，麪包屑還是適合展現層級機構而非瀏覽歷史。因此，基於位置和屬性的麪包屑應用更加廣泛，基於路徑的麪包屑相對少見的多。
麪包屑導航最佳實踐
當你開始設計麪包屑導航的時候，應當謹記下面的事情：
1、不要使用麪包屑來替代網頁主要的導航系統
麪包屑只是一個輔助導航系統，它無法替代主要的導航系統。請記住，它是僅僅是爲了用戶方便的次要選項，用來抵達其他層級的快速定位鏈接系統。
2、不要將當前頁鏈接加到麪包屑中
麪包屑的最後一個層級是當前的頁面，而這一項在麪包屑中是不應該加上鍊接的，因爲它只起到展示定位的作用，沒有任何意義。
3、使用分隔符
在麪包屑中，用來分隔不同層級最常見的是大於符號(>)，常見的使用方法是“父類別 > 子類別”。當然，分隔符的使用並不拘泥於這一種，有使用箭頭（→）的，還有使用書名號（»）的，也有使用斜槓（//）的。使用哪種分隔符通常取決於整體風格和設計師的喜好。
4、選擇合適的尺寸和間距
在設計的時候應當仔細考慮尺寸和間隔大小，不同的麪包屑層級之間應當有足夠的間距，確保用戶能夠識別。當然你也不希望麪包屑佔據頁面太多的空間，如果麪包屑比頂部導航還要大，看起來就非常尷尬了。
5、不要讓它成爲視覺焦點
麪包屑本身是一個輔助導航，如果使用過於花哨的字體和醒目的色彩，會使得它顯得喧賓奪主，過於抓人眼球。它不應該是瀏覽過程中用戶的視覺焦點。下面的麪包屑設計並不差，但是它太過於醒目，甚至比頂部導航還能引起用戶注意力。
Google 的麪包屑設計並不搶眼，但是用戶依然能夠很好的使用它。
6、不要在移動端頁面上使用麪包屑
如果你覺得自己的移動端頁面上要使用麪包屑的話，那就意味着你的移動端網頁設計出現問題了：可能是網站太複雜（嵌套層級過深），而這樣一來，就不符合移動端的使用場景了。爲了解決問題，你應當試圖簡化整個體系，確保麪包屑不會出現在手機上。
結語
麪包屑讓用戶可更加便捷地瀏覽整個網站，回溯到上級頁面，尋找相關的產品，它對於整個網站結構是有意義的。它的功能並不複雜，增加易用性是它的主要作用，所以千萬不要將麪包屑複雜化。