面包屑是眾所周知的導(dǎo)航工具，它經(jīng)常出現(xiàn)在頁面內(nèi)容的頂部，告訴你你在哪里。它小巧、方便、普通、簡單。但是，即使是這樣的UI控件，在設(shè)計上也是很精致的。今天就來說說面包屑吧~

　　面包屑作為輔助導(dǎo)航系統(tǒng)，可以幫助用戶清晰定位自己的網(wǎng)站。這個詞來源于童話里帶著面包屑回家的孩子，網(wǎng)頁里的面包屑是幫助用戶找到自己位置的UI控件。

　　面包屑通過路徑顯示告訴用戶他們在哪里，今天的文章將討論如何設(shè)計一個可用的網(wǎng)頁面包屑，并通過最佳實踐展示面包屑的正確使用。

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

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

　　我在哪里？根據(jù)整個網(wǎng)站的層次結(jié)構(gòu)，面包屑可以讓用戶知道自己在哪里。還能去哪里？面包屑提高了整個網(wǎng)站的可搜索性。面包屑的存在揭示了整個網(wǎng)站的結(jié)構(gòu)，用戶也知道網(wǎng)站的其他部分是什么。應(yīng)該多瀏覽嗎？面包屑揭示網(wǎng)站有更多內(nèi)容可以探索，鼓勵用戶多瀏覽。面包屑的出現(xiàn)反過來降低了網(wǎng)站的跳轉(zhuǎn)率。

　　減少操作次數(shù)

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

　　占用空間小

　　寬度是一個設(shè)計元素，在頁面上占據(jù)很小的空間?；疽枣溄游谋镜男问酱嬖?，通常只有一行。

　　面包屑不會打擾用戶

　　這種小的設(shè)計元素占用的空間很小，但是給用戶帶來的便利卻比可能出現(xiàn)的問題和麻煩更多。

　　什么時候用面包屑？

　　網(wǎng)站是否使用面包屑主要取決于網(wǎng)站的結(jié)構(gòu)。看看你的網(wǎng)站地圖或者整體結(jié)構(gòu)圖，分析使用面包屑是否可以提高用戶在網(wǎng)站內(nèi)不同類別和目錄導(dǎo)航的便利性：

　　當(dāng)你的網(wǎng)站有一個多層次的線性結(jié)構(gòu)，有明確的分類和組織時，你應(yīng)該使用面包屑。例如，在一個產(chǎn)品種類繁多的電子商務(wù)網(wǎng)站中，面包屑是相當(dāng)有用的。當(dāng)網(wǎng)站沒有邏輯層次結(jié)構(gòu)時，不要使用面包屑。

　　面包屑的類型

　　廣度是基于網(wǎng)站邏輯結(jié)構(gòu)的導(dǎo)航組件，可以基于位置和路徑顯示，也可以基于屬性存在。

　　基于位置的面包屑

　　基于位置的面包屑設(shè)計通?？梢苑从尘W(wǎng)站的結(jié)構(gòu)特征。它們直接向訪問者展示網(wǎng)站的層次結(jié)構(gòu)，包括多個層次(通常超過2個層次)。這種層次化的面包屑對于從外部來源(如搜索引擎)進入網(wǎng)站的用戶有明顯的引導(dǎo)作用?；诼窂降拿姘?/p>

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

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

　　基于屬性的面包屑

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

　　等級制度還是歷史？

　　根據(jù)實踐經(jīng)驗，在大多數(shù)情況下，面包屑更適合展現(xiàn)等級制度而不是瀏覽歷史。因此，基于位置和屬性的面包屑被廣泛使用，而基于路徑的面包屑相對較少。

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

　　當(dāng)您開始設(shè)計面包屑導(dǎo)航時，您應(yīng)該記住以下幾點：

　　1.不要用面包屑代替網(wǎng)頁的主導(dǎo)航系統(tǒng)

　　面包屑只是輔助導(dǎo)航系統(tǒng)，不能代替主導(dǎo)航系統(tǒng)。記住，為了方便用戶，它只是一個次要選項，用于到達其他級別的快速定位鏈接系統(tǒng)。

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

　　面包屑的最后一級是當(dāng)前頁面，這個項目不應(yīng)該在面包屑中鏈接，因為它只起到展示和定位的作用，沒有任何意義。

　　3.使用分隔符

　　在面包屑中，用于分隔不同級別的最常見的面包屑大于符號(

　　)，常用的方法是“父類別”

　　子類別”。當(dāng)然，分隔符的使用并不限于此，包括箭頭()、書名()和斜線(//)。使用哪種分隔符通常取決于整體風(fēng)格和設(shè)計師的偏好。

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

　　設(shè)計時要仔細(xì)考慮大小和間距，不同面包屑層次之間要有足夠的間距，保證用戶能夠識別。當(dāng)然，你也不希望面包屑在頁面上占據(jù)太多空間。如果面包屑比頂導(dǎo)航大，看起來會很尷尬。

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

　　面包屑本身就是輔助導(dǎo)航。如果使用過于花哨的字體和醒目的顏色，會讓它顯得鋪天蓋地，過于醒目。應(yīng)該不是用戶在瀏覽時的視覺焦點。下面的面包屑設(shè)計還不錯，但是太顯眼了，比頂部導(dǎo)航更吸引用戶的注意力。Google的面包屑設(shè)計并不搶眼，但是用戶還是可以很好的使用。

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

　　如果你認(rèn)為你想在手機頁面上使用面包屑，說明你的手機深圳網(wǎng)頁設(shè)計有問題：可能是網(wǎng)站太復(fù)雜(嵌套層次太深)，不適合手機使用場景。為了解決問題，你要盡量簡化整個系統(tǒng)，保證手機上不出現(xiàn)面包屑。

　　標(biāo)簽

　　面包屑讓用戶更容易瀏覽整個網(wǎng)站，回到上級頁面，找到相關(guān)產(chǎn)品，對整個網(wǎng)站結(jié)構(gòu)有意義。它的功能并不復(fù)雜，主要功能是增加易用性，所以千萬不要把面包屑復(fù)雜化。