淺談網(wǎng)站建設(shè)中面包屑導(dǎo)航的運(yùn)用

面包屑導(dǎo)航在網(wǎng)站建設(shè)中的作用即跟我們?nèi)粘Ｉ钪械膶?dǎo)航系統(tǒng)有著共性，所謂的面包屑導(dǎo)航一詞來(lái)自漢賽爾與格萊特（又譯糖果屋）童話(huà)故事中，主人公沿路丟下面包屑，形成一條小徑，從而指引其回到自己的家中。因此，運(yùn)用在網(wǎng)站建設(shè)中，可以更好地指引用戶(hù)在網(wǎng)站上瀏覽內(nèi)容，提高用戶(hù)體驗(yàn)。其實(shí)，和童話(huà)故事主人公一樣，網(wǎng)站用戶(hù)也需要知道其在網(wǎng)站層次結(jié)構(gòu)中的位置，以使其在需要的情況下能直接瀏覽上一級(jí)頁(yè)面。小編將和大家分享面包屑導(dǎo)航應(yīng)用及其好實(shí)踐：什么是面包屑導(dǎo)航（What）、什么時(shí)候使用面包屑導(dǎo)航（When）和如何設(shè)計(jì)面包屑導(dǎo)航（How）。
一、面包屑導(dǎo)航有什么用？
面包屑導(dǎo)航作為有效的視覺(jué)輔助，能告訴用戶(hù)其在網(wǎng)站層次結(jié)構(gòu)中的位置。這種特性對(duì)用戶(hù)來(lái)說(shuō)是上下文信息的重要來(lái)源，可以幫助用戶(hù)找到以下問(wèn)題的答案：我在哪里？告訴用戶(hù)其在整個(gè)網(wǎng)站層次結(jié)構(gòu)中的位置。我能去哪里？用戶(hù)更能找到相關(guān)網(wǎng)站欄目和頁(yè)面。相比菜單欄，用戶(hù)通過(guò)清晰直觀的面包屑導(dǎo)航，更容易熟悉和了解網(wǎng)站結(jié)構(gòu)。我該去那里嗎？面包屑導(dǎo)航體現(xiàn)了網(wǎng)站的內(nèi)容價(jià)值，能鼓勵(lì)用戶(hù)繼續(xù)瀏覽網(wǎng)站。比如，用戶(hù)打開(kāi)電商網(wǎng)站某產(chǎn)品頁(yè)面時(shí)，該產(chǎn)品可能不是他想要的產(chǎn)品，但用戶(hù)也許想瀏覽其他同類(lèi)產(chǎn)品。通過(guò)面包屑導(dǎo)航，就能相應(yīng)地減少網(wǎng)站的總體跳出率。
1. 減少用戶(hù)行為次數(shù)
就適用性而言，面包屑導(dǎo)航減少了用戶(hù)訪問(wèn)上一級(jí)頁(yè)面本應(yīng)產(chǎn)生的行為次數(shù)。除了使用瀏覽器「后退」按鈕或網(wǎng)站主導(dǎo)航回到上一級(jí)頁(yè)面，用戶(hù)也可以使用面包屑導(dǎo)航。
2. 占用最少頁(yè)面空間
緊湊的結(jié)構(gòu)，不占用過(guò)多頁(yè)面空間，面包屑導(dǎo)航是一條橫向文字連接。好處在于，如有內(nèi)容過(guò)載的情況，其帶來(lái)的負(fù)面影響微乎其微。
3. 面包屑導(dǎo)航為用戶(hù)帶來(lái)零煩惱
人們可能沒(méi)有在意這個(gè)小小的設(shè)計(jì)元素，但沒(méi)人不明白面包屑導(dǎo)航，也沒(méi)人不會(huì)使用面包屑導(dǎo)航。
二、什么時(shí)候該用面包屑導(dǎo)航？
測(cè)試網(wǎng)站是否會(huì)得益于面包屑導(dǎo)航，有種好方法是構(gòu)建網(wǎng)站導(dǎo)航結(jié)構(gòu)的網(wǎng)站地圖或圖表，再分析面包屑導(dǎo)航是否能幫助用戶(hù)，提高其在同類(lèi)或不同目錄下的導(dǎo)航能力。你應(yīng)該使用面包屑導(dǎo)航的前提是，有大量?jī)?nèi)容存在于有線(xiàn)性或?qū)哟谓Y(jié)構(gòu)的網(wǎng)站分類(lèi)目錄中。所謂分類(lèi)目錄，是指網(wǎng)站內(nèi)容可以分類(lèi)呈現(xiàn)，這些類(lèi)別還可以繼續(xù)分為更多細(xì)分類(lèi)別。典型例子正如將大量產(chǎn)品合理地進(jìn)行分類(lèi)的電商網(wǎng)站。對(duì)于層次單一、沒(méi)有合理架構(gòu)或分類(lèi)的網(wǎng)站，則不推薦使用面包屑導(dǎo)航。
三、面包屑導(dǎo)航的分類(lèi)
面包屑導(dǎo)航可以按位置、路徑和屬性分為3類(lèi)。
1. 位置面包屑
位置面包屑導(dǎo)航體現(xiàn)的是網(wǎng)站結(jié)構(gòu)。其能輔助用戶(hù)了解網(wǎng)站層次結(jié)構(gòu)，并在有多層級(jí)（通常大于兩級(jí)）網(wǎng)站中導(dǎo)航。若用戶(hù)從別處鏈接（比如搜索引擎結(jié)果）進(jìn)入網(wǎng)站深層次頁(yè)面，這對(duì)用戶(hù)來(lái)說(shuō)非常有用。
2. 路徑面包屑
路徑面包屑（也稱(chēng)「歷史痕跡」）顯示用戶(hù)瀏覽至某特定頁(yè)面的所有頁(yè)面路徑。這類(lèi)面包屑導(dǎo)航鏈接通常是動(dòng)態(tài)產(chǎn)生的。有時(shí)，路徑面包屑很有用，但大多時(shí)候會(huì)令人困惑——因?yàn)橛脩?hù)瀏覽網(wǎng)站可能會(huì)從一個(gè)頁(yè)面突然跳到另一個(gè)頁(yè)面，非常地隨意。這類(lèi)無(wú)規(guī)律的瀏覽路徑并不能為用戶(hù)提供太大幫助，但倒可以用瀏覽器「后退」按鈕來(lái)輕松取代。此外，若用戶(hù)直接進(jìn)入某網(wǎng)站深層次頁(yè)面，那路徑面包屑也毫無(wú)用處。
3. 屬性面包屑
屬性面包屑對(duì)電商網(wǎng)站非常有用，其通過(guò)特定頁(yè)面或更常見(jiàn)的按產(chǎn)品類(lèi)別將大量頁(yè)面進(jìn)行分類(lèi)。這類(lèi)面包屑導(dǎo)航可以幫助用戶(hù)了解各類(lèi)產(chǎn)品之間的關(guān)系，也提供了另外一種導(dǎo)航方式。
4. 層次結(jié)構(gòu)還是瀏覽記錄？
面包屑導(dǎo)航的經(jīng)驗(yàn)法則是要展示網(wǎng)站層次結(jié)構(gòu)，而不是用戶(hù)瀏覽記錄。因此，推薦使用位置面包屑導(dǎo)航或?qū)傩悦姘紝?dǎo)航，而不用路徑面包屑導(dǎo)航。
四、面包屑導(dǎo)航設(shè)計(jì)的好實(shí)踐
當(dāng)設(shè)計(jì)面包屑導(dǎo)航時(shí)，要切記以下幾點(diǎn)：
1. 不要用面包屑導(dǎo)航替換主導(dǎo)航
面包屑導(dǎo)航應(yīng)作為一項(xiàng)額外功能，其不能直接替換原本有用的主導(dǎo)航菜單。要切記，面包屑導(dǎo)航是一項(xiàng)便捷功能，是輔助導(dǎo)航手段，是網(wǎng)站導(dǎo)航的另一種方法。
2. 當(dāng)前頁(yè)面的面包屑導(dǎo)航無(wú)須添加鏈接
面包屑導(dǎo)航（用戶(hù)當(dāng)前位置）最后一項(xiàng)不一定要顯示——如果你想讓它顯示，務(wù)必保證其無(wú)法點(diǎn)擊或操作。由于用戶(hù)已經(jīng)在當(dāng)前頁(yè)面，在面包屑導(dǎo)航中再添加鏈接就顯得多此一舉了。
3. 使用分隔符
分隔面包屑導(dǎo)航各級(jí)文字鏈接最醒目的符號(hào)是「大于號(hào)（>）」。通常，大于號(hào)（>）用來(lái)指代層次結(jié)構(gòu)，就像父目錄>子目錄這類(lèi)格式。其他可以使用的符號(hào)有右箭頭（→）、雙書(shū)名號(hào)（»）以及斜杠（/）。具體選擇哪個(gè)符號(hào)取決于網(wǎng)站設(shè)計(jì)美學(xué)和已使用的面包屑導(dǎo)航類(lèi)型。
4. 選擇恰當(dāng)?shù)某叽绾蛢?nèi)邊距
在設(shè)計(jì)時(shí)要仔細(xì)考慮目標(biāo)尺寸和內(nèi)邊距。面包屑導(dǎo)航各級(jí)文字間應(yīng)該留有足夠空間，否則用戶(hù)可能會(huì)覺(jué)得不好用。同時(shí)，面包屑導(dǎo)航不能在頁(yè)面中起支配作用，因此其不能比主導(dǎo)航菜單更顯著。
5. 不要讓其成為設(shè)計(jì)焦點(diǎn)
不要使用花哨的字體或絢麗的顏色，因?yàn)檫@樣會(huì)喧賓奪主，畢竟面包屑導(dǎo)航其主要目的不在于此。當(dāng)確定面包屑導(dǎo)航的大小和風(fēng)格時(shí)，經(jīng)驗(yàn)法則是要保證用戶(hù)進(jìn)入頁(yè)面后的第一關(guān)注點(diǎn)不是面包屑導(dǎo)航。
6. 手機(jī)設(shè)備上不要使用面包屑導(dǎo)航
若你在手機(jī)設(shè)備上需要通過(guò)面包屑導(dǎo)航，也許你會(huì)發(fā)現(xiàn)會(huì)出現(xiàn)故障。就手機(jī)上使用面包屑導(dǎo)航和相應(yīng)運(yùn)行環(huán)境而言，其可能的原因在于網(wǎng)站的過(guò)度復(fù)雜（網(wǎng)站層次結(jié)構(gòu)太深）。為解決這個(gè)問(wèn)題，應(yīng)該先思考如何簡(jiǎn)化，然后你就不需要面包屑導(dǎo)航了。
總結(jié)：對(duì)于網(wǎng)站建設(shè)中整體架構(gòu)復(fù)雜，內(nèi)容層次多的情況下，設(shè)置一個(gè)面包屑導(dǎo)航是極其有必要的，它能夠幫助用戶(hù)更加快捷精準(zhǔn)找到自己所在的網(wǎng)站位置，快速的瀏覽所需的內(nèi)容，提高網(wǎng)站適用性以及體驗(yàn)舒適度。

網(wǎng)頁(yè)名稱(chēng)：淺談網(wǎng)站建設(shè)中面包屑導(dǎo)航的運(yùn)用
鏈接URL：http://www.bm7419.com/news/48978.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專(zhuān)注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司；服務(wù)項(xiàng)目有網(wǎng)站建設(shè)、面包屑導(dǎo)航等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)