轉載藍藍設計(   sillybuy.com  )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設計 、 cs界面設計 、  ipad界面設計   、  包裝設計 、  圖標定制 、  用戶體驗 、交互設計、   網(wǎng)站建設 、平面設計服務

來源：http://sudasuta.com/cooler-photo.html

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中，   請點這里

導航是互聯(lián)網(wǎng)產(chǎn)品中應用最廣泛的基礎元素之一，引導用戶了解到網(wǎng)站的內(nèi)容結構進而找到所求。作為基礎控件，導航看起來簡單，但卻是產(chǎn)品設計中最復雜繁瑣的一部分。因為我們想要讓網(wǎng)站結構更清晰、想要向用戶傳達所有的信息，所以就賦予了導航越來越多的內(nèi)容，使他們龐大異常，十分糾結。簡化了，用戶無法了解到頁面結構以及自己的處境，產(chǎn)生困惑；復雜了，導航臃腫不堪，層巒疊嶂，既不美觀也不好用。

那么，在清晰的信息架構下能不能讓導航盡可能的更輕便、更靈動，是筆者本文想要探討的話題。筆者看來，為導航塑身可以從以下幾個角度來進行：1.簡化結構；2.優(yōu)化形式；3.打磨UI。

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

A． 通過面包屑來簡化導航結構

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

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

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

再扁平化一下：

這就是清晰的面包屑導航。綜上，面包屑導航能夠讓復雜的層級結構扁平化，使得導航更加輕盈。

面包屑導航還有一些變體，是基于用戶線性操作邏輯衍生出來的。在無線端產(chǎn)品中應用更為廣泛，因為移動設備的顯示區(qū)域有限，無力支撐龐大的導航結構。在用戶點擊當前導航內(nèi)容后，當前導航消失進去下一級導航，并提供返回按鈕。

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

B． 合并導航層級

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

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

瘦身后的導航看起來結構也比較清晰，而且沒有影響到信息的傳達。

對比下美團和糯米的導航：

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

C.隱藏部分導航

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

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

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

2.優(yōu)化形式

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

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

 

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

類似的列子也有很多：

 

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

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

 

3.打磨UI

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

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

綜上，是筆者對導航塑身的一點認識，清晰的導航能夠讓頁面簡單易用，反之也會大大影響頁面的信息流暢度，所以在導航設計時要精心處理，一點淺見與大家分享。