良好的網站(zhàn)導航是必不可(kě)少(shǎo)的成都網站(zhàn)設計(jì)功能。我們不隻是這麽說——有(yǒu)研究支持它。根據全美網絡的一項研究，38%的消費者在第一次浏覽網站(zhàn)時(shí)會(huì)查看頁面的導航鏈接和(hé)布局。
導航的重要性不可(kě)低(dī)估。而且，訪問者更喜歡實施網站(zhàn)導航最佳實踐的網站(zhàn)的原因是可(kě)以理(lǐ)解的。它可(kě)以幫助他們快速輕松地找到他們正在尋找的信息，因此導航是用戶體(tǐ)驗和(hé)網站(zhàn)策略的典型組成部分。
今天，我們将仔細研究網站(zhàn)導航設計(jì)，以便您可(kě)以創建适合訪問者的系統。我們還(hái)将探索網站(zhàn)導航最佳實踐。之後，我們将查看網站(zhàn)導航示例并探索有(yǒu)效設計(jì)的一些(xiē)必備條件。讓我們開(kāi)始吧(ba)。
網站(zhàn)導航是用戶界面組件的集合，允許訪問者在網站(zhàn)上(shàng)查找內(nèi)容和(hé)功能。這些(xiē)組件可(kě)以是副本、鏈接文本和(hé)按鈕以及菜單的形式。
最後一次提到的可(kě)以說是與有(yǒu)效網站(zhàn)導航最相關的，所以讓我們簡要定義一下菜單在成都網站(zhàn)設計(jì)中的含義。
網站(zhàn)導航菜單是指向其他網頁（通(tōng)常是內(nèi)部網站(zhàn)頁面）的有(yǒu)組織的鏈接列表。導航菜單出現在整個(gè)網站(zhàn)的頁眉或側邊欄中，允許訪問者快速訪問最有(yǒu)用的頁面。
雖然幫助訪問者從一個(gè)網頁移動到另一個(gè)網頁是首要任務，但(dàn)它并不是唯一的優先事項。導航還(hái)可(kě)以幫助訪問者理(lǐ)解網站(zhàn)上(shàng)各個(gè)頁面之間(jiān)的關系。但(dàn)在實踐中到底是什麽樣子的呢？讓我們分解一下。
全美網絡分析師(shī)的一篇文章中表示，導航被視(shì)為(wèi)網站(zhàn)信息架構(IA)的冰山(shān)一角。水(shuǐ)面以下是前端訪問者看不到的冰山(shān)部分：用于構建網站(zhàn)IA的研究、策略、管理(lǐ)和(hé)組織。表面上(shàng)方是導航界面，通(tōng)常表示為(wèi)一系列超文本鏈接和(hé)搜索欄。
因此，您網站(zhàn)的IA在導航界面中不可(kě)見，但(dàn)卻是該界面的基礎。這最終讓訪問者感覺到內(nèi)容是相互聯系和(hé)分類的，以滿足他們的需求和(hé)期望，但(dàn)實際上(shàng)并沒有(yǒu)顯示所有(yǒu)用于識别和(hé)組織內(nèi)容之間(jiān)關系的電(diàn)子表格和(hé)圖表。
子導航或本地導航是網站(zhàn)訪問者可(kě)以找到網站(zhàn)IA的較低(dī)級别類别的界面。這些(xiē)通(tōng)常是主要導航鏈接的子類别。
主導航菜單包含導航項“支持”。當您将鼠标懸停在該項目上(shàng)時(shí)，會(huì)出現一個(gè)子導航菜單，提供多(duō)種支持的方式。這是一個(gè)有(yǒu)效的添加，因為(wèi)訪問者可(kě)以無縫地找到他們正在尋找的東西，但(dàn)菜單乍一看并沒有(yǒu)讓人(rén)不知所措。這是雙赢的。
為(wèi)什麽網站(zhàn)導航如此重要？那(nà)麽，對于初學者來(lái)說，它會(huì)影(yǐng)響訪問者是否到達您的主頁并浏覽或單擊“後退”按鈕，從而導緻更高(gāo) 的跳(tiào)出率。因此，您應該深入考慮構建網站(zhàn)導航的最佳方式。這就是它的不同類型出現的地方。
您如何構建網站(zhàn)導航取決于您的目标受衆以及您認為(wèi)最直觀和(hé)易于訪問的格式。以下是您在構建網站(zhàn)時(shí)可(kě)能會(huì)考慮的一些(xiē)常見網站(zhàn)導航類型。
讓我們從水(shuǐ)平導航欄開(kāi)始吧(ba)。您可(kě)能已經猜到，水(shuǐ)平導航欄是最常見的類型。它并排列出主要頁面并将它們放在 網站(zhàn)标題中。許多(duō)網站(zhàn)都有(yǒu)相同的部分，例如“關于”、“産品”、“定價”和(hé)“聯系方式”，因為(wèi)訪問者希望看到它們。
雖然這些(xiē)部分很(hěn)受歡迎是有(yǒu)原因的，但(dàn)您不應該害怕通(tōng)過定制(zhì)菜單來(lái)定制(zhì)您的網站(zhàn)。在構建導航欄時(shí)，請(qǐng)考慮您的網站(zhàn)目的和(hé)受衆。你(nǐ)想在你(nǐ)的網站(zhàn)上(shàng)實現什麽，訪問者在尋找什麽？從回答(dá)這兩個(gè)問題開(kāi)始，然後從那(nà)裏開(kāi)始。
接下來(lái)，我們有(yǒu)下拉導航菜單。此選項非常适合具有(yǒu)複雜IA的內(nèi)容豐富的站(zhàn)點。如果您希望您的菜單包含大(dà)量指向頁面的鏈接，您可(kě)以考慮使用此選項，因為(wèi)您無法并排列出所有(yǒu)選項。相反，您可(kě)以在頂級導航欄中列出最重要或最一般的項目。然後，您可(kě)以在下拉菜單中添加其餘內(nèi)容。
您應該記住的另一個(gè)網站(zhàn)導航選項是漢堡包。您可(kě)能已經熟悉此菜單，因為(wèi)它在移動網頁設計(jì)中很(hěn)受歡迎。如果您使用這種方法，您的導航項将在較大(dà)的屏幕尺寸上(shàng)水(shuǐ)平列出。
然而，在較小(xiǎo)的屏幕上(shàng)，它們會(huì)折疊在較小(xiǎo)屏幕尺寸的 漢堡包按鈕後面 。當訪問者單擊這個(gè)三行(xíng)圖标時(shí)，會(huì)出現帶有(yǒu)導航鏈接的垂直下拉或水(shuǐ)平彈出窗口。如果您網站(zhàn)上(shàng)的空(kōng)間(jiān)有(yǒu)限，或者您不希望導航占用大(dà)量空(kōng)間(jiān)，那(nà)麽漢堡式導航菜單可(kě)能是正确的選擇。
現在，我們有(yǒu)了垂直側邊欄導航菜單。這是網站(zhàn)導航的絕佳選擇，因為(wèi)它提供了無縫的用戶體(tǐ)驗。這些(xiē)項目彼此堆疊并位于側邊欄中。不可(kě)否認，這不如水(shuǐ)平導航受歡迎，但(dàn)垂直導航有(yǒu)好處。房(fáng)地産不受限制(zhì)，因此您可(kě)以編寫更長的導航鏈接。還(hái)有(yǒu)機會(huì)獲得(de)更多(duō)頂級選項。
另一個(gè)選項是頁腳菜單。它通(tōng)常與水(shuǐ)平導航欄配對并擴展。如果訪問者在标題中看不到他們需要的鏈接，他們可(kě)以向下滾動到頁面底部，在那(nà)裏他們會(huì)找到更多(duō)選項。
對于網站(zhàn)導航設計(jì)，沒有(yǒu)一種“正确”的方式。但(dàn)是有(yǒu)一種正确的方法來(lái)考慮如何設置導航：考慮如何使首次訪問者和(hé)重複訪問者能夠充分利用您的網站(zhàn)。如果您在創建網站(zhàn)導航時(shí)考慮到這一點，就不會(huì)出錯。
當您将注意力集中在站(zhàn)點訪問者身上(shàng)時(shí)，您的導航結構的外觀和(hé)功能可(kě)能與其他站(zhàn)點上(shàng)的導航結構不同。這實際上(shàng)是一件好事，因為(wèi)這意味着您充分考慮了您的目标受衆。
讓我們在創建網站(zhàn)導航時(shí)逐步完成設計(jì)過程。
因為(wèi)您的站(zhàn)點上(shàng)有(yǒu)很(hěn)多(duō)頁面，所以确定哪些(xiē)頁面足夠重要以成為(wèi)通(tōng)用導航的一部分可(kě)能會(huì)很(hěn)棘手。對于SEO和(hé)用戶體(tǐ)驗，Orbit MedIA建議将您的導航限制(zhì)在最多(duō)七個(gè)項目。
但(dàn)是你(nǐ)如何開(kāi)始縮小(xiǎo)範圍呢？貴公司的利益相關者可(kě)能對什麽值得(de)導航、什麽不值得(de)有(yǒu)不同的看法，但(dàn)要以用戶體(tǐ)驗為(wèi)中心。最後，考慮您的網站(zhàn)訪問者來(lái)确定您應該采用哪條路線。您可(kě)以使用以下一些(xiē)策略來(lái)開(kāi)始解讀您的網站(zhàn)訪問者希望在您的菜單上(shàng)看到的內(nèi)容。
卡片分類 是一種簡單的用戶體(tǐ)驗技(jì)術(shù)，可(kě)幫助您了解網站(zhàn)訪問者的想法并從他們的角度設計(jì)導航。不，您不需要任何用戶體(tǐ)驗經驗即可(kě)嘗試此練習。
首先，邀請(qǐng)組織外部的人(rén)員參與20分鍾的練習。在桌子上(shàng)放一堆索引卡，每張索引卡代表您網站(zhàn)上(shàng)的一個(gè)重要頁面。
接下來(lái)，請(qǐng)參與者按照他們認為(wèi)合适的方式組織卡片。尋找參與者如何對您網站(zhàn)上(shàng)的頁面進行(xíng)分組的趨勢，并詢問他們如何命名每個(gè)類别。這是一種非常有(yǒu)效的方式來(lái)理(lǐ)解用戶的直覺感受。
接下來(lái)，您的網站(zhàn)導航設計(jì)可(kě)以從歸因報告中受益。如果您的營銷分析軟件提供了它，那(nà)麽這非常适合決定您的主導航中應該包含哪些(xiē)內(nèi)容。
此報告将新創建聯系人(rén)的數(shù)量歸因于他們與您的業務的互動，因此您可(kě)以更好地了解您網站(zhàn)上(shàng)将訪問者轉化為(wèi)潛在客戶的內(nèi)容和(hé)功能。
如果您沒有(yǒu)歸因報告，您仍然可(kě)以通(tōng)過百度站(zhàn)長中的用戶流報告查看哪些(xiē)頁面在您的網站(zhàn)上(shàng)是必不可(kě)少(shǎo)的。此報告不會(huì)區(qū)分來(lái)自客戶的标準流量，但(dàn)會(huì)突出顯示人(rén)們如何在您的網站(zhàn)上(shàng)浏覽他們的體(tǐ)驗。
用百度自己的話(huà)說：“用戶流報告是用戶從源頭到各種頁面以及他們離開(kāi)網站(zhàn)的路徑的圖形表示。”
網站(zhàn)導航中的順序很(hěn)重要。認知研究提供的證據表明(míng)，網頁浏覽者往往會(huì)最生(shēng)動地記住導航兩端的鏈接。通(tōng)常被稱為(wèi)首因效應和(hé)近因效應，它們說明(míng)了這樣一種現象，即列表中出現在最前面或最後的詞往往更能吸引觀衆的注意力。因此，對于您的網站(zhàn)，您需要非常有(yǒu)意識地考慮在這些(xiē)位置放置的項目。想想對您的典型訪客來(lái)說什麽最重要。
表達導航選項的最佳方式取決于您經營的組織或企業的類型。對于初學者，您可(kě)以選擇直接導航或嘗試更多(duō)創意标簽。當然，請(qǐng)确保您選擇的任何內(nèi)容對您的品牌來(lái)說都是直觀的。
在選擇要在主要導航鏈接中使用的詞時(shí)，最重要的是要記住首先考慮客戶會(huì)使用哪些(xiē)詞來(lái)描述這些(xiē)頁面。然後，考慮搜索引擎優化。
可(kě)以說，網站(zhàn)最明(míng)确的選擇是基于對象的導航。基于對象的導航将內(nèi)容置于具體(tǐ)（通(tōng)常隻有(yǒu)名詞）類别下。quanmeicm.com是基于對象的導航示例，如下面的艾默生(shēng)學院網站(zhàn)也是如此。這種類型的組織将導航視(shì)為(wèi)目錄，并将頁面分組為(wèi)最适合的主題或類别。
面向操作(zuò)的導航可(kě)能更适合其他站(zhàn)點。要知道(dào)什麽時(shí)候這樣做(zuò)合适，請(qǐng)詢問您的受衆，他們訪問您的網站(zhàn)主要是為(wèi)了了解某事還(hái)是為(wèi)了采取特定行(xíng)動。在下面來(lái)自霍華德大(dà)學的例子中，訪客帶着一個(gè)動作(zuò)來(lái)到這裏。他們不是來(lái)閱讀“關于”頁面的——他們是來(lái)申請(qǐng)、訪問或捐贈的。
對于擁有(yǒu)多(duō)個(gè)受衆且線條清晰的公司，您可(kě)能需要考慮基于受衆的導航或子導航，如下例所示。但(dàn)是，這僅在訪問者可(kě)以輕松地對自己進行(xíng)分類時(shí)才有(yǒu)效。例如，您不希望使用小(xiǎo)型公司與中型公司，或營銷與廣告公司，因為(wèi)這些(xiē)界限通(tōng)常很(hěn)模糊，可(kě)能會(huì)讓您的聽(tīng)衆對先去哪裏感到困惑。
除了匹配您的受衆本能地組織您的網站(zhàn)的方式之外，您還(hái)需要考慮如何優化您的導航術(shù)語以實現最佳搜索。在百度上(shàng)的一篇文章中，SEO策略師(shī)何林根建議使用百度站(zhàn)長的的關鍵字工具來(lái)識别最常将人(rén)們帶到您網站(zhàn)的搜索詞。然後，您可(kě)以使用這些(xiē)詞的變體(tǐ)作(zuò)為(wèi)網站(zhàn)導航的指南。
網站(zhàn)導航的黃金法則？不要讓人(rén)覺得(de)。從這些(xiē)網站(zhàn)導航示例中可(kě)以看出，越明(míng)顯越好。可(kě)用性顧問蘇揚珺基于這種觀點寫了一整本書(shū)。遵循這些(xiē)網站(zhàn)導航最佳實踐，讓用戶在浏覽您的網站(zhàn)時(shí)不會(huì)感到沮喪或困惑。
一緻性是關鍵，網站(zhàn)導航設計(jì)也不例外。這是一個(gè)至關重要的網站(zhàn)導航最佳實踐，因為(wèi)它可(kě)以成就或破壞用戶體(tǐ)驗。在格式化和(hé)設計(jì)導航界面的方式上(shàng)保持一緻。這一切都是為(wèi)了與訪問者的當前知識和(hé)期望保持一緻。
例如，考慮一下如果您的主頁鏈接是黑(hēi)色的并且當用戶将鼠标懸停在它們上(shàng)面時(shí)會(huì)出現下劃線，訪問者會(huì)有(yǒu)什麽感受。然後，當他們查看“聯系人(rén)”頁面時(shí)，鏈接是藍(lán)色的，并且沒有(yǒu)下劃線。這很(hěn)令人(rén)困惑，對吧(ba)？相反，您的鏈接在每個(gè)站(zhàn)點頁面上(shàng)都應該具有(yǒu)相同的樣式。否則，訪問者将不知道(dào)哪些(xiē)文本帶有(yǒu)超鏈接，哪些(xiē)不在您的導航菜單中。
2022年第四季度，移動設備占 全球網站(zhàn)流量的59%以上(shàng)，因此無論屏幕大(dà)小(xiǎo)如何，針對所有(yǒu)屏幕優化您的網站(zhàn)和(hé)導航變得(de)越來(lái)越重要。而且， 根據Shopify的數(shù)據，到2024年，超過42%的電(diàn)子商務購買總額将發生(shēng)在移動設備上(shàng)——因此優先考慮移動設備至關重要。是的，這擴展到您的網站(zhàn)導航菜單。
在設計(jì)菜單時(shí)，我們鼓勵您首先考慮移動設備。從最小(xiǎo)的屏幕尺寸開(kāi)始，您必須優先考慮哪些(xiē)鏈接最重要以包含在您的主導航中以及按什麽順序。這也是确定優先級的一個(gè)很(hěn)好的練習。
您還(hái)必須決定哪些(xiē)導航功能（如漢堡包按鈕）在移動設備上(shàng)是必需的，以及它們如何适合您的桌面設計(jì)。這将幫助您轉向設計(jì)更大(dà)的屏幕尺寸，并清楚了解哪些(xiē)頁面和(hé)導航功能最重要。
你(nǐ)熟悉三擊規則嗎？從本質上(shàng)講，這個(gè)概念說明(míng)了每個(gè)網站(zhàn)導航結構都應該使人(rén)們能夠登陸網站(zhàn)上(shàng)的任何頁面并在三下點擊內(nèi)找到他們需要的東西。
盡管這個(gè)概念在網頁設計(jì)領域根深蒂固，但(dàn)它在很(hěn)大(dà)程度上(shàng)已經聲名狼藉。一項 研究 發現，用戶在點擊3次後退出任務的可(kě)能性并不比點擊12次後高(gāo)。
盡管規則可(kě)能不準确，但(dàn)該基礎告訴我們一個(gè)重要原則。您确實希望限制(zhì)訪問者訪問關鍵信息或在您的站(zhàn)點上(shàng)完成任務所需的工作(zuò)量。計(jì)算(suàn)點擊次數(shù)是一個(gè)過于膚淺的指标。因此，我們鼓勵您專注于建立清晰的路徑、減少(shǎo)頁面加載時(shí)間(jiān)并消除用戶旅程中的其他摩擦點。
如果您需要面包屑導航的示例 ，請(qǐng)記住Hansel和(hé)Gretel的童話(huà)故事。當兩人(rén)穿過樹(shù)林時(shí)，孩子們撒下面包屑以便他們找到回家(jiā)的路。
同樣，通(tōng)過面包屑導航，訪問者可(kě)以直觀地看到他們在網站(zhàn)結構中的位置。然後，他們隻需單擊一下即可(kě)返回到其他頁面。最好的部分是它不會(huì)占用您網站(zhàn)上(shàng)的太多(duō)空(kōng)間(jiān)。此輔助導航欄通(tōng)常由文本鏈接組成，文本鏈接由“大(dà)于”符号 (>) 分隔并位于标題下方。
成都網站(zhàn)設計(jì)導航時(shí)，必須仔細考慮訪問者和(hé)網站(zhàn)目标。請(qǐng)記住：屏幕另一側的人(rén)必須浏覽您的網站(zhàn)，他們這樣做(zuò)的能力會(huì)顯着影(yǐng)響他們留下來(lái)的意願。此外，搜索引擎機器(qì)人(rén)可(kě)以從強大(dà)的網站(zhàn)導航設計(jì)中受益。
