導(dǎo)航設(shè)計是您網(wǎng)站的基石。它確定了至關(guān)重要的指標，例如轉(zhuǎn)化率和跳出率，頁面停留時間，點擊量，并且通常是決定您的訪問者擁有良好體驗并以比您所說的“用戶流量”更快退出網(wǎng)站的決定性因素。

但是好的導(dǎo)航設(shè)計是什么樣的呢？一旦制作到位，如何改進它？讓我們深入了解什么是網(wǎng)站導(dǎo)航設(shè)計，以及優(yōu)化它的技巧：

什么是網(wǎng)站導(dǎo)航設(shè)計？

網(wǎng)站導(dǎo)航設(shè)計是所有導(dǎo)航元素的架構(gòu)，它是用戶訪問您的網(wǎng)站時如何找到他們想要的東西。

為了理解它的重要性，讓我們用一個比喻：想象一下有兩家服裝店。*個完全混亂。女鞋旁邊是男褲，男領(lǐng)帶旁邊是兒童泳衣。

糟糕的是，似乎沒有任何標志或店員可以幫助您找到所需的東西。

另一方面，第二家商店非常簡單。所有服裝均按性別和尺寸進行組織，有很多標牌指導(dǎo)顧客，店員隨時待命以回答任何問題。確定在哪一個時間消磨時間是一個容易的選擇，對嗎？

良好的導(dǎo)航是雜亂無章的服裝店與雜亂無章的服裝店之間的區(qū)別。為了使您的網(wǎng)站更接近后者，請牢記以下一些做法：

優(yōu)秀網(wǎng)站導(dǎo)航設(shè)計的5個好的做法

網(wǎng)站導(dǎo)航就是幫助您的用戶找到所需的內(nèi)容。當您解決此問題時，其他好處如SEO排名和可發(fā)現(xiàn)性也會隨之而來。在進行網(wǎng)站導(dǎo)航設(shè)計時，請牢記以下五點：

提示1：規(guī)劃網(wǎng)站導(dǎo)航設(shè)計

規(guī)劃是必不可少的。實際上，這可能是此過程中重要的部分。您不只是想隨意創(chuàng)建導(dǎo)航按鈕。

因此，請謹慎對待該過程。這意味著坐下來，繪制出網(wǎng)站的所有內(nèi)容資產(chǎn)，并確定如何鏈接到它們。

卡分類：

進行此操作的方法之一是查看網(wǎng)站的信息體系結(jié)構(gòu)，或者網(wǎng)站的所有內(nèi)容如何安排和組織。您可以通過卡片分類練習(xí)來完成此操作。為此，請將所有內(nèi)容元素記下到卡片上，將它們分配給目標用戶，然后讓用戶將卡片分類為有意義的組。

您可能要使用兩種類型的卡片分類：

開放式卡片分類：創(chuàng)建卡片，將其提供給研究參與者，然后要求他們對卡片進行分組。然后，他們標記組。開放式卡片排序會話的示例（來源：InVision） 視力封閉式卡片分類：創(chuàng)建卡片并將其與創(chuàng)建的組列表一起提供給研究參與者。然后，您要求參與者將卡片分組。封閉式卡片分類會話的示例（來源：InVision） 視力

切記：與目標用戶實際合作進行卡片分類很重要。畢竟，在網(wǎng)站導(dǎo)航方面您可能會有偏見。

[閱讀更多：用于網(wǎng)站重新設(shè)計的四種研究技術(shù)]

提示2：規(guī)劃您的用戶流

在決定如何安排網(wǎng)站導(dǎo)航之前，重要的是要準確地確定需要在布局中包括哪些元素。為了弄清楚這一點，您需要了解您的用戶將如何與之交互并最終獲得您的網(wǎng)站。這是用戶流程發(fā)揮作用的地方。

用戶流程是在網(wǎng)站上完成任務(wù)的步驟?？梢詫⑵湟暈閭鹘y(tǒng)流程圖，其中箭頭從一個決定指向另一個決定，直到最終到達目的地。它們通常用于繪制用戶在數(shù)字產(chǎn)品上獲得的預(yù)期結(jié)果。

來自myWebRoom的示例用戶流。 視覺

花一些時間，然后規(guī)劃您的流程，以確保對您的用戶有意義。這使您可以設(shè)計一個“幸福的道路”（或沒有錯誤或異常的完成任務(wù)的方法），以實現(xiàn)網(wǎng)站上常見的目標。

總體而言，用戶流程旨在作為您的設(shè)計決策的北極星。有了它之后，您就可以開始專注于能滿足用戶需求的內(nèi)容，而忽略其余所有內(nèi)容。

查看Freehand，滿足您的所有集思廣益需求。

開始創(chuàng)作

提示3：使用用戶友好的文字

您的所有導(dǎo)航副本都必須對用戶清晰易懂，這意味著避免使用含糊不清或過于簡單的單詞。清晰度不僅可以幫助讀者瀏覽您的網(wǎng)站，還可以幫助您的SEO。

例如，假設(shè)您有一個用于dog狗業(yè)務(wù)的網(wǎng)站。您不希望導(dǎo)航按鈕讀取諸如“服務(wù)”之類的內(nèi)容，因為這不是人們在尋找您的服務(wù)時搜索的術(shù)語。取而代之的是，他們搜索“ pet狗”，“寵物坐著”，甚至“ dog養(yǎng)率”。看到不同？在*個示例模糊不清的地方，其他示例則清晰明確。

提示4 ：（盡量少用）漢堡包

也許沒有比漢堡菜單更具爭議性的導(dǎo)航元素了。

資料來源：InVision 視覺

盡管它對于輔助導(dǎo)航元素很有用，但您不想完全依賴它，因為它阻礙了可發(fā)現(xiàn)性，從而影響了您的內(nèi)容。

考慮一下：這是用戶與漢堡菜單進行交互的過程：

尋找所需的導(dǎo)航元素 意識到它不是立即可用 注意這里有一個菜單 確認這是一個漢堡菜單并且可以單擊 點擊那個漢堡 掃描其他菜單項的列表 找到他們要尋找的那個 點擊它

您的用戶要做的很多事情-整個八步。在設(shè)計世界中，簡約為王。

現(xiàn)在，這并不是說應(yīng)該漢堡包菜單從來沒有被使用。相反，當您要包含的元素不能直接用于網(wǎng)站的主要目標時，請有意使用它。

讓我們來看一個應(yīng)用程序。這是來自優(yōu)步的一個很棒的例子：

資料來源：InVision

Uber知道他們的用戶在進入應(yīng)用程序時只想訂購汽車。他們沒有給用戶增加“過去訂單”或“法律”之類的負擔，而是將所有這些次要元素放在漢堡菜單中。

資料來源：InVision

[有關(guān)更多信息，請查看我們關(guān)于漢堡菜單的10個利弊的文章。]

提示5：遵循網(wǎng)站導(dǎo)航欄的做法

以下是一些常見的網(wǎng)站導(dǎo)航布局：

水平布局

資料來源：《紐約時報》

一種經(jīng)過實踐檢驗的布局，可與許多不同的屏幕配合使用。如果您要鏈接的網(wǎng)頁數(shù)量較少，這特別好-盡管如果您擁有大型網(wǎng)站（例如上述《紐約時報》），也可以使用它，但您也可以使用它對所有頁面進行排序。

當與下拉菜單選項結(jié)合使用時，例如，當您有不同主題的小節(jié)時，水平站點導(dǎo)航布局也可以很好地工作。在The Verge中查看一個很好的例子。

資料來源：邊緣

垂直布局

資料來源：Arbor餐廳

垂直布局是一種好的的移動友好替代方案。當網(wǎng)站包含許多導(dǎo)航元素時，它們非常有用。

漢堡布局

我們在*一個技巧中介紹了這一點，但在這里值得再次提及。漢堡菜單是一種導(dǎo)航布局，用于當您遇到屏幕上不適合的輔助導(dǎo)航元素時。

這是Google云端硬盤移動網(wǎng)站上的一個很好的例子：

資料來源：谷歌

固定的導(dǎo)航布局

資料來源：獨立報

固定導(dǎo)航具有在用戶向下滾動頁面時跟隨用戶的元素。這是保持用戶導(dǎo)向同時使網(wǎng)站其他部分始終可訪問的好方法。但請注意：固定導(dǎo)航會吞噬網(wǎng)站的大量資源。當您只有幾個導(dǎo)航元素時使用它，以免分散您其他內(nèi)容的注意力。

網(wǎng)頁名稱：網(wǎng)站導(dǎo)航設(shè)計：您需要了解的知識
文章URL：http://jinyejixie.com/news/209225.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營銷seo公司；服務(wù)項目有網(wǎng)站導(dǎo)航等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)