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

什麽是導航？

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

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

70percentpure 使用了較簡單常見(jiàn)的垂直和水平導航來(lái)引導用戶。

1、首先确定信息架構

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

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

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

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

·有哪些内容是需要在将來(lái)持續提供并更新的？

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

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

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

2、保持簡單

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

彭博的網站就(jiù)是這樣做的，用簡單的導航欄設計(jì)來(lái)掩蓋網站的複雜性。

然而，簡單的設計(jì)還(hái)是具有欺騙性的。用戶在随後的操作(zuò)中會發現複雜的信息被以一種看(kàn)起來(lái)簡單的方式包裝了起來(lái)。這就(jiù)是信息架構的作(zuò)用。

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

類似迷你(nǐ)站的子頁面中，導航欄也沿用了相(xiàng)同的設計(jì)。菜單的設置乍一看(kàn)和首頁很相(xiàng)似，實際上設計(jì)者加入了更多細節，更有針對性的功能和服務。

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

3、謹慎選擇方向

傳統意義上的電腦屏幕方向是橫向的，這也使得(de)縱向下拉菜單，在很長的一段時間裡(lǐ)面成爲了導航欄設計(jì)的主流方向。這樣的設計(jì)，平衡且少幹擾，從設計(jì)的角度上來(lái)看(kàn)是不錯的選擇。

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

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

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

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

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