什么是導(dǎo)航?

許多人對(duì)于網(wǎng)站導(dǎo)航設(shè)計(jì)的認(rèn)知并不統(tǒng)一。有人認(rèn)為，構(gòu)成網(wǎng)站導(dǎo)航的是網(wǎng)頁(yè)中的焦點(diǎn)元素，它們讓用戶(hù)清晰直觀地找到他們想要的東西。同樣的，還有人認(rèn)為導(dǎo)航設(shè)計(jì)是一種方法，引導(dǎo)用戶(hù)去尋找網(wǎng)站上**重要的信息，以達(dá)到銷(xiāo)售或者查詢(xún)等目的。這些說(shuō)法都沒(méi)問(wèn)題，它們都是導(dǎo)航設(shè)計(jì)的一部分。
和設(shè)計(jì)領(lǐng)域的許多東西一樣，導(dǎo)航設(shè)計(jì)并沒(méi)有一個(gè)統(tǒng)一一致的“官方”的設(shè)計(jì)方法，或者說(shuō)法，每個(gè)網(wǎng)站由于其目標(biāo)、需求、設(shè)計(jì)手法、運(yùn)營(yíng)等諸多因素導(dǎo)致它們?cè)趯?dǎo)航設(shè)計(jì)上千差萬(wàn)別，但是在**基本的設(shè)計(jì)思路和組織結(jié)構(gòu)上，導(dǎo)航設(shè)計(jì)還是有基本的規(guī)律和原則，確保組織架構(gòu)可靠，降低失敗的機(jī)率。

怎么用常見(jiàn)的垂直和水平導(dǎo)航來(lái)引導(dǎo)用戶(hù)呢？

下面蘇州金動(dòng)力教育網(wǎng)頁(yè)設(shè)計(jì)老師給您總結(jié)一下幾個(gè)點(diǎn)：

01

首先確定信息架構(gòu)

規(guī)劃一個(gè)大型網(wǎng)站，規(guī)劃好內(nèi)容是進(jìn)行導(dǎo)航設(shè)計(jì)之前的**要?jiǎng)?wù)。而我們此處所說(shuō)的信息架構(gòu)(IA，Information Architecture)，是合理的組織信息的展現(xiàn)形式，支撐起網(wǎng)站內(nèi)容的骨架。信息架構(gòu)的主要任務(wù)是為信息與用戶(hù)認(rèn)知之間構(gòu)建一座暢通的橋梁。從更高的位置來(lái)看待網(wǎng)站內(nèi)容有助于信息架構(gòu)的搭建。更重要的是，你得學(xué)會(huì)從用戶(hù)的角度來(lái)看待網(wǎng)站內(nèi)容。這也就意味著，有的時(shí)候你得站在正反兩個(gè)位置來(lái)看待同一個(gè)東西，不同視角下你會(huì)發(fā)現(xiàn)有的內(nèi)容的呈現(xiàn)方式非常反人類(lèi)。你可以**下面的問(wèn)題來(lái)完善整個(gè)架構(gòu)：

·哪些頁(yè)面是這個(gè)網(wǎng)站必不可少的?
·從宏觀架構(gòu)上來(lái)看是否每個(gè)頁(yè)面都有其獨(dú)立的目的，它們的存在是否影響整體 的連續(xù)性和可靠性?
·有哪些內(nèi)容是需要在將來(lái)持續(xù)提供并更新的?
·網(wǎng)站所需要涉及到的用戶(hù)群有哪些?(登錄用戶(hù)、訂閱用戶(hù)、廣告商等等)
·針對(duì)每種用戶(hù)，網(wǎng)站所要達(dá)成的目標(biāo)是什么?

思考這些問(wèn)題能夠幫助你更好的完善網(wǎng)站的信息架構(gòu)，為導(dǎo)航設(shè)計(jì)做好準(zhǔn)備。

02

保持簡(jiǎn)單

絕大多數(shù)的網(wǎng)站瀏覽者可能會(huì)一致的認(rèn)同這一點(diǎn)：網(wǎng)站的導(dǎo)航區(qū)域要盡可能設(shè)計(jì)的簡(jiǎn)單。的確，復(fù)雜而擁擠的導(dǎo)航欄設(shè)計(jì)會(huì)嚴(yán)重阻礙網(wǎng)站的整體可用性?！　∪欢?，簡(jiǎn)單的設(shè)計(jì)還是具有欺騙性的。用戶(hù)在隨后的操作中會(huì)發(fā)現(xiàn)復(fù)雜的信息被以一種看起來(lái)簡(jiǎn)單的方式包裝了起來(lái)。這就是信息架構(gòu)的作用。
以微軟的首頁(yè)為例，網(wǎng)站的導(dǎo)航欄被劃分成四個(gè)項(xiàng)目，考慮到微軟龐大的產(chǎn)品線(xiàn)，這幾乎已經(jīng)被簡(jiǎn)化到了極致。也正是因此，每個(gè)項(xiàng)目的下拉菜單都被巧妙地分割成為幾段，這樣一來(lái)，導(dǎo)航的層級(jí)就清晰了，用戶(hù)可以更快地找到他們想要的東西，而微軟也可以將復(fù)雜多樣的產(chǎn)品和服務(wù)，整合到一個(gè)看似簡(jiǎn)單的導(dǎo)航欄里面。類(lèi)似迷你站的子頁(yè)面中，導(dǎo)航欄也沿用了相同的設(shè)計(jì)。菜單的設(shè)置乍一看和首頁(yè)很相似，實(shí)際上設(shè)計(jì)者加入了更多細(xì)節(jié)，更有針對(duì)性的功能和服務(wù)?？偟膩?lái)說(shuō)，這樣的導(dǎo)航欄設(shè)計(jì)更加易用了，在保持一致的前提下，也具備更好的預(yù)測(cè)性?？紤]到微軟的產(chǎn)品體量，產(chǎn)品所需的頁(yè)面數(shù)，微軟官網(wǎng)的設(shè)計(jì)很明顯是耗費(fèi)了大量時(shí)間迭代開(kāi)發(fā)的產(chǎn)物，殊為不易。官網(wǎng)在這樣的組織架構(gòu)之下，不僅讓用戶(hù)的體驗(yàn)更好了，而且對(duì)于微軟而言也更加便于管理內(nèi)容。這不僅保持簡(jiǎn)單，也簡(jiǎn)化了復(fù)雜。

03

謹(jǐn)慎選擇方向

傳統(tǒng)意義上的電腦屏幕方向是橫向的，這也使得縱向下拉菜單，在很長(zhǎng)的一段時(shí)間里面成為了導(dǎo)航欄設(shè)計(jì)的主流方向。這樣的設(shè)計(jì)，平衡且少干擾，從設(shè)計(jì)的角度上來(lái)看是不錯(cuò)的選擇。作為虛擬現(xiàn)實(shí)設(shè)備制造商的Oculus，將導(dǎo)航設(shè)計(jì)成為橫向的非常符合他們的設(shè)備的自然邏輯。但是橫向的導(dǎo)航并不一定符合所有的網(wǎng)站的需求，這也是為什么你會(huì)看到那么多縱向?qū)Ш降木W(wǎng)站，尤其是在電商領(lǐng)域。彩色的標(biāo)簽被用來(lái)標(biāo)識(shí)不同的品類(lèi)，縱向的導(dǎo)航設(shè)計(jì)，與現(xiàn)實(shí)世界中的導(dǎo)購(gòu)圖冊(cè)暗合。這樣的導(dǎo)航符合多品類(lèi)，多內(nèi)容的信息架構(gòu)，橫向?qū)Ш接迷诖颂帟?huì)因?yàn)槠奉?lèi)和文字內(nèi)容而產(chǎn)生混亂。一個(gè)良好的垂直方向的導(dǎo)航，要設(shè)計(jì)好并非易事，尤其是當(dāng)你的網(wǎng)站內(nèi)容非常多的時(shí)候。Jack Jones 的網(wǎng)站是一個(gè)很好的學(xué)習(xí)對(duì)象。網(wǎng)站導(dǎo)航中的小圖標(biāo)擁有不錯(cuò)的可讀性，簡(jiǎn)單的形狀包含了可觀的信息，整齊而有力。每點(diǎn)擊一個(gè)類(lèi)別，菜單展開(kāi)，顯示子類(lèi)，邏輯清晰。當(dāng)然，你還可以在Squarepusher 的網(wǎng)站看到相對(duì)不同尋常一些的縱向菜單設(shè)計(jì)。導(dǎo)航被設(shè)計(jì)成標(biāo)簽頁(yè)，訪(fǎng)客可以**滾動(dòng)切換，這是一種更為線(xiàn)性的導(dǎo)航欄設(shè)計(jì)。

結(jié)語(yǔ)：規(guī)則正在改變

新工藝新技術(shù)的不斷涌現(xiàn)，使得新的設(shè)計(jì)趨勢(shì)和新的挑戰(zhàn)源源不斷呈現(xiàn)在我們面前。響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)使得桌面上傳統(tǒng)的橫向?qū)Ш皆谝苿?dòng)端呈現(xiàn)的時(shí)候，更多是以縱向?qū)Ш降男问奖憩F(xiàn)出來(lái)。導(dǎo)航的設(shè)計(jì)不再被固定的方案所束縛，多種多樣的表現(xiàn)手法都可以產(chǎn)生不俗的效果。但是，設(shè)計(jì)和測(cè)試的迭代方法，**還是圍繞著網(wǎng)站轉(zhuǎn)化率和統(tǒng)計(jì)數(shù)據(jù)來(lái)進(jìn)行。作為驅(qū)動(dòng)網(wǎng)站發(fā)展的引擎，導(dǎo)航設(shè)計(jì)的好壞是可預(yù)計(jì)的，精心布置又簡(jiǎn)單一致的。