3個(gè)有效導(dǎo)航網(wǎng)站設(shè)計(jì)的基本規(guī)則

設(shè)計(jì)網(wǎng)站導(dǎo)航就像為房屋打下基礎(chǔ)。無(wú)論基礎(chǔ)的外觀多么好，未能正確地計(jì)劃基礎(chǔ)都可能使建筑物面臨倒塌的風(fēng)險(xiǎn)。如果您想從網(wǎng)站獲得的最佳銷售或轉(zhuǎn)化中受益，則需要花時(shí)間計(jì)劃受眾如何與您的內(nèi)容進(jìn)行互動(dòng)，并找出最直觀的組織和表示方式。

永遠(yuǎn)記住，如果您誤解了這一部分，就有可能疏遠(yuǎn)很大一部分受眾。

?

什么是導(dǎo)航？

瀏覽導(dǎo)航有多種方法。您可以說(shuō)這是您網(wǎng)站上的焦點(diǎn)元素，它使您的客戶可以找到他們想要的東西而不會(huì)感到困惑或不必要的點(diǎn)擊。同樣，您可能會(huì)爭(zhēng)辯說(shuō)，這是一種將客戶輕輕地引導(dǎo)到您網(wǎng)站上最重要的信息以產(chǎn)生銷售或查詢的方法。

兩者都有。

導(dǎo)航設(shè)計(jì)與設(shè)計(jì)中的許多其他事情一樣：沒(méi)有公認(rèn)的“正確方法”來(lái)做。每個(gè)網(wǎng)站都有自己的挑戰(zhàn)，可以通過(guò)多種方式來(lái)應(yīng)對(duì)。好消息是，有一些思考和組織內(nèi)容的方法可以最大程度地減少失敗的風(fēng)險(xiǎn)。

70percentpure的站點(diǎn)具有垂直和水平導(dǎo)航功能。

?

1）首先確定您的IA

規(guī)劃大型網(wǎng)站的內(nèi)容是一項(xiàng)基本任務(wù)，必須在設(shè)計(jì)導(dǎo)航之前完成。此概述（也稱為IA（信息體系結(jié)構(gòu)））的概述，理解和操作內(nèi)容是構(gòu)成網(wǎng)站可用性的基礎(chǔ)。在（或代替）正確設(shè)計(jì)IA之前設(shè)計(jì)導(dǎo)航就像在排版頁(yè)面之前創(chuàng)建書索引。這不是一個(gè)好主意。

在IA上工作時(shí)，具有自然觀的能力會(huì)有所幫助。更重要的是，您必須能夠從用戶的角度看內(nèi)容。有時(shí)，這意味著違背客戶自己對(duì)內(nèi)容進(jìn)行分類的方式–因此，請(qǐng)做好抵抗的準(zhǔn)備。

您可以要求自己準(zhǔn)備一些方案，并向客戶證明其合理性：

• 該網(wǎng)站需要哪些頁(yè)面？
• 每個(gè)頁(yè)面在更廣泛的方案中是否都有目的，并且內(nèi)容是否細(xì)分為明智的，相關(guān)的塊？
• 將來(lái)添加內(nèi)容時(shí)必須考慮哪些限制？
• 您與哪些用戶組合作？（例如，登錄/注銷，訂閱類型，廣告客戶等）
• 每種用戶的主要目標(biāo)是什么？

回答以上所有問(wèn)題，并了解您的內(nèi)容與用戶之間的關(guān)系是良好導(dǎo)航設(shè)計(jì)的基礎(chǔ)。

?

2）吻：保持簡(jiǎn)單，有時(shí)

曾經(jīng)使用過(guò)網(wǎng)站的每個(gè)人都可以同意：導(dǎo)航區(qū)域應(yīng)盡可能簡(jiǎn)單。讓用戶不知所措，而導(dǎo)航中卻不乏文字，這是一個(gè)壞主意，它將嚴(yán)重阻礙您網(wǎng)站的整體可用性。

彭博的簡(jiǎn)單導(dǎo)航掩蓋了其網(wǎng)站上信息的復(fù)雜性。

但是，簡(jiǎn)單性可能具有欺騙性。深入研究，您可能會(huì)發(fā)現(xiàn)實(shí)際上相當(dāng)復(fù)雜的內(nèi)容已經(jīng)以一種簡(jiǎn)單的方式巧妙地打包了。這是IA的行動(dòng)。

以微軟的主頁(yè)為例。考慮到他們的產(chǎn)品范圍，他們的主導(dǎo)航只有四個(gè)項(xiàng)目，聽(tīng)起來(lái)還不夠。但是，將下拉列表非常巧妙地分為幾部分，并且以一種可以快速，輕松地找到所需內(nèi)容的方式進(jìn)行顯示。

子頁(yè)面就像迷你站點(diǎn)一樣，遵循相同的導(dǎo)航格式。菜單的感覺(jué)和行為相同，但是會(huì)隨著您進(jìn)入站點(diǎn)的深入而調(diào)整以提供更多詳細(xì)信息。

它易于使用，可預(yù)測(cè)且一致。考慮到他們的產(chǎn)品范圍和網(wǎng)站上的頁(yè)面數(shù)，這絕非易事，并且顯然是許多小時(shí)反復(fù)開發(fā)的產(chǎn)物。不僅感覺(jué)像他們的產(chǎn)品之一（使訪客放心），而且還以對(duì)客戶和Microsoft本身都有利的方式來(lái)組織內(nèi)容。

?

3）仔細(xì)選擇方向

鑒于傳統(tǒng)上以橫向格式使用計(jì)算機(jī)屏幕，因此水平導(dǎo)航非常有意義。從設(shè)計(jì)的角度來(lái)看，在很多時(shí)候，它只會(huì)感覺(jué)更加平衡，更少干擾并且易于放置。

如果VR頭戴設(shè)備制造商Oculus不通過(guò)水平菜單談?wù)撈涮摂M景觀，那將是愚蠢的。它不僅帶有一個(gè)很好的隱喻，而且還允許用戶通過(guò)向下滾動(dòng)頁(yè)面來(lái)深入研究其內(nèi)容。

但是，水平菜單并不能在每種情況下增加價(jià)值，這就是為什么您會(huì)看到很多垂直導(dǎo)航的原因，尤其是在電子商務(wù)中。它帶有彩色標(biāo)簽的回聲，可幫助您在物理目錄中查找產(chǎn)品，并避免在文本和選項(xiàng)過(guò)多的情況下弄亂水平條。

好的垂直導(dǎo)航絕非易事，特別是如果您有很多產(chǎn)品。這就是為什么我喜歡Jack Jones的作品。

文字旁邊的圖標(biāo)確實(shí)有助于提高可讀性。簡(jiǎn)單的形狀令人驚訝地具有交流性，并有助于使導(dǎo)航區(qū)域保持整潔。單擊類別，菜單將展開以顯示子選項(xiàng)，再次以非常容易的方式顯示。

在Squarepusher的網(wǎng)站上可以找到垂直菜單的更多用法。在這里，導(dǎo)航就像標(biāo)簽一樣，位于主要內(nèi)容的側(cè)面，用戶可以輕松滾動(dòng)并單擊。這是一種更加線性的方法，呼應(yīng)了Squarepusher軌道的順序性質(zhì)。?

?

規(guī)則正在改變

服裝網(wǎng)站設(shè)計(jì)上的所有事物一樣，新技術(shù)，技術(shù)，設(shè)備和趨勢(shì)也帶來(lái)了自己的挑戰(zhàn)和創(chuàng)新。響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)意味著傳統(tǒng)的水平導(dǎo)航現(xiàn)在也變成了垂直導(dǎo)航（在較小的屏幕上）。視差技術(shù)會(huì)根據(jù)您在頁(yè)面上的位置，使導(dǎo)航區(qū)域像潮水一樣潮起潮落。

沒(méi)有創(chuàng)建完美站點(diǎn)導(dǎo)航的單一方法。但是設(shè)計(jì)和測(cè)試的迭代方法（最好可以訪問(wèn)您網(wǎng)站的統(tǒng)計(jì)信息和轉(zhuǎn)化數(shù)據(jù)）可能會(huì)產(chǎn)生最佳結(jié)果。

作為驅(qū)動(dòng)網(wǎng)站的引擎，您的導(dǎo)航應(yīng)該是可預(yù)測(cè)的，簡(jiǎn)單的，一致的且位置適當(dāng)?shù)摹?/span>