編者注：面包屑是我們熟悉的導航工具。它們通常出現(xiàn)在頁面內容上方，以告知您的位置。它小巧，方便，通用，簡單。然而，即使這樣的UI控件在設計上也非常優(yōu)雅。我們今天談談面包屑?

作為輔助導航系統(tǒng)，面包屑可以幫助用戶清楚地找到他們的網(wǎng)站。這個詞來自一個童話故事的孩子，他帶著面包屑返回家中，網(wǎng)頁上的面包屑也是幫助用戶找到自己位置的UI控件。

面包屑告訴用戶他們在路徑中的位置，今天的文章將探討如何設計一個有用的Web面包屑，以通過最佳實踐顯示正確使用面包屑。

面包屑導航提供了可用性

作為視覺指南，面包屑揭示了用戶的網(wǎng)頁層次結構。因此，面包屑成為用戶了解網(wǎng)站背景信息的重要途徑，幫助用戶理解以下問題的答案：

·我在哪里？面包屑允許用戶根據(jù)整個站點的級別知道它們的位置。

·我還能去哪兒？面包屑提高了整個網(wǎng)站的可搜索性，面包屑的存在揭示了整個網(wǎng)站的結構，用戶了解網(wǎng)站的其他部分。

·我應該瀏覽更多嗎？面包屑顯示該網(wǎng)站有更多內容可供瀏覽，并鼓勵用戶瀏覽更多內容。反過來，面包屑的出現(xiàn)降低了網(wǎng)站的跳出率。

減少操作次數(shù)

從可用性的角度來看，面包屑減少了用戶跳轉到高級頁面的操作次數(shù)，從而避免了用戶使用瀏覽器的后退按鈕以及翻找的復雜交互來查找高級頁面。

占地面積小

面包屑的設計元素占用頁面上的少量空間。它基本上以帶有鏈接的文本形式存在，通常只有一行。

面包屑不會打擾用戶

這種小型設計元件占用的空間很小，但給用戶帶來的便利遠遠大于可能出現(xiàn)的問題和問題。

你什么時候使用面包屑？

是否要在網(wǎng)站中使用面包屑主要取決于網(wǎng)站的結構。查看您的站點地圖或整體結構圖，并分析使用面包屑是否可以改善站點內不同類別和目錄中用戶的導航：

·當您的站點中具有定義明確，組織良好的多級線性結構時，您應該使用面包屑。例如，一個擁有各種產(chǎn)品的電子商務網(wǎng)站，面包屑非常有用。

·當站點沒有邏輯清晰的層次結構時，請勿使用面包屑。

面包屑的類型

面包屑是基于網(wǎng)站的邏輯結構而存在的導航組件?？梢愿鶕?jù)位置，路徑或基于屬性顯示它們。

基于位置的面包屑

基于位置的面包屑設計通常反映了網(wǎng)站的結構特征。它們直接向訪問者顯示站點的層次結構，其中包含多個級別（通常超過2個級別）。這種分層顯示的面包屑對于從外部來源（例如搜索引擎）進入網(wǎng)站的用戶具有明顯的指導作用。

在下面的BestBuy頁面中，面包屑顯示產(chǎn)品頁面的層次關系。

基于路徑的面包屑

基于路徑的面包屑通常被稱為“歷史足跡”，它不顯示網(wǎng)站的結構，而是顯示特定頁面的訪問者的完整路徑。此痕跡路徑不是靜態(tài)的，而是動態(tài)生成的?；诼窂降拿姘加袝r可以幫助用戶，但有時它們會讓用戶感到困惑。 —有些用戶在瀏覽路徑過于荒謬時瀏覽網(wǎng)站，這種基于路徑的面包屑將幫助他們記錄，無需瀏覽歷史記錄，或使用瀏覽器的后退按鈕返回特定位置。此外，這種基于路徑的面包屑對于一次到達特定位置的用戶來說是無用的。

以下是使用基于路徑的面包屑導航的示例和原則：

基于屬性的面包屑

這種基于屬性的面包屑在電子商務網(wǎng)站中是常見的，并且產(chǎn)品通常基于類別和屬性被組織成不同的子類別?；趯傩缘姆诸愂褂脩舾菀桌斫猱a(chǎn)品和產(chǎn)品之間的關系，提供更多不同的瀏覽路徑。

與TM Lewin上的此頁面一樣，面包屑顯示特定頁面的產(chǎn)品，產(chǎn)品根據(jù)特定屬性進行組織：

層次結構還是歷史？

根據(jù)實際經(jīng)驗，在大多數(shù)情況下，面包屑仍然適合顯示等級制度而不是瀏覽歷史。因此，基于位置和屬性的面包屑被更廣泛地使用，并且基于路徑的面包屑相對罕見。

面包屑導航的最佳實踐

當您開始設計面包屑導航時，應牢記以下幾點：

1.不要使用面包屑而不是網(wǎng)頁的主導航系統(tǒng)

面包屑只是一種輔助導航系統(tǒng)，無法取代主導航系統(tǒng)。請記住，它是次要選項，僅為方便用戶而用于到達快速位置鏈接系統(tǒng)的其他級別。

2.不要將當前頁面鏈接添加到面包屑

最后一層面包屑是當前頁面，這個項目不應該在面包屑中鏈接，因為它只用于顯示定位，它沒有任何意義。

3.使用分隔符

在面包屑中，分隔不同級別的最常見方式是大于符號（>），其通常由“父類別”>使用。子類和rdquo ;.當然，分隔符的使用不僅限于此，有箭頭（→），而且使用書名（»），也有使用斜杠（//）。使用哪個分隔符通常取決于整體風格和設計師的偏好。

4.選擇合適的尺寸和間距

在設計過程中應仔細考慮尺寸和間距，不同的面包屑水平之間應有足夠的間距，以確保用戶識別。當然，您不希望面包屑占用頁面上太多空間。如果面包屑比頂部導航大，它看起來非常尷尬。

5.不要讓它成為視覺焦點

面包屑本身是一個輔助導航，如果你使用過于花哨的字體和引人注目的顏色，它將使它看起來像一個壓倒性的，太引人注目。它不應該是瀏覽過程中用戶的視覺焦點。下面的面包屑也不錯，但它太引人注目，甚至可以引起用戶的注意甚至是頂部導航。

谷歌的面包屑設計并不引人注目，但用戶仍然可以很好地使用它。

6.不要在移動頁面上使用面包屑

如果您覺得要在移動頁面上使用面包屑，則意味著您的移動網(wǎng)頁設計存在問題：可能是網(wǎng)站太復雜（嵌套級別太深），因此，它不會匹配移動終端的使用。為了解決這個問題，您應該嘗試簡化整個系統(tǒng)，以確保手機上沒有出現(xiàn)面包屑。

結論

面包屑使用戶更容易瀏覽整個站點，返回上一頁，并找到對整個站點結構有意義的相關產(chǎn)品。它的功能并不復雜，它的易用性是它的主要功能，所以不要使面包屑復雜化。

« 通過數(shù)字化的產(chǎn)品和服務，各個領域的更新?lián)Q代和升級的軟實力獲得了4個大獎 | 廣告系統(tǒng)設計：交通促銷 »