面包屑是我們熟悉的導(dǎo)航工具。它們通常出現(xiàn)在頁(yè)面內(nèi)容上方，以告知您的位置。它小巧，方便，通用，簡(jiǎn)單。然而，即使這樣的UI控件在設(shè)計(jì)上也非常優(yōu)雅。我們今天談?wù)劽姘?

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

面包屑告訴用戶他們?cè)诼窂街械奈恢?，今天的文章將探討如何設(shè)計(jì)一個(gè)有用的Web面包屑，以通過(guò)最佳實(shí)踐顯示正確使用面包屑。

面包屑導(dǎo)航提供了可用性

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

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

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

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

減少操作次數(shù)

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

占地面積小

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

面包屑不會(huì)打擾用戶

這種小型設(shè)計(jì)元件占用的空間很小，但給用戶帶來(lái)的便利遠(yuǎn)遠(yuǎn)大于可能出現(xiàn)的問(wèn)題和問(wèn)題。

你什么時(shí)候使用面包屑？

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

·當(dāng)您的站點(diǎn)中具有定義明確，組織良好的多級(jí)線性結(jié)構(gòu)時(shí)，您應(yīng)該使用面包屑。例如，一個(gè)擁有各種產(chǎn)品的電子商務(wù)網(wǎng)站，面包屑非常有用。

·當(dāng)站點(diǎn)沒(méi)有邏輯清晰的層次結(jié)構(gòu)時(shí)，請(qǐng)勿使用面包屑。

面包屑的類型

面包屑是基于網(wǎng)站的邏輯結(jié)構(gòu)而存在的導(dǎo)航組件。可以根據(jù)位置，路徑或基于屬性顯示它們。

基于位置的面包屑

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

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

基于路徑的面包屑

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

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

基于屬性的面包屑

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

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

層次結(jié)構(gòu)還是歷史？

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

面包屑導(dǎo)航的最佳實(shí)踐

當(dāng)您開始設(shè)計(jì)面包屑導(dǎo)航時(shí)，應(yīng)牢記以下幾點(diǎn)：

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

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

2.不要將當(dāng)前頁(yè)面鏈接添加到面包屑

最后一層面包屑是當(dāng)前頁(yè)面，這個(gè)項(xiàng)目不應(yīng)該在面包屑中鏈接，因?yàn)樗挥糜陲@示定位，它沒(méi)有任何意義。

3.使用分隔符

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

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

在設(shè)計(jì)過(guò)程中應(yīng)仔細(xì)考慮尺寸和間距，不同的面包屑水平之間應(yīng)有足夠的間距，以確保用戶識(shí)別。當(dāng)然，您不希望面包屑占用頁(yè)面上太多空間。如果面包屑比頂部導(dǎo)航大，它看起來(lái)非常尷尬。

5.不要讓它成為視覺(jué)焦點(diǎn)

面包屑本身是一個(gè)輔助導(dǎo)航，如果你使用過(guò)于花哨的字體和引人注目的顏色，它將使它看起來(lái)像一個(gè)壓倒性的，太引人注目。它不應(yīng)該是瀏覽過(guò)程中用戶的視覺(jué)焦點(diǎn)。下面的面包屑也不錯(cuò)，但它太引人注目，甚至可以引起用戶的注意甚至是頂部導(dǎo)航。

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

6.不要在移動(dòng)頁(yè)面上使用面包屑

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

結(jié)論

面包屑使用戶更容易瀏覽整個(gè)站點(diǎn)，返回上一頁(yè)，并找到對(duì)整個(gè)站點(diǎn)結(jié)構(gòu)有意義的相關(guān)產(chǎn)品。它的功能并不復(fù)雜，它的易用性是它的主要功能，所以不要使面包屑復(fù)雜化。

« 關(guān)于產(chǎn)品的秘密：我們想在我們的網(wǎng)站和公共賬戶上說(shuō)些什么？ | 今天圍繞攻擊的頭條新聞?wù)诖蜷_用戶時(shí)間之戰(zhàn) »