在基于電子商務(wù)的網(wǎng)站中,面包屑導(dǎo)航可用于使人們更容易地有效定位產(chǎn)品。大多數(shù)人沒(méi)有他們想要的產(chǎn)品的確切名稱(chēng)。而是他們使用面包屑導(dǎo)航來(lái)找到滿(mǎn)足其確切要求的產(chǎn)品。 但是,面包屑導(dǎo)航并不需要始終具有相同的無(wú)聊結(jié)構(gòu)。它可以是以下三種類(lèi)型: 基于位置的面包屑 基于位置的面包屑導(dǎo)航在Web設(shè)計(jì)師中非常流行,因?yàn)樗苯佑绊懺L(fǎng)問(wèn)者的瀏覽體驗(yàn)。這使得訪(fǎng)問(wèn)者可以很清楚地知道訪(fǎng)問(wèn)者在網(wǎng)站上的位置或頁(yè)面在網(wǎng)站層次結(jié)構(gòu)中的位置。基于位置的面包屑導(dǎo)航用于內(nèi)容級(jí)別超過(guò)2的網(wǎng)站。

這種面包屑類(lèi)型的目的是幫助導(dǎo)航。 基于路徑的面包屑 這是另一種常見(jiàn)的導(dǎo)航導(dǎo)航類(lèi)型,指示用戶(hù)訪(fǎng)問(wèn)當(dāng)前頁(yè)面必須執(zhí)行的步驟。這種面包屑導(dǎo)航通常在訪(fǎng)問(wèn)者需要填寫(xiě)跨越兩個(gè)或更多頁(yè)面的表單的網(wǎng)站上看到。在這種面包屑式導(dǎo)航類(lèi)型中,訪(fǎng)問(wèn)者將可以看到他們之前訪(fǎng)問(wèn)過(guò)的頁(yè)面的鏈接,這可以確保他們朝著正確的方向前進(jìn)。但是,事實(shí)是,基于路徑的面包屑并不像“前進(jìn)”和“后退”按鈕那樣受歡迎。 基于屬性的面包屑導(dǎo)航 基于屬性的面包屑并非始終都遵循單個(gè)路徑。它僅用于描述特定頁(yè)面的屬性。這種面包屑式導(dǎo)航廣泛用于電子商務(wù)網(wǎng)站,在該網(wǎng)站上可以通過(guò)不同的路徑訪(fǎng)問(wèn)單個(gè)產(chǎn)品頁(yè)面(也稱(chēng)為分面導(dǎo)航)。
例如,可以通過(guò)三種或四種方式訪(fǎng)問(wèn)電子商務(wù)網(wǎng)站上冒險(xiǎn)書(shū)籍的登錄頁(yè)面,因此,您根本無(wú)法信任靜態(tài)面包屑導(dǎo)航,而是需要選擇基于歸因的面包屑導(dǎo)航。 面包屑導(dǎo)航的好處
#1方便導(dǎo)航 面包屑導(dǎo)航使用戶(hù)可以輕松導(dǎo)航網(wǎng)站。有些人甚至將其視為第二層導(dǎo)航系統(tǒng)。通過(guò)單擊它,訪(fǎng)問(wèn)者可以從一頁(yè)移動(dòng)到另一頁(yè),而無(wú)需他們一次又一次地使用“前進(jìn)”和“后退”按鈕。
#2更好的用戶(hù)體驗(yàn) 面包屑導(dǎo)航以積極的方式增加了整體用戶(hù)的體驗(yàn)。您不必花費(fèi)數(shù)小時(shí)來(lái)微調(diào)主導(dǎo)航,也不必對(duì)網(wǎng)站的主導(dǎo)航做一些根本性的事情,以使訪(fǎng)問(wèn)者可以輕松訪(fǎng)問(wèn)所有頁(yè)面,因?yàn)橛辛嗣姘际綄?dǎo)航即可處理這個(gè)問(wèn)題。
#3增加平均在網(wǎng)站上花費(fèi)的時(shí)間 由于面包屑包含指向同一層次結(jié)構(gòu)中其他頁(yè)面的鏈接,因此訪(fǎng)問(wèn)者很可能會(huì)發(fā)現(xiàn)它們很有趣,值得簽出。這將大大增加用戶(hù)在網(wǎng)站上花費(fèi)的時(shí)間。正如一些專(zhuān)家所相信的那樣,Google和其他搜索引擎正在使用跳出率,平均在頁(yè)面上花費(fèi)的時(shí)間等數(shù)據(jù)來(lái)確定網(wǎng)站的質(zhì)量,這意味著面包屑可以幫助您以一種或另一種方式在網(wǎng)上獲得更好的可見(jiàn)性。
#4減少無(wú)用的頁(yè)面瀏覽量 瀏覽量越多越好,對(duì)嗎?好吧,你不能再錯(cuò)了。我們需要更加關(guān)注平均在頁(yè)面上花費(fèi)的時(shí)間,而不是無(wú)用的頁(yè)面瀏覽量。現(xiàn)在,如果我們沒(méi)有面包屑導(dǎo)航,人們將不得不從一個(gè)區(qū)域跳到另一個(gè)區(qū)域,而無(wú)需他們?yōu)g覽中間的某些頁(yè)面。這將減少有時(shí)會(huì)干擾分析數(shù)據(jù)的無(wú)用頁(yè)面視圖的數(shù)量。
#5低跳出率 當(dāng)人們找不到他們一直在尋找的產(chǎn)品時(shí),他們會(huì)感到惱火。如果網(wǎng)站導(dǎo)航無(wú)法幫助人們找到信息,則可能導(dǎo)致訪(fǎng)問(wèn)者從網(wǎng)站反彈回來(lái)。解決跳出率低的問(wèn)題的有效方法之一是合并面包屑導(dǎo)航的想法。
#6反映了網(wǎng)站的層次結(jié)構(gòu) 有時(shí),人們無(wú)法識(shí)別頁(yè)面在網(wǎng)站層次結(jié)構(gòu)中的位置。大多數(shù)網(wǎng)站的主要導(dǎo)航都沒(méi)有提供有關(guān)頁(yè)面位置的任何提示,這就是我們應(yīng)該使用面包屑導(dǎo)航的原因。
#7有趣的視覺(jué) 面包屑導(dǎo)航不僅使人們更容易輕松地瀏覽網(wǎng)站,而且在美學(xué)方面也做出了巨大貢獻(xiàn)。

它不占用設(shè)計(jì)的大量空間,如果可以明智地使用它,則可以使界面看起來(lái)更加優(yōu)雅和優(yōu)美。 使用面包屑的缺點(diǎn) 好吧,每件好事都有陰暗面,面包屑導(dǎo)航也不例外。它也有自己的缺點(diǎn)。
#1令人困惑的 某些網(wǎng)站根本不需要另一層導(dǎo)航。是的,有些網(wǎng)站的導(dǎo)航是如此出色,以至于不需要面包屑導(dǎo)航。例如,一個(gè)簡(jiǎn)單的博客不需要面包屑,因?yàn)樗拇蠖鄶?shù)文章都可以通過(guò)主導(dǎo)航或搜索框進(jìn)行訪(fǎng)問(wèn)。
#2 笨拙當(dāng)您在平板電腦,智能手機(jī)等較小型設(shè)備上訪(fǎng)問(wèn)站點(diǎn)時(shí),面包屑導(dǎo)航通常看起來(lái)很笨拙。這會(huì)增加視覺(jué)上的混亂和笨拙,尤其是在觸摸電話(huà)設(shè)備上。
#3需要定期更新 如果基于Web應(yīng)用程序的網(wǎng)站包含面包屑式導(dǎo)航,可能會(huì)遇到麻煩。由于這些類(lèi)型的網(wǎng)站總是會(huì)更改其層次結(jié)構(gòu),因此面包屑可能會(huì)導(dǎo)致鏈接斷開(kāi)或?qū)Ш讲灰恢隆?
使用面包屑導(dǎo)航之前我們需要考慮的因素

#1太大太大 了面包屑導(dǎo)航的目的是方便導(dǎo)航,因此,它不應(yīng)主導(dǎo)設(shè)計(jì)。因此,您不應(yīng)使其看起來(lái)太大,否則可能使頁(yè)面的其他設(shè)計(jì)元素黯然失色。不要同時(shí)突出它。有些網(wǎng)站甚至使用灰色來(lái)使面包屑看起來(lái)不太突出,以免干擾界面的其他元素。
#2一致性 面包屑導(dǎo)航的設(shè)計(jì)和結(jié)構(gòu)應(yīng)在整個(gè)站點(diǎn)范圍內(nèi)保持一致,理想情況下,面包屑導(dǎo)航也應(yīng)與網(wǎng)站的現(xiàn)有設(shè)計(jì)和主題保持一致。面包屑的不一致使用只會(huì)使訪(fǎng)客感到困惑。
#3不要看起來(lái) 花哨的字體不應(yīng)使用花哨的字體,鮮艷的顏色或怪異的分隔符,因?yàn)樗鼈儠?huì)超出使用面包屑導(dǎo)航的目的。不要將其作為設(shè)計(jì)的重點(diǎn);只需確保很容易找到就可以了。無(wú)需過(guò)度設(shè)計(jì)。
#4使用分隔符 不同的面包屑級(jí)別之間應(yīng)該有足夠的間隙,否則人們可能會(huì)發(fā)現(xiàn)很難通過(guò)它導(dǎo)航。大多數(shù)設(shè)計(jì)師使用分隔符,例如Arrow,正斜杠,大于字符等,他們通過(guò)幫助人們識(shí)別不同的面包屑級(jí)別而又不費(fèi)力地斜視,而做得很好。 #5不要將當(dāng)前頁(yè)面包含在導(dǎo)航中 由于頁(yè)面上已經(jīng)有人,因此將當(dāng)前頁(yè)面的鏈接添加到面包屑導(dǎo)航?jīng)]有任何意義。這樣做弊大于利,因?yàn)樗鼤?huì)使讀者感到困惑。 因此,在嘗試為網(wǎng)站設(shè)計(jì)面包屑導(dǎo)航時(shí),需要考慮這些因素。
