小小的麵包屑導航，表明了在錯綜複雜的網站層級結構中，用戶目前正處的某個位置。Inspirr網頁製作表示，雖然麵包屑導航的設計看似很簡單，不需要多少創新，但當中有很多很小的細節是需要注意的，否則會導致用戶在瀏覽網站過程感到非常費解。

網頁設計案例分析：麵包屑導航該如何設計才能加強網站用戶體驗?

麵包屑導航(Breadcrumb Navigation)這個概念是來自童話故事「Hanzel Und Gretyl」，當Hanzel和 Gretyl穿過森林不小心迷路時，他們通過在沿路走過的地方撒下麵包屑這一方式找到回家的路。而麵包屑導航的作用就是告訴訪問者他們在網站的位置及返回方式。

△ Postal Service Iceland網站使用麵包屑導航，有助於用戶明白當前所處位置。

麵包屑導航剛出現時，人們對它的存在感到非常疑惑，因為對於層級相對簡單且清晰的網站而言，即使不依賴麵包屑導航，單純依賴主導航來達到想要的目的。

△ Crafts Council網站的層級相對較簡單，即使不適用麵包屑導航，用戶同樣能很好地訪問網站。

話雖如此，隨着網站逐步成長並延伸出更多層級時，合理使用麵包屑導航能有助於通過搜索結果、新聞推送等方式訪問網站的用戶，快速了解他們目前的所處位置。

△ 「New England Journal of Medicine」網站的層級結構非常複雜，如果缺乏便於理解的明確標籤，訪問者不僅無法確切知道目前所處位置，如果想瀏覽其他相關文章更是會一籌莫展。

總言而之，對於層級結構相對簡單的網站，麵包屑導航的存在並不會起到多大的作用;如果網站擁有大量頁面、子類別，以及嵌套導航層級，麵包屑導航將成為訪客旅程中一個可靠的路標。

下面，Inspirr網頁製作將通過一些網頁設計案例，為大家簡單說說「麵包屑導航該如何設計才能加強網站用戶體驗」。

網頁設計案例一：Signal Iduna

網頁設計案例分析

Signal Iduna網站設計將麵包屑導航顯示於頁面的最頂部，放置於主導航和行動召喚(CTA)之間，不僅讓用戶更容易找到和理解，同時滿足用戶在期望的地方找到線索，確認自己的當前位置。

網頁設計案例二：European Commission

European Commission網頁設計案例分析

European Commission網站中，雖然當前頁面的父類別始終完整顯示，但該區塊的父類別被隱藏了，需要用戶點擊(激活)省略區域時便會出現整個麵包屑導航。從技術上說，這種方式可以很好地解決麵包屑導航過長的情況，但需注意當前頁面和麵包屑導航之間的視覺差異。

網頁設計案例三：ADAC

ADAC網頁設計案例分析

在ADAC案例中，使用了橫向麵包屑導航的概念，即下拉菜單允許用戶快速跳轉到類別中的其他區塊，以幫助他們可以快速訪問當前頁面的兄弟層級。

和其他導航選項一樣，橫向麵包屑導航不僅概述了用戶當前位置，還揭示區塊之間的關係;而不同之處在於，橫向麵包屑導航不需要太多空間，通常在很小的空間中就能傳達大量信息。

【最後】

雖然麵包屑導航設計不需要太多的創新，但是只要不同的設計模式和細節，就能製作出不一樣的麵包屑導航。

但為了確保麵包屑導航能發揮更大作用，網頁設計時需考慮以下這些重要設計指南：

▪ 麵包屑導航始終需要主導航的配合。

▪ 全局導航下，麵包屑導航的效果最好。

▪ 麵包屑導航可以出現在主標題的上方。

▪ 分隔符應該指向於右側。

▪ 麵包屑導航應該不滾動即可見。

▪ 避免使用「不可點擊」的麵包屑，並將所有麵包屑變成鏈接。

▪ 如果麵包屑導航位於標題上方，則可以刪除當前頁面的鏈接;否則，為了清晰起見，請在麵包屑中包含當前頁面。

▪ 如有需要，將使用手風琴導航顯示完整路徑。

▪ 當前頁面的父頁面應始終可見。

▪ 橫向麵包屑導航是一種不錯的網頁設計方式。