為(wèi)網站設計導航就如同為(wèi)房子打基礎。如果地基不牢靠，再壯觀的設計也無法掩蓋建築結構的潛在風險，其實網站也是如此，如果想讓網站擁有優秀的用(yòng)戶體(tǐ)驗，良好的轉化率，可(kě)觀的銷售額，你需要花(huā)費相當的時間去了解你的用(yòng)戶需求，精(jīng)心設計網站的内容，尋求可(kě)靠而直觀有效的内容組織體(tǐ)系，而這些東西的外化體(tǐ)現，就是網站的導航設計。

什麽是導航？

許多(duō)人對于網站導航設計的認知并不統一。有人認為(wèi)，構成網站導航的是網頁中的焦點元素，它們讓用(yòng)戶清晰直觀地找到他(tā)們想要的東西。同樣的，還有人認為(wèi)導航設計是一種方法，引導用(yòng)戶去尋找網站上較重要的信息，以達到銷售或者查詢等目的。這些說法都沒問題，它們都是導航設計的一部分(fēn)。

和設計領域的許多(duō)東西一樣，導航設計并沒有一個統一一緻的“官方”的設計方法，或者說法，每個網站由于其目标、需求、設計手法、運營等諸多(duō)因素導緻它們在導航設計上千差萬别，但是在較基本的設計思路和組織結構上，導航設計還是有基本的規律和原則，确保組織架構可(kě)靠，降低失敗的機率。

70percentpure 使用(yòng)了較簡單常見的垂直和水平導航來引導用(yòng)戶。

1、首先确定信息架構

規劃一個大型網站，規劃好内容是進行導航設計之前的第一要務(wù)。而我們此處所說的信息架構（IA，Information Architecture），是合理(lǐ)的組織信息的展現形式，支撐起網站内容的骨架。信息架構的主要任務(wù)是為(wèi)信息與用(yòng)戶認知之間構建一座暢通的橋梁。

從更高的位置來看待網站内容有助于信息架構的搭建。更重要的是，你得學(xué)會從用(yòng)戶的角度來看待網站内容。這也就意味着，有的時候你得站在正反兩個位置來看待同一個東西，不同視角下你會發現有的内容的呈現方式非常反人類。你可(kě)以通過下面的問題來完善整個架構：

·哪些頁面是這個網站必不可(kě)少的？

·從宏觀架構上來看是否每個頁面都有其獨立的目的，它們的存在是否影響整體(tǐ)的連續性和可(kě)靠性？

·有哪些内容是需要在将來持續提供并更新(xīn)的？

·網站所需要涉及到的用(yòng)戶群有哪些？（登錄用(yòng)戶、訂閱用(yòng)戶、廣告商等等）

·針對每種用(yòng)戶，網站所要達成的目标是什麽？

思考這些問題能(néng)夠幫助你更好的完善網站的信息架構，為(wèi)導航設計做好準備。

2、保持簡單

絕大多(duō)數的網站浏覽者可(kě)能(néng)會一緻的認同這一點：網站的導航區(qū)域要盡可(kě)能(néng)設計的簡單。的确，複雜而擁擠的導航欄設計會嚴重阻礙網站的整體(tǐ)可(kě)用(yòng)性。

彭博的網站就是這樣做的，用(yòng)簡單的導航欄設計來掩蓋網站的複雜性。

然而，簡單的設計還是具有欺騙性的。用(yòng)戶在随後的操作(zuò)中會發現複雜的信息被以一種看起來簡單的方式包裝(zhuāng)了起來。這就是信息架構的作(zuò)用(yòng)。

以微軟的首頁為(wèi)例，網站的導航欄被劃分(fēn)成四個項目，考慮到微軟龐大的産品線(xiàn)，這幾乎已經被簡化到了極緻。也正是因此，每個項目的下拉菜單都被巧妙地分(fēn)割成為(wèi)幾段，這樣一來，導航的層級就清晰了，用(yòng)戶可(kě)以更快地找到他(tā)們想要的東西，而微軟也可(kě)以将複雜多(duō)樣的産品和服務(wù)，整合到一個看似簡單的導航欄裏面。

類似迷你站的子頁面中，導航欄也沿用(yòng)了相同的設計。菜單的設置乍一看和首頁很(hěn)相似，實際上設計者加入了更多(duō)細節，更有針對性的功能(néng)和服務(wù)。

總的來說，這樣的導航欄設計更加易用(yòng)了，在保持一緻的前提下，也具備更好的預測性。考慮到微軟的産品體(tǐ)量，産品所需的頁面數，微軟官網的設計很(hěn)明顯是耗費了大量時間叠代開發的産物(wù)，殊為(wèi)不易。官網在這樣的組織架構之下，不僅讓用(yòng)戶的體(tǐ)驗更好了，而且對于微軟而言也更加便于管理(lǐ)内容。這不僅保持簡單，也簡化了複雜。

3、謹慎選擇方向

傳統意義上的電(diàn)腦屏幕方向是橫向的，這也使得縱向下拉菜單，在很(hěn)長(cháng)的一段時間裏面成為(wèi)了導航欄設計的主流方向。這樣的設計，平衡且少幹擾，從設計的角度上來看是不錯的選擇。

作(zuò)為(wèi)虛拟現實設備制造商的Oculus，将導航設計成為(wèi)橫向的非常符合他(tā)們的設備的自然邏輯。

但是橫向的導航并不一定符合所有的網站的需求，這也是為(wèi)什麽你會看到那麽多(duō)縱向導航的網站，尤其是在電(diàn)商領域。彩色的标簽被用(yòng)來标識不同的品類，縱向的導航設計，與現實世界中的導購(gòu)圖冊暗合。這樣的導航符合多(duō)品類，多(duō)内容的信息架構，橫向導航用(yòng)在此處會因為(wèi)品類和文(wén)字内容而産生混亂。

一個良好的垂直方向的導航，要設計好并非易事，尤其是當你的網站内容非常多(duō)的時候。Jack Jones 的網站是一個很(hěn)好的學(xué)習對象。

網站導航中的小(xiǎo)圖标擁有不錯的可(kě)讀性，簡單的形狀包含了可(kě)觀的信息，整齊而有力。每點擊一個類别，菜單展開，顯示子類，邏輯清晰。

當然，你還可(kě)以在Squarepusher 的網站看到相對不同尋常一些的縱向菜單設計。導航被設計成标簽頁，訪客可(kě)以通過滾動切換，這是一種更為(wèi)線(xiàn)性的導航欄設計。