網(wǎng)站面包屑 提升用戶(hù)體驗(yàn)， 鼓勵(lì)用戶(hù)更深入地了解您網(wǎng)站的層次結(jié)構(gòu)，同時(shí)還告訴游客正是他們?nèi)魏谓o定的頁(yè)面上。谷歌的 面包屑模式 是另一個(gè)有價(jià)值的理由設(shè)置面包屑。但設(shè)計(jì)因素始終是棘手的，因此有助于學(xué)習(xí)的例子和收集意見(jiàn)。這些都是我最喜歡的面包屑的風(fēng)格，他們應(yīng)該提…
網(wǎng)站面包屑 提升用戶(hù)體驗(yàn)， 鼓勵(lì)用戶(hù)更深入地了解您網(wǎng)站的層次結(jié)構(gòu)，同時(shí)還告訴游客正是他們?nèi)魏谓o定的頁(yè)面上。谷歌的 面包屑模式 是另一個(gè)有價(jià)值的理由設(shè)置面包屑。但設(shè)計(jì)因素始終是棘手的，因此有助于學(xué)習(xí)的例子和收集意見(jiàn)。
這些都是我最喜歡的面包屑的風(fēng)格，他們應(yīng)該提供新的設(shè)計(jì)項(xiàng)目的一個(gè)很好的起點(diǎn)。
Wayfair的網(wǎng)站上做了很多的權(quán)利，他們的整個(gè)UX是驚人的一頁(yè)一頁(yè)。有一件事我真的很喜歡是他們的面包屑的風(fēng)格，因?yàn)樗皇翘螅膊荒芴?，不突兀無(wú)論是。
你會(huì)發(fā)現(xiàn)在商品頁(yè)面上，并且這些屑 類(lèi)別頁(yè)面 ，使他們跟著你整個(gè)網(wǎng)站的周?chē)＿@使您可以從任何詳細(xì)頁(yè)面跳了兩個(gè)類(lèi)別。
而面包屑酒吧里用不同的背景色導(dǎo)航下自己的小部分。不礙眼，但不難發(fā)現(xiàn)無(wú)論是。一個(gè)偉大的設(shè)計(jì)風(fēng)格和我個(gè)人的最?lèi)?ài)之一。
另一個(gè)明顯的一提的是谷歌，因?yàn)樗麄兲雒?nbsp; 令人難以置信的工作UX。你會(huì)發(fā)現(xiàn)大多數(shù)谷歌的產(chǎn)品與面包屑頁(yè)面分層和最好的之一是 谷歌的支持 網(wǎng)站。
他們的支持頁(yè)面上的一切，從架構(gòu)分析和搜索控制臺(tái)工具提供建議。每一頁(yè)都有面包屑和面包屑，這些占據(jù)了類(lèi)似的空間作為頁(yè)面標(biāo)題所以他們清晰可見(jiàn)。
同樣注意到這些鏈接是如何很好地融合在一起，而不跳下頁(yè)。他們覺(jué)得在設(shè)計(jì)上非常自然，這應(yīng)該永遠(yuǎn)是你的面包屑的目標(biāo)。
3. MSDN文檔
有一個(gè)在一個(gè)真正獨(dú)特的面包屑功能 MSDN文檔 ，我真的很喜歡。它具有所有典型的設(shè)計(jì)功能，如箭頭圖標(biāo)和分類(lèi)鏈接，但在鏈中的最后一個(gè)環(huán)節(jié)有額外的頁(yè)面定制的下拉菜單。
我從來(lái)沒(méi)見(jiàn)過(guò)這種在任何痕跡的設(shè)計(jì)，但它給用戶(hù)非常有價(jià)值的。通常它會(huì)需要其他的導(dǎo)航菜單來(lái)訪問(wèn)這些鏈接，但與像微軟網(wǎng)站有這么多的網(wǎng)頁(yè)經(jīng)過(guò)。
且不說(shuō)文檔可以是相當(dāng)復(fù)雜的，所以它不是為創(chuàng)建路徑最簡(jiǎn)單的東西。這種技術(shù)是輝煌的，非常值得使用，如果您有您的網(wǎng)站上復(fù)雜的層次結(jié)構(gòu)。
4.蘋(píng)果
在蘋(píng)果網(wǎng)站上我見(jiàn)過(guò)噸的面包屑的跨多頁(yè)這樣的網(wǎng)店頁(yè)面和產(chǎn)品頁(yè)面。但是，這引起了我的眼睛一個(gè)小細(xì)節(jié)是 頁(yè)腳鏈接區(qū)域 具有高于其底部鏈接一個(gè)小面包屑。
蘋(píng)果是一個(gè)巨大的公司，擁有大量的頁(yè)面和資源。這面包屑會(huì)是值得加入對(duì)頁(yè)面的頂部太多，但它肯定不會(huì)傷害到正在接近底部。
我會(huì)鼓勵(lì)設(shè)計(jì)師嘗試了這一點(diǎn)，看看它是如何工作的。頁(yè)腳面包屑肯定不是常態(tài)，但他們與視覺(jué)導(dǎo)航幫助。
5. TECHRADAR
我發(fā)現(xiàn)大部分的面包屑通常是在公司網(wǎng)站或電子商務(wù)商店。但是，博客往往有自己的面包屑也和一個(gè)很好的例子是 TECHRADAR文章頁(yè)面。
每個(gè)路徑是非常小的特色，直接鏈接到頭部類(lèi)別和文章的標(biāo)題的副本。對(duì)于這種類(lèi)型的博客這是艱難的，因?yàn)闆](méi)有太多層次的證明面包屑。
但這個(gè)效果很好，如果你沒(méi)有其他地方加入文章的類(lèi)別到頁(yè)面上。
6. TUTS加
對(duì)于更詳細(xì)的面包屑設(shè)計(jì)檢查出 TutsPlus博客。每篇文章還提供包括初級(jí)和次級(jí)的類(lèi)別頁(yè)面的最頂部小面包屑。
我喜歡這樣的設(shè)計(jì)很多，因?yàn)樗匀坏厝诤系巾?yè)面的標(biāo)題。因此，不是在面包屑，并在標(biāo)題標(biāo)簽復(fù)制標(biāo)題的，所以<H1>航向是面包屑的一部分此結(jié)合它全部為一個(gè)元件。
請(qǐng)注意，這并不正確使用谷歌的模式，因此不會(huì)在搜索面包屑出現(xiàn)。但考慮到幾乎沒(méi)有影響CTR我很看重設(shè)計(jì)和頁(yè)面易用性遠(yuǎn)遠(yuǎn)超過(guò)搜索引擎優(yōu)化的好處（或缺乏）。
7. COOLSPOTTERS
傳統(tǒng)的面包通常堅(jiān)持使用，如斜線或右箭頭支架幾個(gè)文字符號(hào)（>）。這些工作，因?yàn)樗麄円呀?jīng)使用了幾十年和用戶(hù)都熟悉他們。
但是，我總是喜歡看其他的面包屑設(shè)計(jì)趨勢(shì)像 Coolspotters。他們使用的是具有內(nèi)置的鏈接元素箭頭定制面包屑鏈接。
你可以找到大量的 開(kāi)源面包屑風(fēng)格 就像這些為自己的網(wǎng)站。這是一個(gè)偉大的方式來(lái)爵士樂(lè)這個(gè)非常傳統(tǒng)的頁(yè)面元素。
8.市場(chǎng)觀察
返樸歸真是在線新聞網(wǎng)站 市場(chǎng)觀察。他們的所有的 內(nèi)部崗位 配備面包屑資產(chǎn)凈值右箭頭圖標(biāo)非常小的文本。
在這種情況下，我認(rèn)為，小文效果很好。這不正是 難以 用面包屑，但他們不覺(jué)得小，比頁(yè)面的其余部分不太顯著。
博客和新聞網(wǎng)站與小面包更好的工作，因?yàn)檎嬲闹攸c(diǎn)是內(nèi)容。不過(guò)這是很好的適合他們的地方，這設(shè)計(jì)是一個(gè)很好的例子。
9.亞馬遜
每個(gè)人都喜歡亞馬遜自己龐大的庫(kù)存和免費(fèi)送貨。但他們也有一個(gè)夢(mèng)幻般的網(wǎng)站，有沒(méi)有辦法，我能越過(guò)他們的面包屑設(shè)計(jì)。
許多 產(chǎn)品的網(wǎng)頁(yè) 有近十分頂部導(dǎo)航一組面包屑。這始終是超長(zhǎng)的，因?yàn)閬嗰R遜的類(lèi)別為深。這是有價(jià)值的，讓消費(fèi)者了解哪些類(lèi)別可能是值得瀏覽，極具設(shè)計(jì)/站長(zhǎng)學(xué)習(xí)亞馬遜的龐大的產(chǎn)品結(jié)構(gòu)。
但是，如果你的每個(gè)產(chǎn)品頁(yè)面上向下滾動(dòng)，你會(huì)發(fā)現(xiàn)一個(gè)“產(chǎn)品信息”或暢銷(xiāo)書(shū)目錄“產(chǎn)品的詳細(xì)信息”一節(jié)。
此功能使用面包屑鏈接，以顯示該產(chǎn)品已經(jīng)銷(xiāo)售最好的，并鼓勵(lì)參觀者通過(guò)點(diǎn)擊這些相關(guān)的類(lèi)別。
亞馬遜的面包屑是令人欽佩的冗長(zhǎng)所以他們值得我們學(xué)習(xí)的，如果你有一個(gè)非常深層次的站點(diǎn)。
大量的在線DIY /工藝品電子商務(wù)網(wǎng)站Etsy的不斷推進(jìn)自己的設(shè)計(jì)。它始建于2005年，并期待在現(xiàn)場(chǎng)，現(xiàn)在你可以看到他們已經(jīng)取得了過(guò)去10多年的一些大的變化。
如果檢查出任何 分類(lèi)頁(yè)面 ，你會(huì)發(fā)現(xiàn)在左上角的小面包。這些都不是身份顯赫相比，側(cè)欄導(dǎo)航這真的感覺(jué)就像是主要的搜索方式。
但是一個(gè)很好的補(bǔ)充作用是總項(xiàng)目的類(lèi)別內(nèi)上市。Etsy的列舉了許多項(xiàng)目總?cè)绾卧诿總€(gè)SUBCAT銷(xiāo)售為你深入挖掘現(xiàn)場(chǎng)。
有一件事我會(huì)抱怨是缺乏在產(chǎn)品頁(yè)面上的面包屑。這似乎是一個(gè)真正監(jiān)督到UI，我希望他們補(bǔ)充說(shuō)向前發(fā)展。
這面包屑設(shè)計(jì)不是特別漂亮，但它確實(shí)有一個(gè)特點(diǎn)，抓住了我的注意。
你會(huì)發(fā)現(xiàn)每一個(gè)附近的頂部“下一篇文章”鏈接 ，還將繼續(xù)交。所以感覺(jué)就像導(dǎo)航的一部分。這似乎直接旁邊的面包屑。
誰(shuí)與面包屑交互的用戶(hù)通常希望使這個(gè)額外的鏈接是有道理的這些類(lèi)別的面包屑四周挖。任何有興趣的Linux軟件可能想直接跳到該類(lèi)別中的下一篇文章。
咨詢(xún)電話
15050695302
13771112364
咨詢(xún)QQ
1309844028