面包屑導航設計的好可以增加網站的體驗度，增加轉化率，同時也可以讓用戶明白當前所在的位置，并且快速的返回到入口，下面就由創新互聯的小編給大家說一下面包屑導航設計的一些技巧，它可以幫助設計師更好的完成網站的設計。

網站作為信息的集合體，要覆蓋海量的資源，從首頁到二級頁再到專題頁進而底層頁等等等等，信息的層級多且繁雜，所以就容易形成tab套tab再套 tab的局面。那么作為導航塑身的第一步，我們要做的就是把這負責的結構盡量簡化，讓導航變得輕盈起來，或者至少看起來不那么臃腫。

1. 通過面包屑來簡化導航結構

面包屑通常水平地出現在頁面頂部，一般會位于標題或頁頭的下方。它們提供給用戶返回之前任何一個頁面的鏈接(這些鏈接也是能到達當前頁面的路徑)，在層級架構中通常是這個頁面的父級頁面。面包屑提供給用戶回溯到網站首頁或入口頁面的一條快速路徑。

一個門戶網站常見的結構是首頁-頻道頁-專題頁-子專題-底層頁。如果我們想在門戶網站看NBA的視頻直播，那么我們來看下他的導航：

如果把信息層級全部展現在用戶面前，就會形成上面的這種tab套tab的形式，使得導航臃腫不堪，占據頁面很大的空間。可是如果我們把用戶關心的導航內容提取出來，就會得到下面的結構：

這就是清晰的面包屑導航。綜上，面包屑導航能夠讓復雜的層級結構扁平化，使得導航更加輕盈。面包屑導航還有一些變體，是基于用戶線性操作邏輯衍生出來的。在無線端產品中應用更為廣泛，因為移動設備的顯示區域有限，無力支撐龐大的導航結構。在用戶點擊當前導航內容后，當前導航消失進去下一級導航，并提供返回按鈕。

當然，使用面包屑來簡化導航結構也是有條件的，不是所有的導航層級都可以用這種方法來簡化。面包屑導航更符合用戶線性思維導向下的操作邏輯，例如，用戶想要看NBA直播，那么他一定不關心娛樂圈發生了哪些八卦，也不care足球或者網球有什么新聞，CBA，CUBA他可能也不十分在意，那么面包屑的線性導航就可以滿足用戶的需求。或者是由于空間或者設備原因，我們無法提供更為詳細的導航，而采用線性簡化導航的處理方法。

2 合并導航層級

導航的龐大往往是由于層級過多導致，那么減少層級的一種有效方法就是合并導航層級，例如把二級和三級導航合并，就減少了三級導航，讓導航輕便一些。

圖片庫包括動態圖片和靜態圖片，每個分類下面又有小的分類，這樣的導航層級在產品中十分常見，略顯臃腫。那么通過合并層級就可以把導航精簡到兩級。

美團把注冊登錄和個人信息等功能性導航和網站主導航做了合并處理，為網站首屏節約出了寶貴的空間。

3.隱藏部分導航

簡化導航結構的第三種方法是把部分層級或者導航內容隱藏起來，使得導航看上去輕便一些。

當導航里的內容特別多的時候，可以選擇把主要內容留下，次要內容隱藏的方法來處理。

當頁面空間有限，無法容納更多層級的時候，可以選擇把次層級隱藏收起，鼠標滑過或者點擊后觸發此層級的方法處理

4.優化形式

有些時候，我們無法判斷用戶在瀏覽產品或網站時是否是線性思維，也無法對導航結構進行再精簡，那么我們怎樣讓導航再“瘦”那么一點呢。

A.將一維導航變為二維導航

將一維導航轉化為二維導航，能夠有效的減少層疊導航帶給人的重復感和復雜感，能夠讓操作富有變化，進而提升體驗。

B.將復雜的層級單獨處理

當某一層級的導航內容豐富到一定程度，他就可以充當一個獨立控件來單獨設計了，他們可以作為頁面的元素來單獨存在，可能看起來都不太像是導航。

5.打磨UI

說到讓導航輕盈，UI是最為常用的手法，在此筆者不做太多的陳述，但是需要注意的是，導航的輕盈與否與導航所處的頁面以及重要程度有很大關系。比如在首頁，用戶需要對頁面有整體認知的情況下，導航的UI就不能改太輕薄，而是應該先聲奪人，讓用戶直接注意，并瀏覽發現所求;同樣的，當用戶進入到相關的頁面開始瀏覽時，導航的作用就是路燈和司南，這時的導航就不如在首頁時那樣重要，那么導航就需要輕輕的、悄悄的在用戶旁邊隨時等待著被注意并使用。

企業網站首頁的導航UI上吸引了不少眼球，但是到了結果頁導航變成了幾乎沒有裝飾的效果，因為在結果頁，用戶主要是來瀏覽產品，所以導航的作用就弱了。

6、精簡導航層級

精簡面包屑導航不僅可以增加用戶體驗，更有利于搜索引擎的抓取，盡量把面包屑導航控制在四個層級以內，對用戶視覺和seo都有非常大的好處。

7、在面包屑中使用關鍵字

面包屑對于網站的SEO有著很大的影響作用，因此把握關鍵字的設置也許能為網站帶來更多的流量

8、避免重復主導航的形式

現在的電商網站都很熱衷于在小細節上做文章，他們的出發點是希望在細節中體現出優良的用戶體驗，就比如在原本簡單的面包屑中添加下拉菜單。網站方認為這樣做能讓用戶在更短的時間內找到自己需要的商品，但其實意義并不大。

9、關鍵詞統一，避免用詞重復

面包屑導航存在的目的之一就是為了讓用戶分辨出在網站的位置，更好的返回，所以，用詞精簡直接也是面包屑導航設計的技巧要遵守的原則。也就是說，網站的每個頁面都有唯一的導航，這樣能減少用戶產生不信任等疑問，在用詞方面，我們也要盡量避免那些有歧義的關鍵詞，大家可以看看京東，他們就做的非常不錯。

面包屑導航的存在就是為了讓用戶能最直觀的了解自己所處的位置，因此，用詞精簡直接并且唯一，是面包屑必須遵守的原則。也就是說，每一個產品頁面都有屬于它的唯一導航，這樣能減少用戶在購物時產生的疑問。在用詞方面也要盡量避免有歧義的用詞，京東的面包屑導航在這方面做的就不夠好

19、 面包屑的設計規范

最常采用的面包屑的樣式：橫向的文字鏈接，由大于號>分開。這個符號也暗示了它們之間的層次關系。根據你的用戶的認知及專業水平，在有必要的情況下，可以在面包屑父子級之間增加下劃線以告訴用戶這里是可以點擊的。

企業網站面包屑導航的設計還要考慮到網站的屬性，針對的是什么類型的網站，是企業網站還是電商網站，還是平臺網站等等，相應的做出一些調整就更好了。

本文題目：網站面包屑導航設計技巧大科普
標題來源：http://m.kartarina.com/news/172901.html

網站建設、網絡推廣公司-創新互聯，是專注品牌與效果的網站制作，網絡營銷seo公司；服務項目有面包屑導航等

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯