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