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

但是好的導航設計是什么樣的呢？一旦制作到位，如何改進它？讓我們深入了解什么是網站導航設計，以及優化它的技巧：

什么是網站導航設計？

網站導航設計是所有導航元素的架構，它是用戶訪問您的網站時如何找到他們想要的東西。

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

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

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

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

優秀網站導航設計的5個好的做法

網站導航就是幫助您的用戶找到所需的內容。當您解決此問題時，其他好處如SEO排名和可發現性也會隨之而來。在進行網站導航設計時，請牢記以下五點：

提示1：規劃網站導航設計

規劃是必不可少的。實際上，這可能是此過程中重要的部分。您不只是想隨意創建導航按鈕。

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

卡分類：

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

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

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

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

[閱讀更多：用于網站重新設計的四種研究技術]

提示2：規劃您的用戶流

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

用戶流程是在網站上完成任務的步驟。可以將其視為傳統流程圖，其中箭頭從一個決定指向另一個決定，直到最終到達目的地。它們通常用于繪制用戶在數字產品上獲得的預期結果。

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

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

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

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

開始創作

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

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

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

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

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

資料來源：InVision 視覺

盡管它對于輔助導航元素很有用，但您不想完全依賴它，因為它阻礙了可發現性，從而影響了您的內容。

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

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

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

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

讓我們來看一個應用程序。這是來自優步的一個很棒的例子：

資料來源：InVision

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

資料來源：InVision

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

提示5：遵循網站導航欄的做法

以下是一些常見的網站導航布局：

水平布局

資料來源：《紐約時報》

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

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

資料來源：邊緣

垂直布局

資料來源：Arbor餐廳

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

漢堡布局

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

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

資料來源：谷歌

固定的導航布局

資料來源：獨立報

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

本文題目：網站導航設計：您需要了解的知識
分享路徑：http://www.js-pz168.com/news25/209225.html

網站建設、網絡推廣公司-創新互聯，是專注品牌與效果的網站制作，網絡營銷seo公司；服務項目有網站導航等

廣告

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