實例圖說麵包屑導航如何幫你簡化網站的導航結構

仲介交易 HTTP://www.aliyun.com/zixun/aggregation/6858.html">SEO診斷 淘寶客 雲主機 技術大廳

導航是web產品中應用最廣泛的基礎組成之一，其主要功能是引導訪客瞭解到網站的內容結構進而找到目標資訊。 作為基礎組成之一，導航看起來簡單，但卻頁面設計中最複雜繁瑣的工序之一。 因為作為站長我們想要網站結構更簡潔明瞭、更快速的為我們的使用者提供資訊。 但是問題出現了，簡化了巡覽列，訪客可能無法快速瞭解到網站結構以及自己的位置，產生困惑;複雜了，導航臃腫不堪，層巒疊嶂，既不美觀也不好用。 那麼我們應該如何處理呢?我們可以使用麵包屑導航來讓導航更方便，同時簡化我們的導航結構。

麵包屑導航通常會安放在出現在頁面頂部主導航的下面，正文的上方。 它們提供給訪客返回之前任何一個頁面的連結，在網站的層級架構中通常是指這個頁面的父級頁面。 簡而言之，麵包屑導航提供給訪客回溯到網站首頁或入口頁面的一條快速的通道。

一般我們常見的門戶網站，如新浪，設計的整體結構一般是主頁>頻道頁>專題頁>....>子專題>內容頁。 如果我們想在一個體育類型的入口網站看NBA的視頻直播，我們首先看看下面的導航結構。

上圖中我們看到如果把頁面的資訊以層級形式全部展現在使用者面前，就會形成一種臃腫的情況，先不說訪客無法快捷找到想要的資訊，如此大量的資訊就佔據頁面很大的空間，已經「喧賓奪主」。 但是如果我們把用所戶關心的導航內容提取出來，如下圖所示：

再扁平一下，如下圖所示

這種清晰明瞭的結構將會大大提升我們頁面的方便使用體驗度。 同時我們開看看幾個大型的入口網站的麵包屑導航結構，這些結構式網站的導航更加的輕盈。 如下圖所示

當然，並不是所有的導航都可以使用麵包屑導航來簡化的。 麵包屑導航使用應該符合使用者線性思維導向下的操作邏輯。 例如，如果我們的使用者想要看NBA直播視頻，那麼我們的使用者就可能不關心娛樂八卦新聞，也可能不關注足球或者乒乓球有什麼新聞賽事，那麼麵包屑的線性導航就可以很好的滿足使用者的需求。 或者是由於頁面空間或者訪問設備的限制原因，我們無法提供訪客更為詳細的導航，而採用線性簡化導航的處理方法。

本文由胎教儀HTTP://www.taijiaoyi.net/ 原創，A5首發，轉載請保留位址。