網(wǎng)站的面包屑可以提高用戶體驗讓用戶深入訪問你的網(wǎng)站的各層次頁，同時也告訴游客他們正在瀏覽的網(wǎng)站定位。谷歌的面包屑導(dǎo)航模式非常精彩，并且是該網(wǎng)站設(shè)計的一個重要的組成部分。了解優(yōu)秀網(wǎng)站的面包屑設(shè)計作用是很微妙的，它有助于學(xué)習(xí)和思考。以下這些是我最喜歡的一些面包屑的風(fēng)格和他們提供給用戶超級棒的體驗是我想在作品中體現(xiàn)的關(guān)鍵。

1、WAYFAIR

Wayfair的網(wǎng)站做了很多正確的和他們的整個用戶體驗是驚人的頁面。有一件事我真正喜歡的是他們的面包屑式因為它不是太大，也不能太小，也不突兀。

你會發(fā)現(xiàn)這些面包屑產(chǎn)品頁面分類頁所以他們跟隨你整個網(wǎng)站圍繞。這讓你跳一類或兩任何詳細(xì)頁面。

和面包屑欄都有自己的小部分用不同的背景色的導(dǎo)航下。不張揚但不難找到。一個偉大的設(shè)計風(fēng)格和我個人的最愛之一。

2、谷歌的支持頻道

另一個明顯的提到谷歌因為他們知道難以置信的UX工作。你會發(fā)現(xiàn)在大多數(shù)谷歌產(chǎn)品面包屑與分層頁，其中最好的是谷歌支持站點

他們的支持頁面提供從圖式分析和搜索的控制臺工具，一切的建議。每一頁都有面包屑，這些屑占據(jù)類似的空間為頁標(biāo)題就清晰可見。

又注意到這些環(huán)節(jié)配合得很好沒有跳頁。他們很自然的設(shè)計，這應(yīng)該是你的面包屑的目標(biāo)。

3、MSDN文檔

有一個真正獨特的痕跡特征MSDN文檔我真的很喜歡。它具有所有典型的設(shè)計特點，如箭頭圖標(biāo)和分類鏈接，但在鏈的最后一環(huán)有一個額外的頁面自定義下拉。

我從來沒有見過這樣的任何痕跡的設(shè)計而對用戶是非常有價值的。它通常會需要一個導(dǎo)航菜單訪問這些鏈接，但是一個像微軟有太多的頁面去。

更何況文檔可以相當(dāng)復(fù)雜，所以它不是創(chuàng)造面包最簡單的東西。這種技術(shù)是輝煌的，值得如果你對你的網(wǎng)站有一個復(fù)雜的層次結(jié)構(gòu)的使用。

4、蘋果官網(wǎng)

我見過像網(wǎng)店頁面和產(chǎn)品頁面在多頁面包屑噸蘋果網(wǎng)站。但有一個小細(xì)節(jié)，引起了我的注意的是頁腳鏈接區(qū)在底部的鏈接的一個小的面包屑。

蘋果是一個有很多網(wǎng)頁和資源龐大的公司。這面包屑的價值將增加對頁面的頂部太但它肯定不會是底部附近的傷害。

我鼓勵設(shè)計師嘗試看看它是如何工作的。頁腳面包肯定不規(guī)范但他們幫助視覺導(dǎo)航。

5、TECHRADAR

面包屑，我發(fā)現(xiàn)大多數(shù)通常在公司網(wǎng)站或電子商務(wù)商店。但是博客往往有自己的面包和一個很好的例子是TechRadar第頁

每個面包屑很小具有直接鏈接到文章的標(biāo)題頭類及復(fù)印件。這種類型的博客來證明面包很艱難，因為沒有太多的層次。

但這個工程如果沒有另一個地方添加文章的類別到繪圖頁。

6、TUTSPLUS

一個更詳細(xì)的面包屑設(shè)計檢查tutsplus博客。每一篇文章有一個小的面包屑在頁面包括原發(fā)性和繼發(fā)性范疇的頂端。

注意這不適當(dāng)使用谷歌架構(gòu)，因此它不會出現(xiàn)在搜索著面包屑。但考慮到不影響CTR我價值的設(shè)計和網(wǎng)頁的可用性遠(yuǎn)遠(yuǎn)超過SEO的好處（或缺乏）。

7、COOLSPOTTERS

堅持傳統(tǒng)的面包屑和一些文字符號如斜杠或右箭頭支架通常（>）。這些工作，因為他們已經(jīng)使用了幾十年，用戶所熟悉的他們。

但我總是希望看到其他用戶的設(shè)計趨勢，如coolspotters。他們使用了自定義面包屑鏈接鏈接元素箭。

你可以找到很多開放源碼的面包屑的風(fēng)格就像這些為你自己的網(wǎng)站。這是爵士樂這個非常傳統(tǒng)的頁面元素的一個好方法。

8、MARKETWATCH

返樸歸真是在線新聞網(wǎng)站市場觀察。他們所有的內(nèi)部職位面包屑導(dǎo)航功能右箭頭圖標(biāo)相當(dāng)小的文本。

在這種情況下，我認(rèn)為小文字作品。這不完全是困難的使用面包屑，但是他們覺得比其他的頁面越不重要。

博客和新聞網(wǎng)站的工作更好地與小的面包屑，因為真正的重點是內(nèi)容。還是很適合他們的地方，這樣的設(shè)計是一個很好的例子。

9、亞馬遜

每個人都喜歡Amazon的龐大的庫存和免費送貨。但他們也有一個很好的網(wǎng)站，沒有辦法我可以超過他們的面包屑設(shè)計。

許多產(chǎn)品頁面有一套非常接近頂部導(dǎo)航面包屑。這是超級長因為亞馬遜的類別得到深。這對于消費者看到這類可能值得瀏覽是有價值的，有價值的設(shè)計師/站長研究亞馬遜龐大的產(chǎn)品結(jié)構(gòu)。

但如果你向下滾動，在每個產(chǎn)品頁面你會發(fā)現(xiàn)一個“產(chǎn)品信息”或“產(chǎn)品詳細(xì)信息”部分的暢銷書清單。

此功能使用面包屑鏈接顯示在產(chǎn)品銷售最好的，鼓勵訪問者點擊這些相關(guān)的類別。

亞馬遜的面包屑是非常漫長的，它們的價值如果你與一個很深的層次有一個網(wǎng)站研究。

10、ETSY

現(xiàn)在有大量的在線工藝品DIY電子商務(wù)網(wǎng)站，而Etsy是不斷推進(jìn)自己的設(shè)計。它成立于2005，現(xiàn)在你可以看到他們在過去的10年里取得了一些大的變化。

如果你檢查出任何分類頁面你會在左上角找到小面包。這些沒有突出的側(cè)邊欄導(dǎo)航相比，真的感覺像是主要的搜索方式。

但是一個很好的補充作用是總項目內(nèi)的類別列表。Etsy列出多少項出售每一subcat你深入挖掘現(xiàn)場。

我唯一的抱怨是缺乏對產(chǎn)品頁的面包屑。這似乎是一個真正的UI監(jiān)督我希望他們加入，前進(jìn)。

11、LINUXINSIDER 網(wǎng)站面包屑

這面包屑設(shè)計不是特別漂亮但卻有一個特點，吸引了我的注意。

你會看到一個“下一條”鏈接在每頂LinuxInsider郵報。這似乎直接下到用戶覺得這樣的導(dǎo)航部分。

用戶與面包屑通常要圍繞這些碎屑類所以這額外的鏈接是有意義的。任何人在Linux軟件感興趣的話可以跳轉(zhuǎn)到該類別中的下一篇文章吧。