網(wǎng)站面包屑導航設(shè)計技巧大科普

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

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

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

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

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

如果把信息層級全部展現(xiàn)在用戶面前，就會形成上面的這種tab套tab的形式，使得導航臃腫不堪，占據(jù)頁面很大的空間?？墒侨绻覀儼延脩絷P(guān)心的導航內(nèi)容提取出來，就會得到下面的結(jié)構(gòu)：

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

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

2 合并導航層級

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

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

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

3.隱藏部分導航

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

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

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

4.優(yōu)化形式

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

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

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

B.將復雜的層級單獨處理

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

5.打磨UI

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

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

6、精簡導航層級

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

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

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

8、避免重復主導航的形式

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

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

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

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

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

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

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

文章題目：網(wǎng)站面包屑導航設(shè)計技巧大科普
網(wǎng)頁URL：http://www.muchs.cn/news1/172901.html

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

廣告

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