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

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

1. 通過面包屑來簡化導(dǎo)航結(jié)構(gòu)

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

一個門戶網(wǎng)站常見的結(jié)構(gòu)是首頁-頻道頁-專題頁-子專題-底層頁。如果我們想在門戶網(wǎng)站看NBA的視頻直播，那么我們來看下他的導(dǎo)航：

如果把信息層級全部展現(xiàn)在用戶面前，就會形成上面的這種tab套tab的形式，使得導(dǎo)航臃腫不堪，占據(jù)頁面很大的空間。可是如果我們把用戶關(guān)心的導(dǎo)航內(nèi)容提取出來，就會得到下面的結(jié)構(gòu)：

這就是清晰的面包屑導(dǎo)航。綜上，面包屑導(dǎo)航能夠讓復(fù)雜的層級結(jié)構(gòu)扁平化，使得導(dǎo)航更加輕盈。面包屑導(dǎo)航還有一些變體，是基于用戶線性操作邏輯衍生出來的。在無線端產(chǎn)品中應(yīng)用更為廣泛，因?yàn)橐苿釉O(shè)備的顯示區(qū)域有限，無力支撐龐大的導(dǎo)航結(jié)構(gòu)。在用戶點(diǎn)擊當(dāng)前導(dǎo)航內(nèi)容后，當(dāng)前導(dǎo)航消失進(jìn)去下一級導(dǎo)航，并提供返回按鈕。

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

2 合并導(dǎo)航層級

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

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

美團(tuán)把注冊登錄和個人信息等功能性導(dǎo)航和網(wǎng)站主導(dǎo)航做了合并處理，為網(wǎng)站首屏節(jié)約出了寶貴的空間。

3.隱藏部分導(dǎo)航

簡化導(dǎo)航結(jié)構(gòu)的第三種方法是把部分層級或者導(dǎo)航內(nèi)容隱藏起來，使得導(dǎo)航看上去輕便一些。

當(dāng)導(dǎo)航里的內(nèi)容特別多的時候，可以選擇把主要內(nèi)容留下，次要內(nèi)容隱藏的方法來處理。

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

4.優(yōu)化形式

有些時候，我們無法判斷用戶在瀏覽產(chǎn)品或網(wǎng)站時是否是線性思維，也無法對導(dǎo)航結(jié)構(gòu)進(jìn)行再精簡，那么我們怎樣讓導(dǎo)航再“瘦”那么一點(diǎn)呢。

A.將一維導(dǎo)航變?yōu)槎S導(dǎo)航

將一維導(dǎo)航轉(zhuǎn)化為二維導(dǎo)航，能夠有效的減少層疊導(dǎo)航帶給人的重復(fù)感和復(fù)雜感，能夠讓操作富有變化，進(jìn)而提升體驗(yàn)。

B.將復(fù)雜的層級單獨(dú)處理

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

5.打磨UI

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

企業(yè)網(wǎng)站首頁的導(dǎo)航UI上吸引了不少眼球，但是到了結(jié)果頁導(dǎo)航變成了幾乎沒有裝飾的效果，因?yàn)樵诮Y(jié)果頁，用戶主要是來瀏覽產(chǎn)品，所以導(dǎo)航的作用就弱了。

6、精簡導(dǎo)航層級

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

7、在面包屑中使用關(guān)鍵字

面包屑對于網(wǎng)站的SEO有著很大的影響作用，因此把握關(guān)鍵字的設(shè)置也許能為網(wǎng)站帶來更多的流量

8、避免重復(fù)主導(dǎo)航的形式

現(xiàn)在的電商網(wǎng)站都很熱衷于在小細(xì)節(jié)上做文章，他們的出發(fā)點(diǎn)是希望在細(xì)節(jié)中體現(xiàn)出優(yōu)良的用戶體驗(yàn)，就比如在原本簡單的面包屑中添加下拉菜單。網(wǎng)站方認(rèn)為這樣做能讓用戶在更短的時間內(nèi)找到自己需要的商品，但其實(shí)意義并不大。

9、關(guān)鍵詞統(tǒng)一，避免用詞重復(fù)

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

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

19、 面包屑的設(shè)計規(guī)范

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

企業(yè)網(wǎng)站面包屑導(dǎo)航的設(shè)計還要考慮到網(wǎng)站的屬性，針對的是什么類型的網(wǎng)站，是企業(yè)網(wǎng)站還是電商網(wǎng)站，還是平臺網(wǎng)站等等，相應(yīng)的做出一些調(diào)整就更好了。

本文題目：網(wǎng)站面包屑導(dǎo)航設(shè)計技巧大科普
標(biāo)題來源：http://m.newbst.com/news/172901.html

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

廣告

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